{
  "name": "MemberRow",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/MemberRow.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": "member-row",
  "elName": "Four rows — admin, editor, billing, viewer",
  "demoUrl": "https://brand.magicblocks.ai/components/23-workspace#member-row",
  "hasLiveDemo": false,
  "description": "A single team-member row inside a `<ul class=\"member-list\">`. Renders the\nmember's avatar + name + email + `<RoleBadge>` + last-active timestamp +\noptional actions trigger in a five-column grid. Used inside\n`<WorkspaceMembersPage>` (section 25.6) or composed standalone whenever\na member list needs surfacing.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "MemberRow",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "MemberRowProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { MemberRow } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "avatar",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional avatar slot — typically `<Avatar name=\"…\" />`. When omitted the avatar cell collapses; rows in the same list still stay vertically aligned via the column-auto grid track."
    },
    {
      "name": "name",
      "optional": false,
      "type": "string",
      "doc": "Full display name — rendered as the primary 14px label."
    },
    {
      "name": "email",
      "optional": false,
      "type": "string",
      "doc": "Email address — rendered below the name in `--fg-dim` 12px."
    },
    {
      "name": "role",
      "optional": false,
      "type": "RoleKey",
      "doc": "Workspace role id — drives the rendered `<RoleBadge>` chrome. See `ROLE_TAXONOMY` for the four canonical values."
    },
    {
      "name": "lastActive",
      "optional": true,
      "type": "string",
      "doc": "Human-readable last-active hint (e.g. `\"Active now\"`, `\"2 hours ago\"`, `\"3 weeks ago\"`). Right-aligned mono meta text."
    },
    {
      "name": "onClick",
      "optional": true,
      "type": "() => void",
      "doc": "Click handler attached to the row. Use for row navigation (e.g. opening the member detail panel) when there is no full-row anchor. When set the row picks up the `.is-interactive` modifier (cursor + hover background)."
    },
    {
      "name": "actions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional actions slot — typically an icon-button trigger for the per-row actions menu. Hidden below 480px (actions move into the row menu)."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "icon-btn",
    "member-list",
    "member-row",
    "member-row-actions",
    "member-row-avatar",
    "member-row-email",
    "member-row-meta",
    "member-row-name",
    "member-row-role",
    "member-row-text"
  ],
  "examples": {
    "react": "<ul className=\"member-list\">\n  <MemberRow\n    avatar={<Avatar name=\"Jay Stockwell\" />}\n    name=\"Jay Stockwell\"\n    email=\"jay@magicblocks.ai\"\n    role=\"admin\"\n    lastActive=\"Active now\"\n    actions={<button className=\"icon-btn\">⋯</button>}\n  />\n</ul>",
    "html": "<ul class=\"member-list\">\n  <li class=\"member-row\">\n    <span class=\"member-row-avatar\"><span class=\"av\" role=\"img\" aria-label=\"Jay Stockwell\"><span aria-hidden=\"true\">JS</span></span></span>\n    <div class=\"member-row-text\">\n      <span class=\"member-row-name\">Jay Stockwell</span>\n      <span class=\"member-row-email\">jay@magicblocks.ai</span>\n    </div>\n    <span class=\"member-row-role\"><span class=\"role-badge role-badge--error\">Admin</span></span>\n    <span class=\"member-row-meta\">Active now</span>\n    <span class=\"member-row-actions\"><button type=\"button\" class=\"icon-btn\" aria-label=\"Member actions for Jay Stockwell\">⋯</button></span>\n  </li>\n  <li class=\"member-row\">\n    <span class=\"member-row-avatar\"><span class=\"av\" role=\"img\" aria-label=\"Alex Kim\"><span aria-hidden=\"true\">AK</span></span></span>\n    <div class=\"member-row-text\">\n      <span class=\"member-row-name\">Alex Kim</span>\n      <span class=\"member-row-email\">alex@magicblocks.ai</span>\n    </div>\n    <span class=\"member-row-role\"><span class=\"role-badge role-badge--accent\">Editor</span></span>\n    <span class=\"member-row-meta\">2 hours ago</span>\n    <span class=\"member-row-actions\"><button type=\"button\" class=\"icon-btn\" aria-label=\"Member actions for Alex Kim\">⋯</button></span>\n  </li>\n  <li class=\"member-row\">\n    <span class=\"member-row-avatar\"><span class=\"av\" role=\"img\" aria-label=\"Robin Lee\"><span aria-hidden=\"true\">RL</span></span></span>\n    <div class=\"member-row-text\">\n      <span class=\"member-row-name\">Robin Lee</span>\n      <span class=\"member-row-email\">robin@magicblocks.ai</span>\n    </div>\n    <span class=\"member-row-role\"><span class=\"role-badge role-badge--warning\">Billing</span></span>\n    <span class=\"member-row-meta\">Yesterday</span>\n    <span class=\"member-row-actions\"><button type=\"button\" class=\"icon-btn\" aria-label=\"Member actions for Robin Lee\">⋯</button></span>\n  </li>\n  <li class=\"member-row\">\n    <span class=\"member-row-avatar\"><span class=\"av\" role=\"img\" aria-label=\"Sasha Park\"><span aria-hidden=\"true\">SP</span></span></span>\n    <div class=\"member-row-text\">\n      <span class=\"member-row-name\">Sasha Park</span>\n      <span class=\"member-row-email\">sasha@magicblocks.ai</span>\n    </div>\n    <span class=\"member-row-role\"><span class=\"role-badge role-badge--neutral\">Viewer</span></span>\n    <span class=\"member-row-meta\">3 weeks ago</span>\n  </li>\n</ul>",
    "css": ".icon-btn {\n  width: 36px; height: 36px;\n  display: inline-flex; align-items: center; justify-content: center;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  color: var(--fg);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n}\n\n.member-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n}\n\n.member-row {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto auto;\n  align-items: center;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  border-bottom: 1px solid var(--hair);\n  transition: background var(--dur-2) var(--ease);\n}\n\n.member-row-actions {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.member-row-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.member-row-email {\n  font: 400 12px/1.3 var(--f-body);\n  color: var(--fg-dim);\n}\n\n.member-row-meta {\n  font: 400 12px/1.4 var(--f-body);\n  color: var(--fg-dim);\n  white-space: nowrap;\n}\n\n.member-row-name {\n  font: 500 14px/1.3 var(--f-body);\n  color: var(--fg);\n}\n\n.member-row-role {\n  display: inline-flex;\n  align-items: center;\n}\n\n.member-row-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}"
  }
}