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:T12c7,"use client"; import { useEffect, useRef, useSyncExternalStore, type ReactNode } from "react"; import { cn } from "./lib/cn"; import "./countdown.css"; export type CountdownUnit = "days" | "hours" | "minutes" | "seconds"; const order: CountdownUnit[] = ["days", "hours", "minutes", "seconds"]; const second = 1000; const minute = 60 * second; const hour = 60 * minute; const day = 24 * hour; export function toEpoch(target: Date | number | string) { if (target instanceof Date) return target.getTime(); if (typeof target === "number") return target; const parsed = Date.parse(target); return Number.isNaN(parsed) ? Number.NaN : parsed; } function split(remaining: number, units: CountdownUnit[]) { let rest = Math.max(0, remaining); const sizeOf = { days: day, hours: hour, minutes: minute, seconds: second }; return order.filter((unit) => units.includes(unit)).map((unit) => { const value = Math.floor(rest / sizeOf[unit]); rest -= value * sizeOf[unit]; return { unit, value }; }); } function phrase(remaining: number) { if (remaining <= 0) return ""; const parts = split(remaining, remaining < minute ? ["seconds"] : ["days", "hours", "minutes"]); return parts .filter((part) => part.value > 0 || part.unit === "minutes") .map((part) => `${part.value} ${part.unit}`) .join(", "); } function useNow(clock: () => number) { const cache = useRef(0); return useSyncExternalStore( (notify) => { let timer = 0; const tick = () => { cache.current = clock(); notify(); timer = window.setTimeout(tick, second - (Date.now() % second) + 20); }; timer = window.setTimeout(tick, second - (Date.now() % second) + 20); return () => window.clearTimeout(timer); }, () => { if (cache.current === 0) cache.current = clock(); return cache.current; }, () => 0, ); } function Wheel({ glyph }: { glyph: string }) { return ( ); } export function Countdown({ target, units = order, variant = "large", completeLabel = "Live now", onComplete, label = "Time remaining", clock = Date.now, className, }: { target: Date | number | string; units?: CountdownUnit[]; variant?: "large" | "compact"; completeLabel?: ReactNode; onComplete?: () => void; label?: string; clock?: () => number; className?: string; }) { const end = toEpoch(target); const now = useNow(clock); const finished = useRef(false); const pending = now === 0 || !Number.isFinite(end) || end <= 0; const remaining = pending ? 0 : end - now; useEffect(() => { if (pending || remaining > 0 || finished.current) return; finished.current = true; onComplete?.(); }, [onComplete, pending, remaining]); const groups = split(remaining, units); const spoken = remaining <= 0 ? (typeof completeLabel === "string" ? completeLabel : "Complete") : phrase(remaining); return ( {pending ? label : spoken} {pending ? ( units.map((unit) => ( )) ) : remaining <= 0 ? ( ) : ( groups.map((group) => ( )) )} ); } 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/countdown.tsx","content":"$52","type":"registry:ui","target":"components/ui/countdown.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/countdown.css","content":"/* countdown.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"countdown-digit\"] {\n animation: caliper-digit-in var(--duration-fast) var(--ease-settle);\n }\n [data-slot=\"countdown\"][data-complete=\"true\"] [data-slot=\"countdown-live\"] {\n animation: caliper-skeleton-pulse var(--duration-skeleton) var(--ease-in-out) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"countdown-digit\"] {\n animation: caliper-digit-in 120ms var(--ease-settle);\n }\n [data-slot=\"countdown-live\"] {\n animation: caliper-skeleton-pulse 1600ms var(--ease-in-out) infinite;\n }\n }\n}\n","type":"registry:file","target":"components/ui/countdown.css"}],"className":"h-[70svh] min-h-80"}]]}]