{
  "name": "TeamHeaderBlock",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TeamHeaderBlock.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": "team-header-block",
  "elName": "Workspace · Members · 12 · Invite + 3 filter chips",
  "demoUrl": "https://brand.magicblocks.ai/components/23-workspace#team-header-block",
  "hasLiveDemo": false,
  "description": "Per-page header for team / workspace surfaces. Eyebrow + title + optional\nmember-count pill + Invite CTA on the head row, with an optional filter\nrail below. Stateless and slot-driven — composes inside\n`<WorkspaceMembersPage>` (section 25.6) or stands alone wherever a team\nsurface needs surfacing.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "TeamHeaderBlock",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "TeamHeaderBlockProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { TeamHeaderBlock } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Page title — required. Rendered inside the title row as the primary display label. Accepts a `ReactNode` so consumers can pass `<strong>` / `<em>` wrappers when the surface needs the extra chrome."
    },
    {
      "name": "memberCount",
      "optional": true,
      "type": "number",
      "doc": "Optional team-member count. When set, a mono pill renders inline with the title showing the count — typically the number of seats currently occupied (e.g. `12`). Omit for surfaces that don't have a meaningful total to surface."
    },
    {
      "name": "eyebrow",
      "optional": true,
      "type": "string",
      "doc": "Small uppercased label above the title (e.g. the parent group: `\"Workspace\"`). Renders as mono 11px `var(--fg-faint)`. Omit to ship a title-only header."
    },
    {
      "name": "inviteAction",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional invite CTA slot. Typically a `<button className=\"btn\">` — rendered to the right of the title row on desktop and full-width below the text stack on ≤480px."
    },
    {
      "name": "filters",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional filter rail below the head. Typically a horizontal stack of `<button className=\"chip\">` filter chips. Omit to ship a header-only block (no rail row)."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "btn",
    "chip",
    "team-header-block",
    "team-header-block-actions",
    "team-header-block-count",
    "team-header-block-eyebrow",
    "team-header-block-filters",
    "team-header-block-head",
    "team-header-block-text",
    "team-header-block-title",
    "title"
  ],
  "examples": {
    "react": "<TeamHeaderBlock\n  eyebrow=\"Workspace\"\n  title=\"Members\"\n  memberCount={12}\n  inviteAction={<button type=\"button\" className=\"btn\">Invite member</button>}\n  filters={\n    <>\n      <button type=\"button\" className=\"chip\">All</button>\n      <button type=\"button\" className=\"chip\">Admins</button>\n      <button type=\"button\" className=\"chip\">Pending invites</button>\n    </>\n  }\n/>",
    "html": "<header class=\"team-header-block\">\n  <div class=\"team-header-block-head\">\n    <div class=\"team-header-block-text\">\n      <p class=\"team-header-block-eyebrow\">Workspace</p>\n      <h1 class=\"team-header-block-title\">\n        <span>Members</span>\n        <span class=\"team-header-block-count\">12</span>\n      </h1>\n    </div>\n    <div class=\"team-header-block-actions\">\n      <button type=\"button\" class=\"btn\">Invite member</button>\n    </div>\n  </div>\n  <div class=\"team-header-block-filters\">\n    <button type=\"button\" class=\"chip\">All</button>\n    <button type=\"button\" class=\"chip\">Admins</button>\n    <button type=\"button\" class=\"chip\">Pending invites</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.chip {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--r-pill);\n  font: 500 12.5px/1.3 var(--f-body);\n  background: var(--bg-paper);\n  color: var(--fg);\n  border: 1px solid var(--hair);\n  white-space: nowrap;\n}\n\n.team-header-block {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-4);\n  padding-bottom: var(--s-5);\n  border-bottom: 1px solid var(--hair);\n}\n\n.team-header-block-actions {\n  flex-shrink: 0;\n}\n\n.team-header-block-count {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: var(--r-pill);\n  background: var(--bg-sunk);\n  color: var(--fg-soft);\n  font: 500 12px/1 var(--f-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n.team-header-block-eyebrow {\n  margin: 0;\n  font: 500 11px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n}\n\n.team-header-block-filters {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: var(--s-2);\n}\n\n.team-header-block-head {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--s-4);\n}\n\n.team-header-block-text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n  min-width: 0;\n}\n\n.team-header-block-title {\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--s-3);\n  font: 600 28px/1.2 var(--f-display);\n  color: var(--fg);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}