60: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"] 61:I[544296,["/_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"],"ItemStyles"] 62:I[8513,["/_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"],"ScrollArea"] 63:I[8513,["/_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"],"ScrollBar"] 64: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"] 65:T2d32,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useMotionValueEvent, useSpring, useTransform } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type UploadStatus = "idle" | "uploading" | "done"; // The circle the pill collapses into, matching the pill's h-10. const SIZE = 40; // Sits 1px inside the edge so the 2px stroke never touches the shadow ring. const RADIUS = 18; const CIRCUMFERENCE = 2 * Math.PI * RADIUS; // No bounce: a width that overshoots would read as the button wobbling. const MORPH = { type: "spring", duration: 0.3, bounce: 0 } as const; // Progress events arrive every few hundred ms; this glides between them // without trailing so far behind that the ring feels dishonest. const FILL = { visualDuration: 0.4, bounce: 0 }; const ICON_SWAP = { type: "spring", duration: 0.3, bounce: 0 } as const; // Close enough to full that the check never waits on the spring's tail. const FULL = 0.995; export function UploadButton({ status, progress, onStart, onCancel, onReset, label = "Upload", // Long enough to register the check, short enough to be ready again. resetAfter = 1500, className, }: { status: UploadStatus; /** 0 to 1. Only read while uploading. */ progress: number; onStart: () => void; onCancel: () => void; /** Called `resetAfter` ms after the check appears; set status back to idle. */ onReset: () => void; label?: string; resetAfter?: number; className?: string; }) { const reduceMotion = useReducedMotion(); const shown = useSpring(0, FILL); const [ringFull, setRingFull] = useState(false); const [note, setNote] = useState(""); const prevStatus = useRef(status); useEffect(() => { const wasActive = prevStatus.current !== "idle"; prevStatus.current = status; // Idle keeps the last value so a cancelled ring fades out where it was. if (status === "idle") return; // A fresh upload starts empty rather than sweeping back from 100%. if (!wasActive) shown.jump(0); const target = status === "done" ? 1 : Math.min(Math.max(progress, 0), 1); if (reduceMotion) shown.jump(target); else shown.set(target); }, [status, progress, reduceMotion, shown]); useMotionValueEvent(shown, "change", (v) => setRingFull(v >= FULL)); // The check waits for the ring to visibly close, not just for the status. const checked = status === "done" && ringFull; useEffect(() => { if (!checked) return; const timer = setTimeout(onReset, resetAfter); return () => clearTimeout(timer); }, [checked, onReset, resetAfter]); const dashOffset = useTransform(shown, (v) => CIRCUMFERENCE * (1 - v)); // A round cap at 0% would draw a lone dot at 12 o'clock. const arcOpacity = useTransform(shown, [0, 0.02], [0, 1]); const percent = useTransform(shown, (v) => Math.round(v * 100)); const compact = status !== "idle"; const uploading = status === "uploading"; const ringVisible = uploading || (status === "done" && !checked); const click = () => { if (status === "uploading") { setNote("Upload cancelled"); onCancel(); } else if (status === "idle") { setNote(""); onStart(); } }; const name = status === "uploading" ? "Cancel upload" : status === "done" ? "Upload complete" : label; return ( // Press scale lives here (:active also matches ancestors) so the ring, // which sits outside the button for ARIA reasons, shrinks with it. {/* One grid cell: the pill layer sets the auto width, the others center on top of it and overflow evenly when compact. */} {label} {/* Percent by default; hover or keyboard focus swaps it for a stop mark so the cancel action is discoverable. */} {percent} {/* Outside the button: a button's children are presentational, so a progressbar nested inside would never reach assistive tech. */} {/* -90deg moves the stroke's start from 3 o'clock to 12. */} {uploading ? "Uploading" : status === "done" ? "Upload complete" : note} ); } // Enters over 200ms, leaves in 100ms: the outgoing state should be gone // before the width morph gets far enough to clip it. function Layer({ visible, enterDelay, className, children, }: { visible: boolean; enterDelay?: boolean; className?: string; children: React.ReactNode; }) { return ( {children} ); } // Fast start, a stall near the middle, then a quick finish: roughly how a // real upload looks. [ms from start, progress] const STEPS: [number, number][] = [ [120, 0.12], [260, 0.27], [420, 0.41], [580, 0.5], [1200, 0.54], [1500, 0.61], [1720, 0.74], [1900, 0.83], [2120, 0.92], [2450, 1], ]; export default function UploadButtonDemo() { const [status, setStatus] = useState("idle"); const [progress, setProgress] = useState(0); const timers = useRef[]>([]); const clear = () => { timers.current.forEach(clearTimeout); timers.current = []; }; useEffect(() => clear, []); const start = () => { clear(); setProgress(0); setStatus("uploading"); for (const [at, value] of STEPS) { // Up to 80ms of jitter (less than any gap between steps, so order // holds) keeps repeat runs from feeling canned. const jitter = value === 1 ? 0 : Math.random() * 80; timers.current.push( setTimeout(() => { setProgress(value); if (value === 1) setStatus("done"); }, at + jitter), ); } }; const cancel = () => { clear(); setStatus("idle"); }; const reset = useCallback(() => setStatus("idle"), []); return ( ); } 5f:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L60",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L61",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L64",null,{"files":[{"path":"components/upload-button.tsx","content":"$65","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]