{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "retro-toast", "title": "RetroToast", "description": "A Mac OS 9 styled custom toast system with mini-window appearance, striped title bar, beveled close box, and auto-dismiss via useRetroToast hook.", "registryDependencies": [ "https://nostalgia-ui.com/r/nostalgia-theme.json" ], "files": [ { "path": "registry/new-york/ui/retro-toast.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ------------------------------------------------------------------ */\n/* Toast Types */\n/* ------------------------------------------------------------------ */\n\ntype ToastEntry = {\n id: string\n title?: React.ReactNode\n description?: React.ReactNode\n duration?: number\n}\n\ntype ToastActions = {\n toast: (opts: Omit) => string\n dismiss: (id: string) => void\n}\n\ntype ToastContextValue = ToastActions & {\n /**\n * Snapshot of the current toasts (read at access time). Reading it does not\n * subscribe the component to updates — use `useRetroToasts()` for that.\n */\n readonly toasts: ToastEntry[]\n}\n\n/* ------------------------------------------------------------------ */\n/* Context */\n/* ------------------------------------------------------------------ */\n\n// Actions are stable, so components that only fire toasts never re-render\n// when the toast list changes. The list lives in its own context.\nconst RetroToastContext = React.createContext(null)\nconst RetroToastStateContext = React.createContext(null)\n\nfunction useRetroToast(): ToastContextValue {\n const ctx = React.useContext(RetroToastContext)\n if (!ctx) {\n throw new Error(\"useRetroToast must be used within a \")\n }\n return ctx\n}\n\n/** Reactive list of the currently visible toasts. */\nfunction useRetroToasts(): ToastEntry[] {\n const toasts = React.useContext(RetroToastStateContext)\n if (!toasts) {\n throw new Error(\"useRetroToasts must be used within a \")\n }\n return toasts\n}\n\n/* ------------------------------------------------------------------ */\n/* Provider */\n/* ------------------------------------------------------------------ */\n\nlet counter = 0\n\n/** setTimeout overflows above this; treat larger durations as persistent. */\nconst MAX_TIMEOUT = 2_147_483_647\n\ntype ToastTimer = {\n handle: ReturnType | null\n remaining: number\n startedAt: number\n hovered: boolean\n focused: boolean\n}\n\nfunction RetroToastProvider({ children }: { children: React.ReactNode }) {\n const [toasts, setToasts] = React.useState([])\n const toastsRef = React.useRef(toasts)\n const timersRef = React.useRef(new Map())\n\n React.useEffect(() => {\n toastsRef.current = toasts\n }, [toasts])\n\n const clearTimer = React.useCallback((id: string) => {\n const timer = timersRef.current.get(id)\n if (timer?.handle) clearTimeout(timer.handle)\n timersRef.current.delete(id)\n }, [])\n\n const dismiss = React.useCallback(\n (id: string) => {\n clearTimer(id)\n setToasts((prev) => prev.filter((t) => t.id !== id))\n },\n [clearTimer]\n )\n\n const runTimer = React.useCallback(\n (id: string) => {\n const timer = timersRef.current.get(id)\n if (!timer || timer.handle || timer.hovered || timer.focused) return\n timer.startedAt = Date.now()\n timer.handle = setTimeout(() => dismiss(id), timer.remaining)\n },\n [dismiss]\n )\n\n const pauseTimer = React.useCallback(\n (id: string, reason: \"hovered\" | \"focused\") => {\n const timer = timersRef.current.get(id)\n if (!timer) return\n timer[reason] = true\n if (timer.handle) {\n clearTimeout(timer.handle)\n timer.handle = null\n timer.remaining = Math.max(\n 0,\n timer.remaining - (Date.now() - timer.startedAt)\n )\n }\n },\n []\n )\n\n const resumeTimer = React.useCallback(\n (id: string, reason: \"hovered\" | \"focused\") => {\n const timer = timersRef.current.get(id)\n if (!timer) return\n timer[reason] = false\n runTimer(id)\n },\n [runTimer]\n )\n\n const toast = React.useCallback(\n (opts: Omit) => {\n const id = `retro-toast-${++counter}`\n const duration = opts.duration ?? 5000\n setToasts((prev) => [...prev, { ...opts, id, duration }])\n // Non-finite (e.g. Infinity) or huge durations = persistent toast\n if (Number.isFinite(duration) && duration <= MAX_TIMEOUT) {\n timersRef.current.set(id, {\n handle: null,\n remaining: Math.max(0, duration),\n startedAt: 0,\n hovered: false,\n focused: false,\n })\n runTimer(id)\n }\n return id\n },\n [runTimer]\n )\n\n // Clear all pending timers on unmount\n React.useEffect(() => {\n const timers = timersRef.current\n return () => {\n timers.forEach((timer) => {\n if (timer.handle) clearTimeout(timer.handle)\n })\n timers.clear()\n }\n }, [])\n\n const actions = React.useMemo(\n () => ({\n toast,\n dismiss,\n get toasts() {\n return toastsRef.current\n },\n }),\n [toast, dismiss]\n )\n\n return (\n \n \n {children}\n \n {toasts.map((t) => (\n pauseTimer(t.id, \"hovered\")}\n onMouseLeave={() => resumeTimer(t.id, \"hovered\")}\n onFocus={() => pauseTimer(t.id, \"focused\")}\n onBlur={(event) => {\n // Ignore focus moving between elements inside the toast\n if (event.currentTarget.contains(event.relatedTarget as Node | null)) {\n return\n }\n resumeTimer(t.id, \"focused\")\n }}\n >\n {/* Mini title bar stripe */}\n \n\n
\n
\n {t.title && {t.title}}\n {t.description && (\n {t.description}\n )}\n
\n dismiss(t.id)} />\n
\n \n ))}\n \n \n \n )\n}\nRetroToastProvider.displayName = \"RetroToastProvider\"\n\n/* ------------------------------------------------------------------ */\n/* RetroToastViewport */\n/* ------------------------------------------------------------------ */\n\n/**\n * Persistent live region. It is always mounted so screen readers announce\n * toasts as they are appended to the list.\n */\nfunction RetroToastViewportInner(\n { className, ...props }: React.HTMLAttributes,\n ref: React.ForwardedRef\n) {\n return (\n \n \n \n )\n}\n\nconst RetroToastViewport = React.forwardRef(RetroToastViewportInner)\nRetroToastViewport.displayName = \"RetroToastViewport\"\n\n/* ------------------------------------------------------------------ */\n/* RetroToast */\n/* ------------------------------------------------------------------ */\n\nfunction RetroToastInner(\n { className, ...props }: React.HTMLAttributes,\n ref: React.ForwardedRef\n) {\n return (\n \n )\n}\n\nconst RetroToast = React.forwardRef(RetroToastInner)\nRetroToast.displayName = \"RetroToast\"\n\n/* ------------------------------------------------------------------ */\n/* RetroToastTitle */\n/* ------------------------------------------------------------------ */\n\nfunction RetroToastTitleInner(\n { className, ...props }: React.HTMLAttributes,\n ref: React.ForwardedRef\n) {\n return (\n \n )\n}\n\nconst RetroToastTitle = React.forwardRef(RetroToastTitleInner)\nRetroToastTitle.displayName = \"RetroToastTitle\"\n\n/* ------------------------------------------------------------------ */\n/* RetroToastDescription */\n/* ------------------------------------------------------------------ */\n\nfunction RetroToastDescriptionInner(\n { className, ...props }: React.HTMLAttributes,\n ref: React.ForwardedRef\n) {\n return (\n \n )\n}\n\nconst RetroToastDescription = React.forwardRef(RetroToastDescriptionInner)\nRetroToastDescription.displayName = \"RetroToastDescription\"\n\n/* ------------------------------------------------------------------ */\n/* RetroToastClose */\n/* ------------------------------------------------------------------ */\n\nfunction RetroToastCloseInner(\n { className, ...props }: React.ButtonHTMLAttributes,\n ref: React.ForwardedRef\n) {\n return (\n \n {/* Bevel frame */}\n \n {/* Inner shadow */}\n \n {/* Outer pixel highlights */}\n \n \n )\n}\n\nconst RetroToastClose = React.forwardRef(RetroToastCloseInner)\nRetroToastClose.displayName = \"RetroToastClose\"\n\n/* ------------------------------------------------------------------ */\n/* Exports */\n/* ------------------------------------------------------------------ */\n\nexport {\n RetroToastProvider,\n RetroToast,\n RetroToastTitle,\n RetroToastDescription,\n RetroToastClose,\n RetroToastViewport,\n useRetroToast,\n useRetroToasts,\n}\n", "type": "registry:ui" } ], "type": "registry:ui" }