4e: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"] 4f: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"] 50:T1ae5,import type { ComponentProps, ReactNode } from "react"; import { cn } from "@/registry/default/lib/utils"; import { NumberTicker } from "@/registry/default/ui/number-ticker"; import { Stat, StatCaption, StatGroup, StatLabel, StatValue, type StatTrend, } from "@/registry/default/ui/stat"; interface StatsItem { /** Stable React key. Falls back to the index. */ id?: string; label: ReactNode; /** A number counts up when it scrolls into view; anything else renders as is. */ value: number | ReactNode; /** Shown before the value, outside the counting number ("$"). */ prefix?: ReactNode; /** Shown after the value, outside the counting number ("+", "%"). */ suffix?: ReactNode; /** `Intl.NumberFormat` options for a numeric value: compact notation, digits, currency… */ format?: Intl.NumberFormatOptions; /** A note under the value: a comparison, a period. */ caption?: ReactNode; /** Adds an arrow for the direction of change next to the caption. */ trend?: StatTrend; } type StatsVariant = "plain" | "cards"; interface StatsProps extends Omit, "title"> { /** Small line above the title; pass `null` to hide it. */ eyebrow?: ReactNode; /** Section title, rendered in an `

`. */ title?: ReactNode; description?: ReactNode; stats?: StatsItem[]; /** Plain figures, or each figure in a bordered box. */ variant?: StatsVariant; /** Locale for numeric values. Defaults to the one NumberTicker uses. */ locale?: string; /** Read to screen readers before a caption with a trend, since the arrow is only a picture. */ trendLabels?: Partial>; } const defaultTrendLabels: Record = { up: "Increase", down: "Decrease", flat: "No change", }; const defaultStats: StatsItem[] = [ { id: "teams", label: "Teams on Acme", value: 12000, suffix: "+", caption: "18% more than last year", trend: "up", }, { id: "uptime", label: "Uptime", value: 99.9, suffix: "%", caption: "Over the last 12 months" }, { id: "requests", label: "Requests a day", value: 150, suffix: "M", caption: "Handled across 30 regions", }, { id: "response", label: "Median response", value: 42, suffix: " ms", caption: "Measured at the edge", }, ]; /** * A row of key figures under an optional centred header. Built on * StatGroup and Stat, so each value is read together with its label (a * description list). `` renders four example figures. * * A numeric `value` uses NumberTicker: it counts up once when it scrolls * into view and shows the final value at once with `prefers-reduced-motion`. * `prefix` and `suffix` sit outside the counting number; `format` and * `locale` control how the number is written. Any other value (a string, * an element) renders as is. Two columns on mobile, four on large screens; * `variant="cards"` puts each figure in a bordered box. The variant is * exposed as `data-variant`. * * Accessibility: screen readers only hear the final number, never the * moving digits. Trend arrows are hidden and replaced by `trendLabels`. * * @example * */ function Stats({ eyebrow = "By the numbers", title = "Trusted by teams that move fast", description = "Acme runs quietly in the background while thousands of teams ship every day.", stats = defaultStats, variant = "plain", locale, trendLabels, className, ...props }: StatsProps) { const hasHeader = eyebrow != null || title != null || description != null; const labels = { ...defaultTrendLabels, ...trendLabels }; return (

{hasHeader ? (
{eyebrow != null ? (
{eyebrow}
) : null} {title != null ? (
{title}
) : null} {description != null ? (
{description}
) : null}
) : null} {stats.map((stat, index) => ( {stat.label} {typeof stat.value === "number" ? ( <> {stat.prefix != null ? ( {stat.prefix} ) : null} {stat.suffix != null ? ( {stat.suffix} ) : null} ) : ( <> {stat.prefix} {stat.value} {stat.suffix} )} {stat.caption != null || stat.trend ? ( {stat.caption} ) : null} ))}

); } export { Stats, type StatsItem, type StatsProps, type StatsVariant }; 4d:["$","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":[null,["$","$L4e",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/stat","@corsair-ui/number-ticker"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/default/components/blocks/stats.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]