{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-bar",
  "title": "Stat bar",
  "description": "A labeled stat row: name, segmented bar, and value (Destiny stat block).",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/cn",
    "@engram/segmented-bar",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/stat-bar.tsx",
      "content": "import type { StatProps } from \"@engram/core\";\nimport { cn } from \"../lib/cn.js\";\nimport { SegmentedBar } from \"./segmented-bar.js\";\n\nexport interface StatBarProps {\n  stat: StatProps;\n  /** Bar maximum; defaults to the stat's max, then 100. */\n  max?: number;\n  /** Fill color (any CSS color, e.g. a token var). Defaults to a light fill. */\n  color?: string;\n  className?: string;\n}\n\n/** A labeled stat row: name, segmented bar, and value (Destiny stat block). */\nexport function StatBar({\n  stat,\n  max,\n  color = \"var(--engram-bar)\",\n  className,\n}: StatBarProps) {\n  const resolvedMax = max ?? stat.max ?? 100;\n  return (\n    <div className={cn(\"flex items-center gap-3\", className)}>\n      <span className=\"w-24 shrink-0 text-right font-engram-display font-semibold text-[11px] text-engram-muted uppercase tracking-[0.08em]\">\n        {stat.name}\n      </span>\n      <SegmentedBar\n        value={stat.value}\n        max={resolvedMax}\n        color={color}\n        glow={false}\n        className=\"h-3 flex-1\"\n      />\n      <span className=\"w-7 text-right font-engram-display font-bold text-engram-fg text-sm tabular-nums\">\n        {stat.value}\n      </span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/stat-bar.tsx"
    }
  ],
  "meta": {
    "level": "atom"
  },
  "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"
}