@ng-zen/cli 20.4.0 → 20.5.0-next.1

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [20.5.0-next.1](https://github.com/kstepien3/ng-zen/compare/v20.4.0...v20.5.0-next.1) (2025-11-28)
+
+### 🚀 New Features
+
+* **radio:** add component ([#358](https://github.com/kstepien3/ng-zen/issues/358)) ([a2f170e](https://github.com/kstepien3/ng-zen/commit/a2f170e0b18eadfc43c39a1d36597192d0f90c73))
+
+### 📚 Documentation
+
+* **assets:** optimize logos ([#354](https://github.com/kstepien3/ng-zen/issues/354)) ([66fd5ba](https://github.com/kstepien3/ng-zen/commit/66fd5ba61e005b407c036dd34dcfa996e8884e8b))
+* **development:** fix verdaccio installation command in guide ([#359](https://github.com/kstepien3/ng-zen/issues/359)) ([6945e65](https://github.com/kstepien3/ng-zen/commit/6945e65f648362ec096e17de6a2118be3340cbee))
+
 ## [20.4.0](https://github.com/kstepien3/ng-zen/compare/v20.3.0...v20.4.0) (2025-10-05)
 
 ### 🚀 New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "20.4.0",
+  "version": "20.5.0-next.1",
   "description": "Angular UI components generator – Zen UI Kit CLI for schematics-based creation of customizable components like avatar, button, checkbox, divider, form-control, icon, input, skeleton, switch, textarea with Storybook demos.",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/components/files/radio/index.ts

@@ -0,0 +1 @@
+export * from './radio';

package/schematics/components/files/radio/radio.registry.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+
+import { ZenRadio } from './radio';
+
+@Injectable({ providedIn: 'root' })
+export class ZenRadioRegistry {
+  private readonly radios = new Map<string, ZenRadio[]>();
+
+  add(name: string, radio: ZenRadio): void {
+    if (!this.radios.has(name)) {
+      this.radios.set(name, []);
+    }
+    this.radios.get(name)!.push(radio);
+  }
+
+  remove(name: string, radio: ZenRadio): void {
+    const group = this.radios.get(name);
+    if (!group) return;
+
+    const index = group.indexOf(radio);
+    if (index > -1) {
+      group.splice(index, 1);
+    }
+  }
+
+  select(name: string, value: string): void {
+    const group = this.radios.get(name);
+    if (!group) return;
+
+    group.forEach(radio => {
+      radio.onInput(value);
+    });
+  }
+}

package/schematics/components/files/radio/radio.scss

@@ -0,0 +1,86 @@
+// Globals
+$error: var(--zen-error, hsl(0deg 70% 50%));
+$focus-shadow: var(--zen-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
+$transition-duration: var(--zen-transition-duration, 0.2s);
+
+:host {
+  --zen-radio-size: 1rem;
+  --zen-radio-border-radius: 50%;
+  --zen-radio-appearance: hsl(0deg 0% 10%);
+  --zen-radio-disabled-opacity: 0.6;
+  --zen-radio-border: 1px solid hsl(0deg 0% 80%);
+}
+
+input {
+  position: absolute;
+  cursor: pointer;
+  opacity: 0;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  top: 0;
+  left: 0;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  border: var(--zen-radio-border);
+  border-radius: var(--zen-radio-border-radius);
+  height: var(--zen-radio-size);
+  width: var(--zen-radio-size);
+  background-color: white;
+  cursor: pointer;
+  position: relative;
+  transition:
+    background-color ease,
+    border-color ease;
+  transition-duration: $transition-duration;
+  user-select: none;
+  justify-content: center;
+  display: grid;
+  place-items: center;
+
+  &:has(input:checked) {
+    border-color: var(--zen-radio-appearance);
+  }
+
+  &:has(input[type='radio']:disabled) {
+    opacity: var(--zen-radio-disabled-opacity);
+
+    &,
+    input {
+      cursor: not-allowed;
+    }
+  }
+
+  &:has(input:focus-visible) {
+    outline: $outline;
+    box-shadow: $focus-shadow;
+  }
+
+  &:has(input:user-invalid) {
+    border-color: $error;
+  }
+}
+
+.radio-dot {
+  width: calc(var(--zen-radio-size) * 0.4);
+  height: calc(var(--zen-radio-size) * 0.4);
+  background-color: var(--zen-radio-appearance);
+  border-radius: 50%;
+  animation: radio-dot-enter 0.2s ease-out;
+}
+
+@keyframes radio-dot-enter {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/schematics/components/files/radio/radio.spec.ts

@@ -0,0 +1,278 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+
+import { ZenRadio } from './radio';
+import { ZenRadioRegistry } from './radio.registry';
+
+describe('ZenRadio', () => {
+  let component: ZenRadio;
+  let fixture: ComponentFixture<ZenRadio>;
+  let registry: ZenRadioRegistry;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenRadio, FormsModule, ReactiveFormsModule],
+      providers: [ZenRadioRegistry],
+    }).compileComponents();
+
+    registry = TestBed.inject(ZenRadioRegistry);
+    fixture = TestBed.createComponent(ZenRadio);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('name', 'test-group');
+    fixture.componentRef.setInput('option', 'test-value');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should check when value matches option', () => {
+    component.value.set('test-value');
+    fixture.detectChanges();
+
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(inputElement.checked).toBe(true);
+  });
+
+  it('should uncheck when value differs from option', () => {
+    component.value.set('different-value');
+    fixture.detectChanges();
+
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(inputElement.checked).toBe(false);
+  });
+
+  it('should show radio dot when checked', () => {
+    component.value.set('test-value');
+    fixture.detectChanges();
+
+    const radioDot = fixture.debugElement.query(By.css('.radio-dot'));
+    expect(radioDot).toBeTruthy();
+  });
+
+  it('should not show radio dot when unchecked', () => {
+    component.value.set('different-value');
+    fixture.detectChanges();
+
+    const radioDot = fixture.debugElement.query(By.css('.radio-dot'));
+    expect(radioDot).toBeFalsy();
+  });
+
+  it('should call onInput when radio is selected', () => {
+    const spy = jest.spyOn(component, 'onInput');
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+    inputElement.checked = true;
+    inputElement.dispatchEvent(new Event('change'));
+
+    expect(spy).toHaveBeenCalledWith('test-value');
+  });
+
+  it('should not call onInput when disabled', () => {
+    component.disabled.set(true);
+    fixture.detectChanges();
+
+    const spy = jest.spyOn(component, 'onInput');
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+    inputElement.checked = true;
+    inputElement.dispatchEvent(new Event('change'));
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('should integrate with ngModel', () => {
+    let selectedValue: string | null = null;
+
+    const testFixture = TestBed.createComponent(ZenRadio);
+    testFixture.componentRef.setInput('name', 'ng-model-group');
+    testFixture.componentRef.setInput('option', 'option1');
+    testFixture.detectChanges();
+
+    // Simulate ngModel binding
+    testFixture.componentInstance.registerOnChange((value: string | null) => {
+      selectedValue = value;
+    });
+
+    const inputElement = testFixture.debugElement.query(By.css('input')).nativeElement;
+    inputElement.checked = true;
+    inputElement.dispatchEvent(new Event('change'));
+
+    expect(selectedValue).toBe('option1');
+  });
+
+  it('should integrate with reactive forms', () => {
+    const formControl = new FormControl<string | null>(null);
+    const testFixture = TestBed.createComponent(ZenRadio);
+    testFixture.componentRef.setInput('name', 'reactive-group');
+    testFixture.componentRef.setInput('option', 'option1');
+
+    // Simulate form control binding
+    testFixture.componentInstance.writeValue(formControl.value);
+
+    testFixture.componentInstance.registerOnChange((value: string | null) => {
+      formControl.setValue(value);
+    });
+
+    testFixture.detectChanges();
+
+    const inputElement = testFixture.debugElement.query(By.css('input')).nativeElement;
+    inputElement.checked = true;
+    inputElement.dispatchEvent(new Event('change'));
+
+    // The component's onInput method should call the onChange callback
+    // which should update form control value
+    expect(formControl.value).toBe('option1');
+  });
+
+  it('should handle disabled state from form control', () => {
+    component.setDisabledState(true);
+    fixture.detectChanges();
+
+    expect(component.disabled()).toBe(true);
+
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(inputElement.disabled).toBe(true);
+  });
+
+  it('should have correct ARIA attributes', () => {
+    component.value.set('test-value');
+    component.disabled.set(false);
+    fixture.detectChanges();
+
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(inputElement.getAttribute('aria-checked')).toBe('true');
+    expect(inputElement.getAttribute('aria-disabled')).toBe('false');
+  });
+
+  it('should update ARIA attributes when state changes', () => {
+    component.value.set('different-value');
+    component.disabled.set(true);
+    fixture.detectChanges();
+
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(inputElement.getAttribute('aria-checked')).toBe('false');
+    expect(inputElement.getAttribute('aria-disabled')).toBe('true');
+  });
+
+  it('should call onTouched when host element loses focus', () => {
+    const onTouchedSpy = jest.fn();
+    component.registerOnTouched(onTouchedSpy);
+
+    const hostElement = fixture.debugElement.nativeElement;
+    hostElement.dispatchEvent(new Event('blur'));
+
+    expect(onTouchedSpy).toHaveBeenCalled();
+  });
+
+  it('should register with radio registry on initialization', () => {
+    // Create a new radio to test registry registration
+    const newFixture = TestBed.createComponent(ZenRadio);
+    newFixture.componentRef.setInput('name', 'registry-test');
+    newFixture.componentRef.setInput('option', 'registry-option');
+    newFixture.detectChanges();
+
+    // The radio should be registered after next render
+    expect(newFixture.componentInstance).toBeTruthy();
+  });
+
+  it('should handle registry selection', () => {
+    const radio1 = fixture.componentInstance;
+
+    const radio2Fixture = TestBed.createComponent(ZenRadio);
+    radio2Fixture.componentRef.setInput('name', 'test-group');
+    radio2Fixture.componentRef.setInput('option', 'option2');
+    radio2Fixture.detectChanges();
+
+    const radio2 = radio2Fixture.componentInstance;
+
+    // Test registry selection
+    registry.select('test-group', 'option2');
+
+    expect(radio1.value()).toBe('option2');
+    expect(radio2.value()).toBe('option2');
+  });
+});
+
+describe('ZenRadioRegistry', () => {
+  let registry: ZenRadioRegistry;
+  let radio1: ZenRadio;
+  let radio2: ZenRadio;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ZenRadio],
+      providers: [ZenRadioRegistry],
+    });
+
+    registry = TestBed.inject(ZenRadioRegistry);
+
+    const fixture1 = TestBed.createComponent(ZenRadio);
+    fixture1.componentRef.setInput('name', 'test-group');
+    fixture1.componentRef.setInput('option', 'option1');
+    radio1 = fixture1.componentInstance;
+
+    const fixture2 = TestBed.createComponent(ZenRadio);
+    fixture2.componentRef.setInput('name', 'test-group');
+    fixture2.componentRef.setInput('option', 'option2');
+    radio2 = fixture2.componentInstance;
+  });
+
+  it('should add radios to group', () => {
+    registry.add('test-group', radio1);
+    registry.add('test-group', radio2);
+
+    // Test that radios are added by checking if select works
+    const spy1 = jest.spyOn(radio1, 'onInput');
+    const spy2 = jest.spyOn(radio2, 'onInput');
+
+    registry.select('test-group', 'option1');
+
+    expect(spy1).toHaveBeenCalledWith('option1');
+    expect(spy2).toHaveBeenCalledWith('option1');
+  });
+
+  it('should remove radios from group', () => {
+    registry.add('test-group', radio1);
+    registry.add('test-group', radio2);
+
+    registry.remove('test-group', radio1);
+
+    // Test that radio1 is removed by checking if select only affects radio2
+    const spy1 = jest.spyOn(radio1, 'onInput');
+    const spy2 = jest.spyOn(radio2, 'onInput');
+
+    registry.select('test-group', 'option1');
+
+    expect(spy1).not.toHaveBeenCalled();
+    expect(spy2).toHaveBeenCalledWith('option1');
+  });
+
+  it('should select value in group', () => {
+    const spy1 = jest.spyOn(radio1, 'onInput');
+    const spy2 = jest.spyOn(radio2, 'onInput');
+
+    registry.add('test-group', radio1);
+    registry.add('test-group', radio2);
+
+    registry.select('test-group', 'option1');
+
+    expect(spy1).toHaveBeenCalledWith('option1');
+    expect(spy2).toHaveBeenCalledWith('option1');
+  });
+
+  it('should handle non-existent groups gracefully', () => {
+    expect(() => {
+      registry.remove('non-existent', radio1);
+      registry.select('non-existent', 'value');
+    }).not.toThrow();
+  });
+
+  it('should handle empty groups gracefully', () => {
+    expect(() => {
+      registry.select('empty-group', 'value');
+    }).not.toThrow();
+  });
+});

package/schematics/components/files/radio/radio.stories.ts

@@ -0,0 +1,169 @@
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Meta, StoryObj } from '@storybook/angular';
+
+import { ZenRadio } from './radio';
+
+interface StoryParams {
+  selectedColor?: string;
+}
+
+type Options = ZenRadio & StoryParams;
+
+export default {
+  title: 'Components/Radio',
+  component: ZenRadio,
+  argTypes: {
+    value: {
+      table: {
+        category: 'models',
+        type: {
+          summary: 'string | null',
+        },
+        defaultValue: {
+          summary: 'null',
+        },
+      },
+      control: 'text',
+    },
+    name: {
+      table: {
+        category: 'models',
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'radio',
+        },
+      },
+      control: 'text',
+    },
+    option: {
+      table: {
+        category: 'inputs',
+        type: {
+          summary: 'string',
+        },
+      },
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+      table: {
+        category: 'models',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    required: {
+      control: 'boolean',
+      table: {
+        category: 'inputs',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    onInput: {
+      table: {
+        readonly: true,
+        type: {
+          summary: '(value: string | null) => void',
+        },
+      },
+    },
+  },
+  args: {
+    value: null,
+    name: 'radio-group',
+    option: 'option1',
+    disabled: false,
+    required: false,
+  },
+} satisfies Meta<Options>;
+
+type Story = StoryObj<Options>;
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; align-items: center; gap: 0.25rem">
+        <zen-radio name="label-example" option="option1" />
+        <label for="label-example"> With label </label>
+      </div>
+  `,
+  }),
+};
+
+export const NgModel: Story = {
+  render: () => ({
+    moduleMetadata: {
+      imports: [FormsModule],
+    },
+    props: {
+      selectedColor: 'blue',
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem">
+        <div>
+            <strong>Selected value:</strong>
+            <p> {{ selectedColor || 'None' }}</p>
+         </div>
+        <div style="display: flex; flex-direction: column; gap: 0.5rem">
+          <div style="display: flex; align-items: center; gap: 0.25rem">
+            <zen-radio name="color-group" option="red" [(ngModel)]="selectedColor" />
+            <label>Red</label>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.25rem">
+            <zen-radio name="color-group" option="green" [(ngModel)]="selectedColor" />
+            <label>Green</label>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.25rem">
+            <zen-radio name="color-group" option="blue" [(ngModel)]="selectedColor" />
+            <label>Blue</label>
+          </div>
+        </div>
+      </div>
+  `,
+  }),
+};
+
+export const AsFromControl: Story = {
+  render: () => {
+    return {
+      moduleMetadata: {
+        imports: [ReactiveFormsModule],
+      },
+      props: {
+        colorControl: new FormControl('green'),
+      },
+      template: `
+        <div style="display: flex; flex-direction: column; gap: 1rem">
+          <div>
+            <strong>Selected value:</strong>
+            <p> {{ colorControl.value || 'None' }}</p>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 0.5rem">
+            <div style="display: flex; align-items: center; gap: 0.25rem">
+              <zen-radio name="working-group" option="red" [formControl]="colorControl" />
+              <label>Red</label>
+            </div>
+            <div style="display: flex; align-items: center; gap: 0.25rem">
+              <zen-radio name="working-group" option="green" [formControl]="colorControl" />
+              <label>Green</label>
+            </div>
+            <div style="display: flex; align-items: center; gap: 0.25rem">
+              <zen-radio name="working-group" option="blue" [formControl]="colorControl" />
+              <label>Blue</label>
+            </div>
+          </div>
+        </div>
+      `,
+    };
+  },
+};

package/schematics/components/files/radio/radio.ts

@@ -0,0 +1,114 @@
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  inject,
+  input,
+  model,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { ZenFormControl, ZenFormControlProvider } from '../form-control';
+import { ZenRadioRegistry } from './radio.registry';
+
+/**
+ * ZenRadio is a reusable radio button component designed to provide
+ * a consistent and customizable radio button style across the application.
+ * It supports Angular forms integration and provides two-way data binding
+ * for string values.
+ *
+ * @example
+ * <zen-radio name="group" option="option1" [(ngModel)]="selectedValue" /> Option 1
+ * <zen-radio name="group" option="option2" [(ngModel)]="selectedValue" /> Option 2
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-radio-size: 1rem;
+ *  --zen-radio-border-radius: 50%;
+ *  --zen-radio-appearance: hsl(0deg 0% 10%);
+ *  --zen-radio-disabled-opacity: 0.6;
+ *  --zen-radio-border: 1px solid hsl(0deg 0% 80%);
+ * }
+ * ```
+ *
+ * @implements {ZenFormControl<string | null>}
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ */
+@Component({
+  selector: 'zen-radio',
+  template: `
+    <input
+      [attr.aria-checked]="checked()"
+      [attr.aria-disabled]="disabled()"
+      [checked]="checked()"
+      [disabled]="disabled()"
+      [name]="name()"
+      [value]="option()"
+      (change)="onRadioChange()"
+      #inputElement
+      type="radio"
+    />
+    @if (checked()) {
+      <span class="radio-dot"></span>
+    }
+  `,
+  styleUrls: ['./radio.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [FormsModule],
+  providers: [ZenFormControlProvider(ZenRadio)],
+  host: {
+    '(blur)': 'onTouched()',
+  },
+})
+export class ZenRadio extends ZenFormControl<string | null> {
+  /**
+   * The value of the radio button group.
+   * This should be bound to the same model for all radio buttons in a group.
+   */
+  readonly value = model<string | null>(null);
+
+  /**
+   * The name attribute for the radio button group.
+   * Radio buttons with the same name will be grouped together.
+   */
+  readonly name = input.required<string>();
+
+  /**
+   * The value for this specific radio button.
+   */
+  readonly option = input.required<string>();
+
+  /**
+   * Determines if this radio button is checked based on the group value.
+   */
+  protected checked = computed<boolean>(() => this.value() === this.option());
+  /**
+   * Handles radio button selection using native change event.
+   */
+
+  private readonly registry = inject(ZenRadioRegistry);
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor() {
+    super();
+    afterNextRender(() => {
+      this.registry.add(this.name(), this);
+    });
+
+    this.destroyRef.onDestroy(() => this.registry.remove(this.name(), this));
+  }
+
+  protected onRadioChange(): void {
+    if (this.disabled()) return;
+    this.registry.select(this.name(), this.option());
+  }
+}

package/schematics/components/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/components/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type ComponentType =\n  | 'avatar'\n  | 'button'\n  | 'checkbox'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea'\n  | 'alert';\n\nexport interface Schema extends GeneratorSchemaBase {\n  components: ComponentType[];\n}\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/components/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { GeneratorSchemaBase } from '../../types';\n\nexport type ComponentType =\n  | 'alert'\n  | 'avatar'\n  | 'button'\n  | 'checkbox'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  components: ComponentType[];\n}\n"]}

package/schematics/components/schema.json

@@ -29,6 +29,7 @@
       "items": {
         "type": "string",
         "enum": [
+          "alert",
           "avatar",
           "button",
           "checkbox",
@@ -36,10 +37,10 @@
           "form-control",
           "icon",
           "input",
+          "radio",
           "skeleton",
           "switch",
-          "textarea",
-          "alert"
+          "textarea"
         ]
       },
       "multiselect": true,

package/schematics/components/schema.ts

@@ -1,6 +1,7 @@
 import { GeneratorSchemaBase } from '../../types';
 
 export type ComponentType =
+  | 'alert'
   | 'avatar'
   | 'button'
   | 'checkbox'
@@ -8,10 +9,10 @@ export type ComponentType =
   | 'form-control'
   | 'icon'
   | 'input'
+  | 'radio'
   | 'skeleton'
   | 'switch'
-  | 'textarea'
-  | 'alert';
+  | 'textarea';
 
 export interface Schema extends GeneratorSchemaBase {
   components: ComponentType[];