{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "toggle-setting-list",
  "title": "Toggle Setting List",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/toggle-setting-list/ToggleSettingList.svelte",
      "content": "<script lang=\"ts\">\n  import type { Component, Snippet } from 'svelte'\n  import { SectionCard } from '$lib/components/ui/section-card'\n\n  interface Props {\n    title?: string\n    description?: string\n    headerIcon?: Component\n    class?: string\n    children?: Snippet\n  }\n\n  let { title = 'Notifications', description, headerIcon: HeaderIcon, class: className, children }: Props = $props()\n</script>\n\n<SectionCard data-slot=\"toggle-setting-list\" {title} {description} class={className}>\n  {#snippet headerAction()}\n    {#if HeaderIcon}\n      <HeaderIcon class=\"text-muted-foreground size-5\" />\n    {/if}\n  {/snippet}\n  <ul class=\"-my-4 divide-y\">\n    {@render children?.()}\n  </ul>\n</SectionCard>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/toggle-setting-list/ToggleSettingList.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/toggle-setting-list/ToggleSettingRow.svelte",
      "content": "<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  interface Props {\n    label: string\n    desc?: string\n    checked?: boolean\n  }\n\n  let { label, desc, checked = $bindable(false) }: Props = $props()\n</script>\n\n<!-- One controlled switch row. Hold state in the parent and bind `checked` per row. -->\n<li class=\"flex items-center justify-between gap-4 py-4 first:pt-0\">\n  <div>\n    <p class=\"text-sm font-medium\">{label}</p>\n    {#if desc}\n      <p class=\"text-muted-foreground text-xs\">{desc}</p>\n    {/if}\n  </div>\n  <button\n    type=\"button\"\n    role=\"switch\"\n    aria-label={label}\n    aria-checked={checked}\n    class={cn(\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      checked ? 'bg-primary' : 'bg-muted-foreground/30',\n    )}\n    onclick={() => (checked = !checked)}\n  >\n    <span\n      class={cn(\n        'bg-background inline-block size-4 translate-y-0.5 rounded-full shadow transition-transform',\n        checked ? 'translate-x-[18px]' : 'translate-x-0.5',\n      )}\n    ></span>\n  </button>\n</li>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/toggle-setting-list/ToggleSettingRow.svelte"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/section-card.json"
  ],
  "description": "List of toggle-able settings in a SectionCard. Spell rows out inline with ToggleSettingRow — each row binds `checked` (bind:checked).",
  "categories": [
    "layout",
    "dashboard"
  ]
}