{
  "name": "toggle",
  "type": "registry:component",
  "files": [
    {
      "name": "toggle.component.ts",
      "content": "import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  linkedSignal,\n  model,\n  output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport type { ClassValue } from 'clsx';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport { toggleVariants, type ZardToggleSizeVariants, type ZardToggleTypeVariants } from './toggle.variants';\n\ntype OnTouchedType = () => void;\ntype OnChangeType = (value: boolean) => void;\n\n@Component({\n  selector: 'z-toggle',\n  template: `\n    <button\n      type=\"button\"\n      data-slot=\"toggle\"\n      [attr.aria-label]=\"zAriaLabel()\"\n      [attr.aria-pressed]=\"zValue()\"\n      [attr.data-state]=\"state()\"\n      [class]=\"classes()\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\"\n    >\n      <ng-content />\n    </button>\n  `,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ZardToggleComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '(mouseenter)': 'handleHover()',\n  },\n  exportAs: 'zToggle',\n})\nexport class ZardToggleComponent implements ControlValueAccessor {\n  readonly zValue = model(false);\n  readonly zDisabled = input(false, { transform: booleanAttribute });\n  readonly zType = input<ZardToggleTypeVariants>('default');\n  readonly zSize = input<ZardToggleSizeVariants>('default');\n  readonly zAriaLabel = input.required<string>();\n  readonly class = input<ClassValue>('');\n\n  readonly zToggleClick = output<void>();\n  readonly zToggleHover = output<void>();\n  readonly zToggleChange = output<boolean>();\n\n  protected readonly state = computed(() => (this.zValue() ? 'on' : 'off'));\n\n  protected readonly disabled = linkedSignal(() => this.zDisabled());\n\n  protected readonly classes = computed(() =>\n    mergeClasses(toggleVariants({ zSize: this.zSize(), zType: this.zType() }), this.class()),\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onTouched: OnTouchedType = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onChangeFn: OnChangeType = () => {};\n\n  handleHover() {\n    this.zToggleHover.emit();\n  }\n\n  toggle() {\n    if (this.disabled()) {\n      return;\n    }\n\n    this.zValue.update(v => !v);\n\n    this.zToggleClick.emit();\n    this.zToggleChange.emit(this.zValue());\n    this.onChangeFn(this.zValue());\n    this.onTouched();\n  }\n\n  writeValue(val: boolean): void {\n    this.zValue.set(val);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  registerOnChange(fn: any): void {\n    this.onChangeFn = fn;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n  }\n}\n"
    },
    {
      "name": "toggle.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer\",\n  {\n    variants: {\n      zType: {\n        default: 'bg-transparent',\n        outline: 'border border-input bg-transparent',\n      },\n      zSize: {\n        default: 'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n      },\n    },\n    defaultVariants: {\n      zType: 'default',\n      zSize: 'default',\n    },\n  },\n);\nexport type ZardToggleTypeVariants = NonNullable<VariantProps<typeof toggleVariants>['zType']>;\nexport type ZardToggleSizeVariants = NonNullable<VariantProps<typeof toggleVariants>['zSize']>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './toggle.component';\nexport * from './toggle.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBookmark } from '@ng-icons/lucide';\n\nimport { ZardToggleComponent } from '../toggle.component';\n\n@Component({\n  selector: 'z-demo-toggle-default',\n  imports: [ZardToggleComponent, NgIcon],\n  template: `\n    <z-toggle zAriaLabel=\"Toggle bookmark\" zSize=\"sm\" zType=\"outline\">\n      <ng-icon name=\"lucideBookmark\" class=\"group-data-[state=on]/toggle:[&_path]:fill-foreground\" />\n      Bookmark\n    </z-toggle>\n  `,\n  viewProviders: [provideIcons({ lucideBookmark })],\n})\nexport class ZardDemoToggleDefaultComponent {}\n"
    },
    {
      "name": "disabled.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardToggleComponent } from '../toggle.component';\n\n@Component({\n  selector: 'z-demo-toggle-disabled',\n  imports: [ZardToggleComponent],\n  template: `\n    <div class=\"flex items-center gap-2\">\n      <z-toggle zAriaLabel=\"Toggle disabled\" zDisabled>Disabled</z-toggle>\n      <z-toggle zAriaLabel=\"Toggle disabled outline\" zType=\"outline\" zDisabled>Disabled</z-toggle>\n    </div>\n  `,\n})\nexport class ZardDemoToggleDisabledComponent {}\n"
    },
    {
      "name": "outline.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBold, lucideItalic } from '@ng-icons/lucide';\n\nimport { ZardToggleComponent } from '../toggle.component';\n\n@Component({\n  selector: 'z-demo-toggle-outline',\n  imports: [ZardToggleComponent, NgIcon],\n  template: `\n    <div class=\"flex items-center gap-2\">\n      <z-toggle zAriaLabel=\"Toggle italic\" zType=\"outline\">\n        <ng-icon name=\"lucideItalic\" />\n        Italic\n      </z-toggle>\n      <z-toggle zAriaLabel=\"Toggle bold\" zType=\"outline\">\n        <ng-icon name=\"lucideBold\" />\n        Bold\n      </z-toggle>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideBold, lucideItalic })],\n})\nexport class ZardDemoToggleOutlineComponent {}\n"
    },
    {
      "name": "size.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardToggleComponent } from '../toggle.component';\n\n@Component({\n  selector: 'z-demo-toggle-size',\n  imports: [ZardToggleComponent],\n  template: `\n    <div class=\"flex items-center gap-2\">\n      <z-toggle zAriaLabel=\"Toggle small\" zSize=\"sm\" zType=\"outline\">Small</z-toggle>\n      <z-toggle zAriaLabel=\"Toggle default\" zSize=\"default\" zType=\"outline\">Default</z-toggle>\n      <z-toggle zAriaLabel=\"Toggle large\" zSize=\"lg\" zType=\"outline\">Large</z-toggle>\n    </div>\n  `,\n})\nexport class ZardDemoToggleSizeComponent {}\n"
    },
    {
      "name": "with-bindings.ts",
      "content": "import { Component, computed, signal } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideLightbulb, lucideLightbulbOff } from '@ng-icons/lucide';\n\nimport { ZardToggleComponent } from '../toggle.component';\n\n@Component({\n  selector: 'z-demo-toggle-with-bindings',\n  imports: [ZardToggleComponent, NgIcon],\n  template: `\n    <div class=\"flex flex-col items-center gap-8\">\n      <z-toggle zAriaLabel=\"Turn on the light\" [(zValue)]=\"lightOn\" zType=\"outline\">\n        <ng-icon [name]=\"bulb()\" />\n      </z-toggle>\n      <span>Light is {{ state() }}.</span>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideLightbulb, lucideLightbulbOff })],\n})\nexport class ZardDemoToggleWithBindingsComponent {\n  protected readonly lightOn = signal(false);\n  protected readonly bulb = computed(() => (this.lightOn() ? 'lucideLightbulb' : 'lucideLightbulbOff'));\n  protected readonly state = computed(() => (this.lightOn() ? 'on' : 'off'));\n}\n"
    },
    {
      "name": "with-text.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideItalic } from '@ng-icons/lucide';\n\nimport { ZardToggleComponent } from '../toggle.component';\n\n@Component({\n  selector: 'z-demo-toggle-with-text',\n  imports: [ZardToggleComponent, NgIcon],\n  template: `\n    <z-toggle zAriaLabel=\"Toggle italic\">\n      <ng-icon name=\"lucideItalic\" />\n      Italic\n    </z-toggle>\n  `,\n  viewProviders: [provideIcons({ lucideItalic })],\n})\nexport class ZardDemoToggleWithTextComponent {}\n"
    }
  ]
}