{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "character-stats",
  "title": "Character stats",
  "description": "The in-game character stat panel: one row per stat — just the stat glyph and a large value, no bars or labels (Destiny shows the six as icon + number).",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/bungie-image",
    "@engram/cn",
    "@engram/item-hover-card",
    "@engram/stat-popup",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/character-stats.tsx",
      "content": "import type { StatPopupProps, StatProps } from \"@engram/core\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { BungieImage } from \"./bungie-image.js\";\nimport { ItemHoverCard } from \"./item-hover-card.js\";\nimport { StatPopup } from \"./stat-popup.js\";\n\n/** One character stat — its glyph + value (Weapons/Health/Class/Grenade/Super/\n *  Melee, or the classic Mobility/Resilience/…), plus optional hover-tooltip\n *  data rendered as a {@link StatPopup}. */\nexport type CharacterStatItem = StatProps & {\n  /** Inspect tooltip revealed on hover — the in-game stat flyout. */\n  popup?: StatPopupProps;\n};\n\nexport interface CharacterStatsProps {\n  stats: CharacterStatItem[];\n  /** Which side the stat glyph sits on. `\"right\"` = value then glyph — the\n   *  in-game character sheet (default). `\"left\"` = glyph then value — the\n   *  subclass screen. */\n  iconSide?: \"left\" | \"right\";\n  /** Content below a hairline divider — e.g. the equipped subclass emblem or\n   *  ability-cooldown readouts, as on the in-game panel. */\n  footer?: ReactNode;\n  className?: string;\n}\n\n/**\n * The in-game character stat panel: one row per stat — just the stat glyph and a\n * large value, no bars or labels (Destiny shows the six as icon + number). The\n * value column right-aligns so the numbers line up. A stat with `popup` data\n * reveals its {@link StatPopup} tooltip on hover/focus. An optional `footer`\n * sits below a short divider for the equipped subclass or ability cooldowns.\n */\nexport function CharacterStats({\n  stats,\n  iconSide = \"right\",\n  footer,\n  className,\n}: CharacterStatsProps) {\n  return (\n    <div className={cn(\"flex flex-col gap-3\", className)}>\n      {stats.map((stat) => {\n        // The hover trigger is already inline-flex; only the plain row needs\n        // its own display.\n        const rowClass = cn(\n          \"items-center gap-3\",\n          iconSide === \"left\" && \"flex-row-reverse\",\n        );\n        const row = (\n          <>\n            <span className=\"flex-1 text-right font-engram-display font-semibold text-[26px] text-engram-fg/85 tabular-nums leading-none\">\n              {stat.value}\n            </span>\n            {stat.icon ? (\n              <BungieImage\n                src={stat.icon}\n                alt={stat.name}\n                className=\"size-7 shrink-0 object-contain opacity-90\"\n              />\n            ) : (\n              <span aria-hidden className=\"size-7 shrink-0\" />\n            )}\n          </>\n        );\n        return stat.popup ? (\n          <ItemHoverCard\n            key={stat.hash}\n            popup={<StatPopup {...stat.popup} />}\n            className={rowClass}\n          >\n            {row}\n          </ItemHoverCard>\n        ) : (\n          <div key={stat.hash} className={cn(\"flex\", rowClass)}>\n            {row}\n          </div>\n        );\n      })}\n      {footer ? (\n        <>\n          <span\n            aria-hidden\n            className=\"mt-1 h-px w-8 self-center bg-engram-border-strong\"\n          />\n          <div className=\"self-center pt-1\">{footer}</div>\n        </>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/character-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": [
    "stats"
  ],
  "type": "registry:component"
}