{
  "name": "WidgetPersonaSwitcher",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetPersonaSwitcher.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "persona-switcher",
  "elName": "Cards",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#persona-switcher",
  "hasLiveDemo": false,
  "description": "`<WidgetPersonaSwitcher>` — visitor-facing persona switcher.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WidgetPersonaSwitcher",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetPersona",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WidgetPersonaSwitcherProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetPersonaSwitcherVariant",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { WidgetPersonaSwitcher } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "personas",
      "optional": true,
      "type": "WidgetPersona[]",
      "doc": "The set of available personas. Order drives card order. When omitted, renders the three demo personas shown in chapter 23.3 — Sasha (Sales), Jamie (Support), Robin (Billing)."
    },
    {
      "name": "persona",
      "optional": true,
      "type": "string",
      "doc": "Controlled selected persona id. Pair with `onPersonaChange`."
    },
    {
      "name": "defaultPersona",
      "optional": true,
      "type": "string",
      "doc": "Uncontrolled initial persona id. Defaults to the first entry in `personas`."
    },
    {
      "name": "onPersonaChange",
      "optional": true,
      "type": "(persona: WidgetPersona) => void",
      "doc": "Fires whenever the user changes the active persona (cards: clicking or keyboard-activating a card; header: not yet wired). Suppressed when the controlled `persona` prop changes externally — the parent already knows about that change."
    },
    {
      "name": "variant",
      "optional": true,
      "type": "WidgetPersonaSwitcherVariant",
      "doc": "Card row for in-conversation choice; header pill for swap-anytime from the widget header. Defaults to `\"cards\"`."
    },
    {
      "name": "helperText",
      "optional": true,
      "type": "React.ReactNode",
      "doc": "Copy beneath the card row. Defaults to \"Switch any time from the widget header\". Ignored when `hideHelperText` is true or in the header variant."
    },
    {
      "name": "hideHelperText",
      "optional": true,
      "type": "boolean",
      "doc": "Suppress the helper-text row entirely."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class merged via the kit's `cn()` helper. Caller wins over defaults."
    }
  ],
  "classesUsed": [
    "widget-persona-card",
    "widget-persona-card-avatar",
    "widget-persona-card-check",
    "widget-persona-card-name",
    "widget-persona-card-role",
    "widget-persona-switcher",
    "widget-persona-switcher-helper",
    "widget-persona-switcher-row"
  ],
  "examples": {
    "react": "// Zero-prop default — three demo personas, Sasha selected.\n<WidgetPersonaSwitcher />",
    "html": "<div class=\"widget-persona-switcher\" data-variant=\"cards\"><div class=\"widget-persona-switcher-row\" role=\"group\"><button type=\"button\" class=\"widget-persona-card\" aria-pressed=\"true\"><span class=\"widget-persona-card-avatar\" aria-hidden=\"true\">Sa</span><p class=\"widget-persona-card-name\">Sasha</p><p class=\"widget-persona-card-role\">Sales</p><span class=\"widget-persona-card-check\" aria-hidden=\"true\"><svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 6.5 L5 9 L9.5 3.5\"></path></svg></span></button><button type=\"button\" class=\"widget-persona-card\" aria-pressed=\"false\"><span class=\"widget-persona-card-avatar\" aria-hidden=\"true\">Ja</span><p class=\"widget-persona-card-name\">Jamie</p><p class=\"widget-persona-card-role\">Support</p><span class=\"widget-persona-card-check\" aria-hidden=\"true\"><svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 6.5 L5 9 L9.5 3.5\"></path></svg></span></button><button type=\"button\" class=\"widget-persona-card\" aria-pressed=\"false\"><span class=\"widget-persona-card-avatar\" aria-hidden=\"true\">Ro</span><p class=\"widget-persona-card-name\">Robin</p><p class=\"widget-persona-card-role\">Billing</p><span class=\"widget-persona-card-check\" aria-hidden=\"true\"><svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 6.5 L5 9 L9.5 3.5\"></path></svg></span></button></div><p class=\"widget-persona-switcher-helper\">Switch any time from the widget header</p></div>",
    "css": ".widget-persona-card {\n  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);\n  padding: var(--s-4) var(--s-3);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair); border-radius: var(--r-md);\n  cursor: pointer; text-align: center;\n  font: 400 13px/1.4 var(--f-body); color: var(--fg);\n  position: relative;\n}\n\n.widget-persona-card-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--f-body); }\n\n.widget-persona-card-check {\n  position: absolute; top: 8px; right: 8px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: var(--accent); color: var(--on-accent);\n  display: none; align-items: center; justify-content: center;\n}\n\n.widget-persona-card-name { font: 600 13px/1.3 var(--f-body); color: var(--fg); margin: 0; }\n\n.widget-persona-card-role { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-dim); margin: 0; }\n\n.widget-persona-switcher { display: flex; flex-direction: column; gap: var(--s-3); }\n\n.widget-persona-switcher-helper {\n  font: 400 12px/1.4 var(--f-body); color: var(--fg-faint);\n  text-align: center; margin: 0;\n}\n\n.widget-persona-switcher-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }"
  }
}