{
  "name": "SettingsNavRail",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SettingsNavRail.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "settings-nav-rail",
  "elName": "Account-page nav rail",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#settings-nav-rail",
  "hasLiveDemo": false,
  "description": "Left-rail navigation primitive for settings pages. Groups items into labelled\nsections with optional icons + count badges. The active item gets\n`aria-current=\"page\"` and an accent highlight. Controlled via\n`activeKey`/`onActiveChange`, or drop-in with `defaultActiveKey`.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SettingsNavRail",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SettingsNavRailProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SettingsNavRailGroup",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SettingsNavRailItem",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { SettingsNavRail } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "page",
    "settings-nav-group",
    "settings-nav-group-items",
    "settings-nav-group-label",
    "settings-nav-item",
    "settings-nav-item-count",
    "settings-nav-item-icon",
    "settings-nav-item-label",
    "settings-nav-rail"
  ],
  "examples": {
    "react": "<SettingsNavRail\n  groups={[\n    { label: \"Account\", items: [\n      { key: \"profile\", label: \"Profile\" },\n      { key: \"api-keys\", label: \"API keys\", count: 3 },\n    ]},\n  ]}\n  defaultActiveKey=\"profile\"\n/>",
    "html": "<div style=\"max-width: 240px;\">\n  <nav class=\"settings-nav-rail\" aria-label=\"Settings\">\n    <div class=\"settings-nav-group\">\n      <div class=\"settings-nav-group-label\">Account</div>\n      <ul class=\"settings-nav-group-items\">\n        <li><button type=\"button\" class=\"settings-nav-item is-active\" aria-current=\"page\"><span class=\"settings-nav-item-label\">Profile</span></button></li>\n        <li><button type=\"button\" class=\"settings-nav-item\"><span class=\"settings-nav-item-label\">Security</span></button></li>\n        <li><button type=\"button\" class=\"settings-nav-item\"><span class=\"settings-nav-item-label\">API keys</span><span class=\"settings-nav-item-count\">3</span></button></li>\n        <li><button type=\"button\" class=\"settings-nav-item\"><span class=\"settings-nav-item-label\">Sessions</span></button></li>\n      </ul>\n    </div>\n    <div class=\"settings-nav-group\">\n      <div class=\"settings-nav-group-label\">Workspace</div>\n      <ul class=\"settings-nav-group-items\">\n        <li><button type=\"button\" class=\"settings-nav-item\"><span class=\"settings-nav-item-label\">General</span></button></li>\n        <li><button type=\"button\" class=\"settings-nav-item\"><span class=\"settings-nav-item-label\">Members</span><span class=\"settings-nav-item-count\">12</span></button></li>\n        <li><button type=\"button\" class=\"settings-nav-item\"><span class=\"settings-nav-item-label\">Billing</span></button></li>\n      </ul>\n    </div>\n  </nav>\n</div>",
    "css": ".page {\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 var(--s-7);\n}\n\n.settings-nav-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n\n.settings-nav-group-items {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.settings-nav-group-label {\n  font: 500 11px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n  padding: 0 var(--s-4);\n  margin-bottom: var(--s-1);\n}\n\n.settings-nav-item {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: var(--s-3);\n  width: 100%;\n  padding: var(--s-2) var(--s-4);\n  border: 0;\n  background: transparent;\n  text-align: left;\n  text-decoration: none;\n  color: var(--fg-soft);\n  font: 500 14px/1.3 var(--f-body);\n  border-radius: var(--r-sm);\n  cursor: pointer;\n  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);\n}\n\n.settings-nav-item-count {\n  font: 500 12px/1 var(--f-mono);\n  color: var(--fg-faint);\n  padding: 2px 6px;\n  background: var(--bg-sunk);\n  border-radius: var(--r-pill);\n}\n\n.settings-nav-item-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  color: var(--fg-dim);\n}\n\n.settings-nav-item-label {\n  min-width: 0;\n}\n\n.settings-nav-rail {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-5);\n  padding: var(--s-4) 0;\n}"
  }
}