'use client'; import * as React from 'react'; import { createPortal } from 'react-dom'; import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon, } from '@/icons'; import { cn } from '@/lib/utils'; import { focusRing } from '@/lib/cva-presets'; import { toast, toastStore, type ToastKind, type ToastRecord } from './store'; export type ToastPosition = | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; export interface ToasterProps { position?: ToastPosition; /** Default milliseconds on screen. A toast can override it. */ duration?: number; /** How many to show at once; older ones wait their turn. */ visibleToasts?: number; /** Show a dismiss button on every toast. */ closeButton?: boolean; /** * Toasts render in a portal on `document.body`, which sits inside `` — * so a `dark` class on the root element reaches them, and the default, * `'inherit'`, is right for most apps. Force it only when the app scopes dark * mode to a wrapper the portal escapes. */ theme?: 'inherit' | 'light' | 'dark'; /** Accessible name for the notification region. */ label?: string; icons?: Partial>; className?: string; toastClassName?: string; } const defaultIcons: Record, React.ReactNode> = { success: , /* No `info` semantic token exists, and inventing one would mean touching the machine-owned primitives in tokens.css — `primary` is the informational accent everywhere else in the kit. */ info: , warning: , error: , loading: , }; const positionClasses: Record = { 'top-left': 'top-0 left-0 items-start', 'top-center': 'top-0 left-1/2 -translate-x-1/2 items-center', 'top-right': 'top-0 right-0 items-end', 'bottom-left': 'bottom-0 left-0 items-start', 'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 items-center', 'bottom-right': 'bottom-0 right-0 items-end', }; /** Distance a pointer has to travel before the swipe counts as a dismissal. */ const SWIPE_THRESHOLD = 40; interface ToastProps { toast: ToastRecord; duration: number; position: ToastPosition; closeButton: boolean; icons?: ToasterProps['icons']; className?: string; } function Toast({ toast: record, duration, position, closeButton, icons, className }: ToastProps) { const [paused, setPaused] = React.useState(false); const [swipe, setSwipe] = React.useState(0); const dragFrom = React.useRef(null); const lifetime = record.duration ?? duration; const remaining = React.useRef(lifetime); const fromTop = position.startsWith('top'); /* The timer lives here rather than in the store, because only the rendered toast knows whether a pointer is resting on it. Pausing clears the timeout and books the elapsed time against `remaining`, so resuming continues rather than restarting. */ React.useEffect(() => { if (paused || lifetime === Infinity || record.dismissing) return; const startedAt = Date.now(); const timer = setTimeout(() => { record.onAutoClose?.(record); toastStore.dismiss(record.id); }, remaining.current); return () => { clearTimeout(timer); remaining.current -= Date.now() - startedAt; }; }, [paused, lifetime, record]); const endSwipe = () => { if (dragFrom.current === null) return; dragFrom.current = null; if (Math.abs(swipe) >= SWIPE_THRESHOLD) toastStore.dismiss(record.id); else setSwipe(0); }; const icon = icons?.[record.kind] ?? (record.kind === 'default' ? null : defaultIcons[record.kind]); return (
  • setPaused(true)} onPointerLeave={() => { setPaused(false); endSwipe(); }} /* Focus pauses too — a keyboard user reading the toast should not have it disappear mid-sentence. */ onFocusCapture={() => setPaused(true)} onBlurCapture={() => setPaused(false)} onPointerDown={(event) => { dragFrom.current = event.clientY; }} onPointerMove={(event) => { if (dragFrom.current === null) return; const delta = event.clientY - dragFrom.current; /* Only the direction that carries the toast off its own edge counts. */ setSwipe(fromTop ? Math.min(0, delta) : Math.max(0, delta)); }} onPointerUp={endSwipe} > {record.render ? ( record.render(record.id) ) : ( <> {icon ? {icon} : null}
    {record.title ?
    {record.title}
    : null} {record.description ? (
    {record.description}
    ) : null} {record.action || record.cancel ? (
    {record.action ? ( ) : null} {record.cancel ? ( ) : null}
    ) : null}
    {closeButton ? ( ) : null} )}
    • ); } /** * Toast host. Mount it once, near the root of the app. * * ```tsx * // app shell * toast.success('Settings saved'); // anywhere * ``` * * Toasts are a plain vertical list rather than a collapsed stack: everything on * screen stays readable and reachable without being expanded first. */ function Toaster({ position = 'bottom-right', duration = 4000, visibleToasts = 3, closeButton = false, theme = 'inherit', label = 'Notifications', icons, className, toastClassName, }: ToasterProps) { const toasts = React.useSyncExternalStore( toastStore.subscribe, toastStore.getSnapshot, toastStore.getServerSnapshot ); /* The portal needs a document, which a server render does not have. Asking `useSyncExternalStore` for a value that differs between the two is the hydration-safe way to detect that — no effect, nothing to re-render past. */ const onClient = React.useSyncExternalStore( () => () => {}, () => true, () => false ); if (!onClient) return null; /* Newest wins the limited slots; at a top anchor the newest belongs at the top of the column, so the order flips with the position. */ const shown = toasts.slice(-visibleToasts); const ordered = position.startsWith('top') ? [...shown].reverse() : shown; return createPortal(
      {ordered.map((record) => ( ))}
    , document.body ); } export { Toaster, toast }; export type { ToastKind, ToastRecord, ToastId, ToastOptions, ToastAction } from './store';