{
  "name": "SettingsAccountPage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SettingsAccountPage.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "settings-account-page",
  "elName": "API keys page composition",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#settings-account-page",
  "hasLiveDemo": false,
  "description": "Page-shaped wrapper composing `<SettingsShell>` + `<SettingsNavRail>` +\n`<SettingsHeaderBlock>` + body. Drop-in for the common API-keys / Profile /\nSessions settings page shape: consumers pass `groups` + `activeKey` and the\nwrapper hands them off to the nav rail, plus `eyebrow` / `title` /\n`description` / `actions` to the header block, with `children` rendered as\nthe body content below the header.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SettingsAccountPage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SettingsAccountPageProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SettingsAccountPage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "groups",
      "optional": false,
      "type": "SettingsNavRailGroup[]",
      "doc": "Grouped nav-rail items. Passed straight through to `<SettingsNavRail>`."
    },
    {
      "name": "activeKey",
      "optional": true,
      "type": "string",
      "doc": "Controlled active nav-rail key. Pair with `onActiveChange`."
    },
    {
      "name": "defaultActiveKey",
      "optional": true,
      "type": "string",
      "doc": "Initial active key when uncontrolled. Defaults to the first item's key."
    },
    {
      "name": "onActiveChange",
      "optional": true,
      "type": "(key: string) => void",
      "doc": "Fires whenever the active nav-rail item changes."
    },
    {
      "name": "eyebrow",
      "optional": true,
      "type": "string",
      "doc": "Small uppercased label above the title (typically the parent group)."
    },
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "The page title — required. Rendered inside an `<h1>`."
    },
    {
      "name": "description",
      "optional": true,
      "type": "ReactNode",
      "doc": "One- or two-sentence description shown below the title."
    },
    {
      "name": "actions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned action row (typically one or two buttons)."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Body content rendered below the header (e.g. a list of `<ApiKeyCard>`s)."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Custom className appended to `.settings-account-page`."
    }
  ],
  "classesUsed": [
    "btn",
    "eyebrow",
    "settings-account-page",
    "title"
  ],
  "examples": {
    "react": "const groups = [\n  {\n    label: \"Account\",\n    items: [\n      { key: \"profile\", label: \"Profile\" },\n      { key: \"api-keys\", label: \"API keys\", count: 3 },\n      { key: \"sessions\", label: \"Sessions\" },\n    ],\n  },\n];",
    "html": "<div class=\"settings-account-page\">\n  <div class=\"settings\">\n    <aside class=\"settings-nav\">\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\"><span class=\"settings-nav-item-label\">Profile</span></button></li>\n            <li><button type=\"button\" class=\"settings-nav-item is-active\" aria-current=\"page\"><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      </nav>\n    </aside>\n    <form class=\"settings-pane\">\n      <header class=\"settings-header-block\">\n        <div class=\"settings-header-block-text\">\n          <p class=\"settings-header-block-eyebrow\">Account</p>\n          <h1 class=\"settings-header-block-title\">API keys</h1>\n          <p class=\"settings-header-block-desc\">Tokens for programmatic access to your workspace. Revealed once at creation &mdash; copy and store securely.</p>\n        </div>\n        <div class=\"settings-header-block-actions\">\n          <button type=\"button\" class=\"btn\">New key</button>\n        </div>\n      </header>\n      <div class=\"api-key-card\">\n        <div class=\"api-key-card-head\">\n          <div class=\"api-key-card-name\">Production key</div>\n          <div class=\"api-key-card-meta\"><span>Last used <strong>2 hours ago</strong></span></div>\n        </div>\n        <div class=\"api-key-card-token\">\n          <code class=\"api-key-card-token-value\">mb_live_••••••••••••AB12</code>\n          <div class=\"api-key-card-token-actions\">\n            <button type=\"button\" class=\"btn btn-ghost btn-sm\" aria-pressed=\"false\">Reveal</button>\n            <button type=\"button\" class=\"btn btn-ghost btn-sm\" aria-live=\"polite\">Copy</button>\n          </div>\n        </div>\n      </div>\n      <div class=\"api-key-card\">\n        <div class=\"api-key-card-head\">\n          <div class=\"api-key-card-name\">Staging key</div>\n          <div class=\"api-key-card-meta\"><span>Last used <strong>3 days ago</strong></span></div>\n        </div>\n        <div class=\"api-key-card-token\">\n          <code class=\"api-key-card-token-value\">mb_test_••••••••••••CD34</code>\n          <div class=\"api-key-card-token-actions\">\n            <button type=\"button\" class=\"btn btn-ghost btn-sm\" aria-pressed=\"false\">Reveal</button>\n            <button type=\"button\" class=\"btn btn-ghost btn-sm\" aria-live=\"polite\">Copy</button>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>",
    "css": ".btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--s-2);\n  font: 600 14.5px/1 var(--f-display);\n  letter-spacing: -0.005em;\n  padding: 11px var(--s-5);\n  border: 1px solid transparent;\n  border-radius: var(--r-md);\n  cursor: pointer;\n  text-decoration: none;\n  transition: background var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              transform var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n  user-select: none;\n  white-space: nowrap;\n  appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.eyebrow {\n  font: 500 11.5px/1 var(--f-mono);\n  text-transform: uppercase; letter-spacing: 0.1em;\n  color: var(--fg-dim);\n  margin: 0;\n}\n\n.settings-account-page {\n  display: flex;\n  flex-direction: column;\n  min-height: 480px;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}