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:T2bb6,import type { ElementType, MouseEvent } from "react"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { defaultDeltaFormat } from "./lib/format-default"; import { StatCardSparkline } from "./parts/sparkline"; import { DEFAULT_STAT_CARD_LABELS, type StatCardDelta, type StatCardLabels, type StatCardProps, type StatCardVariant, } from "./types"; type DeltaTone = "good" | "bad" | "neutral"; type DeltaDirection = "up" | "down" | "neutral"; function deltaDirection(value: number): DeltaDirection { if (value > 0) return "up"; if (value < 0) return "down"; return "neutral"; } function deltaTone(direction: DeltaDirection, betterIsHigher: boolean): DeltaTone { if (direction === "neutral") return "neutral"; if (direction === "up") return betterIsHigher ? "good" : "bad"; return betterIsHigher ? "bad" : "good"; } // pro-ui doesn't ship a dedicated `--success` token; using `text-chart-2` // (calibrated green-leaning hue from the existing chart palette) for the // "good" tone keeps the component themable via existing tokens. Consumers // who want a custom green pass `deltaClassName`. const TONE_CLASSES: Record = { good: "text-chart-2", bad: "text-destructive", neutral: "text-muted-foreground", }; interface DeltaRowProps { delta: StatCardDelta; labels: Required; className?: string; } function DeltaRow({ delta, labels, className }: DeltaRowProps) { const dir = deltaDirection(delta.value); const tone = deltaTone(dir, delta.betterIsHigher ?? true); const formatted = (delta.format ?? defaultDeltaFormat)(delta.value); const period = delta.period ?? labels.deltaPeriod; const srLabel = dir === "up" ? labels.increaseLabel : dir === "down" ? labels.decreaseLabel : null; return (

{formatted} {srLabel ? {srLabel} : null} {labels.deltaPrefix} {period}

); } interface VariantSpec { /** Outer card padding + min-height (skeleton match). */ padding: string; minHeight: string; /** Value text size. */ valueSize: string; labelSize: string; /** Whether sparkline renders for this variant. */ showSparkline: boolean; /** Default sparkline height in px (only used when sparkline renders). */ sparklineHeight: number; /** Icon container size. */ iconBoxSize: string; iconSize: string; } const VARIANT_SPEC: Record = { default: { padding: "p-5", minHeight: "min-h-[7.5rem]", valueSize: "text-2xl font-bold", labelSize: "text-sm", showSparkline: true, sparklineHeight: 28, iconBoxSize: "h-9 w-9 rounded-md bg-muted", iconSize: "h-4 w-4", }, compact: { padding: "p-4", minHeight: "min-h-[5rem]", valueSize: "text-xl font-semibold", labelSize: "text-xs", showSparkline: false, sparklineHeight: 0, iconBoxSize: "h-8 w-8 rounded-md bg-muted", iconSize: "h-4 w-4", }, detailed: { padding: "p-6", minHeight: "min-h-[10rem]", valueSize: "text-3xl font-bold", labelSize: "text-sm", showSparkline: true, sparklineHeight: 36, iconBoxSize: "h-11 w-11 rounded-lg bg-primary/10", iconSize: "h-5 w-5 text-primary", }, }; // Per-variant skeleton block sizes — hardcoded rather than derived from // VARIANT_SPEC to avoid string-replace surgery on iconBoxSize (which contained // `bg-primary/10` in the detailed variant, conflicting with Skeleton's own // pulse-animation styling). See v0.1.0 review F-02. const SKELETON_SIZES: Record< StatCardVariant, { iconBox: string; value: string; sparkline: string } > = { default: { iconBox: "h-9 w-9 rounded-md", value: "h-7 w-24", sparkline: "h-7 w-full" }, compact: { iconBox: "h-8 w-8 rounded-md", value: "h-6 w-20", sparkline: "h-7 w-full" }, detailed: { iconBox: "h-11 w-11 rounded-lg", value: "h-9 w-32", sparkline: "h-9 w-full" }, }; function StatCardSkeleton({ variant, labels, className, }: { variant: StatCardVariant; labels: Required; className?: string; }) { const spec = VARIANT_SPEC[variant]; const sk = SKELETON_SIZES[variant]; return ( // aria-busy on a generic div is sufficient — no role="region" (which // would require an accessible name we can't supply when loadingLabel // is a ReactNode). The sr-only span provides the spoken announcement. // See v0.1.0 review F-01.

{labels.loadingLabel}

{spec.showSparkline ? : null}

); } interface IconBlockProps { spec: VariantSpec; Icon: NonNullable; } function IconBlock({ spec, Icon }: IconBlockProps) { return (

); } export function StatCard(props: StatCardProps) { const { value, label, variant = "default", delta, trend, renderTrend, icon: Icon, iconPosition = "leading", formatValue, renderValue, href, linkComponent, onClick, loading = false, labels: labelsProp, className, valueClassName, labelClassName, deltaClassName, ariaLabel, } = props; const labels: Required = { ...DEFAULT_STAT_CARD_LABELS, ...labelsProp, }; if (loading) { return ( ); } const spec = VARIANT_SPEC[variant]; // Resolve the value cell's content. Priority: renderValue > formatValue > raw. // value === undefined renders the empty-state placeholder. const isEmpty = value === undefined; const valueNode = isEmpty ? labels.emptyValueLabel : renderValue ? renderValue({ value, loading: false }) : formatValue ? formatValue(value) : String(value); // Trend rendering — only when the variant shows it AND data exists. let trendNode: React.ReactNode = null; if (spec.showSparkline) { if (renderTrend && trend) { trendNode = renderTrend({ data: trend, variant }); } else if (trend && trend.length >= 2) { trendNode = ( ); } } const showIconLeading = Icon && iconPosition === "leading"; const showIconTrailing = Icon && iconPosition === "trailing"; // Body — same shape across variants; spacing differs via spec. const body = ( <> {/* Top row: label + (trailing icon) */}

{label}

{showIconTrailing && Icon ? : null}

{/* Middle row: leading icon + big value */}

{showIconLeading && Icon ? : null}

{valueNode}

{/* Delta row */} {delta ? (

) : null} {/* Trend / sparkline */} {trendNode ? (

{trendNode}

) : null} ); // Linked variant — overlay-link pattern.

is the semantic root; the // covers it for click capture and gets the focus ring. if (href) { const LinkComponent: ElementType = linkComponent ?? "a"; const handleClick = onClick ? (event: MouseEvent) => onClick({ event }) : undefined; // Resolve the link's accessible name. Priority: // 1. Consumer-supplied `ariaLabel` — wins absolutely. // 2. `${label}: ${value}` — when both are stringifiable. // 3. `${label}` only — when label is stringifiable but value isn't // (notably value === undefined). v0.1.1 fix per review F-03 — the // v0.1.0 implementation fell through to undefined here, leaving // a linked card with no accessible name. // 4. undefined — when the label itself is a ReactNode and not a // string. Consumer should supply ariaLabel explicitly in that case. const computedAriaLabel = ariaLabel ?? (typeof label === "string" ? typeof value === "string" || typeof value === "number" ? `${label}: ${value}` : label : undefined); return (

{body}

); } // Pure-display variant — no link wrapper, no focus ring. return (

{body} ); } export default StatCard; 51:T1c58,import type { ComponentType, ElementType, MouseEvent, ReactNode } from "react"; /** Visual variant. Default: 'default'. */ export type StatCardVariant = "default" | "compact" | "detailed"; /** Lucide-style icon prop. */ export type StatCardIcon = ComponentType<{ className?: string }>; /** Position for the optional icon. Default: 'leading'. */ export type StatCardIconPosition = "leading" | "trailing"; /** * Delta payload — change since some prior period. Object-shape; * F-cross-12 lessons applied at construction. */ export interface StatCardDelta { /** * Signed number representing the change. **Convention: a fraction in 0–1 * range representing a percentage** (`0.124` = +12.4%, `-0.08` = −8.0%). * The default `format` callback assumes this convention and renders via * `Intl.NumberFormat` with `style: "percent"`. For absolute counts * ("+1,240 users") or other units, override `format`. */ value: number; /** * Custom formatter. Default: locale-aware * `Intl.NumberFormat(undefined, { style: "percent", maximumFractionDigits: 1, signDisplay: "exceptZero" })` * → produces `+12.4%` / `−8.0%` / `0%`. Override for non-percentage units. */ format?: (value: number) => string; /** * "Is up good?" — default `true`. Set `false` for cost / error metrics * where ↑ is bad (colors the upward delta red instead of green). */ betterIsHigher?: boolean; /** * Optional period label rendered after the formatted delta value * (e.g. "vs last 30 days", "since Tuesday", "from peak"). ReactNode — * consumer owns the copy. Default: `labels.deltaPeriod` ("last period"). */ period?: ReactNode; } /** Localized labels — defaults English. */ export interface StatCardLabels { /** Default: 'vs'. Rendered between formatted delta value and period text. */ deltaPrefix?: ReactNode; /** Default: 'last period'. Used as `delta.period` fallback when none supplied. */ deltaPeriod?: ReactNode; /** Default: 'Loading metric…'. Visually-hidden announcement on the loading skeleton. */ loadingLabel?: ReactNode; /** Default: 'increase'. Visually-hidden screen-reader text for positive deltas. */ increaseLabel?: ReactNode; /** Default: 'decrease'. Visually-hidden screen-reader text for negative deltas. */ decreaseLabel?: ReactNode; /** Default: '—'. Rendered at value position when `value === undefined`. */ emptyValueLabel?: ReactNode; } /** Render-slot context for `renderValue`. */ export interface StatCardValueContext { value: number | string; /** True when this is the value rendered inside the loading skeleton (consumer-side rare). */ loading: boolean; } /** Render-slot context for `renderTrend` (escape hatch for non-default chart shapes). */ export interface StatCardTrendContext { data: ReadonlyArray; variant: StatCardVariant; } export interface StatCardProps { // ─── Required ──────────────────────────────────────────────────── /** Big number. Pass primitive (formatted via `formatValue`) or any ReactNode via `renderValue`. */ value: number | string | undefined; /** What this number is. Required. */ label: ReactNode; // ─── Variant ───────────────────────────────────────────────────── /** Visual variant. Default: 'default'. */ variant?: StatCardVariant; // ─── Delta ─────────────────────────────────────────────────────── /** Optional delta payload. Absent → delta row not rendered. */ delta?: StatCardDelta; // ─── Trend / sparkline ─────────────────────────────────────────── /** * Sparkline data — equal-spaced numeric values. Default rendering: pure-SVG * single-line chart (no charting peer dep). Empty array or single point → no * chart (graceful skip). Cap at 100 points (sampled if more). */ trend?: ReadonlyArray; /** Full-takeover render slot for trend visualization (e.g., bars, dual-axis). Receives raw data. */ renderTrend?: (ctx: StatCardTrendContext) => ReactNode; // ─── Icon ──────────────────────────────────────────────────────── /** Optional decorative icon. Lucide-style component. */ icon?: StatCardIcon; /** Position for the icon. Default: 'leading'. */ iconPosition?: StatCardIconPosition; // ─── Formatters / slots ────────────────────────────────────────── /** Format the big value for display. Default: `String(value)` (no formatting). */ formatValue?: (value: number | string) => ReactNode; /** Full-takeover slot for the value cell (overrides `formatValue`). */ renderValue?: (ctx: StatCardValueContext) => ReactNode; // ─── Linking (overlay-link pattern) ────────────────────────────── /** URL the card links to. Pairs with `linkComponent`. */ href?: string; /** Element used for the link wrapper. Default: 'a'. */ linkComponent?: ElementType; /** * Click handler — F-cross-12-shape (object). Fired before navigation if * `href` is also set. */ onClick?: (args: { event: MouseEvent }) => void; // ─── Loading / empty states ────────────────────────────────────── /** When true, renders a skeleton at the same shape as the loaded card. */ loading?: boolean; // ─── i18n ──────────────────────────────────────────────────────── labels?: StatCardLabels; // ─── Theming / overrides ───────────────────────────────────────── /** Override classes for the root

/ . */ className?: string; /** Override classes for the value cell. */ valueClassName?: string; /** Override classes for the label cell. */ labelClassName?: string; /** Override classes for the delta row. */ deltaClassName?: string; // ─── Accessibility ─────────────────────────────────────────────── /** * Override the link's accessible name. Default: derived from * `${label}: ${formatted-value}`. Only used when `href` is set. */ ariaLabel?: string; } /** Default English labels — exported for consumer composition. */ export const DEFAULT_STAT_CARD_LABELS: Required = { deltaPrefix: "vs", deltaPeriod: "last period", loadingLabel: "Loading metric…", increaseLabel: "increase", decreaseLabel: "decrease", emptyValueLabel: "—", }; 52:T9ef,/** * Pure-SVG single-line sparkline. Sibling export of stat-card; consumers can * use it standalone via ``. * * Server-renderable (no state, no client). aria-hidden — the meaningful * summary belongs to the surrounding label/value/delta context. */ import { cn } from "@/lib/utils"; export interface StatCardSparklineProps { /** Equal-spaced numeric values. */ data: ReadonlyArray; /** Default: 32. SVG viewBox height; visual height controlled by className. */ height?: number; /** Default: 96. SVG viewBox width; visual width controlled by className. */ width?: number; /** Default: `currentColor` (inherits parent text color). */ strokeColor?: string; /** Default: 1.5. */ strokeWidth?: number; /** Tailwind classes for the wrapping