{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tab-bar",
  "title": "Tab bar",
  "description": "Horizontal tab strip with a bottom hairline (Destiny FUI director nav).",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/tab-bar.tsx",
      "content": "import type { ButtonHTMLAttributes, HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface TabBarProps extends HTMLAttributes<HTMLDivElement> {}\n\n/** Horizontal tab strip with a bottom hairline (Destiny FUI director nav). */\nexport function TabBar({ className, ...props }: TabBarProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\n        \"flex items-stretch gap-1 border-engram-border border-b\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  active?: boolean;\n}\n\n/** A single tab; the active tab is white with a glowing underline that expands\n *  in from the center (the Destiny director-nav indicator). */\nexport function Tab({ className, active = false, ...props }: TabProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={active}\n      className={cn(\n        \"relative px-4 py-2.5 font-engram-display font-semibold text-[13px] text-engram-muted uppercase tracking-[0.14em] transition-colors hover:text-engram-fg\",\n        \"aria-selected:text-engram-fg\",\n        // Underline always present; scaled from the center so it animates in/out.\n        \"after:absolute after:inset-x-3 after:bottom-[7px] after:h-0.5 after:origin-center after:scale-x-0 after:bg-engram-fg after:shadow-[0_0_9px_rgba(255,255,255,0.55)] after:transition-transform after:duration-200 motion-reduce:after:transition-none\",\n        \"aria-selected:after:scale-x-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/tab-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": [
    "interaction"
  ],
  "type": "registry:component"
}