{
  "name": "ConsentToggle",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ConsentToggle.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "consent-toggle",
  "elName": "ConsentToggle",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#consent-toggle",
  "hasLiveDemo": false,
  "description": "Channel-level opt-out toggle with optional consent-event log. Wraps\n`<Switch>` plus a `.consent-events` audit list.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ConsentToggle",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ConsentToggleProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "ConsentEvent",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "ConsentChannel",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { ConsentToggle } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "channel",
      "optional": false,
      "type": "ConsentChannel",
      "doc": "Channel this toggle controls."
    },
    {
      "name": "enabled",
      "optional": false,
      "type": "boolean",
      "doc": "`true` if the contact is opted IN to this channel."
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(enabled: boolean) => void",
      "doc": "Fires whenever the consent state changes."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the channel's display label. Defaults to a human form."
    },
    {
      "name": "events",
      "optional": true,
      "type": "ConsentEvent[]",
      "doc": "Optional consent-event log rendered below the toggle."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the underlying switch."
    }
  ],
  "classesUsed": [
    "consent-event",
    "consent-event-action",
    "consent-event-note",
    "consent-event-sep",
    "consent-event-source",
    "consent-event-time",
    "consent-events",
    "consent-toggle",
    "consent-toggle-channel",
    "consent-toggle-meta",
    "consent-toggle-row",
    "consent-toggle-status",
    "consent-toggle-status-off",
    "consent-toggle-status-on",
    "sr-only"
  ],
  "examples": {
    "react": "<ConsentToggle\n  channel=\"email\"\n  enabled={!contact.email_opt_out}\n  onChange={(on) => api.patch(contact.id, { email_opt_out: !on })}\n  events={contact.consent_events}\n/>",
    "html": "<div class=\"consent-toggle\">\n  <div class=\"consent-toggle-row\">\n    <span class=\"consent-toggle-meta\">\n      <span class=\"consent-toggle-channel\">Email</span>\n      <span class=\"consent-toggle-status consent-toggle-status-on\">Opted in</span>\n    </span>\n    <label class=\"switch\">\n      <input type=\"checkbox\" checked>\n      <span class=\"switch-track\"><span class=\"switch-thumb\"></span></span>\n    </label>\n  </div>\n</div>",
    "css": ".consent-event {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: baseline;\n  font: 400 12.5px/1.4 var(--f-body);\n  color: var(--fg-soft);\n}\n\n.consent-event-action { color: var(--fg); font-weight: 500; }\n\n.consent-event-note { color: var(--fg-faint); flex-basis: 100%; }\n\n.consent-event-sep { color: var(--fg-dim); }\n\n.consent-event-source { color: var(--fg-dim); }\n\n.consent-event-time { color: var(--fg); font-variant-numeric: tabular-nums; }\n\n.consent-events {\n  list-style: none;\n  margin: 0;\n  padding: var(--s-2) 0 0 0;\n  border-top: 1px dashed var(--hair);\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.consent-toggle {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n  padding: var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--paper);\n}\n\n.consent-toggle-channel {\n  font: 500 14px/1.3 var(--f-body);\n  color: var(--fg);\n}\n\n.consent-toggle-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.consent-toggle-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-3);\n}\n\n.consent-toggle-status {\n  font: 500 12px/1.3 var(--f-body);\n}\n\n.consent-toggle-status-off { color: var(--fg-dim); }\n\n.consent-toggle-status-on { color: var(--success-text); }\n\n.sr-only {\n  position: absolute;\n  width: 1px; height: 1px;\n  padding: 0; margin: -1px;\n  overflow: hidden; clip: rect(0, 0, 0, 0);\n  white-space: nowrap; border: 0;\n}"
  }
}