{
  "name": "SettingsHeaderBlock",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SettingsHeaderBlock.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "settings-header-block",
  "elName": "API keys page header",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#settings-header-block",
  "hasLiveDemo": false,
  "description": "Per-page header for settings pages. Eyebrow + title + description + actions row.\nLayers atop `<PageHeader>` thematically but with a settings-specific shape\n(eyebrow above the title, smaller title size, description on a 60ch line).\nStateless and slot-driven.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SettingsHeaderBlock",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SettingsHeaderBlockProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { SettingsHeaderBlock } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "btn",
    "settings-header-block",
    "settings-header-block-actions",
    "settings-header-block-desc",
    "settings-header-block-eyebrow",
    "settings-header-block-text",
    "settings-header-block-title",
    "title"
  ],
  "examples": {
    "react": "<SettingsHeaderBlock\n  eyebrow=\"Account\"\n  title=\"API keys\"\n  description=\"Tokens for programmatic access to your workspace.\"\n  actions={<button type=\"button\" className=\"btn\">New key</button>}\n/>",
    "html": "<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>",
    "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.settings-header-block {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--s-5);\n  padding-bottom: var(--s-5);\n  border-bottom: 1px solid var(--hair);\n  margin-bottom: var(--s-6);\n}\n\n.settings-header-block-actions {\n  display: flex;\n  gap: var(--s-2);\n  flex-shrink: 0;\n}\n\n.settings-header-block-desc {\n  font: 400 14px/1.5 var(--f-body);\n  color: var(--fg-soft);\n  margin: 0;\n  max-width: 60ch;\n}\n\n.settings-header-block-eyebrow {\n  font: 500 11px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n  margin: 0;\n}\n\n.settings-header-block-text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n  min-width: 0;\n}\n\n.settings-header-block-title {\n  font: 600 22px/1.2 var(--f-display);\n  letter-spacing: -0.01em;\n  color: var(--fg);\n  margin: 0;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}