{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "toggle-setting-list",
  "title": "Toggle Setting List",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/toggle-setting-list/toggle-setting-list.component.ts",
      "content": "// List of toggle-able settings in a SectionCard. Spell rows out inline with\n// UiToggleSettingRow — each row is a controlled switch taking `checked` + `checkedChange`.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiSectionCardComponent } from '@/ui/section-card/section-card.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-toggle-setting-list, [ui-toggle-setting-list]',\n  standalone: true,\n  // React renders the SectionCard itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [UiSectionCardComponent],\n  template: `\n    <div\n      ui-section-card\n      data-slot=\"toggle-setting-list\"\n      [title]=\"title\"\n      [description]=\"description\"\n      [class]=\"rootClass\"\n    >\n      <div slot=\"header-action\">\n        <ng-content select=\"[header-icon]\" />\n      </div>\n      <ul class=\"-my-4 divide-y\">\n        <ng-content />\n      </ul>\n    </div>\n  `,\n})\nexport class UiToggleSettingListComponent {\n  @Input() title = 'Notifications'\n  @Input() description?: string\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn(this.className)\n  }\n}\n\n/** One controlled switch row. Hold state in the parent and wire `checked` + `checkedChange` per row. */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-toggle-setting-row, [ui-toggle-setting-row]',\n  standalone: true,\n  host: { '[attr.class]': '\"contents\"' },\n  template: `\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        }\n      </div>\n      <button\n        type=\"button\"\n        role=\"switch\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-checked]=\"checked\"\n        [class]=\"\n          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        \"\n        (click)=\"checkedChange.emit(!checked)\"\n      >\n        <span\n          [class]=\"\n            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          \"\n        ></span>\n      </button>\n    </li>\n  `,\n})\nexport class UiToggleSettingRowComponent {\n  protected readonly cn = cn\n\n  @Input() label = ''\n  @Input() desc?: string\n  @Input() checked = false\n  @Output() checkedChange = new EventEmitter<boolean>()\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/toggle-setting-list/toggle-setting-list.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/toggle-setting-list/index.ts",
      "content": "export { UiToggleSettingListComponent, UiToggleSettingRowComponent } from './toggle-setting-list.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/toggle-setting-list/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/section-card.json"
  ],
  "description": "List of toggle-able settings in a SectionCard. Spell rows out inline with UiToggleSettingRow — each row is a controlled switch taking `checked` + `checkedChange`.",
  "categories": [
    "layout",
    "dashboard"
  ]
}