{
  "name": "RoomTabs",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RoomTabs.tsx",
  "chapterTag": "06 Navigation",
  "chapter": "07-navigation.html",
  "sectionId": "room-tabs",
  "elName": "Room tabs",
  "demoUrl": "https://brand.magicblocks.ai/components/07-navigation#room-tabs",
  "hasLiveDemo": false,
  "description": "Top-of-page section tabs — designed for \"rooms across an entity surface\"\n(the agent builder's Overview / Persona / Knowledge / Journey / …).",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "RoomTabs",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RoomTabsProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "RoomTabsRoom",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { RoomTabs } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "ariaLabel",
      "optional": false,
      "type": "string",
      "doc": "Required — labels the `<nav>` for assistive tech."
    },
    {
      "name": "rooms",
      "optional": false,
      "type": "RoomTabsRoom[]",
      "doc": "Tab entries, in render order."
    },
    {
      "name": "current",
      "optional": false,
      "type": "string",
      "doc": "Currently active room id."
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(id: string) => void",
      "doc": "Fires when the user clicks (or activates via keyboard) a tab."
    },
    {
      "name": "trailing",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned slot — typically a kebab Button or an actions toolbar."
    },
    {
      "name": "sticky",
      "optional": true,
      "type": "boolean",
      "doc": "When true, sticks to the top of the scroll container via `position: sticky`. Default `false`."
    }
  ],
  "classesUsed": [
    "page",
    "tab",
    "tab-count",
    "tab-icon",
    "tabs",
    "tabs-rooms",
    "tabs-rooms-list",
    "tabs-rooms-sticky",
    "tabs-rooms-trailing"
  ],
  "examples": {
    "react": "<RoomTabs\n  ariaLabel=\"Agent builder rooms\"\n  rooms={[\n    { id: 'overview', label: 'Overview', icon: <OverviewIcon /> },\n    { id: 'journey', label: 'Journey', icon: <RouteIcon />, count: 4 },\n  ]}\n  current={current}\n  onChange={setCurrent}\n  trailing={<Button variant=\"ghost\">Hide test panel</Button>}\n  sticky\n/>",
    "html": "<nav role=\"navigation\" aria-label=\"Agent builder rooms\" class=\"tabs tabs-rooms\"><div role=\"tablist\" class=\"tabs-rooms-list\"><button type=\"button\" role=\"tab\" aria-selected=\"true\" aria-current=\"page\" tabindex=\"0\" class=\"tab is-active\"><span class=\"tab-label\">Overview</span></button><button type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" class=\"tab\"><span class=\"tab-label\">Persona</span></button><button type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" class=\"tab\"><span class=\"tab-label\">Journey</span><span class=\"tab-count\">4</span></button></div></nav>",
    "css": ".page {\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 var(--s-7);\n}\n\n.tab {\n  appearance: none; background: transparent; border: 0;\n  padding: 12px var(--s-4) 14px;\n  font: 500 13.5px/1 var(--f-body); color: var(--fg-dim);\n  cursor: pointer;\n  position: relative; white-space: nowrap;\n  transition: color var(--dur-2) var(--ease);\n  display: inline-flex; align-items: center; gap: var(--s-2);\n}\n\n.tab-count {\n  font-family: var(--f-mono); font-size: 11px; color: var(--fg-faint);\n  padding: 2px 6px; background: var(--bg-sunk); border-radius: var(--r-xs);\n}\n\n.tab-icon { display: inline-flex; align-items: center; margin-right: var(--s-2); color: inherit; }\n\n.tabs {\n  display: inline-flex; gap: 0;\n  border-bottom: 1px solid var(--hair);\n  width: 100%;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tabs-rooms { display: flex; align-items: center; }\n\n.tabs-rooms-list { display: inline-flex; gap: 0; flex: 1; }\n\n.tabs-rooms-sticky {\n  position: sticky; top: 0; z-index: 5;\n  background: var(--bg-paper);\n}\n\n.tabs-rooms-trailing { margin-left: auto; padding-left: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); }"
  }
}