{
  "name": "LinkTabs",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/LinkTabs.tsx",
  "chapterTag": "06 Navigation",
  "chapter": "07-navigation.html",
  "sectionId": "link-tabs",
  "elName": "Cross-route nav",
  "demoUrl": "https://brand.magicblocks.ai/components/07-navigation#link-tabs",
  "hasLiveDemo": false,
  "description": "Cross-route tabs — `<NavLink>`-driven sibling of `<Tabs>`. Each tab is\na real link; the active state is whatever the consumer's link primitive\napplies (RR7 NavLink: `.active` + `aria-current=\"page\"`).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "LinkTabs",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "LinkTabsProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "LinkTabItem",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { LinkTabs } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "ariaLabel",
      "optional": false,
      "type": "string",
      "doc": "Required — labels the `<nav>` for assistive tech."
    },
    {
      "name": "linkAs",
      "optional": true,
      "type": "ElementType",
      "doc": "Link component used to render each tab. Default `\"a\"`. Pass RR7's `NavLink` (or any router's `NavLink`-equivalent) to get automatic active-state styling — the kit styles `.tab.active` AND `.tab[aria-current=\"page\"]`, both of which RR7 NavLink applies when the URL matches."
    },
    {
      "name": "items",
      "optional": false,
      "type": "LinkTabItem[]",
      "doc": "Tab entries, in render order."
    }
  ],
  "classesUsed": [
    "page",
    "tab",
    "tab-count",
    "tabs",
    "tabs-link"
  ],
  "examples": {
    "react": "import { NavLink } from \"react-router-dom\";",
    "html": "<nav role=\"navigation\" aria-label=\"Knowledge sections\" class=\"tabs tabs-link\"><a href=\"/knowledge/collections\" class=\"tab\">Collections<span class=\"tab-count\">12</span></a><a href=\"/knowledge/playbooks\" class=\"tab\">Sales playbooks</a></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.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-link { /* Link-list variant — active state is URL-driven via linkAs. v1.60.0. */ }"
  }
}