{
  "name": "InviteRow",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/InviteRow.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": "invite-row",
  "elName": "Three rows — editor, billing, viewer",
  "demoUrl": "https://brand.magicblocks.ai/components/23-workspace#invite-row",
  "hasLiveDemo": false,
  "description": "A single pending-invite row inside a `<ul class=\"invite-list\">`. Renders\nthe invitee's email + `<RoleBadge>` + meta line (`\"invited by … · …\"`) +\noptional Resend / Revoke action buttons in a three-column grid. Used\ninside the workspace-admin invites surface or composed standalone\nwhenever a list of pending invites needs surfacing.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "InviteRow",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "InviteRowProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { InviteRow } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "email",
      "optional": false,
      "type": "string",
      "doc": "Invitee email address — rendered as the primary 14px label."
    },
    {
      "name": "role",
      "optional": false,
      "type": "RoleKey",
      "doc": "Workspace role id assigned to the invite — drives the rendered `<RoleBadge>` chrome. See `ROLE_TAXONOMY` for the four canonical values."
    },
    {
      "name": "invitedBy",
      "optional": false,
      "type": "string",
      "doc": "Human-readable name of the inviter (e.g. `\"Jay\"`). Rendered inside the meta line as `\"invited by {invitedBy} · {sentAt}\"`."
    },
    {
      "name": "sentAt",
      "optional": false,
      "type": "string",
      "doc": "Human-readable sent-at hint (e.g. `\"2 days ago\"`, `\"5 days ago\"`, `\"2 weeks ago\"`). Rendered after the inviter name in the meta line."
    },
    {
      "name": "onResend",
      "optional": true,
      "type": "() => void",
      "doc": "Optional resend handler. When set, a `.btn-secondary.btn-sm` \"Resend\" button appears in the actions slot. Omit to ship a revoke-only row."
    },
    {
      "name": "onRevoke",
      "optional": true,
      "type": "() => void",
      "doc": "Optional revoke handler. When set, a `.btn-danger-outline.btn-sm` \"Revoke\" button appears in the actions slot. Omit to ship a resend-only row (rare — typically both are present)."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "btn",
    "btn-danger-outline",
    "btn-secondary",
    "btn-sm",
    "invite-list",
    "invite-row",
    "invite-row-actions",
    "invite-row-email",
    "invite-row-meta",
    "invite-row-role",
    "invite-row-text"
  ],
  "examples": {
    "react": "<ul className=\"invite-list\">\n  <InviteRow\n    email=\"newdev@example.com\"\n    role=\"editor\"\n    invitedBy=\"Jay\"\n    sentAt=\"2 days ago\"\n    onResend={() => …}\n    onRevoke={() => …}\n  />\n</ul>",
    "html": "<ul class=\"invite-list\">\n  <li class=\"invite-row\">\n    <div class=\"invite-row-text\">\n      <span class=\"invite-row-email\">newdev@example.com</span>\n      <span class=\"invite-row-meta\">invited by Jay · 2 days ago</span>\n    </div>\n    <span class=\"invite-row-role\"><span class=\"role-badge role-badge--accent\">Editor</span></span>\n    <span class=\"invite-row-actions\">\n      <button type=\"button\" class=\"btn btn-secondary btn-sm\">Resend</button>\n      <button type=\"button\" class=\"btn btn-danger-outline btn-sm\">Revoke</button>\n    </span>\n  </li>\n  <li class=\"invite-row\">\n    <div class=\"invite-row-text\">\n      <span class=\"invite-row-email\">billing@acme.com</span>\n      <span class=\"invite-row-meta\">invited by Alex · 5 days ago</span>\n    </div>\n    <span class=\"invite-row-role\"><span class=\"role-badge role-badge--warning\">Billing</span></span>\n    <span class=\"invite-row-actions\">\n      <button type=\"button\" class=\"btn btn-secondary btn-sm\">Resend</button>\n      <button type=\"button\" class=\"btn btn-danger-outline btn-sm\">Revoke</button>\n    </span>\n  </li>\n  <li class=\"invite-row\">\n    <div class=\"invite-row-text\">\n      <span class=\"invite-row-email\">viewer@example.com</span>\n      <span class=\"invite-row-meta\">invited by Robin · 2 weeks ago</span>\n    </div>\n    <span class=\"invite-row-role\"><span class=\"role-badge role-badge--neutral\">Viewer</span></span>\n    <span class=\"invite-row-actions\">\n      <button type=\"button\" class=\"btn btn-danger-outline btn-sm\">Revoke</button>\n    </span>\n  </li>\n</ul>",
    "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.btn-danger-outline {\n  background: transparent; color: var(--error-text);\n  border-color: rgba(214, 69, 69, 0.3);\n}\n\n.btn-secondary {\n  background: var(--bg-paper);\n  color: var(--fg);\n  border-color: var(--hair);\n}\n\n.btn-sm { padding: 7px var(--s-4); font-size: 13px; border-radius: var(--r-sm); }\n\n.invite-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n}\n\n.invite-row {\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  border-bottom: 1px solid var(--hair);\n  align-items: center;\n}\n\n.invite-row-actions {\n  display: flex;\n  gap: var(--s-2);\n}\n\n.invite-row-email {\n  font: 500 14px/1.3 var(--f-body);\n  color: var(--fg);\n}\n\n.invite-row-meta {\n  font: 400 12px/1.4 var(--f-body);\n  color: var(--fg-dim);\n}\n\n.invite-row-role {\n  display: inline-flex;\n  align-items: center;\n}\n\n.invite-row-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}"
  }
}