{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/card.json"
  ],
  "files": [
    {
      "path": "stat-card.tsx",
      "target": "components/ui/stat-card.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Card,\n  CardBody,\n  type CardSurface,\n} from \"./card\";\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\nexport type StatTone = \"neutral\" | \"accent\" | \"accent-alt\";\n\nexport interface StatCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  unit?: React.ReactNode;\n  note?: React.ReactNode;\n  icon?: React.ReactNode;\n  trend?: StatTrend;\n  size?: \"sm\" | \"md\";\n  /** Blow the tile up to a hero stat: larger numeral, more presence. */\n  featured?: boolean;\n  /** Tints the border and colors the value. Defaults to neutral. */\n  tone?: StatTone;\n  /** How the tile sits on the page. Defaults to elevated. */\n  surface?: CardSurface;\n  spark?: React.ReactNode;\n}\n\nconst trendTone: Record<StatTrend, string> = {\n  up: \"text-success\",\n  down: \"text-danger\",\n  flat: \"text-muted\",\n};\n\nconst trendGlyph: Record<StatTrend, string> = {\n  up: \"↑\",\n  down: \"↓\",\n  flat: \"→\",\n};\n\nconst toneBorder: Record<StatTone, string> = {\n  neutral: \"\",\n  accent: \"border-accent/25\",\n  \"accent-alt\": \"border-accent-alt/25\",\n};\n\nconst toneValue: Record<StatTone, string> = {\n  neutral: \"text-ink\",\n  accent: \"text-accent\",\n  \"accent-alt\": \"text-accent-alt\",\n};\n\nexport const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      unit,\n      note,\n      icon,\n      trend,\n      size = \"md\",\n      featured,\n      tone = \"neutral\",\n      surface = \"elevated\",\n      spark,\n      ...props\n    },\n    ref,\n  ) => (\n    <Card\n      ref={ref}\n      highlight=\"wash\"\n      surface={surface}\n      className={cn(toneBorder[tone], className)}\n      {...props}\n    >\n      <CardBody\n        className={cn(featured ? \"p-6\" : size === \"sm\" ? \"p-4\" : \"p-5\")}\n      >\n        <div className=\"flex items-start justify-between gap-3\">\n          <span className=\"pt-0.5 font-mono text-[0.65rem] font-medium uppercase leading-none tracking-[0.16em] text-muted\">\n            {label}\n          </span>\n          {icon != null && (\n            <span\n              aria-hidden=\"true\"\n              className=\"-mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface-2 text-muted [&_svg]:h-3.5 [&_svg]:w-3.5\"\n            >\n              {icon}\n            </span>\n          )}\n        </div>\n\n        <div\n          className={cn(\n            \"flex items-baseline gap-1.5\",\n            featured ? \"mt-4\" : size === \"sm\" ? \"mt-2\" : \"mt-3\",\n          )}\n        >\n          <span\n            className={cn(\n              \"font-mono font-semibold leading-none tabular-nums tracking-tight\",\n              toneValue[tone],\n              featured\n                ? \"text-[clamp(2.5rem,5vw,3.5rem)]\"\n                : size === \"sm\"\n                  ? \"text-2xl\"\n                  : \"text-[2rem]\",\n            )}\n          >\n            {value}\n          </span>\n          {unit != null && (\n            <span className=\"font-mono text-sm text-muted\">{unit}</span>\n          )}\n        </div>\n\n        {(note != null || trend != null || spark != null) && (\n          <div className=\"mt-3 flex items-center justify-between gap-3\">\n            {(note != null || trend != null) && (\n              <span\n                className={cn(\n                  \"inline-flex items-center gap-1 font-mono text-[0.7rem] tabular-nums\",\n                  trend != null ? trendTone[trend] : \"text-muted\",\n                )}\n              >\n                {trend != null && (\n                  <span aria-hidden=\"true\">{trendGlyph[trend]}</span>\n                )}\n                {note}\n              </span>\n            )}\n            {spark != null && (\n              <div className=\"min-w-0 flex-1 text-accent [&>*]:w-full\">\n                {spark}\n              </div>\n            )}\n          </div>\n        )}\n      </CardBody>\n    </Card>\n  ),\n);\nStatCard.displayName = \"StatCard\";\n"
    }
  ]
}