{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-setting-list",
  "title": "Toggle Setting List",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/toggle-setting-list/ToggleSettingList.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { SectionCard } from '@/components/ui/section-card'\n\nexport interface SettingRow {\n  key: string\n  label: string\n  desc?: string\n}\n\nexport interface ToggleSettingListProps {\n  title?: string\n  description?: string\n  /** Rendered top-right of the header (e.g. an icon node). */\n  headerIcon?: React.ReactNode\n  items: SettingRow[]\n  value: Record<string, boolean>\n  onValueChange?: (value: Record<string, boolean>) => void\n  className?: string\n}\n\nexport function ToggleSettingList({\n  title,\n  description,\n  headerIcon,\n  items,\n  value,\n  onValueChange,\n  className,\n}: ToggleSettingListProps) {\n  function toggle(key: string) {\n    onValueChange?.({ ...value, [key]: !value[key] })\n  }\n\n  return (\n    <SectionCard title={title ?? 'Notifications'} description={description} className={className} headerAction={headerIcon}>\n      <ul className=\"-my-4 divide-y\">\n        {items.map((row, i) => (\n          <li\n            key={row.key}\n            className={['flex items-center justify-between gap-4 py-4', i === 0 ? 'pt-0' : ''].filter(Boolean).join(' ')}\n          >\n            <div>\n              <p className=\"text-sm font-medium\">{row.label}</p>\n              {row.desc && <p className=\"text-muted-foreground text-xs\">{row.desc}</p>}\n            </div>\n            <button\n              type=\"button\"\n              role=\"switch\"\n              aria-checked={value[row.key]}\n              className={[\n                'focus-visible:ring-ring relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none focus-visible:ring-2',\n                value[row.key] ? 'bg-primary' : 'bg-muted-foreground/30',\n              ].join(' ')}\n              onClick={() => toggle(row.key)}\n            >\n              <span\n                className={[\n                  'bg-background inline-block size-4 translate-y-0.5 rounded-full shadow transition-transform',\n                  value[row.key] ? 'translate-x-[18px]' : 'translate-x-0.5',\n                ].join(' ')}\n              />\n            </button>\n          </li>\n        ))}\n      </ul>\n    </SectionCard>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/ToggleSettingList.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/section-card.json"
  ],
  "description": "List of toggle-able settings in a SectionCard. The `value` prop binds a Record<string, boolean> keyed by item.key; `onValueChange` emits the next record.",
  "categories": [
    "dashboard"
  ]
}