51: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"] 52: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"] 53:T51c7,"use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, animate, type MotionValue, motion, type Transition, type UseInViewOptions, useInView, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { type CSSProperties, type HTMLAttributes, type Ref, useEffect, useMemo, useRef, useState, } from "react"; // --- formatting ------------------------------------------------------------- type NumberPartType = | Exclude | "sign" | "prefix" | "suffix"; interface KeyedDigitPart { key: string; /** Digit place: 0 = ones, 1 = tens, ... for integer; -1, -2, ... for fraction. */ pos: number; type: "integer" | "fraction"; value: number; } interface KeyedSymbolPart { key: string; type: Exclude; value: string; } type KeyedPart = KeyedDigitPart | KeyedSymbolPart; interface FormattedNumber { parts: KeyedPart[]; value: number; valueAsString: string; } function generateKeyFactory() { const counts: Partial> = {}; return (type: NumberPartType) => { const next = (counts[type] ?? -1) + 1; counts[type] = next; return { index: next, key: `${type}:${next}` }; }; } // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: part-classification switch function formatToParts( value: number, formatter: Intl.NumberFormat, prefix?: string, suffix?: string ): FormattedNumber { const rawParts: Array<{ type: Intl.NumberFormatPartTypes | "prefix" | "suffix"; value: string; }> = formatter.formatToParts(value); if (prefix) { rawParts.unshift({ type: "prefix", value: prefix }); } if (suffix) { rawParts.push({ type: "suffix", value: suffix }); } const pre: KeyedPart[] = []; const integerDigits: Array< { type: "integer"; value: number } | { type: "group"; value: string } > = []; const fraction: KeyedPart[] = []; const post: KeyedPart[] = []; const generateKey = generateKeyFactory(); let valueAsString = ""; let seenInteger = false; let seenDecimal = false; for (const part of rawParts) { valueAsString += part.value; const type: NumberPartType = part.type === "minusSign" || part.type === "plusSign" ? "sign" : part.type; if (type === "integer") { seenInteger = true; for (const digit of part.value) { integerDigits.push({ type: "integer", value: Number(digit) }); } } else if (type === "group") { integerDigits.push({ type: "group", value: part.value }); } else if (type === "decimal") { seenDecimal = true; fraction.push({ type: "decimal", value: part.value, key: generateKey(type).key, }); } else if (type === "fraction") { for (const digit of part.value) { // Fraction digits are keyed left-to-right, so pos counts down from -1. const { index, key } = generateKey(type); fraction.push({ type: "fraction", value: Number(digit), key, pos: -1 - index, }); } } else { (seenInteger || seenDecimal ? post : pre).push({ type, value: part.value, key: generateKey(type).key, }); } } // Key the integer parts right-to-left, so adding/removing a leading digit // (e.g. 99 -> 100) doesn't reshuffle the keys of the digits that didn't change. // The right-to-left index also becomes each digit's place (`pos`): ones = 0, // tens = 1, etc. const integer: KeyedPart[] = [...integerDigits] .reverse() .map((part) => { const { index, key } = generateKey(part.type); return part.type === "integer" ? { ...part, key, pos: index } : { ...part, key }; }) .reverse(); return { parts: [...pre, ...integer, ...fraction, ...post], valueAsString, value, }; } function isDigitPart(part: KeyedPart): part is KeyedDigitPart { return part.type === "integer" || part.type === "fraction"; } // --- trend / digit delta ----------------------------------------------------- export type NumberFlowTrend = | number | ((prevValue: number, value: number) => number); function resolveTrend( trend: NumberFlowTrend, prevValue: number, value: number ) { return typeof trend === "function" ? trend(prevValue, value) : trend; } const DIGIT_LENGTH = 10; function getDigitDelta(prevValue: number, value: number, trend: number) { const diff = value - prevValue; const t = trend || Math.sign(diff); if (t < 0 && value > prevValue) { return value - DIGIT_LENGTH - prevValue; } if (t > 0 && value < prevValue) { return DIGIT_LENGTH - prevValue + value; } return diff; } function mod(a: number, m: number) { return ((a % m) + m) % m; } /** * Ported from the `continuous` plugin (packages/number-flow/src/plugins/continuous.ts). * Finds the least-significant digit place where the previous and next number * actually differ, so that digits at-or-before that place which happen to * hold the same face still spin through a full loop — making the number * appear to pass continuously through the values in between, instead of just * the changed digits jumping in place. */ function computeStartingPos( prevParts: KeyedDigitPart[], parts: KeyedDigitPart[], trend: number ): number | undefined { if (!trend) { return; } const firstChangedPrev = prevParts.find( (pp) => !parts.some((p) => p.pos === pp.pos && p.value === pp.value) ); const firstChanged = parts.find( (p) => !prevParts.some((pp) => p.pos === pp.pos && p.value === pp.value) ); const positions = [firstChangedPrev?.pos, firstChanged?.pos].filter( (p): p is number => p != null ); return positions.length ? Math.max(...positions) : undefined; } /** Fraction in [-1, 1] of one row that face `n` sits from center. */ function digitFaceOffset(n: number, c: number) { const offsetRaw = mod(DIGIT_LENGTH + n - mod(c, DIGIT_LENGTH), DIGIT_LENGTH); const offset = offsetRaw - DIGIT_LENGTH * Math.floor(offsetRaw / (DIGIT_LENGTH / 2)); return Math.max(-1, Math.min(1, offset)); } // --- edge mask (vignette) ------------------------------------------------- /** * Ported from the mask recipe in packages/number-flow/src/styles.ts * (technique: https://expensive.toys/blog/blur-vignette). Fades the digit * row through its top/bottom/corner edges instead of hard-clipping spinning * faces, so a digit rolling in/out doesn't look like it's cut off by a box. */ const MASK_HEIGHT = "0.25em"; const MASK_WIDTH = "0.5em"; const MASK_CORNER = "#000 0, transparent 71%"; const numberMaskStyle: CSSProperties = { WebkitMaskImage: [ `linear-gradient(to right, transparent 0, #000 ${MASK_WIDTH}, #000 calc(100% - ${MASK_WIDTH}), transparent)`, `linear-gradient(to bottom, transparent 0, #000 ${MASK_HEIGHT}, #000 calc(100% - ${MASK_HEIGHT}), transparent 100%)`, `radial-gradient(at bottom right, ${MASK_CORNER})`, `radial-gradient(at bottom left, ${MASK_CORNER})`, `radial-gradient(at top left, ${MASK_CORNER})`, `radial-gradient(at top right, ${MASK_CORNER})`, ].join(", "), WebkitMaskPosition: "center, center, top left, top right, bottom right, bottom left", WebkitMaskRepeat: "no-repeat", WebkitMaskSize: [ `100% calc(100% - ${MASK_HEIGHT} * 2)`, `calc(100% - ${MASK_WIDTH} * 2) 100%`, `${MASK_WIDTH} ${MASK_HEIGHT}`, `${MASK_WIDTH} ${MASK_HEIGHT}`, `${MASK_WIDTH} ${MASK_HEIGHT}`, `${MASK_WIDTH} ${MASK_HEIGHT}`, ].join(", "), marginInline: `calc(-1 * ${MASK_WIDTH})`, }; // Compensates the outer element's negative margin, reserving blank space for // the mask's fade zone so it doesn't cut into actual digit ink. const numberMaskInnerStyle: CSSProperties = { padding: `calc(${MASK_HEIGHT} / 2) ${MASK_WIDTH}`, }; const DIGIT_FACES = Array.from({ length: DIGIT_LENGTH }, (_, i) => i); // --- Digit -------------------------------------------------------------- interface DigitFaceProps { mv: MotionValue; n: number; willChange: boolean; } function DigitFace({ n, mv, willChange }: DigitFaceProps) { const y = useTransform(mv, (c) => `${digitFaceOffset(n, c) * 100}%`); return ( ); } interface DigitProps { animateIn: boolean; layoutTransition: Transition; /** Called right before this digit starts a spin animation. */ onAnimationEnd: () => void; /** Called once this digit's spin animation settles (naturally or interrupted). */ onAnimationStart: () => void; /** Digit place (see `KeyedDigitPart.pos`); used for the continuous-loop effect. */ pos: number; reduced: boolean; ref?: Ref; /** Least-significant place at/before which unchanged digits still loop once. */ startingPos: number | undefined; transition: Transition; trend: number; value: number; willChange: boolean; } // `mode="popLayout"` needs to grab this component's underlying DOM node to pop // it out of flow while it exits (see AnimatePresence usage below) — without // forwarding `ref`, the exiting digit stays in flow for its whole fade, and // siblings only slide into the gap it leaves behind once it finally unmounts. function Digit({ value, trend, transition, layoutTransition, animateIn, reduced, pos, startingPos, willChange, onAnimationStart, onAnimationEnd, ref, }: DigitProps) { const mv = useMotionValue(reduced || !animateIn ? value : 0); const isMountRef = useRef(true); // biome-ignore lint/correctness/useExhaustiveDependencies: startingPos must also retrigger the roll, for digits whose own value didn't change (continuous-loop effect) useEffect(() => { // Runs a spin and reports it to the parent's onAnimationsStart/Finish // aggregate — settled fires exactly once whether the spin completes // naturally or gets interrupted (stop()'d) by the next update/unmount. const spin = (delta: number) => { onAnimationStart(); let settled = false; const settle = () => { if (settled) { return; } settled = true; onAnimationEnd(); }; const controls = animate(mv, delta, transition); controls.then(settle, settle); return () => { controls.stop(); settle(); }; }; if (isMountRef.current) { isMountRef.current = false; if (!reduced && animateIn) { return spin(getDigitDelta(0, value, trend)); } return; } if (reduced) { mv.set(value); return; } // Rebase off the motion value's current position (possibly mid-flight) so // rapid updates still converge to the correct face. const current = mv.get(); let delta = getDigitDelta(mod(current, DIGIT_LENGTH), value, trend); if (delta === 0) { // This digit's own face didn't change, but a less-significant digit did // — loop it through a full rotation so the whole number reads as // passing continuously through the intermediate values. if (trend && startingPos != null && startingPos >= pos) { delta = DIGIT_LENGTH * trend; } else { return; } } return spin(current + delta); }, [value, startingPos]); return ( {DIGIT_FACES.map((n) => ( ))} ); } // --- NumberFlow ----------------------------------------------------------- const DEFAULT_TRANSITION: Transition = { duration: 0.9, ease: [0.16, 1, 0.3, 1], }; const DEFAULT_OPACITY_TRANSITION: Transition = { duration: 0.45, ease: "easeOut", }; const REDUCED_TRANSITION: Transition = { duration: 0 }; const DEFAULT_VIEWPORT_MARGIN = "0px 0px -10% 0px"; export interface NumberFlowProps extends Omit, "children"> { /** Passed to `Intl.NumberFormat`. */ format?: Intl.NumberFormatOptions; /** Passed to `Intl.NumberFormat`. */ locales?: Intl.LocalesArgument; /** Called once every digit spun by the current value update has settled. */ onAnimationsFinish?: () => void; /** * Called once when a value update starts spinning any digit, after any * previous batch has fully settled. */ onAnimationsStart?: () => void; /** * When `scrollTrigger` is enabled, fire the count-up only once. * @default true */ once?: boolean; /** Rendered before the formatted value, e.g. a currency symbol override. */ prefix?: string; /** Skip animation when the user has requested reduced motion (default true). */ respectMotionPreference?: boolean; /** * Count up from 0 the first (or, with `once={false}`, every) time this * element enters the viewport, instead of showing the final value * immediately. Ignored when reduced motion is active. * @default false */ scrollTrigger?: boolean; /** Overrides `transition` for the digit roll specifically. */ spinTransition?: Transition; /** Rendered after the formatted value, e.g. a unit. */ suffix?: string; /** Transition for the digit roll and layout reflow. */ transition?: Transition; /** * Controls which direction digits spin. A number's sign is used directly; * a function receives `(prevValue, value)` and should return one. Defaults * to `Math.sign(value - prevValue)`. */ trend?: NumberFlowTrend; /** The number to display. Changing this triggers the roll animation. */ value: number; /** * Intersection margin used when `scrollTrigger` is enabled. * @default "0px 0px -10% 0px" */ viewportMargin?: UseInViewOptions["margin"]; /** * Hints the browser to promote digits/symbols onto their own composite * layer ahead of time. Costs GPU memory, so only turn it on for instances * that animate often (e.g. a live-updating counter), not static ones. * @default false */ willChange?: boolean; } function usePrevious(value: T) { const ref = useRef(value); const prev = ref.current; ref.current = value; return prev; } function useIsFirstRender() { const ref = useRef(true); const isFirst = ref.current; ref.current = false; return isFirst; } /** Skip animating when detached, hidden, or the document tab is backgrounded. */ function canAnimateElement(el: HTMLElement | null) { if ( typeof document !== "undefined" && document.visibilityState !== "visible" ) { return false; } return Boolean(el && el.offsetWidth > 0 && el.offsetHeight > 0); } export function NumberFlow({ value, locales, format, prefix, suffix, trend = (prevValue, next) => Math.sign(next - prevValue), transition = DEFAULT_TRANSITION, spinTransition, respectMotionPreference = true, willChange = false, scrollTrigger = false, once = true, viewportMargin = DEFAULT_VIEWPORT_MARGIN, onAnimationsStart, onAnimationsFinish, className, style, ...props }: NumberFlowProps) { const prefersReducedMotion = useReducedMotion(); const isFirstRender = useIsFirstRender(); const rootRef = useRef(null); const isInView = useInView(rootRef, { margin: viewportMargin, once }); // Aggregates every digit's spin so onAnimationsStart/Finish (and the // will-change toggle below) fire once per batch (0 -> >0, then back to 0), // not once per digit. const activeSpins = useRef(0); // `will-change` should only cost a GPU layer while digits are actually // spinning — promoting them for the component's entire lifetime would leak // memory for instances that update rarely. Gated by `willChange` so opting // out skips the extra state/re-renders entirely. const [isAnimating, setIsAnimating] = useState(false); const handleAnimationStart = () => { activeSpins.current += 1; if (activeSpins.current === 1) { onAnimationsStart?.(); if (willChange) { setIsAnimating(true); } } }; const handleAnimationEnd = () => { activeSpins.current -= 1; if (activeSpins.current === 0) { onAnimationsFinish?.(); if (willChange) { setIsAnimating(false); } } }; const activeWillChange = willChange && isAnimating; // Re-checked every render so off-screen or backgrounded instances skip // animation on the next value update. const reduced = Boolean(respectMotionPreference && prefersReducedMotion) || !(isFirstRender || canAnimateElement(rootRef.current)); // Holds at 0 until the element scrolls into view, then flips to the real // value — which flows through the normal update path below and counts up // exactly like any other value change. Ignored under reduced motion so // motion-sensitive users see the final value immediately instead of // waiting on scroll position for content that won't animate anyway. const effectiveValue = scrollTrigger && !reduced && !isInView ? 0 : value; const localesKey = JSON.stringify(locales ?? null); const formatKey = JSON.stringify(format ?? null); // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally keyed by the serialized locales/format, not their (possibly-new-every-render) identity const formatter = useMemo( () => new Intl.NumberFormat(locales, format), [localesKey, formatKey] ); const data = useMemo( () => formatToParts(effectiveValue, formatter, prefix, suffix), [effectiveValue, formatter, prefix, suffix] ); const prevData = usePrevious(data); const computedTrend = resolveTrend(trend, prevData.value, data.value); const startingPos = useMemo( () => computeStartingPos( prevData.parts.filter(isDigitPart), data.parts.filter(isDigitPart), computedTrend ), [prevData, data, computedTrend] ); const spinT = reduced ? REDUCED_TRANSITION : (spinTransition ?? transition); const layoutT = reduced ? REDUCED_TRANSITION : transition; const opacityT = reduced ? REDUCED_TRANSITION : DEFAULT_OPACITY_TRANSITION; return ( ); } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@soralabs","registryDependencies":["utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/primitives/texts/number-flow/index.tsx","content":"$53","type":"registry:ui","target":"components/sora-ui/texts/number-flow.tsx"}],"className":"h-[70svh] min-h-80"}]]}]