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:T2a43,import { motion, useInView, useSpring, useTransform } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; type EasingType = | "linear" | "easeOut" | "easeIn" | "easeInOut" | "spring" | "bounce"; interface NumberCounterProps { value: number; from?: number; duration?: number; delay?: number; decimals?: number; separator?: string; decimalSeparator?: string; prefix?: string; suffix?: string; easing?: EasingType; className?: string; once?: boolean; formatFn?: (value: number) => string; } // Easing functions for CSS-based animation const easingFunctions: Record = { linear: [0, 0, 1, 1], easeOut: [0.16, 1, 0.3, 1], easeIn: [0.7, 0, 0.84, 0], easeInOut: [0.65, 0, 0.35, 1], spring: [0.34, 1.56, 0.64, 1], bounce: [0.68, -0.55, 0.27, 1.55], }; // Format number with separators const formatNumber = ( value: number, decimals: number, separator: string, decimalSeparator: string, ): string => { const fixed = value.toFixed(decimals); const [intPart, decPart] = fixed.split("."); const formattedInt = (intPart || "").replace( /\B(?=(\d{3})+(?!\d))/g, separator, ); return decPart ? `${formattedInt}${decimalSeparator}${decPart}` : formattedInt; }; // Animated digit component for rolling effect const AnimatedDigit = ({ digit, delay = 0, }: { digit: string; delay?: number; }) => { const isNumber = /\d/.test(digit); if (!isNumber) { return {digit}; } const num = parseInt(digit, 10); return ( {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => ( {n} ))} ); }; // Spring-based counter using useSpring const SpringCounter = ({ value, from = 0, decimals = 0, separator = ",", decimalSeparator = ".", prefix = "", suffix = "", className, once = true, formatFn, duration = 2, delay = 0, }: NumberCounterProps) => { const ref = React.useRef(null); const isInView = useInView(ref, { once }); const [displayValue, setDisplayValue] = React.useState(from); const springValue = useSpring(from, { stiffness: 100, damping: 30, duration: duration * 1000, }); React.useEffect(() => { if (isInView) { const timer = setTimeout(() => { springValue.set(value); }, delay * 1000); return () => clearTimeout(timer); } }, [isInView, value, springValue, delay]); React.useEffect(() => { const unsubscribe = springValue.on("change", (latest) => { setDisplayValue(latest); }); return unsubscribe; }, [springValue]); const formatted = formatFn ? formatFn(displayValue) : formatNumber(displayValue, decimals, separator, decimalSeparator); return ( {prefix} {formatted} {suffix} ); }; // Main NumberCounter component const NumberCounter = React.forwardRef( ( { value, from = 0, duration = 2, delay = 0, decimals = 0, separator = ",", decimalSeparator = ".", prefix = "", suffix = "", easing = "easeOut", className, once = true, formatFn, }, ref, ) => { const containerRef = React.useRef(null); const isInView = useInView(containerRef, { once }); const [count, setCount] = React.useState(from); React.useEffect(() => { if (!isInView) return; const startTime = Date.now() + delay * 1000; const endTime = startTime + duration * 1000; // Cubic bezier easing function const bezier = easingFunctions[easing] || easingFunctions.linear; const cubicBezier = (t: number): number => { const [x1 = 0, y1 = 0, x2 = 1, y2 = 1] = bezier; // Simplified cubic bezier approximation const cx = 3 * x1; const bx = 3 * (x2 - x1) - cx; const ax = 1 - cx - bx; const cy = 3 * y1; const by = 3 * (y2 - y1) - cy; const ay = 1 - cy - by; const sampleCurveX = (t: number) => ((ax * t + bx) * t + cx) * t; const sampleCurveY = (t: number) => ((ay * t + by) * t + cy) * t; // Newton-Raphson iteration for finding t given x let x = t; for (let i = 0; i < 8; i++) { const currentX = sampleCurveX(x) - t; if (Math.abs(currentX) < 0.0001) break; const dx = (3 * ax * x + 2 * bx) * x + cx; if (Math.abs(dx) < 0.0001) break; x -= currentX / dx; } return sampleCurveY(x); }; let animationFrame: number; const animate = () => { const now = Date.now(); if (now < startTime) { animationFrame = requestAnimationFrame(animate); return; } if (now >= endTime) { setCount(value); return; } const elapsed = now - startTime; const total = endTime - startTime; const progress = elapsed / total; const easedProgress = cubicBezier(progress); const currentValue = from + (value - from) * easedProgress; setCount(currentValue); animationFrame = requestAnimationFrame(animate); }; animationFrame = requestAnimationFrame(animate); return () => cancelAnimationFrame(animationFrame); }, [isInView, value, from, duration, delay, easing]); const formatted = formatFn ? formatFn(count) : formatNumber(count, decimals, separator, decimalSeparator); return ( {prefix} {formatted} {suffix} ); }, ); NumberCounter.displayName = "NumberCounter"; // Rolling digits counter interface RollingCounterProps { value: number; className?: string; prefix?: string; suffix?: string; separator?: string; } const RollingCounter = React.forwardRef( ({ value, className, prefix = "", suffix = "", separator = "," }, ref) => { const containerRef = React.useRef(null); const isInView = useInView(containerRef, { once: true }); const formattedValue = formatNumber(value, 0, separator, "."); const digits = formattedValue.split(""); return ( {prefix && {prefix}} {isInView && digits.map((digit, index) => ( ))} {suffix && {suffix}} ); }, ); RollingCounter.displayName = "RollingCounter"; // Percentage counter with circular progress interface CircularCounterProps { value: number; size?: number; strokeWidth?: number; className?: string; duration?: number; color?: string; trackColor?: string; } const CircularCounter = React.forwardRef( ( { value, size = 120, strokeWidth = 8, className, duration = 2, color = "hsl(var(--primary))", trackColor = "hsl(var(--muted))", }, ref, ) => { const containerRef = React.useRef(null); const isInView = useInView(containerRef, { once: true }); const springValue = useSpring(0, { duration: duration * 1000, bounce: 0, }); const radius = (size - strokeWidth) / 2; const circumference = radius * 2 * Math.PI; const offset = useTransform(springValue, [0, 100], [circumference, 0]); const rounded = useTransform(springValue, (latest) => Math.round(latest)); React.useEffect(() => { if (isInView) { springValue.set(value); } }, [isInView, value, springValue]); return (

{rounded}%

); }, ); CircularCounter.displayName = "CircularCounter"; // Compact counter for stats interface StatCounterProps { value: number; label: string; prefix?: string; suffix?: string; decimals?: number; className?: string; } const StatCounter = React.forwardRef( ( { value, label, prefix = "", suffix = "", decimals = 0, className }, ref, ) => { return (

{label}

); }, ); StatCounter.displayName = "StatCounter"; export { CircularCounter, formatNumber, NumberCounter, RollingCounter, SpringCounter, StatCounter, }; export type { CircularCounterProps, EasingType, NumberCounterProps, RollingCounterProps, StatCounterProps, }; 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"}]]}]}]]}],["$","$L50",null,{"namespace":"@jolyui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/number-counter.tsx","content":"$52","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]