53: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"] 54: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"] 55:T2377,"use client"; import * as React from "react"; import { useSpring, useTransform, motion, useMotionValue, type MotionValue, type SpringOptions, type HTMLMotionProps, } from "motion/react"; import useMeasure from "react-use-measure"; import { useIsInView, type UseIsInViewOptions, } from "@/hooks/use-is-in-view"; type SlidingNumberRollerProps = { prevValue: number; value: number; place: number; transition: SpringOptions; delay?: number; }; function SlidingNumberRoller({ prevValue, value, place, transition, delay = 0, }: SlidingNumberRollerProps) { const startNumber = Math.floor(prevValue / place) % 10; const targetNumber = Math.floor(value / place) % 10; const animatedValue = useSpring(startNumber, transition); React.useEffect(() => { const timeoutId = setTimeout(() => { animatedValue.set(targetNumber); }, delay); return () => clearTimeout(timeoutId); }, [targetNumber, animatedValue, delay]); const [measureRef, { height }] = useMeasure(); return ( 0 {Array.from({ length: 10 }, (_, i) => ( ))} ); } type SlidingNumberDisplayProps = { motionValue: MotionValue; number: number; height: number; transition: SpringOptions; }; function SlidingNumberDisplay({ motionValue, number, height, transition, }: SlidingNumberDisplayProps) { const y = useTransform(motionValue, (latest) => { if (!height) return 0; const currentNumber = latest % 10; const offset = (10 + number - currentNumber) % 10; let translateY = offset * height; if (offset > 5) translateY -= 10 * height; return translateY; }); if (!height) { return ( {number} ); } return ( {number} ); } type SlidingNumberProps = Omit, "children"> & { number: number; fromNumber?: number; onNumberChange?: (number: number) => void; padStart?: boolean; decimalSeparator?: string; decimalPlaces?: number; thousandSeparator?: string; transition?: SpringOptions; delay?: number; initiallyStable?: boolean; } & UseIsInViewOptions; function SlidingNumber({ ref, number, fromNumber, onNumberChange, inView = false, inViewMargin = "0px", inViewOnce = true, padStart = false, decimalSeparator = ".", decimalPlaces = 0, thousandSeparator, transition = { stiffness: 200, damping: 20, mass: 0.4 }, delay = 0, initiallyStable = false, ...props }: SlidingNumberProps) { const { ref: localRef, isInView } = useIsInView( ref as React.Ref, { inView, inViewOnce, inViewMargin, }, ); const initialNumeric = Math.abs(Number(number)); const prevNumberRef = React.useRef( initiallyStable ? initialNumeric : 0, ); const hasAnimated = fromNumber !== undefined; const motionVal = useMotionValue( initiallyStable ? initialNumeric : (fromNumber ?? 0), ); const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 }); const skippedInitialWhenStable = React.useRef(false); React.useEffect(() => { if (!hasAnimated) return; if (initiallyStable && !skippedInitialWhenStable.current) { skippedInitialWhenStable.current = true; return; } const timeoutId = setTimeout(() => { if (isInView) motionVal.set(number); }, delay); return () => clearTimeout(timeoutId); }, [hasAnimated, initiallyStable, isInView, number, motionVal, delay]); const [effectiveNumber, setEffectiveNumber] = React.useState( initiallyStable ? initialNumeric : 0, ); React.useEffect(() => { if (hasAnimated) { const inferredDecimals = typeof decimalPlaces === "number" && decimalPlaces >= 0 ? decimalPlaces : (() => { const s = String(number); const idx = s.indexOf("."); return idx >= 0 ? s.length - idx - 1 : 0; })(); const factor = Math.pow(10, inferredDecimals); const unsubscribe = springVal.on("change", (latest: number) => { const newValue = inferredDecimals > 0 ? Math.round(latest * factor) / factor : Math.round(latest); if (effectiveNumber !== newValue) { setEffectiveNumber(newValue); onNumberChange?.(newValue); } }); return () => unsubscribe(); } else { setEffectiveNumber( initiallyStable ? initialNumeric : !isInView ? 0 : initialNumeric, ); } }, [ hasAnimated, springVal, isInView, number, decimalPlaces, onNumberChange, effectiveNumber, initiallyStable, initialNumeric, ]); const formatNumber = React.useCallback( (num: number) => decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(), [decimalPlaces], ); const numberStr = formatNumber(effectiveNumber); const [newIntStrRaw, newDecStrRaw = ""] = numberStr.split("."); const finalIntLength = padStart ? Math.max( Math.floor(Math.abs(number)).toString().length, newIntStrRaw.length, ) : newIntStrRaw.length; const newIntStr = padStart ? newIntStrRaw.padStart(finalIntLength, "0") : newIntStrRaw; const prevFormatted = formatNumber(prevNumberRef.current); const [prevIntStrRaw = "", prevDecStrRaw = ""] = prevFormatted.split("."); const prevIntStr = padStart ? prevIntStrRaw.padStart(finalIntLength, "0") : prevIntStrRaw; const adjustedPrevInt = React.useMemo(() => { return prevIntStr.length > finalIntLength ? prevIntStr.slice(-finalIntLength) : prevIntStr.padStart(finalIntLength, "0"); }, [prevIntStr, finalIntLength]); const adjustedPrevDec = React.useMemo(() => { if (!newDecStrRaw) return ""; return prevDecStrRaw.length > newDecStrRaw.length ? prevDecStrRaw.slice(0, newDecStrRaw.length) : prevDecStrRaw.padEnd(newDecStrRaw.length, "0"); }, [prevDecStrRaw, newDecStrRaw]); React.useEffect(() => { if (isInView || initiallyStable) { prevNumberRef.current = effectiveNumber; } }, [effectiveNumber, isInView, initiallyStable]); const intPlaces = React.useMemo( () => Array.from({ length: finalIntLength }, (_, i) => Math.pow(10, finalIntLength - i - 1), ), [finalIntLength], ); const decPlaces = React.useMemo( () => newDecStrRaw ? Array.from({ length: newDecStrRaw.length }, (_, i) => Math.pow(10, newDecStrRaw.length - i - 1), ) : [], [newDecStrRaw], ); const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0; const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0; return ( {isInView && Number(number) < 0 && ( - )} {intPlaces.map((place, idx) => { const digitsToRight = intPlaces.length - idx - 1; const isSeparatorPosition = typeof thousandSeparator !== "undefined" && digitsToRight > 0 && digitsToRight % 3 === 0; return ( {isSeparatorPosition && {thousandSeparator}} ); })} {newDecStrRaw && ( <> {decimalSeparator} {decPlaces.map((place) => ( ))} )} ); } export { SlidingNumber, type SlidingNumberProps }; 52:["$","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"}]]}]}]]}],["$","$L53",null,{"namespace":"@unlumen-ui","registryDependencies":["@unlumen-ui/hooks-use-is-in-view"]}]]}],null]}],["$","$L54",null,{"files":[{"path":"registry/primitives/texts/sliding-number/index.tsx","content":"$55","type":"registry:ui","target":"components/unlumen-ui/primitives/texts/sliding-number.tsx"}],"className":"h-[70svh] min-h-80"}]]}]