Toast

'use client'import { useSyncExternalStore, type ComponentProps, type CSSProperties, type ReactNode } from 'react'export interface ToastMessage {  title?: ReactNode  description?: ReactNode  /** Colors the icon; give the icon itself in `icon`, with the classes `icon toast-icon`. */  status?: 'info' | 'success' | 'warning' | 'danger'  icon?: ReactNode  /** How long the toast stays, in milliseconds. 6000 by default; `false` keeps it until it is dismissed. */  duration?: number | false}interface Shown extends ToastMessage { id: number }let shown: Shown[] = []let count = 0const listeners = new Set<() => void>()const none: Shown[] = []function publish(next: Shown[]) {  shown = next  listeners.forEach(listener => listener())}function subscribe(listener: () => void) {  listeners.add(listener)  return () => { listeners.delete(listener) }}const remove = (id: number) => publish(shown.filter(toast => toast.id !== id))/** * Show a toast in the `Toaster` of the page. Returns a function that removes it. * @example toast({ title: 'Deployed to production', status: 'success' }) */export function toast(message: ToastMessage | string) {  // A server has no page to show a toast in, and what it queued would reach every reader.  if (typeof document === 'undefined') return () => {}  const id = ++count  publish([...shown, { id, ...(typeof message === 'string' ? { description: message } : message) }])  return () => remove(id)}export interface ToasterProps extends ComponentProps<'div'> {  /** The name of the region, for assistive technology. */  label?: string  /** The name of the button that dismisses a toast. */  dismissLabel?: string}/** The stack that shows the toasts. Render it once, anywhere in the page. */export function Toaster({ label = 'Notifications', dismissLabel = 'Dismiss', className, ...root }: ToasterProps) {  const toasts = useSyncExternalStore(subscribe, () => shown, () => none)  return (    <div className={className ? `toast-region ${className}` : 'toast-region'} role="region" aria-label={label} aria-live="polite" {...root}>      {toasts.map(({ id, title, description, status, icon, duration = 6000 }) => (        <dialog          open          className={['toast', duration !== false && 'toast-timed', status && `toast-${status}`].filter(Boolean).join(' ')}          key={id}          aria-labelledby={`toast-${id}`}          style={duration === false ? undefined : { '--toast-duration': `${duration}ms` } as CSSProperties}          // A dismissed toast leaves through its transition before it is removed; an expired one has left already.          onClose={() => setTimeout(() => remove(id), 300)}          onAnimationEnd={event => event.animationName === 'toast-expire' && event.target === event.currentTarget && remove(id)}        >          {icon}          <div className="toast-body">            {title !== undefined && <p className="toast-title" id={`toast-${id}`}>{title}</p>}            {description !== undefined && <p className="toast-description" id={title === undefined ? `toast-${id}` : undefined}>{description}</p>}          </div>          <form method="dialog" className="toast-close">            <button className="btn btn-quiet btn-square btn-sm" aria-label={dismissLabel}>              <svg className="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" /></svg>            </button>          </form>        </dialog>      ))}    </div>  )}

<script lang="ts" module>  import type { Snippet } from 'svelte'  import type { HTMLAttributes } from 'svelte/elements'  export interface ToastMessage {    title?: string    description?: string    /** Colors the icon; give the icon itself in `icon`, with the classes `icon toast-icon`. */    status?: 'info' | 'success' | 'warning' | 'danger'    icon?: Snippet    /** How long the toast stays, in milliseconds. 6000 by default; `false` keeps it until it is dismissed. */    duration?: number | false  }  export interface ToasterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {    /** The name of the region, for assistive technology. */    label?: string    /** The name of the button that dismisses a toast. */    dismissLabel?: string  }  interface Shown extends ToastMessage { id: number }  let shown = $state.raw<Shown[]>([])  let count = 0  const remove = (id: number) => { shown = shown.filter(toast => toast.id !== id) }  /**   * Show a toast in the `Toaster` of the page. Returns a function that removes it.   * @example toast({ title: 'Deployed to production', status: 'success' })   */  export function toast(message: ToastMessage | string) {    // A server has no page to show a toast in, and what it queued would reach every reader.    if (typeof document === 'undefined') return () => {}    const id = ++count    shown = [...shown, { id, ...(typeof message === 'string' ? { description: message } : message) }]    return () => remove(id)  }</script><script lang="ts">  let { label = 'Notifications', dismissLabel = 'Dismiss', class: className, ...root }: ToasterProps = $props()</script><!--  @component  The stack that shows the toasts. Render it once, anywhere in the page.--><div class={['toast-region', className]} role="region" aria-label={label} aria-live="polite" {...root}>  {#each shown as { id, title, description, status, icon, duration = 6000 } (id)}    <!-- A dismissed toast leaves through its transition before it is removed; an expired one has left already. -->    <dialog      open      class={['toast', duration !== false && 'toast-timed', status && `toast-${status}`]}      aria-labelledby="toast-{id}"      style:--toast-duration={duration === false ? undefined : `${duration}ms`}      onclose={() => setTimeout(() => remove(id), 300)}      onanimationend={(event) => { if (event.animationName === 'toast-expire' && event.target === event.currentTarget) remove(id) }}    >      {@render icon?.()}      <div class="toast-body">        {#if title !== undefined}<p class="toast-title" id="toast-{id}">{title}</p>{/if}        {#if description !== undefined}<p class="toast-description" id={title === undefined ? `toast-${id}` : undefined}>{description}</p>{/if}      </div>      <form method="dialog" class="toast-close">        <button class="btn btn-quiet btn-square btn-sm" aria-label={dismissLabel}>          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" /></svg>        </button>      </form>    </dialog>  {/each}</div>

<script lang="ts">import { shallowRef } from 'vue'export interface ToastMessage {  title?: string  description?: string  /** Colors the icon; give the icon itself in the `icon` slot of the `Toaster`, with the classes `icon toast-icon`. */  status?: 'info' | 'success' | 'warning' | 'danger'  /** How long the toast stays, in milliseconds. 6000 by default; `false` keeps it until it is dismissed. */  duration?: number | false}export interface ShownToast extends ToastMessage { id: number }const shown = shallowRef<ShownToast[]>([])let count = 0const remove = (id: number) => { shown.value = shown.value.filter(toast => toast.id !== id) }/** * Show a toast in the `Toaster` of the page. Returns a function that removes it. * @example toast({ title: 'Deployed to production', status: 'success' }) */export function toast(message: ToastMessage | string) {  // A server has no page to show a toast in, and what it queued would reach every reader.  if (typeof document === 'undefined') return () => {}  const id = ++count  shown.value = [...shown.value, { id, ...(typeof message === 'string' ? { description: message } : message) }]  return () => remove(id)}</script><script setup lang="ts">import { onMounted } from 'vue'defineOptions({ inheritAttrs: false })const { label = 'Notifications', dismissLabel = 'Dismiss' } = defineProps<{  /** The name of the region, for assistive technology. */  label?: string  /** The name of the button that dismisses a toast. */  dismissLabel?: string}>()defineSlots<{  /** The icon of a toast, with the classes `icon toast-icon`. */  icon?: (scope: { toast: ShownToast }) => unknown}>()/* The stack that shows the toasts. Render it once, anywhere in the page. */// A server renders no toast, and neither does the first render over its HTML.const mounted = shallowRef(false)onMounted(() => { mounted.value = true })// A dismissed toast leaves through its transition before it is removed; an expired one has left already.const dismissed = (id: number) => setTimeout(() => remove(id), 300)const expired = (event: AnimationEvent, id: number) => {  if (event.animationName === 'toast-expire' && event.target === event.currentTarget) remove(id)}</script><template>  <div class="toast-region" role="region" :aria-label="label" aria-live="polite" v-bind="$attrs">    <dialog      v-for="each in mounted ? shown : []"      :key="each.id"      open      class="toast"      :class="{        'toast-timed': each.duration !== false,        'toast-info': each.status === 'info',        'toast-success': each.status === 'success',        'toast-warning': each.status === 'warning',        'toast-danger': each.status === 'danger',      }"      :aria-labelledby="`toast-${each.id}`"      :style="each.duration === false ? undefined : { '--toast-duration': `${each.duration ?? 6000}ms` }"      @close="dismissed(each.id)"      @animationend="expired($event, each.id)"    >      <slot name="icon" :toast="each" />      <div class="toast-body">        <p v-if="each.title !== undefined" class="toast-title" :id="`toast-${each.id}`">{{ each.title }}</p>        <p v-if="each.description !== undefined" class="toast-description" :id="each.title === undefined ? `toast-${each.id}` : undefined">{{ each.description }}</p>      </div>      <form method="dialog" class="toast-close">        <button class="btn btn-quiet btn-square btn-sm" :aria-label="dismissLabel">          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" /></svg>        </button>      </form>    </dialog>  </div></template>