{
  "name": "switch",
  "type": "registry:component",
  "files": [
    {
      "name": "switch.component.ts",
      "content": "import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport type { ClassValue } from 'clsx';\n\nimport { ZardIdDirective } from '@/shared/core';\nimport { mergeClasses, noopFn } from '@/shared/utils/merge-classes';\n\nimport { switchVariants, type ZardSwitchSizeVariants } from './switch.variants';\n\ntype OnTouchedType = () => void;\ntype OnChangeType = (value: boolean) => void;\n\n@Component({\n  selector: 'z-switch',\n  imports: [ZardIdDirective],\n  template: `\n    <span class=\"flex items-center space-x-2\" zardId=\"switch\" #z=\"zardId\" [attr.data-checked]=\"zChecked() ? '' : null\">\n      <button\n        [id]=\"zId() || z.id()\"\n        type=\"button\"\n        role=\"switch\"\n        [attr.data-state]=\"status()\"\n        [attr.aria-checked]=\"zChecked()\"\n        [attr.aria-invalid]=\"zInvalid() ? 'true' : null\"\n        [class]=\"classes()\"\n        [disabled]=\"zDisabled() || formDisabled()\"\n        (click)=\"onSwitchChange()\"\n      >\n        <span\n          [attr.data-size]=\"zSize()\"\n          [attr.data-state]=\"status()\"\n          class=\"bg-background dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform data-[size=default]:size-4 data-[size=sm]:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\n        ></span>\n      </button>\n\n      <label\n        class=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        [for]=\"zId() || z.id()\"\n      >\n        <ng-content><span class=\"sr-only\">toggle switch</span></ng-content>\n      </label>\n    </span>\n  `,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ZardSwitchComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'zSwitch',\n})\nexport class ZardSwitchComponent implements ControlValueAccessor {\n  readonly class = input<ClassValue>('');\n  readonly zChecked = model<boolean>(false);\n  readonly zId = input<string>('');\n  readonly zSize = input<ZardSwitchSizeVariants>('default');\n  readonly zDisabled = input(false, { transform: booleanAttribute });\n  readonly zInvalid = input(false, { transform: booleanAttribute });\n\n  private onChange: OnChangeType = noopFn;\n  private onTouched: OnTouchedType = noopFn;\n\n  protected readonly status = computed(() => (this.zChecked() ? 'checked' : 'unchecked'));\n  protected readonly classes = computed(() => mergeClasses(switchVariants({ zSize: this.zSize() }), this.class()));\n\n  protected readonly formDisabled = signal(false);\n\n  writeValue(val: boolean): void {\n    this.zChecked.set(val);\n  }\n\n  registerOnChange(fn: OnChangeType): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: OnTouchedType): void {\n    this.onTouched = fn;\n  }\n\n  onSwitchChange(): void {\n    if (this.zDisabled() || this.formDisabled()) {\n      return;\n    }\n\n    this.zChecked.update(checked => !checked);\n    this.onTouched();\n    this.onChange(this.zChecked());\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n"
    },
    {
      "name": "switch.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const switchVariants = cva(\n  'peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      zSize: {\n        default: 'h-[18.4px] w-[32px]',\n        sm: 'h-[14px] w-[24px]',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  },\n);\n\nexport type ZardSwitchSizeVariants = NonNullable<VariantProps<typeof switchVariants>['zSize']>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './switch.component';\nexport * from './switch.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "choice-card.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardSwitchComponent } from '@/shared/components/switch/switch.component';\n\n@Component({\n  selector: 'z-demo-switch-choice-card',\n  imports: [...ZardFieldImports, ZardSwitchComponent],\n  template: `\n    <div z-field-group class=\"w-full min-w-sm\">\n      <label z-field-label for=\"switch-share\">\n        <div z-field zOrientation=\"horizontal\">\n          <div z-field-content>\n            <div z-field-title>Share across devices</div>\n            <p z-field-description>Focus is shared across devices, and turns off when you leave the app.</p>\n          </div>\n          <z-switch zId=\"switch-share\" />\n        </div>\n      </label>\n      <label z-field-label for=\"switch-notifications\">\n        <div z-field zOrientation=\"horizontal\">\n          <div z-field-content>\n            <div z-field-title>Enable notifications</div>\n            <p z-field-description>Receive notifications when focus mode is enabled or disabled.</p>\n          </div>\n          <z-switch zId=\"switch-notifications\" [zChecked]=\"true\" />\n        </div>\n      </label>\n    </div>\n  `,\n})\nexport class ZardDemoSwitchChoiceCardComponent {}\n"
    },
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardSwitchComponent } from '@/shared/components/switch/switch.component';\n\n@Component({\n  selector: 'zard-demo-switch',\n  imports: [ZardSwitchComponent],\n  template: `\n    <z-switch zId=\"airplane-mode\">Airplane Mode</z-switch>\n  `,\n})\nexport class ZardDemoSwitchDefaultComponent {}\n"
    },
    {
      "name": "description.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardSwitchComponent } from '@/shared/components/switch/switch.component';\n\n@Component({\n  selector: 'z-demo-switch-description',\n  imports: [...ZardFieldImports, ZardSwitchComponent],\n  template: `\n    <div z-field zOrientation=\"horizontal\" class=\"max-w-sm\">\n      <div z-field-content>\n        <label z-field-label for=\"switch-focus-mode\">Share across devices</label>\n        <p z-field-description>Focus is shared across devices, and turns off when you leave the app.</p>\n      </div>\n      <z-switch zId=\"switch-focus-mode\" />\n    </div>\n  `,\n})\nexport class ZardDemoSwitchDescriptionComponent {}\n"
    },
    {
      "name": "disabled.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardSwitchComponent } from '@/shared/components/switch/switch.component';\n\n@Component({\n  selector: 'z-demo-switch-disabled',\n  imports: [...ZardFieldImports, ZardSwitchComponent],\n  template: `\n    <div z-field zOrientation=\"horizontal\" data-disabled=\"true\" class=\"w-fit\">\n      <z-switch zId=\"switch-disabled-unchecked\" zDisabled />\n      <label z-field-label for=\"switch-disabled-unchecked\">Disabled</label>\n    </div>\n  `,\n})\nexport class ZardDemoSwitchDisabledComponent {}\n"
    },
    {
      "name": "invalid.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardSwitchComponent } from '@/shared/components/switch/switch.component';\n\n@Component({\n  selector: 'z-demo-switch-invalid',\n  imports: [...ZardFieldImports, ZardSwitchComponent],\n  template: `\n    <div z-field zOrientation=\"horizontal\" data-invalid=\"true\" class=\"max-w-sm\">\n      <div z-field-content>\n        <label z-field-label for=\"switch-terms\">Accept terms and conditions</label>\n        <p z-field-description>You must accept the terms and conditions to continue.</p>\n      </div>\n      <z-switch zId=\"switch-terms\" zInvalid />\n    </div>\n  `,\n})\nexport class ZardDemoSwitchInvalidComponent {}\n"
    },
    {
      "name": "size.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardSwitchComponent } from '@/shared/components/switch/switch.component';\n\n@Component({\n  selector: 'z-demo-switch-size',\n  imports: [ZardSwitchComponent],\n  template: `\n    <div class=\"grid w-full min-w-sm items-center justify-center gap-6\">\n      <z-switch zSize=\"sm\">Small</z-switch>\n      <z-switch>Default</z-switch>\n    </div>\n  `,\n})\nexport class ZardDemoSwitchSizeComponent {}\n"
    }
  ]
}