"use client" import { useEffect, useState, type ReactNode } from "react" import { AnimatePresence, motion, type PanInfo } from "motion/react" import { cn } from "@/lib/utils" /* ----------------------------------------------------------------- */ /* Store — a tiny observable so toast() works from anywhere */ /* ----------------------------------------------------------------- */ type ToastType = "default" | "success" | "error" | "warning" | "info" interface ToastOptions { description?: string duration?: number action?: { label: string; onClick: () => void } icon?: ReactNode } interface ToastItem extends ToastOptions { id: number type: ToastType title: ReactNode } type Listener = (items: ToastItem[]) => void let items: ToastItem[] = [] let seq = 0 const listeners = new Set() function emit() { const snapshot = [...items] listeners.forEach((l) => l(snapshot)) } function add(type: ToastType, title: ReactNode, opts: ToastOptions = {}) { const id = ++seq items = [...items, { id, type, title, ...opts }] emit() return id } function dismiss(id: number) { items = items.filter((t) => t.id !== id) emit() } /** * toast — fire a notification from anywhere. Requires a mounted once * near the root. `toast("Saved")` or `toast.success("Saved", { description })`. */ export const toast = Object.assign( (title: ReactNode, opts?: ToastOptions) => add("default", title, opts), { success: (title: ReactNode, opts?: ToastOptions) => add("success", title, opts), error: (title: ReactNode, opts?: ToastOptions) => add("error", title, opts), warning: (title: ReactNode, opts?: ToastOptions) => add("warning", title, opts), info: (title: ReactNode, opts?: ToastOptions) => add("info", title, opts), dismiss, } ) /* ----------------------------------------------------------------- */ /* Icons + accents */ /* ----------------------------------------------------------------- */ const ACCENT: Record = { default: "bg-muted text-foreground", success: "bg-emerald-500/15 text-emerald-500", error: "bg-rose-500/15 text-rose-500", warning: "bg-amber-500/15 text-amber-600 dark:text-amber-400", info: "bg-blue-500/15 text-blue-500", } function TypeIcon({ type }: { type: ToastType }) { const common = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const, } if (type === "success") return ( ) if (type === "error") return ( ) if (type === "warning") return ( ) if (type === "info") return ( ) return ( ) } /* ----------------------------------------------------------------- */ /* Toaster */ /* ----------------------------------------------------------------- */ type Position = "top-left" | "top-right" | "bottom-left" | "bottom-right" const POSITION: Record = { "top-left": "top-4 left-4", "top-right": "top-4 right-4", "bottom-left": "bottom-4 left-4", "bottom-right": "bottom-4 right-4", } interface ToasterProps { position?: Position /** Default auto-dismiss in ms. Pass Infinity to keep until dismissed. */ duration?: number className?: string } /** * Toaster — mount once. Renders the toast stack with spring physics, stacking, * swipe-to-dismiss, and hover-to-hold. Inspired by sonner (MIT); reimplemented. * Category: UI. Part of the Better Component library. */ export function Toaster({ position = "bottom-right", duration = 4000, className, }: ToasterProps) { const [list, setList] = useState([]) const isBottom = position.startsWith("bottom") useEffect(() => { const l: Listener = (next) => setList(next) listeners.add(l) l([...items]) return () => { listeners.delete(l) } }, []) return (

{list.map((item) => ( ))}

) } function Toast({ item, isBottom, duration, }: { item: ToastItem isBottom: boolean duration: number }) { const [hovered, setHovered] = useState(false) const ttl = item.duration ?? duration useEffect(() => { if (ttl === Infinity || hovered) return const t = setTimeout(() => dismiss(item.id), ttl) return () => clearTimeout(t) }, [ttl, hovered, item.id]) function onDragEnd(_e: unknown, info: PanInfo) { if (Math.abs(info.offset.x) > 100 || Math.abs(info.velocity.x) > 500) { dismiss(item.id) } } return ( setHovered(true)} onMouseLeave={() => setHovered(false)} initial={{ opacity: 0, y: isBottom ? 28 : -28, scale: 0.9 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.15 } }} transition={{ type: "spring", stiffness: 280, damping: 22 }} className="pointer-events-auto cursor-grab active:cursor-grabbing" >

{item.icon ?? }

{item.title}

{item.description && (

{item.description}

)} {item.action && ( )}

) }

Prop	Type	Default	Description
position	Position	"bottom-right"
duration	number	4000	Default auto-dismiss in ms. Pass Infinity to keep until dismissed.
className	string	—

Toast

Dependencies

Props