{
  "$schema": "https://ui.adrianub.dev/schema/registry-item.json",
  "author": "Adrián UB (https://ui.adrianub.dev)",
  "name": "switch",
  "type": "registry:ui",
  "dependencies": [
    "@radix-ng/primitives"
  ],
  "files": [
    {
      "path": "ui/switch.ts",
      "content": "import { Component, computed, input } from '@angular/core'\nimport { RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch'\n\nimport { cn } from '~/lib/utils'\n\n@Component({\n  standalone: true,\n  selector: 'button[ubSwitch]',\n  imports: [RdxSwitchThumbDirective],\n  hostDirectives: [\n    {\n      directive: RdxSwitchRootDirective,\n      inputs: ['id', 'required', 'checked', 'disabled'],\n      outputs: ['onCheckedChange'],\n    },\n  ],\n  host: {\n    '[class]': 'computedClass()',\n  },\n  template: `\n    <span rdxSwitchThumb class=\"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"></span>\n    `,\n})\nexport class SwitchDirective {\n  readonly class = input<string>()\n  readonly computedClass = computed(() => {\n    return cn('peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', this.class())\n  })\n}\n",
      "type": "registry:ui"
    }
  ]
}