{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "type": "registry:ui",
  "title": "Stat card",
  "description": "React stat card with a label, optional icon, a large tabular value and a delta chip colored by its sign, with invertDelta for metrics like churn or latency.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/stat-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/stat-card.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction deltaTone(delta: React.ReactNode) {\n  if (typeof delta !== \"string\") return \"neutral\"\n  const s = delta.trim()\n  if (s.startsWith(\"+\") || s.startsWith(\"▲\")) return \"up\"\n  if (s.startsWith(\"-\") || s.startsWith(\"−\") || s.startsWith(\"▼\")) return \"down\"\n  return \"neutral\"\n}\n\n/** StatCard — label, a big tabular value, and a delta chip that colours itself. */\nfunction StatCard({\n  label,\n  value,\n  delta,\n  icon,\n  footnote,\n  invertDelta,\n  className,\n}: {\n  label: React.ReactNode\n  value: React.ReactNode\n  delta?: React.ReactNode\n  icon?: React.ReactNode\n  footnote?: React.ReactNode\n  /** For metrics where down is good (churn, latency). */\n  invertDelta?: boolean\n  className?: string\n}) {\n  let tone = deltaTone(delta)\n  if (invertDelta && tone !== \"neutral\") tone = tone === \"up\" ? \"down\" : \"up\"\n  return (\n    <div data-slot=\"stat-card\" className={cn(\"rounded-xl border border-border bg-surface p-4 shadow-raised\", className)}>\n      <div className=\"flex items-center gap-2 text-[0.8125rem] text-fg-muted\">\n        {icon ? <span className=\"text-fg-subtle [&_svg]:size-3.5\">{icon}</span> : null}\n        <span className=\"truncate\">{label}</span>\n      </div>\n      <div className=\"mt-2.5 flex items-baseline gap-2\">\n        <p className=\"text-2xl font-medium tracking-[-0.025em] tabular-nums text-fg\">{value}</p>\n        {delta ? (\n          <span\n            className={cn(\n              \"rounded-md px-1.5 py-0.5 text-[11px] font-medium tabular-nums\",\n              tone === \"up\" && \"bg-success/10 text-success\",\n              tone === \"down\" && \"bg-danger/10 text-danger\",\n              tone === \"neutral\" && \"bg-sunken text-fg-muted\"\n            )}\n          >\n            {delta}\n          </span>\n        ) : null}\n      </div>\n      {footnote ? <p className=\"mt-1.5 text-xs text-fg-subtle\">{footnote}</p> : null}\n    </div>\n  )\n}\nexport { StatCard }\n"
    }
  ]
}