{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "currency-bar",
  "title": "Currency bar",
  "description": "A row of account currencies/materials — the header strip showing Glimmer, Bright Dust, mats, etc. A thin wrapper that lays CostChips in a wrapping row; the consumer supplies the values from the profile's currency components.",
  "dependencies": [
    "@engram/core"
  ],
  "registryDependencies": [
    "@engram/cn",
    "@engram/cost-chip",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/currency-bar.tsx",
      "content": "import type { CostProps } from \"@engram/core\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { CostChip } from \"./cost-chip.js\";\n\nexport interface CurrencyBarProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** The currencies/materials to display (Glimmer, Legendary Shards, …). */\n  currencies: CostProps[];\n  /** Icon size for each chip (px). */\n  size?: number;\n}\n\n/**\n * A row of account currencies/materials — the header strip showing Glimmer,\n * Bright Dust, mats, etc. A thin wrapper that lays {@link CostChip}s in a wrapping\n * row; the consumer supplies the values from the profile's currency components.\n */\nexport function CurrencyBar({\n  currencies,\n  size = 16,\n  className,\n  ...props\n}: CurrencyBarProps) {\n  return (\n    <div\n      className={cn(\"flex flex-wrap items-center gap-x-4 gap-y-1.5\", className)}\n      {...props}\n    >\n      {currencies.map((c) => (\n        <CostChip\n          key={c.name ?? `${c.icon?.path}-${c.amount}`}\n          {...c}\n          size={size}\n        />\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/currency-bar.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": [
    "inventory"
  ],
  "type": "registry:component"
}