{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Toast notifications with a toast() API for success, error, warning and promise states. The Toaster stacks cards, fans them out on hover and pauses timers.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ui/toast.tsx", "type": "registry:ui", "target": "components/ui/toast.tsx", "content": "\"use client\"\nimport * as React from \"react\"\nimport { AlertTriangleIcon, CheckIcon, InfoIcon, LoaderCircleIcon, XIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ntype Tone = \"neutral\" | \"success\" | \"danger\" | \"warning\" | \"loading\"\n\nconst ICON: Record = {\n neutral: ,\n success: ,\n danger: ,\n warning: ,\n loading: ,\n}\n\nconst ICON_TONE: Record = {\n neutral: \"bg-sunken text-fg-muted\",\n success: \"bg-success text-white\",\n danger: \"bg-danger text-white\",\n warning: \"bg-warning text-[oklch(0.25_0.05_75)]\",\n loading: \"bg-accent-soft text-accent-fg\",\n}\n\n/**\n * Toast — a single notification card: status glyph, title, optional\n * description and action. Use + toast() for the stacked system.\n */\nfunction Toast({\n title,\n description,\n tone = \"neutral\",\n action,\n onDismiss,\n className,\n}: {\n title: React.ReactNode\n description?: React.ReactNode\n tone?: Tone\n action?: { label: string; onClick: () => void }\n onDismiss?: () => void\n className?: string\n}) {\n return (\n \n {ICON[tone]}\n
\n

{title}

\n {description ?

{description}

: null}\n {action ? (\n \n {action.label}\n \n ) : null}\n
\n {onDismiss ? (\n \n \n \n ) : null}\n \n )\n}\n\nfunction ToastStack({ children, className }: { children?: React.ReactNode; className?: string }) {\n return (\n
\n {children}\n
\n )\n}\n\n/* ── Toaster: a stacked, self-dismissing system ──────────────────────────── */\n\ntype ToastItem = {\n id: number\n title: React.ReactNode\n description?: React.ReactNode\n tone: Tone\n action?: { label: string; onClick: () => void }\n duration: number\n}\n\ntype Listener = (items: ToastItem[]) => void\nlet items: ToastItem[] = []\nlet nextId = 1\nconst listeners = new Set()\nconst emit = () => listeners.forEach((l) => l(items))\n\nfunction push(t: Omit & { tone?: Tone; duration?: number }) {\n const item: ToastItem = { id: nextId++, tone: \"neutral\", duration: 4000, ...t }\n items = [item, ...items].slice(0, 6)\n emit()\n return item.id\n}\n\nfunction update(id: number, patch: Partial) {\n items = items.map((t) => (t.id === id ? { ...t, ...patch } : t))\n emit()\n}\n\nfunction dismiss(id: number) {\n items = items.filter((t) => t.id !== id)\n emit()\n}\n\ntype Opts = { description?: React.ReactNode; action?: { label: string; onClick: () => void }; duration?: number }\n\n/** Imperative API: toast(\"Saved\"), toast.success(…), toast.error(…), toast.promise(p, {…}). */\nconst toast = Object.assign((title: React.ReactNode, o?: Opts) => push({ title, ...o }), {\n success: (title: React.ReactNode, o?: Opts) => push({ title, tone: \"success\", ...o }),\n error: (title: React.ReactNode, o?: Opts) => push({ title, tone: \"danger\", ...o }),\n warning: (title: React.ReactNode, o?: Opts) => push({ title, tone: \"warning\", ...o }),\n dismiss,\n promise(p: Promise, m: { loading: React.ReactNode; success: React.ReactNode | ((v: T) => React.ReactNode); error: React.ReactNode }) {\n const id = push({ title: m.loading, tone: \"loading\", duration: Infinity })\n p.then(\n (v) => update(id, { title: typeof m.success === \"function\" ? (m.success as (v: T) => React.ReactNode)(v) : m.success, tone: \"success\", duration: 4000 }),\n () => update(id, { title: m.error, tone: \"danger\", duration: 5000 })\n )\n return p\n },\n})\n\nfunction ToasterItem({ t, index, expanded, onHeight }: { t: ToastItem; index: number; expanded: boolean; onHeight: (id: number, h: number) => void; }) {\n const ref = React.useRef(null)\n React.useLayoutEffect(() => {\n if (ref.current) onHeight(t.id, ref.current.offsetHeight)\n })\n React.useEffect(() => {\n if (!Number.isFinite(t.duration) || expanded) return\n const h = window.setTimeout(() => dismiss(t.id), t.duration)\n return () => window.clearTimeout(h)\n }, [t.id, t.duration, t.tone, expanded])\n return (\n
\n dismiss(t.id)} />\n
\n )\n}\n\n/**\n * Toaster — mount once. Toasts stack like cards; hover to fan them out.\n * Timers pause while expanded.\n */\nfunction Toaster({ className }: { className?: string }) {\n const [list, setList] = React.useState(items)\n const [expanded, setExpanded] = React.useState(false)\n const [heights, setHeights] = React.useState>({})\n React.useEffect(() => {\n const l: Listener = (x) => setList([...x])\n listeners.add(l)\n return () => { listeners.delete(l) }\n }, [])\n const onHeight = React.useCallback((id: number, h: number) => setHeights((s) => (s[id] === h ? s : { ...s, [id]: h })), [])\n const visible = list.slice(0, expanded ? 6 : 3)\n let offset = 0\n return (\n setExpanded(true)}\n onMouseLeave={() => setExpanded(false)}\n onFocus={() => setExpanded(true)}\n onBlur={() => setExpanded(false)}\n className={cn(\"fixed right-4 bottom-4 z-[60] w-[356px] max-w-[calc(100vw-2rem)]\", className)}\n style={{ height: expanded ? visible.reduce((a, t) => a + (heights[t.id] ?? 72) + 8, 0) : (heights[visible[0]?.id] ?? 0) + Math.min(visible.length - 1, 2) * 10 }}\n >\n {visible.map((t, i) => {\n const y = expanded ? -offset : -i * 10\n const scale = expanded ? 1 : 1 - i * 0.05\n offset += (heights[t.id] ?? 72) + 8\n return (\n *]:transition-opacity [&_[data-slot=toast]>*]:duration-200\",\n !expanded && i > 0 && \"[&_[data-slot=toast]]:max-h-[var(--front-h)] [&_[data-slot=toast]]:overflow-hidden [&_[data-slot=toast]>*]:opacity-0\"\n )}\n style={{ transform: `translateY(${y}px) scale(${scale})`, transformOrigin: \"bottom center\", opacity: !expanded && i > 2 ? 0 : 1, zIndex: 10 - i, [\"--front-h\" as string]: `${heights[visible[0]?.id] ?? 72}px` }}\n >\n \n \n )\n })}\n \n )\n}\n\nexport { Toast, ToastStack, Toaster, toast }\n" } ] }