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:T1575,"use client"; // Adapted from Calamansi UI by fujiDevv (MIT License). // https://github.com/fujiDevv/calamansi-ui import { useMemo, type ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; import { getSvgPath } from "figma-squircle"; import useMeasure from "react-use-measure"; import { cn } from "@/lib/utils"; const DIGITS_UP = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; const DIGITS_DOWN = [...DIGITS_UP].reverse(); const NUMBER = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }); const FORMAT = (value: number) => NUMBER.format(value); export type NumberTickerVariant = "white" | "calamansi" | "slate" | "citrus"; const VARIANTS: Record = { white: { paint: "bg-white dark:bg-[#1c1c1f]", ink: "text-foreground" }, calamansi: { paint: "bg-gradient-to-br from-[#8fa37d] via-[#5c7a67] to-[#39564a] dark:from-[#1b281f] dark:via-[#16221a] dark:to-[#0e1611]", ink: "text-white", }, slate: { paint: "bg-gradient-to-br from-[#a79cb7] via-[#687396] to-[#4a5a7f] dark:from-[#1e1b4b] dark:via-[#1e293b] dark:to-[#0f172a]", ink: "text-white", }, citrus: { paint: "bg-gradient-to-br from-[#d69f7e] via-[#b87152] to-[#7d4128] dark:from-[#2e170c] dark:via-[#22120b] dark:to-[#140a06]", ink: "text-white", }, }; /** A superellipse surface painted on its own layer, inset to the parent. */ function Squircle({ className, radius = 28, children }: { className?: string; radius?: number; children?: ReactNode }) { const [ref, bounds] = useMeasure({ offsetSize: true }); const path = useMemo( () => bounds.width > 0 && bounds.height > 0 ? getSvgPath({ width: bounds.width, height: bounds.height, cornerRadius: radius, cornerSmoothing: 1 }) : null, [bounds.width, bounds.height, radius], ); return ( ); } export interface NumberTickerProps { value: number; className?: string; /** Surface palette. */ variant?: NumberTickerVariant; /** Seconds for each digit to settle. */ duration?: number; /** Delay between digits, in seconds. */ stagger?: number; /** Roll the digits upward or downward. */ direction?: "up" | "down"; /** Static text before the digits. */ prefix?: string; /** Static text after the digits. */ suffix?: string; /** Turns the number into text. Defaults to a grouped en-US number. */ format?: (value: number) => string; } /** * An odometer-style number that rolls to each new value, mounted in a squircle * window. Every digit is a column of 0-9 that slides to the active digit. */ export function NumberTicker({ value, className, variant = "calamansi", duration = 0.7, stagger = 0.05, direction = "up", prefix, suffix, format = FORMAT, }: NumberTickerProps) { const reduceMotion = useReducedMotion(); const text = format(value); const characters = [...text]; const palette = VARIANTS[variant] ?? VARIANTS.calamansi; return ( {`${prefix ?? ""}${text}${suffix ?? ""}`} {prefix} {characters.map((character, index) => ( // keyed from the right so the ones column stays put as the number grows ))} {suffix} ); } function DigitColumn({ character, duration, delay, direction, }: { character: string; duration: number; delay: number; direction: "up" | "down"; }) { if (!/\d/.test(character)) { return {character}; } const strip = direction === "down" ? DIGITS_DOWN : DIGITS_UP; const digit = Number(character); // the strip is ten rows tall, so 10% of its own height is exactly one row const offset = (direction === "down" ? 9 - digit : digit) * 10; return ( {strip.map((row) => ( {row} ))} ); } 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"}]]}]}],["$","li","figma-squircle",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/figma-squircle","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":"figma-squircle"}]]}]}],["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/number-ticker.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]