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:T1536,"use client"; import * as React from "react"; import { Gauge } from "lucide-react"; import { cn } from "@/lib/utils"; export type GaugeSpeed = "slow" | "normal" | "fast"; export interface GaugeTextProps extends Omit< React.ComponentPropsWithoutRef<"span">, "children" | "color" > { ref?: React.Ref; value: number; suffix?: string; label: string; speed?: GaugeSpeed; color?: string; landedClassName?: string; decimals?: number; duration?: number; showIcon?: boolean; className?: string; numberClassName?: string; labelClassName?: string; iconClassName?: string; autoStart?: boolean; inView?: boolean; once?: boolean; onStart?: () => void; onComplete?: () => void; } export interface GaugeTextRef { play: () => void; reset: () => void; } const COUNT_DURATION: Record = { slow: 2.2, normal: 1.3, fast: 0.75, }; function easeOutExpo(t: number) { return t >= 1 ? 1 : 1 - Math.pow(2, -10 * t); } function GaugeText({ ref, value, suffix = "x", label, speed = "normal", color = "var(--primary)", landedClassName = "text-foreground", decimals = 0, duration, showIcon = true, className, numberClassName, labelClassName, iconClassName, autoStart = true, inView = false, once = true, onStart, onComplete, ...props }: GaugeTextProps) { const [display, setDisplay] = React.useState(0); const [landed, setLanded] = React.useState(false); const frame = React.useRef(null); const hasPlayedRef = React.useRef(false); const callbacks = React.useRef({ onStart, onComplete }); React.useEffect(() => { callbacks.current = { onStart, onComplete }; }, [onStart, onComplete]); const countDuration = duration ?? COUNT_DURATION[speed]; const play = React.useCallback(() => { if (frame.current) { cancelAnimationFrame(frame.current); } setLanded(false); callbacks.current.onStart?.(); if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setDisplay(value); setLanded(true); frame.current = null; callbacks.current.onComplete?.(); return; } const start = performance.now(); const tick = (now: number) => { const elapsed = (now - start) / 1000; const t = countDuration > 0 ? Math.min(elapsed / countDuration, 1) : 1; const eased = easeOutExpo(t); setDisplay(value * eased); if (t < 1) { frame.current = requestAnimationFrame(tick); } else { setDisplay(value); setLanded(true); frame.current = null; callbacks.current.onComplete?.(); } }; frame.current = requestAnimationFrame(tick); }, [value, countDuration]); const reset = React.useCallback(() => { if (frame.current) { cancelAnimationFrame(frame.current); } setDisplay(0); setLanded(false); hasPlayedRef.current = false; }, []); React.useImperativeHandle(ref, () => ({ play, reset }), [play, reset]); React.useEffect(() => { let start = 0; if (autoStart && !inView) { hasPlayedRef.current = true; start = requestAnimationFrame(play); } return () => { cancelAnimationFrame(start); if (frame.current) { cancelAnimationFrame(frame.current); } }; }, [autoStart, inView, play]); const handleViewportEnter = React.useCallback(() => { if (once && hasPlayedRef.current) return; hasPlayedRef.current = true; play(); }, [once, play]); const precision = Number.isFinite(decimals) ? Math.max(0, Math.min(100, Math.trunc(decimals))) : 0; const formatted = React.useMemo(() => display.toFixed(precision), [display, precision]); return ( {formatted} {suffix} {showIcon && ( ); } function GaugeTrigger({ inView, once, onEnter, }: { inView: boolean; once: boolean; onEnter: () => void; }) { const ref = React.useRef(null); const firedRef = React.useRef(false); React.useEffect(() => { if (!inView || !ref.current) return; const node = ref.current; const observer = new IntersectionObserver( ([entry]) => { if (!entry.isIntersecting) return; if (once && firedRef.current) return; firedRef.current = true; onEnter(); }, { rootMargin: "-10% 0px -10% 0px", }, ); observer.observe(node); return () => observer.disconnect(); }, [inView, once, onEnter]); if (!inView) return null; return ; } export { GaugeText }; 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","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":"@clover-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/clover-ui/gauge-text.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]