4e: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"] 4f: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"] 50:T10b0,"use client"; import { useInView } from "motion/react"; import { useEffect, useRef, useState } from "react"; import { Button } from "../button/button"; import { DemoFrame } from "../lib/demo-frame"; import { NumberRoll } from "../number-roll/number-roll"; import { Spinner } from "../spinner/spinner"; import { TextSwap } from "../text-swap/text-swap"; import { Progress } from "./progress"; type Upload = { id: string; name: string; size: number; speed: number }; const FILES: Upload[] = [ { id: "a", name: "Launch film final.mov", size: 842, speed: 46 }, { id: "b", name: "Press kit.zip", size: 128, speed: 31 }, { id: "c", name: "Hero stills.fig", size: 64, speed: 22 }, { id: "d", name: "Captions (EN, DE, JA).srt", size: 3, speed: 1.4 }, ]; /** Megabytes sent per file, then ticks of server-side processing once the bytes are in. */ type State = Record; const fresh = (): State => Object.fromEntries(FILES.map((f) => [f.id, { sent: 0, processing: 0 }])); const PROCESSING_TICKS = 6; export function ProgressDemo() { const [state, setState] = useState(fresh); const root = useRef(null); const inView = useInView(root); // Uneven chunks, the way a real upload reports, then a short indeterminate processing step. useEffect(() => { if (!inView) return; const t = window.setInterval(() => { setState((s) => { const next = { ...s }; for (const f of FILES) { const cur = s[f.id]; if (cur.sent < f.size) { next[f.id] = { ...cur, sent: Math.min(f.size, cur.sent + f.speed * (0.4 + Math.random())) }; } else if (cur.processing < PROCESSING_TICKS) { next[f.id] = { ...cur, processing: cur.processing + 1 }; } } return next; }); }, 450); return () => window.clearInterval(t); }, [inView]); const done = FILES.filter((f) => state[f.id].processing >= PROCESSING_TICKS).length; const busy = done < FILES.length; return ( {busy && } {done} of {FILES.length} } actions={ } >

(phase === "processing" ? "Processing" : `${formatted} uploaded`)} />
/ {f.size} MB

); } function Status({ phase }: { phase: "uploading" | "processing" | "done" }) { const text = phase === "uploading" ? "Uploading…" : phase === "processing" ? "Processing…" : "Uploaded"; return ( {phase === "done" && ( )} {text} ); } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@eased","registryDependencies":["https://eased.dev/r/progress.json","https://eased.dev/r/spinner.json","https://eased.dev/r/eased-demo-frame.json","https://eased.dev/r/button.json","https://eased.dev/r/number-roll.json","https://eased.dev/r/text-swap.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/eased/progress/progress-demo.tsx","content":"$50","type":"registry:example","target":"@components/eased/progress/progress-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]