{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-stats",
  "title": "Item stats",
  "description": "The Destiny stat block: an aligned grid of right-labeled stat rows.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/cn",
    "@engram/segmented-bar",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/item-stats.tsx",
      "content": "import type { StatProps, ItemStatsProps as StatsData } from \"@engram/core\";\nimport { Fragment } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { SegmentedBar } from \"./segmented-bar.js\";\n\nexport interface ItemStatsProps extends StatsData {\n  className?: string;\n  /** Bar fill color (any CSS color / token var). */\n  color?: string;\n}\n\nconst BAR_COLOR = \"var(--engram-bar)\";\n\n/**\n * The Destiny stat block: an aligned grid of right-labeled stat rows. Bar stats\n * show a segmented bar + value; numeric stats (`bar: false`) show just the value\n * (RPM, Magazine, Charge Time), with the bar column left empty.\n */\nexport function ItemStats({\n  stats,\n  total,\n  className,\n  color = BAR_COLOR,\n}: ItemStatsProps) {\n  // When some rows are emphasized (an armor archetype's primary/secondary\n  // stats), the others read dimmer — matching the in-game stat block.\n  const hasEmphasis = stats.some((s) => s.emphasized);\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-[max-content_1fr_max-content] items-center gap-x-3 gap-y-2\",\n        className,\n      )}\n    >\n      {stats.map((stat) => (\n        <StatRow\n          key={stat.hash}\n          stat={stat}\n          color={color}\n          dim={hasEmphasis && !stat.emphasized}\n        />\n      ))}\n      {total != null ? (\n        <>\n          <span className=\"text-right font-engram-display font-semibold text-[11px] text-engram-muted uppercase tracking-[0.04em]\">\n            Total\n          </span>\n          <span aria-hidden />\n          <span className=\"text-right font-engram-display font-bold text-[13px] text-engram-fg tabular-nums\">\n            {total}\n          </span>\n        </>\n      ) : null}\n    </div>\n  );\n}\n\nfunction StatRow({\n  stat,\n  color,\n  dim,\n}: {\n  stat: StatProps;\n  color: string;\n  dim: boolean;\n}) {\n  const numeric = stat.bar === false;\n  const display =\n    stat.sign && stat.value > 0 ? `+${stat.value}` : `${stat.value}`;\n  return (\n    <Fragment>\n      <span\n        className={cn(\n          \"text-right font-engram-display text-[11px] uppercase tracking-[0.04em]\",\n          stat.emphasized\n            ? \"font-bold text-engram-fg\"\n            : \"font-semibold text-engram-muted\",\n        )}\n      >\n        {stat.name}\n      </span>\n      {numeric ? (\n        <span aria-hidden />\n      ) : (\n        <SegmentedBar\n          value={stat.value}\n          max={stat.max ?? 100}\n          color={color}\n          glow={false}\n          className=\"h-3\"\n        />\n      )}\n      <span\n        className={cn(\n          \"text-right font-engram-display font-bold text-[13px] tabular-nums\",\n          dim ? \"text-engram-muted\" : \"text-engram-fg\",\n        )}\n      >\n        {display}\n      </span>\n    </Fragment>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/item-stats.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": [
    "item"
  ],
  "type": "registry:component"
}