{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "toggle-setting-list",
  "title": "Toggle Setting List",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/toggle-setting-list/ToggleSettingList.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport { SectionCard } from '@/components/ui/section-card'\n\ninterface SettingRow {\n  key: string\n  label: string\n  desc?: string\n}\n\nconst props = defineProps<{\n  title?: string\n  description?: string\n  headerIcon?: Component\n  items: SettingRow[]\n  modelValue: Record<string, boolean>\n  class?: string\n}>()\n\nconst emit = defineEmits<{ 'update:modelValue': [Record<string, boolean>] }>()\n\nfunction toggle(key: string) {\n  emit('update:modelValue', { ...props.modelValue, [key]: !props.modelValue[key] })\n}\n</script>\n\n<template>\n  <SectionCard :title=\"title ?? 'Notifications'\" :description=\"description\" :class=\"$props.class\">\n    <template v-if=\"headerIcon\" #header-action>\n      <component :is=\"headerIcon\" class=\"text-muted-foreground size-5\" />\n    </template>\n    <ul class=\"-my-4 divide-y\">\n      <li\n        v-for=\"(row, i) in items\"\n        :key=\"row.key\"\n        class=\"flex items-center justify-between gap-4 py-4\"\n        :class=\"i === 0 ? 'pt-0' : ''\"\n      >\n        <div>\n          <p class=\"text-sm font-medium\">{{ row.label }}</p>\n          <p v-if=\"row.desc\" class=\"text-muted-foreground text-xs\">{{ row.desc }}</p>\n        </div>\n        <button\n          type=\"button\"\n          role=\"switch\"\n          :aria-checked=\"modelValue[row.key]\"\n          class=\"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          :class=\"modelValue[row.key] ? 'bg-primary' : 'bg-muted-foreground/30'\"\n          @click=\"toggle(row.key)\"\n        >\n          <span\n            class=\"bg-background inline-block size-4 translate-y-0.5 rounded-full shadow transition-transform\"\n            :class=\"modelValue[row.key] ? 'translate-x-[18px]' : 'translate-x-0.5'\"\n          />\n        </button>\n      </li>\n    </ul>\n  </SectionCard>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ToggleSettingList.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/section-card.json"
  ],
  "description": "List of toggle-able settings in a SectionCard. v-model binds a Record<string, boolean> keyed by item.key.",
  "categories": [
    "dashboard"
  ]
}