{
  "name": "WorkspaceUser",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WorkspaceUser.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "workspace-user",
  "elName": "WorkspaceUser",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#workspace-user",
  "hasLiveDemo": false,
  "description": "The signed-in user control pinned to the bottom of a `<WorkspaceShell>` rail.\nThree modes:\n- **menu** (`menu`): a trigger that opens a kit popover (sign-out etc.).\n- **link** (`href`): navigates — via `linkComponent` if provided, else `<a>`.\n- **button** (default): a bare `<button>` (wire your own `onClick`).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "WorkspaceUser",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WorkspaceUserProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WorkspaceUserMenuItem",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WorkspaceUser } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "menu",
    "ws-user",
    "ws-user-avatar",
    "ws-user-meta",
    "ws-user-name",
    "ws-user-sub"
  ],
  "examples": {
    "react": "<WorkspaceUser name=\"Jay Stockwell\" sub=\"Owner\"\n  menu={[{ label: \"Sign out\", onSelect: signOut, danger: true }]} />",
    "html": "<button type=\"button\" class=\"ws-user\" aria-label=\"Jay Stockwell\"><span class=\"ws-user-avatar\" aria-hidden=\"true\">JS</span><span class=\"ws-user-meta\"><span class=\"ws-user-name\">Jay Stockwell</span><span class=\"ws-user-sub\">Owner</span></span></button>",
    "css": ".menu {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  padding: var(--s-2);\n  display: flex; flex-direction: column; gap: 2px;\n  box-shadow: var(--sh-3);\n  min-width: 260px;\n}\n\n.ws-user {\n  display: flex; align-items: center; gap: var(--s-2);\n  width: 100%; padding: 0; background: transparent; border: 0; cursor: pointer;\n  border-radius: 8px; text-align: left; flex-shrink: 0;\n}\n\n.ws-user-avatar {\n  width: 32px; height: 32px; border-radius: 50%;\n  background: var(--accent-soft); color: var(--accent);\n  font: 700 11px/1 var(--f-display);\n  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;\n}\n\n.ws-user-meta { display: none; flex-direction: column; gap: 2px; min-width: 0; }\n\n.ws-user-name { font: 600 12px/1.2 var(--f-body); color: var(--fg); }\n\n.ws-user-sub { font: 500 10px/1 var(--f-mono); color: var(--fg-dim); }"
  }
}