{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "title": "Stat card",
  "description": "A KPI tile: a small label, a big headline value, and an optional period delta (green up / red down).",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/stat-card.tsx",
      "content": "import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport type StatCardTone = \"neutral\" | \"accent\" | \"gold\" | \"ok\" | \"bad\";\n\nconst TONE_COLOR: Record<StatCardTone, string> = {\n  neutral: \"var(--engram-fg)\",\n  accent: \"var(--engram-accent-2)\",\n  gold: \"var(--engram-gold)\",\n  ok: \"var(--engram-ok)\",\n  bad: \"var(--engram-bad)\",\n};\n\nexport interface StatCardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"color\"> {\n  /** What the number measures (e.g. \"K/D\", \"Win Rate\", \"Kills\"). */\n  label: ReactNode;\n  /** The headline value (pre-formatted). */\n  value: ReactNode;\n  /** Signed change vs the prior period — colored up=ok / down=bad with an arrow. */\n  delta?: number;\n  /** Unit appended to the delta (e.g. \"%\"). */\n  deltaSuffix?: string;\n  /** Small icon/glyph in the corner. */\n  icon?: ReactNode;\n  /** Color the headline value. Default neutral. */\n  tone?: StatCardTone;\n}\n\n/**\n * A KPI tile: a small label, a big headline value, and an optional period delta\n * (green up / red down). The atom behind PGCR stat blocks, PvP dashboards, and\n * any metric summary; group several in a {@link StatCardGrid}.\n */\nexport function StatCard({\n  label,\n  value,\n  delta,\n  deltaSuffix = \"\",\n  icon,\n  tone = \"neutral\",\n  className,\n  ...props\n}: StatCardProps) {\n  const hasDelta = delta != null && delta !== 0;\n  const up = (delta ?? 0) > 0;\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-1 border border-engram-border bg-engram-raised p-3\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span className=\"font-engram-display text-[10px] text-engram-faint uppercase tracking-engram-label\">\n          {label}\n        </span>\n        {icon ? (\n          <span className=\"ml-auto text-engram-muted\">{icon}</span>\n        ) : null}\n      </div>\n      <div className=\"flex items-baseline gap-2\">\n        <span\n          className=\"font-engram-display font-bold text-2xl leading-none tabular-nums\"\n          style={{ color: TONE_COLOR[tone] }}\n        >\n          {value}\n        </span>\n        {hasDelta ? (\n          <span\n            className={cn(\n              \"font-engram-display font-semibold text-xs tabular-nums\",\n              up ? \"text-engram-ok\" : \"text-engram-bad\",\n            )}\n          >\n            {up ? \"▲\" : \"▼\"} {Math.abs(delta ?? 0)}\n            {deltaSuffix}\n          </span>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/stat-card.tsx"
    }
  ],
  "meta": {
    "level": "component"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "stats"
  ],
  "type": "registry:component"
}