"use client"; import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react"; import type { KeyboardEvent, PointerEvent, ReactNode } from "react"; export type ToastSeverity = "info" | "success" | "warning" | "error"; export type ToastOptions = { id?: string; title: string; description?: string; severity?: ToastSeverity; duration?: number; action?: { label: string; onClick: () => void }; }; type ToastRecord = Required> & Omit; type ToastContextValue = { toast: (options: ToastOptions) => string; dismiss: (id?: string) => void; toasts: ToastRecord[]; }; const ToastContext = createContext(null); const dispatchers = new Set(); let toastCount = 0; export function toast(options: ToastOptions) { const dispatch = Array.from(dispatchers).pop(); if (!dispatch) { if (process.env.NODE_ENV !== "production") console.warn("toast() was called without a mounted ."); return ""; } return dispatch(options); } export function useToast() { const context = useContext(ToastContext); if (!context) throw new Error("useToast must be used inside ."); return context; } const motionQuery = "(prefers-reduced-motion: reduce)"; const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; function subscribeMotion(callback: () => void) { const media = window.matchMedia(motionQuery); media.addEventListener?.("change", callback); return () => media.removeEventListener?.("change", callback); } function usePrefersReducedMotion(force?: boolean) { const preferred = useSyncExternalStore(subscribeMotion, () => window.matchMedia(motionQuery).matches, () => false); return force ?? preferred; } const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#121A22]"; const severityIcon: Record = { info: , success: , warning: , error: , }; const severityTone: Record = { info: "text-[#1F4E79] dark:text-[#8CB6E0]", success: "text-[#2C6E49] dark:text-[#86C9A0]", warning: "text-[#8A5A00] dark:text-[#E7B661]", error: "text-[#B42335] dark:text-[#F08A94]", }; type ToastItemProps = { record: ToastRecord; index: number; expanded: boolean; paused: boolean; reduce: boolean; offset: number; frontHeight: number; onHeight: (id: string, height: number) => void; onDismiss: (id: string) => void; }; function ToastItem({ record, index, expanded, paused, reduce, offset, frontHeight, onHeight, onDismiss }: ToastItemProps) { const ref = useRef(null); const [entered, setEntered] = useState(reduce); const [dragX, setDragX] = useState(0); const drag = useRef<{ x: number; id: number } | null>(null); const remaining = useRef(record.duration); useIsoLayoutEffect(() => { const element = ref.current; if (!element) return; const measure = () => onHeight(record.id, element.scrollHeight); measure(); if (typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(measure); observer.observe(element); return () => observer.disconnect(); }, [record.id, onHeight]); useEffect(() => { if (reduce) return; const frame = window.requestAnimationFrame(() => setEntered(true)); return () => window.cancelAnimationFrame(frame); }, [reduce]); useEffect(() => { if (paused || !Number.isFinite(remaining.current)) return; const started = Date.now(); const timer = window.setTimeout(() => onDismiss(record.id), remaining.current); return () => { window.clearTimeout(timer); remaining.current = Math.max(0, remaining.current - (Date.now() - started)); }; }, [paused, record.id, onDismiss]); const onPointerDown = (event: PointerEvent) => { if ((event.target as HTMLElement).closest("button")) return; drag.current = { x: event.clientX, id: event.pointerId }; event.currentTarget.setPointerCapture?.(event.pointerId); }; const onPointerMove = (event: PointerEvent) => { if (!drag.current || drag.current.id !== event.pointerId) return; setDragX(Math.max(0, event.clientX - drag.current.x)); }; const onPointerEnd = (event: PointerEvent) => { if (!drag.current || drag.current.id !== event.pointerId) return; const distance = event.clientX - drag.current.x; drag.current = null; if (distance > 72) onDismiss(record.id); else setDragX(0); }; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.stopPropagation(); onDismiss(record.id); } }; const collapsedBehind = !expanded && index > 0; const translateY = expanded ? -offset : -index * 10; const scale = expanded ? 1 : 1 - index * 0.05; const visible = index < 3; return (

{record.title}

{record.description ?

{record.description}

: null} {record.action ? ( ) : null}

); } export type ToastProviderProps = { children?: ReactNode; duration?: number; limit?: number; position?: "bottom-right" | "bottom-left" | "bottom-center"; label?: string; reducedMotion?: boolean; gap?: number; }; export function ToastProvider({ children, duration = 5000, limit = 5, position = "bottom-right", label = "Notifications", reducedMotion, gap = 8, }: ToastProviderProps) { const [toasts, setToasts] = useState([]); const [heights, setHeights] = useState>({}); const [hovered, setHovered] = useState(false); const [focused, setFocused] = useState(false); const [hidden, setHidden] = useState(false); const reduce = usePrefersReducedMotion(reducedMotion); const dismiss = useCallback((id?: string) => { setToasts((current) => (id ? current.filter((item) => item.id !== id) : [])); setHeights((current) => { if (!id) return {}; const next = { ...current }; delete next[id]; return next; }); }, []); const push = useCallback( (options: ToastOptions) => { toastCount += 1; const id = options.id ?? "toast-" + toastCount; const record: ToastRecord = { ...options, id, severity: options.severity ?? "info", duration: options.duration ?? (options.severity === "error" ? Math.max(duration, 8000) : duration), }; setToasts((current) => [record, ...current.filter((item) => item.id !== id)].slice(0, limit)); return id; }, [duration, limit], ); const onHeight = useCallback((id: string, height: number) => { setHeights((current) => (current[id] === height ? current : { ...current, [id]: height })); }, []); useEffect(() => { dispatchers.add(push); return () => { dispatchers.delete(push); }; }, [push]); useEffect(() => { const onVisibility = () => setHidden(document.visibilityState === "hidden"); document.addEventListener("visibilitychange", onVisibility); return () => document.removeEventListener("visibilitychange", onVisibility); }, []); const value = useMemo(() => ({ toast: push, dismiss, toasts }), [push, dismiss, toasts]); const expanded = toasts.length > 0 && (hovered || focused); const paused = expanded || hidden; const frontHeight = toasts[0] ? heights[toasts[0].id] ?? 0 : 0; const visibleCount = Math.min(toasts.length, 3); const expandedHeight = toasts.slice(0, visibleCount).reduce((sum, item) => sum + (heights[item.id] ?? 0), 0) + gap * Math.max(0, visibleCount - 1); const stackHeight = expanded ? expandedHeight : frontHeight + Math.min(toasts.length - 1, 2) * 10; const placement = position === "bottom-left" ? "left-0 sm:left-4" : position === "bottom-center" ? "left-1/2 -translate-x-1/2" : "right-0 sm:right-4"; const offsets = toasts.map((_, index) => toasts.slice(0, index).reduce((sum, item) => sum + (heights[item.id] ?? 0) + gap, 0), ); const polite = toasts.filter((item) => item.severity === "info" || item.severity === "success"); const assertive = toasts.filter((item) => item.severity === "warning" || item.severity === "error"); return ( {children}

setHovered(true)} onPointerLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false); }} className={"fixed bottom-0 z-[100] w-full px-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:w-[380px] sm:px-0 " + placement + (toasts.length ? "" : " pointer-events-none")} >

))}

{polite.map((item) => (

{item.title + (item.description ? ". " + item.description : "")}

))}

{assertive.map((item) => (

{item.title + (item.description ? ". " + item.description : "")}

))}

); }