{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "title": "StatCard",
  "description": "Label, big value, sub; stacked or row layout.",
  "registryDependencies": [
    "@jbm/tokens",
    "@jbm/card"
  ],
  "files": [
    {
      "path": "registry/jbm/ui/stat-card.tsx",
      "content": "import * as React from \"react\";\nimport { Card } from \"./card\";\nimport { color, font } from \"../lib/tokens\";\n\n/**\n * One number and its context: mono label, huge value, one-line sub.\n * `row` lays label/value/sub side by side (vertical stage); default stacks them (landscape stage).\n */\nexport function StatCard({ label, value, sub, valueColor = color.accent, w = 520, h = 300, row = false, style }: { label: string; value: React.ReactNode; sub?: string; valueColor?: string; w?: number; h?: number; row?: boolean; style?: React.CSSProperties }) {\n  const Value = <div style={{ fontFamily: font.sans, fontSize: row ? 84 : 96, fontWeight: 800, color: valueColor, letterSpacing: -3, lineHeight: 1, marginTop: row ? 0 : 10, width: row ? 400 : undefined }}>{value}</div>;\n  const Text = (\n    <div>\n      <div style={{ fontFamily: font.mono, fontSize: 22, color: color.dim }}>{label}</div>\n      {sub ? <div style={{ fontFamily: font.sans, fontSize: row ? 28 : 30, color: row ? color.ink : color.dim, lineHeight: 1.25, marginTop: row ? 0 : 6 }}>{sub}</div> : null}\n    </div>\n  );\n  return (\n    <Card style={{ width: w, height: h, ...(row ? { padding: \"22px 34px\", display: \"flex\", alignItems: \"center\", gap: 30 } : {}), ...style }}>\n      {row ? (<>{Value}{Text}</>) : (<>\n        <div style={{ fontFamily: font.mono, fontSize: 22, color: color.dim }}>{label}</div>\n        {Value}\n        {sub ? <div style={{ fontFamily: font.sans, fontSize: 30, color: color.dim }}>{sub}</div> : null}\n      </>)}\n    </Card>\n  );\n}\n",
      "type": "registry:ui",
      "target": "src/jbm/ui/stat-card.tsx"
    }
  ],
  "type": "registry:ui"
}