{
  "name": "PreferenceToggleRow",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PreferenceToggleRow.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "preference-toggle-row",
  "elName": "Notification preferences",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#preference-toggle-row",
  "hasLiveDemo": false,
  "description": "Labelled row containing a switch on the right. Used 5–20× per settings\npage for boolean preferences. Composes the kit's `<Switch>` primitive\n(chapter 03) — label on the left, optional description below, switch\npinned to the right. Disabled state dims the whole row and disables\nthe switch.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PreferenceToggleRow",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PreferenceToggleRowProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { PreferenceToggleRow } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "preference-toggle-row",
    "preference-toggle-row-desc",
    "preference-toggle-row-label",
    "preference-toggle-row-text"
  ],
  "examples": {
    "react": "<PreferenceToggleRow\n  label=\"Email digest\"\n  description=\"Daily summary of new activity in your workspace.\"\n  defaultChecked\n/>",
    "html": "<div class=\"settings-stack\" style=\"max-width:560px;\">\n  <div class=\"preference-toggle-row\">\n    <div class=\"preference-toggle-row-text\">\n      <label for=\":r1:\" class=\"preference-toggle-row-label\">Email digest</label>\n      <p class=\"preference-toggle-row-desc\">Daily summary of new activity in your workspace.</p>\n    </div>\n    <label class=\"switch\"><input type=\"checkbox\" id=\":r1:\" checked><span class=\"switch-track\" aria-hidden=\"true\"></span></label>\n  </div>\n  <div class=\"preference-toggle-row\">\n    <div class=\"preference-toggle-row-text\">\n      <label for=\":r2:\" class=\"preference-toggle-row-label\">Push notifications</label>\n      <p class=\"preference-toggle-row-desc\">Real-time alerts on your devices.</p>\n    </div>\n    <label class=\"switch\"><input type=\"checkbox\" id=\":r2:\"><span class=\"switch-track\" aria-hidden=\"true\"></span></label>\n  </div>\n  <div class=\"preference-toggle-row is-disabled\">\n    <div class=\"preference-toggle-row-text\">\n      <label for=\":r3:\" class=\"preference-toggle-row-label\">SMS alerts</label>\n      <p class=\"preference-toggle-row-desc\">Available on the Pro plan and above.</p>\n    </div>\n    <label class=\"switch\"><input type=\"checkbox\" id=\":r3:\" disabled><span class=\"switch-track\" aria-hidden=\"true\"></span></label>\n  </div>\n</div>",
    "css": ".preference-toggle-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--s-5);\n  padding: var(--s-4) 0;\n  border-bottom: 1px solid var(--hair);\n}\n\n.preference-toggle-row-desc {\n  font: 400 13px/1.5 var(--f-body);\n  color: var(--fg-soft);\n  margin: 0;\n  max-width: 60ch;\n}\n\n.preference-toggle-row-label {\n  font: 500 14px/1.4 var(--f-body);\n  color: var(--fg);\n  cursor: pointer;\n}\n\n.preference-toggle-row-text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-1);\n  min-width: 0;\n}"
  }
}