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:T2024,"use client"; import * as React from "react"; import { AnimatePresence, motion, useInView, useMotionValue, useSpring, useTransform, type MotionValue, } from "motion/react"; import useMeasure from "react-use-measure"; import { cn } from "@/lib/utils"; type DigitEffect = "none" | "fade" | "blur" | "slide"; interface CountUpProps { to: number; from?: number; direction?: "up" | "down"; delay?: number; duration?: number; digitEffect?: DigitEffect; className?: string; startWhen?: boolean; separator?: string; onStart?: () => void; onEnd?: () => void; } type OdometerDigitProps = { springValue: MotionValue; /** place value: 1, 10, 100, 1000 … */ place: number; }; function OdometerDigit({ springValue, place }: OdometerDigitProps) { const [ref, { height }] = useMeasure(); const y = useTransform(springValue, (v) => { if (!height) return 0; const digit = (Math.abs(v) / place) % 10; return -digit * height; }); return ( 0 {/* 11 digits (0–9 + repeated 0) so the 9→0 wrap is seamless */} {Array.from({ length: 11 }, (_, i) => ( {i % 10} ))} ); } type CharSlotProps = { char: string; charKey: string; effect: Exclude; countingUp: boolean; }; const CHAR_VARIANTS = { fade: { initial: { opacity: 0, scale: 0.7 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.7 }, transition: { duration: 0.14, ease: "easeOut" }, overflow: "hidden" as const, }, blur: { initial: (up: boolean) => ({ opacity: 0, filter: "blur(8px)", y: up ? -8 : 8, }), animate: { opacity: 1, filter: "blur(0px)", y: 0 }, exit: (up: boolean) => ({ opacity: 0, filter: "blur(8px)", y: up ? 8 : -8, }), transition: { duration: 0.18, ease: "easeOut" }, overflow: "visible" as const, }, }; function CharSlot({ char, charKey, effect, countingUp }: CharSlotProps) { const isDigit = /\d/.test(char); if (!isDigit) { return {char}; } const v = CHAR_VARIANTS[effect]; const initial = typeof v.initial === "function" ? v.initial(countingUp) : v.initial; const exit = "exit" in v && typeof v.exit === "function" ? (v.exit as (up: boolean) => object)(countingUp) : (v.exit as object); return ( {char} ); } function CountUp({ to, from = 0, direction = "up", delay = 0, duration = 2, digitEffect = "none", className, startWhen = true, separator = "", onStart, onEnd, }: CountUpProps) { const ref = React.useRef(null); const motionValue = useMotionValue(direction === "down" ? to : from); const damping = 20 + 40 * (1 / duration); const stiffness = 100 * (1 / duration); const springValue = useSpring(motionValue, { damping, stiffness }); const isInView = useInView(ref, { once: true, margin: "0px" }); const getDecimalPlaces = (num: number): number => { const str = num.toString(); if (str.includes(".")) { const parts = str.split("."); const decimals = parts[1]; if (decimals && parseInt(decimals) !== 0) return decimals.length; } return 0; }; const maxDecimals = Math.max(getDecimalPlaces(from), getDecimalPlaces(to)); const formatValue = React.useCallback( (latest: number) => { const hasDecimals = maxDecimals > 0; const options: Intl.NumberFormatOptions = { useGrouping: !!separator, minimumFractionDigits: hasDecimals ? maxDecimals : 0, maximumFractionDigits: hasDecimals ? maxDecimals : 0, }; const formatted = Intl.NumberFormat("en-US", options).format(latest); return separator ? formatted.replace(/,/g, separator) : formatted; }, [maxDecimals, separator], ); const initialStr = formatValue(direction === "down" ? to : from); const [chars, setChars] = React.useState(initialStr.split("")); React.useEffect(() => { const initial = formatValue(direction === "down" ? to : from); if (digitEffect === "none") { if (ref.current) ref.current.textContent = initial; } else if (digitEffect !== "slide") { setChars(initial.split("")); } }, [from, to, direction, formatValue, digitEffect]); React.useEffect(() => { if (isInView && startWhen) { onStart?.(); const t1 = setTimeout(() => { motionValue.set(direction === "down" ? from : to); }, delay * 1000); const t2 = setTimeout(() => onEnd?.(), delay * 1000 + duration * 1000); return () => { clearTimeout(t1); clearTimeout(t2); }; } }, [ isInView, startWhen, motionValue, direction, from, to, delay, onStart, onEnd, duration, ]); React.useEffect(() => { const unsubscribe = springValue.on("change", (latest: number) => { if (digitEffect === "none") { if (ref.current) ref.current.textContent = formatValue(latest); } else if (digitEffect !== "slide") { setChars(formatValue(latest).split("")); } }); return () => unsubscribe(); }, [springValue, formatValue, digitEffect]); const countingUp = direction === "up"; if (digitEffect === "slide") { const targetStr = formatValue(direction === "down" ? from : to); const digits: number[] = []; const structure: Array<{ type: "digit" | "sep"; char?: string; placeIdx?: number; }> = []; let digitCount = 0; for (const ch of targetStr) { if (/\d/.test(ch)) digitCount++; } let d = 0; for (const ch of targetStr) { if (/\d/.test(ch)) { const placeFromRight = digitCount - 1 - d; structure.push({ type: "digit", placeIdx: placeFromRight }); d++; } else { structure.push({ type: "sep", char: ch }); } } return ( {structure.map((item, i) => item.type === "sep" ? ( {item.char} ) : ( ), )} ); } if (digitEffect === "none") { return ; } return ( {chars.map((char, i) => ( } countingUp={countingUp} /> ))} ); } export { CountUp, type CountUpProps, type DigitEffect }; 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","react-use-measure",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","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":"react-use-measure"}]]}]}]]}],["$","$L50",null,{"namespace":"@unlumen-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/components/unlumen/count-up/index.tsx","content":"$52","type":"registry:ui","target":"components/unlumen-ui/count-up.tsx"}],"className":"h-[70svh] min-h-80"}]]}]