50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T1bd5,"use client"; import * as React from "react"; import { AlertTriangleIcon, CheckCircle2Icon, InfoIcon, XCircleIcon, XIcon } from "lucide-react"; import { enterOnce, gsap, motionScale } from "@/lib/motion"; import { cn } from "@/lib/utils"; type Tone = "default" | "success" | "error" | "warning" | "info"; type ToastAction = { label: string; onClick: () => void }; type ToastInput = { description?: React.ReactNode; tone?: Tone; duration?: number; action?: ToastAction; id?: string }; type ToastData = Required> & Omit & { id: string; title: React.ReactNode }; /* A tiny external store: `toast()` works anywhere (event handlers, mutations), the Toaster subscribes. */ let toasts: ToastData[] = []; const listeners = new Set<() => void>(); const emit = () => listeners.forEach((l) => l()); let counter = 0; function show(title: React.ReactNode, input: ToastInput = {}) { const id = input.id ?? `t${++counter}`; const data: ToastData = { tone: "default", duration: 4500, ...input, id, title }; toasts = toasts.some((t) => t.id === id) ? toasts.map((t) => (t.id === id ? data : t)) : [...toasts, data]; emit(); return id; } function dismiss(id?: string) { toasts = id ? toasts.filter((t) => t.id !== id) : []; emit(); } /** * `toast("Saved")`, `toast.success(…)`, `toast.error(…)`, `toast.promise(p, { loading, success, error })`. * Each call returns the toast id, which `toast.dismiss(id)` accepts. */ const toast = Object.assign(show, { success: (title: React.ReactNode, input?: ToastInput) => show(title, { ...input, tone: "success" }), error: (title: React.ReactNode, input?: ToastInput) => show(title, { ...input, tone: "error" }), warning: (title: React.ReactNode, input?: ToastInput) => show(title, { ...input, tone: "warning" }), info: (title: React.ReactNode, input?: ToastInput) => show(title, { ...input, tone: "info" }), dismiss, promise: (promise: Promise, messages: { loading: React.ReactNode; success: React.ReactNode | ((v: T) => React.ReactNode); error: React.ReactNode | ((e: unknown) => React.ReactNode) }) => { const id = show(messages.loading, { duration: Infinity, tone: "info" }); promise.then( (v) => show(typeof messages.success === "function" ? messages.success(v) : messages.success, { id, tone: "success" }), (e) => show(typeof messages.error === "function" ? messages.error(e) : messages.error, { id, tone: "error" }), ); return promise; }, }); const icons: Record | null> = { default: null, success: CheckCircle2Icon, error: XCircleIcon, warning: AlertTriangleIcon, info: InfoIcon, }; const toneColor: Record = { default: "text-foreground", success: "text-success", error: "text-destructive", warning: "text-warning", info: "text-primary" }; type ToasterProps = { position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center"; className?: string }; /** Mount once near the root. Toasts rise in, show a hairline countdown that pauses on hover, and slide away. */ function Toaster({ position = "bottom-right", className }: ToasterProps) { const items = React.useSyncExternalStore( (l) => { listeners.add(l); return () => listeners.delete(l); }, () => toasts, () => toasts, ); const top = position.startsWith("top"); return (

{items.map((t) => ( ))}

); } function ToastItem({ toast: t, fromTop }: { toast: ToastData; fromTop: boolean }) { const ref = React.useRef(null); const bar = React.useRef(null); const timer = React.useRef(null); const Icon = icons[t.tone]; const close = React.useCallback(() => { const el = ref.current; timer.current?.kill(); if (!el || !motionScale(el)) return dismiss(t.id); gsap.to(el, { x: 32, opacity: 0, height: 0, marginTop: -8, paddingTop: 0, paddingBottom: 0, duration: 0.35, ease: "cue", onComplete: () => dismiss(t.id) }); }, [t.id]); React.useLayoutEffect(() => { const el = ref.current; if (!el) return; const scale = motionScale(el); if (scale) enterOnce(el, (s) => ({ y: (fromTop ? -16 : 16) * s, opacity: 0, scale: 1 - 0.04 * s }), { duration: 0.45, ease: "cue-snap" }); }, [fromTop]); React.useEffect(() => { timer.current?.kill(); if (!Number.isFinite(t.duration) || !bar.current) return; timer.current = gsap.fromTo(bar.current, { scaleX: 1 }, { scaleX: 0, duration: t.duration / 1000, ease: "none", onComplete: close }); return () => { timer.current?.kill(); }; }, [t.duration, t.title, close]); return (

timer.current?.pause()} onPointerLeave={() => timer.current?.resume()} onFocus={() => timer.current?.pause()} onBlur={() => timer.current?.resume()} className="pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-xl bg-popover ring-1 ring-foreground/10 p-3.5 pe-9 text-sm text-popover-foreground shadow-overlay" > {Icon && }

{t.title}

{t.description &&

{t.description}

} {t.action && ( )}

{Number.isFinite(t.duration) &&

); } export { Toaster, toast }; export type { ToasterProps, ToastInput }; 4f:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@cuelark","registryDependencies":["utils","https://ui.cuelark.com/r/theme.json","https://ui.cuelark.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/cuelark/ui/toast.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]