{
  "name": "SubNavItem",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SubNavItem.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Single sub-nav item — anchor element with optional icon, label, and\ncount chip. Rendered as `<a>` so consumers can route via plain `href`,\na routing library's `<Link>` slot via `as`/`render` prop patterns, or\n`onClick` for SPA navigation. ARIA: pass `aria-current=\"page\"`\nalongside `active` for screen readers.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SubNavItem",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SubNavItemProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SubNavItem } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "glyph",
      "optional": true,
      "type": "ReactNode",
      "doc": "Icon slot — typically an inline `<svg>` sized to 14×14 using `stroke=\"currentColor\"` so it tints with the item's text colour."
    },
    {
      "name": "count",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional count chip rendered after the label (e.g. unread / open count). Renders inside `.sub-nav-item-count` which flips to paper-on-accent when the item is active."
    },
    {
      "name": "active",
      "optional": true,
      "type": "boolean",
      "doc": "Highlights the item with the kit's accent-soft fill + 3px accent left-stripe. Use for the currently-selected sub-page."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Item label — typically a string but `ReactNode` for icon-inline cases."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "page",
    "sub-nav-item",
    "sub-nav-item-count",
    "sub-nav-item-glyph"
  ],
  "examples": {
    "react": "<SubNavItem\n  glyph={<svg viewBox=\"0 0 14 14\">…</svg>}\n  count={12}\n  active\n  href=\"/library/tasks\"\n  aria-current=\"page\"\n>\n  Tasks\n</SubNavItem>",
    "html": null,
    "css": ".page {\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 var(--s-7);\n}\n\n.sub-nav-item {\n  position: relative;\n  display: grid;\n  grid-template-columns: 16px 1fr auto;\n  align-items: center; gap: 10px;\n  padding: 7px var(--s-3); border-radius: var(--r-sm);\n  font: 500 13px/1 var(--f-body); color: var(--fg-soft);\n  text-decoration: none; cursor: pointer;\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);\n}\n\n.sub-nav-item-count {\n  font: 600 10px/1 var(--f-mono); color: var(--fg-faint);\n  background: var(--bg); padding: 3px 6px; border-radius: 4px;\n}\n\n.sub-nav-item-glyph {\n  width: 16px; height: 16px; opacity: 0.85;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: currentColor;\n  flex-shrink: 0;\n}"
  }
}