{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "band",
  "title": "Band",
  "description": "A section band: a flat raised bar with a left accent edge, an uppercase tracked title, and an optional right-aligned count — Destiny's in-game content-section divider.",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/band.tsx",
      "content": "import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface BandProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  /** Right-aligned count / hint (e.g. \"04\" or `<><b>3</b> / 3</>`). */\n  count?: ReactNode;\n  /**\n   * Left-edge accent color. Defaults to the accent token; pass a team/faction\n   * color for scoreboard sections (e.g. `var(--engram-class-titan)` red).\n   */\n  accent?: string;\n}\n\n/**\n * A section band: a flat raised bar with a left accent edge, an uppercase\n * tracked title, and an optional right-aligned count — Destiny's in-game\n * content-section divider. The `accent` recolors the left edge for team /\n * faction sections. Layout-neutral (no margins); the caller spaces it.\n */\nexport function Band({\n  title,\n  count,\n  accent,\n  className,\n  style,\n  ...props\n}: BandProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-4 border-engram-accent border-l-[3px] bg-engram-raised-2 px-4 py-2.5\",\n        className,\n      )}\n      style={accent ? { borderLeftColor: accent, ...style } : style}\n      {...props}\n    >\n      <h2 className=\"font-engram-display font-bold text-[15px] text-engram-fg uppercase tracking-[0.14em]\">\n        {title}\n      </h2>\n      {count != null ? (\n        <span className=\"font-engram-display font-semibold text-engram-muted text-xs tabular-nums tracking-[0.08em]\">\n          {count}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/band.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": [
    "layout"
  ],
  "type": "registry:component"
}