{
  "name": "settings-switch-rows",
  "type": "registry:component",
  "title": "Settings Switch Rows",
  "description": "Labelled settings rows with descriptions, icons and a full-row switch target.",
  "registryDependencies": [
    "@siteplane/base",
    "@siteplane/switch"
  ],
  "dependencies": [
    "lucide-react@1.18.0"
  ],
  "files": [
    {
      "path": "src/components/patterns/settings-switch-rows.tsx",
      "type": "registry:component",
      "target": "components/patterns/settings-switch-rows.tsx",
      "content": "\"use client\";\n\nimport { BellIcon, MoonIcon } from \"lucide-react\";\nimport { useId, type ReactNode } from \"react\";\n\nimport { Switch } from \"@/components/ui/switch\";\n\nexport function SettingsSwitchRows() {\n  return (\n    <div\n      className=\"grid w-full rounded-lg border bg-background/80\"\n      data-recipe=\"settings-switch-rows\"\n    >\n      <SettingsSwitchRow\n        defaultChecked\n        description=\"Send weekly digest\"\n        icon={<BellIcon className=\"size-4\" />}\n        label=\"Workspace updates\"\n      />\n      <SettingsSwitchRow\n        description=\"Dim UI after local sunset\"\n        icon={<MoonIcon className=\"size-4\" />}\n        label=\"Auto dark mode\"\n      />\n    </div>\n  );\n}\n\nfunction SettingsSwitchRow({\n  defaultChecked = false,\n  description,\n  icon,\n  label,\n}: {\n  defaultChecked?: boolean;\n  description: string;\n  icon: ReactNode;\n  label: string;\n}) {\n  const labelId = useId();\n\n  return (\n    <label className=\"grid cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-3 border-b px-3 py-2 last:border-b-0 hover:bg-muted/40\">\n      <span className=\"text-muted-foreground\">{icon}</span>\n      <span className=\"grid min-w-0 gap-0.5\">\n        <span className=\"truncate font-medium text-sm\" id={labelId}>\n          {label}\n        </span>\n        <span className=\"truncate text-muted-foreground text-xs\">{description}</span>\n      </span>\n      <Switch aria-labelledby={labelId} defaultChecked={defaultChecked} />\n    </label>\n  );\n}\n"
    }
  ],
  "categories": [
    "patterns"
  ],
  "docs": "# Settings Switch Rows\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nSettings Switch Rows is a `registry:component` for labelled settings with short descriptions, icons and a full-row switch target.\n\n## Import\n\n```tsx\nimport { SettingsSwitchRows } from \"@/components/patterns/settings-switch-rows\";\n```\n\n## Public API\n\n- Render `SettingsSwitchRows` for the included workspace-update and automatic-dark-mode examples.\n- Adapt the labels, descriptions, icons and default values after installation.\n- Keep each row as a label around one Switch so the complete row remains the interaction target.\n\n## Public Motion\n\n- The recipe adds no motion and retains the native Switch track and thumb transition.\n- Reduced motion behavior is inherited from Switch and the global motion provider.\n\n## Public Accessibility\n\n- Each Switch receives its accessible name from the visible row label.\n- Keep descriptions concise and do not communicate the checked state through color alone.\n\n## Public Agent Guidance\n\n- Install with `pnpm dlx shadcn@4.16.1 add @siteplane/settings-switch-rows`.\n- Use this recipe for compact boolean preferences with immediate effect.\n- Use Form and Field when a preference is submitted as part of a larger form.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/patterns/settings-switch-rows)\n\n- [Registry source](https://ui.siteplane.io/r/settings-switch-rows.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/patterns/settings-switch-rows",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}