{
  "name": "radio-group",
  "type": "registry:component",
  "files": [
    {
      "name": "radio-group.component.ts",
      "content": "import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  inject,\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 { radioGroupVariants, radioVariants } from './radio-group.variants';\n\ntype OnTouchedType = () => void;\ntype OnChangeType = (value: unknown) => void;\n\n@Component({\n  selector: 'z-radio-group, [z-radio-group]',\n  template: '<ng-content />',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ZardRadioGroupComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'radiogroup',\n    'data-slot': 'radio-group',\n    '[attr.aria-disabled]': 'isDisabled() ? \"true\" : null',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zRadioGroup',\n})\nexport class ZardRadioGroupComponent implements ControlValueAccessor {\n  readonly class = input<ClassValue>('');\n  readonly value = model<unknown>(null);\n  readonly zDisabled = input(false, { transform: booleanAttribute });\n  readonly name = input<string>('');\n\n  protected readonly formDisabled = signal(false);\n  protected readonly classes = computed(() => mergeClasses(radioGroupVariants(), this.class()));\n  readonly isDisabled = computed(() => this.zDisabled() || this.formDisabled());\n\n  private onChange: OnChangeType = noopFn;\n  private onTouched: OnTouchedType = noopFn;\n\n  select(value: unknown): void {\n    if (this.isDisabled()) return;\n    this.value.set(value);\n    this.onChange(value);\n    this.onTouched();\n  }\n\n  isSelected(value: unknown): boolean {\n    return this.value() === value;\n  }\n\n  writeValue(val: unknown): void {\n    this.value.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  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n\n@Component({\n  selector: 'z-radio, [z-radio]',\n  imports: [ZardIdDirective],\n  template: `\n    <button\n      [id]=\"zId() || z.id()\"\n      type=\"button\"\n      role=\"radio\"\n      [attr.data-state]=\"checked() ? 'checked' : 'unchecked'\"\n      [attr.data-checked]=\"checked() ? '' : null\"\n      [attr.aria-checked]=\"checked()\"\n      [attr.aria-invalid]=\"zInvalid() ? 'true' : null\"\n      [class]=\"classes()\"\n      [disabled]=\"disabledState()\"\n      (click)=\"onSelect()\"\n      zardId=\"radio\"\n      #z=\"zardId\"\n    >\n      @if (checked()) {\n        <span data-slot=\"radio-group-indicator\" class=\"flex size-4 items-center justify-center\">\n          <span\n            class=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\"\n          ></span>\n        </span>\n      }\n    </button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'zRadio',\n})\nexport class ZardRadioComponent {\n  private readonly group = inject(ZardRadioGroupComponent, { optional: true });\n\n  readonly class = input<ClassValue>('');\n  readonly value = input<unknown>(null);\n  readonly zDisabled = input(false, { transform: booleanAttribute });\n  readonly zInvalid = input(false, { transform: booleanAttribute });\n  readonly zId = input<string>('');\n\n  protected readonly checked = computed(() => this.group!.isSelected(this.value()));\n  protected readonly disabledState = computed(() => this.zDisabled() || this.group!.isDisabled());\n  protected readonly classes = computed(() => mergeClasses(radioVariants(), this.class()));\n\n  constructor() {\n    if (!this.group) {\n      throw new Error('<z-radio> must be used inside a <z-radio-group>.');\n    }\n  }\n\n  onSelect(): void {\n    if (this.disabledState()) return;\n    this.group!.select(this.value());\n  }\n}\n"
    },
    {
      "name": "radio-group.variants.ts",
      "content": "import { cva } from 'class-variance-authority';\n\nexport const radioGroupVariants = cva('grid w-full gap-2');\n\nexport const radioVariants = cva(\n  'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',\n);\n"
    },
    {
      "name": "radio-group.imports.ts",
      "content": "export { ZardRadioComponent, ZardRadioGroupComponent } from './radio-group.component';\n\nimport { ZardRadioComponent, ZardRadioGroupComponent } from './radio-group.component';\n\nexport const ZardRadioGroupImports = [ZardRadioGroupComponent, ZardRadioComponent] as const;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './radio-group.component';\nexport * from './radio-group.imports';\nexport * from './radio-group.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "choice-card.ts",
      "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardRadioGroupImports } from '@/shared/components/radio-group/radio-group.imports';\n\n@Component({\n  selector: 'z-demo-radio-group-choice-card',\n  imports: [...ZardRadioGroupImports, ...ZardFieldImports, FormsModule],\n  template: `\n    <z-radio-group [(value)]=\"selected\" class=\"min-w-sm\">\n      <label z-field-label for=\"plus-plan\">\n        <div z-field zOrientation=\"horizontal\">\n          <div z-field-content>\n            <div z-field-title>Plus</div>\n            <p z-field-description>For individuals and small teams.</p>\n          </div>\n          <z-radio zId=\"plus-plan\" value=\"plus\" />\n        </div>\n      </label>\n      <label z-field-label for=\"pro-plan\">\n        <div z-field zOrientation=\"horizontal\">\n          <div z-field-content>\n            <div z-field-title>Pro</div>\n            <p z-field-description>For growing businesses.</p>\n          </div>\n          <z-radio zId=\"pro-plan\" value=\"pro\" />\n        </div>\n      </label>\n      <label z-field-label for=\"enterprise-plan\">\n        <div z-field zOrientation=\"horizontal\">\n          <div z-field-content>\n            <div z-field-title>Enterprise</div>\n            <p z-field-description>For large teams and enterprises.</p>\n          </div>\n          <z-radio zId=\"enterprise-plan\" value=\"enterprise\" />\n        </div>\n      </label>\n    </z-radio-group>\n  `,\n})\nexport class ZardDemoRadioGroupChoiceCardComponent {\n  selected: unknown = 'plus';\n}\n"
    },
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardRadioGroupImports } from '@/shared/components/radio-group/radio-group.imports';\n\n@Component({\n  selector: 'z-demo-radio-group-default',\n  imports: [...ZardRadioGroupImports, ...ZardFieldImports, FormsModule],\n  template: `\n    <z-radio-group [(value)]=\"selected\" class=\"w-fit\">\n      <div class=\"flex items-center gap-3\">\n        <z-radio zId=\"r1\" value=\"default\" />\n        <label z-field-label for=\"r1\">Default</label>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <z-radio zId=\"r2\" value=\"comfortable\" />\n        <label z-field-label for=\"r2\">Comfortable</label>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <z-radio zId=\"r3\" value=\"compact\" />\n        <label z-field-label for=\"r3\">Compact</label>\n      </div>\n    </z-radio-group>\n  `,\n})\nexport class ZardDemoRadioGroupDefaultComponent {\n  selected: unknown = 'comfortable';\n}\n"
    },
    {
      "name": "description.ts",
      "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardRadioGroupImports } from '@/shared/components/radio-group/radio-group.imports';\n\n@Component({\n  selector: 'z-demo-radio-group-description',\n  imports: [...ZardRadioGroupImports, ...ZardFieldImports, FormsModule],\n  template: `\n    <z-radio-group [(value)]=\"selected\" class=\"w-fit\">\n      <div z-field zOrientation=\"horizontal\">\n        <z-radio zId=\"desc-r1\" value=\"default\" />\n        <div z-field-content>\n          <label z-field-label for=\"desc-r1\">Default</label>\n          <p z-field-description>Standard spacing for most use cases.</p>\n        </div>\n      </div>\n      <div z-field zOrientation=\"horizontal\">\n        <z-radio zId=\"desc-r2\" value=\"comfortable\" />\n        <div z-field-content>\n          <label z-field-label for=\"desc-r2\">Comfortable</label>\n          <p z-field-description>More space between elements.</p>\n        </div>\n      </div>\n      <div z-field zOrientation=\"horizontal\">\n        <z-radio zId=\"desc-r3\" value=\"compact\" />\n        <div z-field-content>\n          <label z-field-label for=\"desc-r3\">Compact</label>\n          <p z-field-description>Minimal spacing for dense layouts.</p>\n        </div>\n      </div>\n    </z-radio-group>\n  `,\n})\nexport class ZardDemoRadioGroupDescriptionComponent {\n  selected: unknown = 'comfortable';\n}\n"
    },
    {
      "name": "disabled.ts",
      "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardRadioGroupImports } from '@/shared/components/radio-group/radio-group.imports';\n\n@Component({\n  selector: 'z-demo-radio-group-disabled',\n  imports: [...ZardRadioGroupImports, ...ZardFieldImports, FormsModule],\n  template: `\n    <z-radio-group [(value)]=\"selected\" class=\"w-fit\">\n      <div z-field zOrientation=\"horizontal\" data-disabled=\"true\">\n        <z-radio zId=\"disabled-1\" value=\"option1\" zDisabled />\n        <label z-field-label for=\"disabled-1\" class=\"font-normal\">Disabled</label>\n      </div>\n      <div z-field zOrientation=\"horizontal\">\n        <z-radio zId=\"disabled-2\" value=\"option2\" />\n        <label z-field-label for=\"disabled-2\" class=\"font-normal\">Option 2</label>\n      </div>\n      <div z-field zOrientation=\"horizontal\">\n        <z-radio zId=\"disabled-3\" value=\"option3\" />\n        <label z-field-label for=\"disabled-3\" class=\"font-normal\">Option 3</label>\n      </div>\n    </z-radio-group>\n  `,\n})\nexport class ZardDemoRadioGroupDisabledComponent {\n  selected: unknown = 'option2';\n}\n"
    },
    {
      "name": "fieldset.ts",
      "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardRadioGroupImports } from '@/shared/components/radio-group/radio-group.imports';\n\n@Component({\n  selector: 'z-demo-radio-group-fieldset',\n  imports: [...ZardRadioGroupImports, ...ZardFieldImports, FormsModule],\n  template: `\n    <fieldset z-field-set class=\"w-full max-w-xs\">\n      <legend z-field-legend zVariant=\"label\">Subscription Plan</legend>\n      <p z-field-description>Yearly and lifetime plans offer significant savings.</p>\n      <z-radio-group [(value)]=\"plan\">\n        <div z-field zOrientation=\"horizontal\">\n          <z-radio zId=\"plan-monthly\" value=\"monthly\" />\n          <label z-field-label for=\"plan-monthly\" class=\"font-normal\">Monthly ($9.99/month)</label>\n        </div>\n        <div z-field zOrientation=\"horizontal\">\n          <z-radio zId=\"plan-yearly\" value=\"yearly\" />\n          <label z-field-label for=\"plan-yearly\" class=\"font-normal\">Yearly ($99.99/year)</label>\n        </div>\n        <div z-field zOrientation=\"horizontal\">\n          <z-radio zId=\"plan-lifetime\" value=\"lifetime\" />\n          <label z-field-label for=\"plan-lifetime\" class=\"font-normal\">Lifetime ($299.99)</label>\n        </div>\n      </z-radio-group>\n    </fieldset>\n  `,\n})\nexport class ZardDemoRadioGroupFieldsetComponent {\n  plan: unknown = 'monthly';\n}\n"
    },
    {
      "name": "invalid.ts",
      "content": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardRadioGroupImports } from '@/shared/components/radio-group/radio-group.imports';\n\n@Component({\n  selector: 'z-demo-radio-group-invalid',\n  imports: [...ZardRadioGroupImports, ...ZardFieldImports, FormsModule],\n  template: `\n    <fieldset z-field-set class=\"w-full max-w-xs\">\n      <legend z-field-legend zVariant=\"label\">Notification Preferences</legend>\n      <p z-field-description>Choose how you want to receive notifications.</p>\n      <z-radio-group [(value)]=\"selected\">\n        <div z-field zOrientation=\"horizontal\" data-invalid=\"true\">\n          <z-radio zId=\"invalid-email\" value=\"email\" zInvalid />\n          <label z-field-label for=\"invalid-email\" class=\"font-normal\">Email only</label>\n        </div>\n        <div z-field zOrientation=\"horizontal\" data-invalid=\"true\">\n          <z-radio zId=\"invalid-sms\" value=\"sms\" zInvalid />\n          <label z-field-label for=\"invalid-sms\" class=\"font-normal\">SMS only</label>\n        </div>\n        <div z-field zOrientation=\"horizontal\" data-invalid=\"true\">\n          <z-radio zId=\"invalid-both\" value=\"both\" zInvalid />\n          <label z-field-label for=\"invalid-both\" class=\"font-normal\">Both Email & SMS</label>\n        </div>\n      </z-radio-group>\n    </fieldset>\n  `,\n})\nexport class ZardDemoRadioGroupInvalidComponent {\n  selected: unknown = 'email';\n}\n"
    }
  ]
}