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:T1161,"use client"; import { useEffect, useState } from "react"; import { AnimatePresence, motion, useReducedMotion, useSpring, useTransform, type MotionValue } from "motion/react"; import { Minus, Plus } from "lucide-react"; export interface CounterProps { /** Starting value (non-negative integer). Changing it jumps the counter there. */ value?: number; /** Amount added or removed by the buttons. */ step?: number; min?: number; max?: number; /** Digit size in px. */ fontSize?: number; /** Show the − / + buttons. */ showControls?: boolean; /** Fade digits out at the top and bottom edges. */ fade?: boolean; /** Called with the new value after a button press. */ onChange?: (value: number) => void; className?: string; } export function Counter({ value = 128, step = 1, min = 0, max = 999999, fontSize = 80, showControls = true, fade = true, onChange, className, }: CounterProps) { const clamp = (v: number) => Math.round(Math.min(max, Math.max(min, v))); const [n, setN] = useState(() => clamp(value)); const [prev, setPrev] = useState(value); if (value !== prev) { setPrev(value); setN(clamp(value)); } const bump = (dir: number) => { const next = clamp(n + dir * step); setN(next); onChange?.(next); }; const digits = String(Math.max(0, n)).length; const places = Array.from({ length: digits }, (_, i) => digits - 1 - i); const h = fontSize * 1.1; const mask = fade ? "linear-gradient(transparent, #000 28%, #000 72%, transparent)" : undefined; const btn = "grid size-11 shrink-0 place-items-center rounded-full border border-border bg-card text-foreground outline-none transition-[transform,background-color] hover:bg-muted active:scale-90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"; return (

{showControls && ( )}

{n} {places.map((p) => ( ))}

{showControls && ( )}

); } function Column({ place, value, height }: { place: number; value: number; height: number }) { const reduce = useReducedMotion(); // Each column springs towards floor(value / 10^place), so 9 → 10 rolls both columns forward. const target = Math.floor(value / 10 ** place); const pos = useSpring(target, reduce ? { duration: 0 } : { stiffness: 120, damping: 20, mass: 0.8 }); useEffect(() => { pos.set(target); }, [pos, target]); return ( <> 0 {Array.from({ length: 10 }, (_, d) => ( ))} ); } function Digit({ digit, pos, height }: { digit: number; pos: MotionValue; height: number }) { const y = useTransform(pos, (v) => { let o = (((digit - v) % 10) + 10) % 10; if (o > 5) o -= 10; return o * height; }); return ( {digit} ); } 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","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"}]]}]}],["$","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":"@glint-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/counter.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]