64:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 65:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 66:T49d6,import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react"; import { AnimatePresence, motion, useReducedMotion, type PanInfo } from "framer-motion"; /* ------------------------------------------------------------------ */ /* 1. The toast store. Copy this block into lib/toast.ts in your app. */ /* ------------------------------------------------------------------ */ type ToastType = "success" | "error" | "info" | "loading"; type ToastAction = { label: string; onClick: () => void }; type ToastItem = { id: number; type: ToastType; title: string; description?: string; action?: ToastAction; duration: number; }; type ToastOptions = Partial>; const DEFAULT_DURATION = 5000; const MAX_TOASTS = 5; const VISIBLE_WHEN_STACKED = 3; let toasts: ToastItem[] = []; let nextId = 1; const listeners = new Set<() => void>(); const emit = () => listeners.forEach((l) => l()); const subscribe = (l: () => void) => { listeners.add(l); return () => listeners.delete(l); }; const getSnapshot = () => toasts; function push(type: ToastType, title: string, opts: ToastOptions = {}) { const id = nextId++; const duration = opts.duration ?? (type === "loading" ? Infinity : type === "error" ? 8000 : DEFAULT_DURATION); toasts = [{ id, type, title, ...opts, duration }, ...toasts].slice(0, MAX_TOASTS); emit(); return id; } function update(id: number, type: ToastType, title: string, opts: ToastOptions = {}) { toasts = toasts.map((t) => t.id === id ? { ...t, type, title, description: opts.description, action: opts.action, duration: opts.duration ?? DEFAULT_DURATION } : t, ); emit(); } function dismiss(id?: number) { toasts = id === undefined ? [] : toasts.filter((t) => t.id !== id); emit(); } export const toast = Object.assign((title: string, opts?: ToastOptions) => push("info", title, opts), { success: (title: string, opts?: ToastOptions) => push("success", title, opts), error: (title: string, opts?: ToastOptions) => push("error", title, opts), info: (title: string, opts?: ToastOptions) => push("info", title, opts), loading: (title: string, opts?: ToastOptions) => push("loading", title, opts), dismiss, promise(work: Promise, msg: { loading: string; success: string; error: string }) { const id = push("loading", msg.loading); work.then( () => update(id, "success", msg.success), () => update(id, "error", msg.error), ); return work; }, }); /* ------------------------------------------------------------------ */ /* 2. Icons and colours per type */ /* ------------------------------------------------------------------ */ function TypeIcon({ type }: { type: ToastType }) { if (type === "loading") { return ( ); } const paths: Record, string> = { success: "M6.5 10.5l2.4 2.4 4.6-5.3", error: "M10 6.2v4.6M10 13.6v.1", info: "M10 9.2v4.6M10 6.4v.1", }; return ( ); } const ICON_COLOUR: Record = { success: "text-emerald-600", error: "text-red-600", info: "text-sky-600", loading: "text-slate-500", }; const ICON_COLOUR_DARK: Record = { success: "text-emerald-400", error: "text-red-400", info: "text-sky-400", loading: "text-slate-400", }; /* ------------------------------------------------------------------ */ /* 3. One toast: its own timer, swipe and close button */ /* ------------------------------------------------------------------ */ type ToastCardProps = { item: ToastItem; index: number; offset: number; frontHeight: number; expanded: boolean; paused: boolean; dark: boolean; reduced: boolean; onHeight: (id: number, h: number) => void; }; function ToastCard({ item, index, offset, frontHeight, expanded, paused, dark, reduced, onHeight }: ToastCardProps) { const ref = useRef(null); const remaining = useRef(item.duration); const [progressKey, setProgressKey] = useState(0); // Reset the clock when the toast changes type (loading -> success). useEffect(() => { remaining.current = item.duration; setProgressKey((k) => k + 1); }, [item.type, item.duration]); useEffect(() => { if (paused || !Number.isFinite(item.duration)) return; const started = Date.now(); const timer = window.setTimeout(() => dismiss(item.id), remaining.current); return () => { window.clearTimeout(timer); remaining.current -= Date.now() - started; }; }, [paused, item.id, item.duration, progressKey]); useEffect(() => { const el = ref.current; if (!el) return; const ro = new ResizeObserver(() => onHeight(item.id, el.offsetHeight)); ro.observe(el); return () => ro.disconnect(); }, [item.id, onHeight]); const hidden = index >= VISIBLE_WHEN_STACKED && !expanded; const behind = index > 0 && !expanded; const y = expanded ? -offset : -index * 14; const scale = expanded ? 1 : 1 - index * 0.05; const onDragEnd = (_: unknown, info: PanInfo) => { if (Math.abs(info.offset.x) > 90 || Math.abs(info.velocity.x) > 600) dismiss(item.id); }; const surface = dark ? "bg-zinc-900 text-zinc-50 ring-1 ring-white/10 shadow-[0_12px_32px_-12px_rgba(0,0,0,0.7)]" : "bg-white text-zinc-900 ring-1 ring-zinc-900/[0.07] shadow-[0_1px_2px_rgba(16,24,40,0.05),0_12px_32px_-12px_rgba(16,24,40,0.22)]"; const muted = dark ? "text-zinc-400" : "text-zinc-600"; return ( ); } /* ------------------------------------------------------------------ */ /* 4. The viewport. Render once near the root of your app. */ /* ------------------------------------------------------------------ */ function Toaster({ dark, className = "", holdOpenFor = 0 }: { dark: boolean; className?: string; holdOpenFor?: number }) { const items = useSyncExternalStore(subscribe, getSnapshot, getSnapshot); const reduced = useReducedMotion() ?? false; const [hovered, setHovered] = useState(false); const [focused, setFocused] = useState(false); const [heights, setHeights] = useState>({}); // Optional: start fanned out (used by the demo so every type is visible), then fold away. const [held, setHeld] = useState(holdOpenFor > 0); useEffect(() => { if (!held) return; const t = window.setTimeout(() => setHeld(false), holdOpenFor); return () => window.clearTimeout(t); }, [held, holdOpenFor]); const expanded = hovered || focused || held; const onHeight = useCallback((id: number, h: number) => { setHeights((prev) => (prev[id] === h ? prev : { ...prev, [id]: h })); }, []); useEffect(() => { if (items.length === 0) { setHovered(false); setFocused(false); } }, [items.length]); const GAP = 10; const offsets = items.map((_, i) => items.slice(0, i).reduce((sum, t) => sum + (heights[t.id] ?? 72) + GAP, 0)); const frontHeight = items[0] ? heights[items[0].id] ?? 0 : 0; const stackHeight = expanded ? offsets[items.length - 1] + (heights[items[items.length - 1]?.id] ?? 0) : frontHeight + 28; return (

{ setHeld(false); setHovered(true); }} onMouseLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setFocused(false); }} onKeyDown={(e) => { if (e.key === "Escape" && items[0]) dismiss(items[0].id); }} className={className} >

{items.map((item, i) => ( ))}

); } /* ------------------------------------------------------------------ */ /* 5. Demo: buttons that fire each kind of toast */ /* ------------------------------------------------------------------ */ const wait = (ms: number, fail = false) => new Promise((resolve, reject) => window.setTimeout(fail ? reject : resolve, ms)); const demos: { label: string; code: string; dot: string; run: () => void }[] = [ { label: "Success", code: 'toast.success("Invoice sent")', dot: "bg-emerald-500", run: () => toast.success("Invoice sent", { description: "Maple & Rye Bakery will get it in a minute." }), }, { label: "Error", code: 'toast.error("Card declined")', dot: "bg-red-500", run: () => toast.error("Card declined", { description: "The bank refused the charge. Try another card.", action: { label: "Retry", onClick: () => toast.promise(wait(1400), { loading: "Charging card", success: "Payment received", error: "Still declined" }) }, }), }, { label: "Info", code: 'toast.info("New version ready")', dot: "bg-sky-500", run: () => toast.info("New version ready", { description: "Reload when it suits you to get the latest changes." }), }, { label: "Loading", code: "toast.promise(save(), {...})", dot: "bg-zinc-400", run: () => toast.promise(wait(1800), { loading: "Uploading 4 photos", success: "4 photos uploaded", error: "Upload failed" }), }, { label: "With undo", code: 'toast("Moved to bin", { action })', dot: "bg-amber-500", run: () => toast("Project moved to bin", { description: "Harbour Street refit", action: { label: "Undo", onClick: () => toast.success("Project restored") }, }), }, ]; export default function ReactToastNotificationSystem() { const [dark, setDark] = useState(false); const [lastCode, setLastCode] = useState(demos[3].code); // Start with a full stack so the preview shows the finished state, then hold it. useEffect(() => { toast.dismiss(); toast.promise(wait(2600), { loading: "Uploading 4 photos", success: "4 photos uploaded", error: "Upload failed" }); toast.error("Card declined", { description: "The bank refused the charge.", duration: 20000, action: { label: "Retry", onClick: () => toast.success("Payment received") }, }); toast.success("Invoice sent", { description: "Maple & Rye Bakery will get it in a minute.", duration: 20000 }); toast("Project moved to bin", { description: "Harbour Street refit", duration: 20000, action: { label: "Undo", onClick: () => toast.success("Project restored") }, }); return () => toast.dismiss(); }, []); const stage = dark ? "bg-zinc-950" : "bg-stone-100"; const panel = dark ? "bg-zinc-900 ring-white/10" : "bg-white ring-zinc-900/[0.06]"; const heading = dark ? "text-zinc-50" : "text-zinc-900"; const body = dark ? "text-zinc-400" : "text-zinc-600"; return (

Toasts

Fire one, hover the stack to fan it out, drag a toast sideways to throw it away.

{demos.map((d) => ( ))}

            {lastCode}

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L64",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L65",null,{"files":[{"path":"components/we-inc/react-toast-notification-system-with-undo-stacking-and-swipe-to-dismiss.tsx","content":"$66","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]