{
  "name": "PaneTab",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PaneTab.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "A single tab inside `PaneTabs`. Reads active state from context; clicking\n(or arrow-key activation) selects it.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PaneTab",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PaneTabProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PaneTab } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": false,
      "type": "string",
      "doc": "Identifies the tab — matched against `PaneTabs`' active value."
    },
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Leading glyph, hidden from a11y."
    },
    {
      "name": "count",
      "optional": true,
      "type": "number",
      "doc": "Optional trailing count chip."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "Tab label."
    }
  ],
  "classesUsed": [
    "ab-pane-tab",
    "tab"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".ab-pane-tab {\n  font: 500 13px/1 var(--f-body); color: var(--fg-soft);\n  padding: var(--s-3) 0; background: transparent; border: 0;\n  border-bottom: 2px solid transparent; cursor: pointer;\n  display: inline-flex; align-items: center; gap: 6px;\n  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);\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}"
  }
}