@ng-zen/cli 22.0.0 → 22.1.0

package/CHANGELOG.md

@@ -1,21 +1,7 @@
-## [22.0.0](https://github.com/kstepien3/ng-zen/compare/v21.2.0...v22.0.0) (2026-06-16)
-
-### ⚠ BREAKING CHANGES
-
-* **deps:** clean up unused deps and update dependencies (#414)
-
-### chore
-
-* **deps:** clean up unused deps and update dependencies ([#414](https://github.com/kstepien3/ng-zen/issues/414)) ([04b8c7d](https://github.com/kstepien3/ng-zen/commit/04b8c7da59e70181147f105e95b6471234ff21f5))
+## [22.1.0](https://github.com/kstepien3/ng-zen/compare/v22.0.0...v22.1.0) (2026-06-23)
 
 ### 🚀 New Features
 
-* **button:** enhance component's sizes, variants, and styling updates ([#407](https://github.com/kstepien3/ng-zen/issues/407)) ([f32aad3](https://github.com/kstepien3/ng-zen/commit/f32aad35d5853f832f2eea0d8157884ca7f5cc3e))
-* **button:** migrate to dynamic CSS variables and refactor styles ([#411](https://github.com/kstepien3/ng-zen/issues/411)) ([e4464f7](https://github.com/kstepien3/ng-zen/commit/e4464f7580c91f0de30d9139177655915430fd43))
-* **popover:** improve popover styles, stories, docs ([#404](https://github.com/kstepien3/ng-zen/issues/404)) ([6515443](https://github.com/kstepien3/ng-zen/commit/65154436cde09f77909638ef84e2213b04f2862c))
-
-### 📚 Documentation
-
-* **README:** add DeepWiki link ([#409](https://github.com/kstepien3/ng-zen/issues/409)) ([7875347](https://github.com/kstepien3/ng-zen/commit/78753471c6e56036788c6371ce0f063ab06b524b))
+* **ui:** migrate controls for signals and clean up ([#417](https://github.com/kstepien3/ng-zen/issues/417)) ([1525bc1](https://github.com/kstepien3/ng-zen/commit/1525bc13b10ffc8c0e4281beb3c2eb9771c08675))
 
 Development mode - changelog will be generated during build.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.0.0",
+  "version": "22.1.0",
   "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/ui/files/alert/alert.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
 
 /**
  * ZenAlert is a reusable alert component designed to provide
@@ -42,6 +42,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     </div>
   `,
   styleUrl: './alert.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenAlert {}

package/schematics/ui/files/avatar/avatar.ts

@@ -1,5 +1,5 @@
 import { NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 /**
  * A component to display an avatar image.
@@ -46,7 +46,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
     }
   `,
   styleUrl: './avatar.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenAvatar {
   /** Source path for the image which will be processed by Angular's image loader. */

package/schematics/ui/files/button/button.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 /**
  * ZenButton is a reusable button component designed to provide
@@ -39,7 +39,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
     <ng-content />
   `,
   styleUrl: './button.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[attr.type]': '"button"',
     '[attr.data-size]': 'size()',

package/schematics/ui/files/checkbox/checkbox.stories.ts

@@ -1,5 +1,9 @@
+import { NgComponentOutlet } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { form, FormField, required } from '@angular/forms/signals';
 import { Meta, StoryObj } from '@storybook/angular';
 
+import FormControlStories from '../form-control/form-control.stories';
 import { ZenCheckbox } from './checkbox';
 
 type Options = ZenCheckbox;
@@ -8,53 +12,26 @@ export default {
   title: 'Ui/Checkbox',
   component: ZenCheckbox,
   argTypes: {
+    ...FormControlStories.argTypes,
     value: {
       table: {
         category: 'models',
-        type: {
-          summary: 'boolean | null',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
+        type: { summary: 'boolean | null' },
+        defaultValue: { summary: 'false' },
       },
-      control: 'radio',
+      control: 'radio' as const,
       options: [true, false, null],
     },
-    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: boolean | null) => void',
-        },
+        type: { summary: '(value: boolean | null) => void' },
       },
     },
   },
   args: {
+    ...FormControlStories.args,
     value: false,
-    disabled: false,
-    required: false,
   },
 } satisfies Meta<Options>;
 
@@ -72,3 +49,52 @@ export const WithLabel: Story = {
   `,
   }),
 };
+
+export const WithSignalForm: Story = {
+  render: () => ({
+    moduleMetadata: { imports: [NgComponentOutlet] },
+    props: { component: CheckboxSignalFormComponent },
+    template: '<ng-container *ngComponentOutlet="component" />',
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+      <div style="display: flex; align-items: center; gap: 0.25rem">
+        <zen-checkbox id="agree" [formField]="form.agree" />
+        <label for="agree">I agree to the terms</label>
+      </div>
+      @if (form.agree().invalid()) {
+        <p style="color: red; margin: 0; font-size: 0.875rem;">
+          {{ form.agree().errors()![0].message }}
+        </p>
+      }
+    </div>`,
+      },
+    },
+  },
+};
+
+@Component({
+  standalone: true,
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+      <div style="display: flex; align-items: center; gap: 0.25rem">
+        <zen-checkbox [formField]="form.agree" id="agree" />
+        <label for="agree">I agree to the terms</label>
+      </div>
+      @if (form.agree().invalid()) {
+        <p style="color: red; margin: 0; font-size: 0.875rem;">
+          {{ form.agree().errors()![0].message }}
+        </p>
+      }
+    </div>
+  `,
+  imports: [FormField, ZenCheckbox],
+})
+class CheckboxSignalFormComponent {
+  readonly form = form(signal({ agree: false }), s => {
+    required(s.agree, { message: 'You must agree to continue' });
+  });
+}

package/schematics/ui/files/checkbox/checkbox.ts

@@ -1,34 +1,35 @@
-import { ChangeDetectionStrategy, Component, effect, ElementRef, model, viewChild } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { Component, effect, ElementRef, model, viewChild } from '@angular/core';
 
-import { ZenFormControl, ZenFormControlProvider } from '../form-control';
+import { ZenFormControl } from '../form-control';
 
 /**
- * ZenCheckbox is a reusable checkbox component designed to provide
- * a consistent and customizable checkbox style across the application.
- * It supports Angular forms integration and provides two-way data binding
- * for boolean values.
+ * ZenCheckbox is a checkbox component supporting checked (`true`),
+ * unchecked (`false`), and indeterminate (`null`) states.
  *
- * @example
- * <zen-checkbox [value]="true" /> Checked
- * <zen-checkbox [value]="false" /> Unchecked
- * <zen-checkbox [value]="null" /> Indeterminate
+ * Connect it to a Signal Forms field with `[formField]`:
+ *
+ * ```html
+ * <zen-checkbox [formField]="myForm.agree" />
+ * <label for="agree">I agree to the terms</label>
+ * ```
+ *
+ * When `value` is `null` the native checkbox is set to indeterminate via
+ * the `indeterminate` DOM property.
  *
  * ### CSS Custom Properties
  *
- * You can customize the component using CSS custom properties:
  *
  * ```css
  * :root {
- *  --zen-checkbox-size: 1rem;
- *  --zen-checkbox-border-radius: 0.375rem;
- *  --zen-checkbox-appearance: hsl(0deg 0% 10%);
- *  --zen-checkbox-disabled-opacity: 0.6;
- *  --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);
+ *   --zen-checkbox-size: 1rem;
+ *   --zen-checkbox-border-radius: 0.375rem;
+ *   --zen-checkbox-appearance: hsl(0deg 0% 10%);
+ *   --zen-checkbox-disabled-opacity: 0.6;
+ *   --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);
  * }
  * ```
  *
- * @implements {ZenFormControl<boolean>}
+ * @extends {ZenFormControl<boolean | null>}
  *
  * @author Konrad Stępień
  * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
@@ -39,9 +40,10 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
   template: `
     <input
       [attr.aria-disabled]="disabled()"
+      [attr.aria-invalid]="invalid() || null"
+      [checked]="value()"
       [disabled]="disabled()"
-      [ngModel]="value()"
-      (ngModelChange)="onInput($event)"
+      (change)="onInput(inputElement.checked)"
       #inputElement
       type="checkbox"
     />
@@ -53,12 +55,6 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
     <!-- @else { ✕ } -->
   `,
   styleUrls: ['./checkbox.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule],
-  providers: [ZenFormControlProvider(ZenCheckbox)],
-  host: {
-    '(blur)': 'onTouched()',
-  },
 })
 export class ZenCheckbox extends ZenFormControl<boolean | null> {
   /**

package/schematics/ui/files/dialog/dialog.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, model, untracked } from '@angular/core';
+import { Component, effect, ElementRef, inject, input, model, untracked } from '@angular/core';
 import { Cancel01Icon } from '@hugeicons/core-free-icons';
 
 import { ZenIcon } from '../icon';
@@ -55,7 +55,6 @@ type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
     </div>
   `,
   styleUrl: './dialog.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ZenIcon],
   host: {
     '[attr.aria-label]': 'header()',

package/schematics/ui/files/divider/divider.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 /**
  * ZenDivider is a reusable divider component that provides a simple way to
@@ -36,7 +36,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   selector: `zen-divider, zen-divider[vertical],`,
   template: '<ng-content/>',
   styleUrl: './divider.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': '"zen-align-"+align()',
   },

package/schematics/ui/files/form-control/form-control.spec.ts

@@ -2,27 +2,42 @@ import { Component, model, provideZonelessChangeDetection } from '@angular/core'
 import { TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { ZenFormControl, ZenFormControlProvider } from './form-control';
+import { ZenFormControl } from './form-control';
 
 @Component({
   template: '...',
-  providers: [ZenFormControlProvider(FormControl)],
 })
-class FormControl extends ZenFormControl<string> {
+class TestFormControl extends ZenFormControl<string> {
   readonly value = model<string>('');
 }
 
 describe('FormControl', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FormControl],
+      imports: [TestFormControl],
       providers: [provideZonelessChangeDetection()],
     }).compileComponents();
   });
 
   it('should create', () => {
-    const fixture = TestBed.createComponent(FormControl);
+    const fixture = TestBed.createComponent(TestFormControl);
     const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
+
+  it('should have FormUiControl properties', () => {
+    const fixture = TestBed.createComponent(TestFormControl);
+    const component = fixture.componentInstance;
+    expect(component.disabled()).toBe(false);
+    expect(component.required()).toBe(false);
+    expect(component.touched()).toBe(false);
+    expect(component.dirty()).toBe(false);
+    expect(component.invalid()).toBe(false);
+    expect(component.pending()).toBe(false);
+    expect(component.hidden()).toBe(false);
+    expect(component.readonly()).toBe(false);
+    expect(component.name()).toBe('');
+    expect(component.errors()).toEqual([]);
+    expect(component.disabledReasons()).toEqual([]);
+  });
 });

package/schematics/ui/files/form-control/form-control.stories.ts

@@ -16,59 +16,81 @@ export default {
       story => `<div style="display: flex; flex-direction: column; gap: 2rem; align-items: center">${story}</div>`
     ),
   ],
-  args: {
-    value: '',
-    disabled: false,
-    required: false,
-  },
   argTypes: {
-    value: {
-      control: false,
-      table: {
-        category: 'models',
-        readonly: true,
-        type: {
-          summary: 'T',
-        },
-      },
-    },
     disabled: {
-      control: 'boolean',
-      table: {
-        category: 'models',
-        type: {
-          summary: 'boolean',
-        },
-        readonly: true,
-      },
+      control: 'boolean' as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
     },
     required: {
-      control: 'boolean',
+      control: 'boolean' as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    touched: {
+      control: false as const,
+      table: { category: 'models', type: { summary: 'boolean' }, readonly: true },
+    },
+    dirty: {
+      control: false as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, readonly: true },
+    },
+    invalid: {
+      control: false as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, readonly: true },
+    },
+    pending: {
+      control: false as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, readonly: true },
+    },
+    hidden: {
+      control: 'boolean' as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    readonly: {
+      control: 'boolean' as const,
+      table: { category: 'inputs', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    name: {
+      control: 'text' as const,
+      table: { category: 'models', type: { summary: 'string' } },
+    },
+    errors: {
+      control: false as const,
+      table: { category: 'models', type: { summary: 'ValidationError[]' }, readonly: true },
+    },
+    disabledReasons: {
+      control: false as const,
+      table: { category: 'models', type: { summary: 'DisabledReason[]' }, readonly: true },
+    },
+    value: {
+      control: false as const,
       table: {
-        category: 'inputs',
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
+        category: 'models',
         readonly: true,
+        type: { summary: 'T' },
       },
     },
     onInput: {
       table: {
         readonly: true,
-        type: {
-          summary: '(value: T) => void',
-        },
+        type: { summary: '(value: T) => void' },
       },
     },
   },
+  args: {
+    disabled: false,
+    required: false,
+    touched: false,
+    dirty: false,
+    invalid: false,
+    pending: false,
+    hidden: false,
+    readonly: false,
+    name: '',
+    value: '',
+  },
   parameters: {
     docs: {
       canvas: {
-        // This will remove the "show code" button
-        // https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#sourcestate
         sourceState: 'none',
       },
     },

package/schematics/ui/files/form-control/form-control.ts

@@ -1,100 +1,85 @@
-import { booleanAttribute, Directive, forwardRef, input, model, ModelSignal, Type } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ZenFormControlProvider = <T extends ZenFormControl<any>>(component: Type<T>) => ({
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => component),
-  multi: true,
-});
+import { booleanAttribute, Directive, input, ModelSignal, output } from '@angular/core';
+import type { DisabledReason, ValidationError, WithOptionalFieldTree } from '@angular/forms/signals';
+import { FormValueControl } from '@angular/forms/signals';
 
 /**
- * A base class for creating custom Angular form controls that integrate with both
- * template-driven and reactive forms. It simplifies the implementation of the
- * ControlValueAccessor interface by using signals for the control's value and state.
+ * Abstract base class for form controls that integrate with Signal Forms
+ * via the {@link FormValueControl} interface.
+ *
+ * Provides all {@link FormUiControl} state inputs (`disabled`, `required`,
+ * `touched`, `errors`, etc.) and the `touch` output used by the
+ * `[formField]` directive.
  *
- * Subclasses must provide an implementation for the abstract `value` property.
+ * Subclasses must provide an implementation of the `value` model signal
+ * with the appropriate value type.
+ *
+ * Decorated with `@Directive` only to declare the host event binding
+ * `(blur) -> touch.emit()`.
  *
  * @example
  *
  * ```ts
  * @Component({
- *   template: '...',
- *   providers: [ZenFormControlProvider(ZenInput)]
+ *   selector: 'my-input',
+ *   template: `<input [value]="value()" (input)="onInput($event.target.value)" />`,
  * })
- * export class Input extends ZenFormControl<string> {
- *   readonly value = model<string>('')
+ * export class MyInput extends ZenFormControl<string> {
+ *   readonly value = model<string>('');
  * }
  * ```
  *
- * @implements {ControlValueAccessor}
+ * @implements {FormValueControl}
  *
  * @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)
  */
-@Directive({})
-export abstract class ZenFormControl<Value> implements ControlValueAccessor {
-  /**
-   * The underlying value of the control.
-   * Subclasses must provide their own implementation using `model()`.
-   */
+@Directive({
+  host: {
+    '(blur)': 'touch.emit()',
+  },
+})
+export abstract class ZenFormControl<Value> implements FormValueControl<Value> {
+  /** The underlying value of the control. Subclasses must provide their own implementation using `model()`. */
   abstract readonly value: ModelSignal<Value>;
 
-  readonly disabled = model(false);
+  /** Validation errors for the field. Auto-bound by the Signal Forms directive. */
+  readonly errors = input<readonly ValidationError.WithOptionalFieldTree[]>([]);
+  /** Whether the control is disabled. Auto-bound by the Signal Forms directive. */
+  readonly disabled = input(false);
+  /** Reasons why the field is disabled. Auto-bound by the Signal Forms directive. */
+  readonly disabledReasons = input<readonly WithOptionalFieldTree<DisabledReason>[]>([]);
+  /** Whether the field is read-only. Auto-bound by the Signal Forms directive. */
+  readonly readonly = input<boolean>(false);
+  /** Whether the field is hidden from view. Auto-bound by the Signal Forms directive. */
+  readonly hidden = input<boolean>(false);
+  /** Whether the field has validation errors. Auto-bound by the Signal Forms directive. */
+  readonly invalid = input<boolean>(false);
+  /** Whether async validation is in progress. Auto-bound by the Signal Forms directive. */
+  readonly pending = input<boolean>(false);
+  /** Whether the user has focused and then blurred the field. */
+  readonly touched = input<boolean>(false);
+  /** Whether the field value has been modified. Auto-bound by the Signal Forms directive. */
+  readonly dirty = input(false);
+  /** Field name in the form. Auto-bound by the Signal Forms directive. */
+  readonly name = input('');
+  /** Whether the field is required. Auto-bound by the Signal Forms directive from schema validators. */
   readonly required = input(false, { transform: booleanAttribute });
+  /** Emitted when the field is blurred. The {@link FormField} directive listens to this output to mark the field as touched. */
+  readonly touch = output<void>();
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  protected onChange: (value: Value) => void = () => {};
+  // @ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+  focus(_options?: FocusOptions): void {}
 
+  // @ignore
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  protected onTouched: () => void = () => {};
+  reset(): void {}
 
-  /**
-   * Should be called by the subclass when the control's value changes
-   * as a result of user interaction. This method updates the control's value
-   * and notifies Angular of the change.
-   */
+  /** Should be called by the subclass when the control's value changes as a result of user interaction. */
   onInput(value: Value): void {
     if (this.disabled()) return;
 
     this.value.set(value);
-    this.onChange(this.value());
-  }
-
-  /**
-   * Writes a new value to the element.
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
-  writeValue(value: Value): void {
-    this.value.set(value);
-  }
-
-  /**
-   * Registers a callback function that is called when the control's value changes in the UI.
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
-  registerOnChange(fn: (value: Value) => void): void {
-    this.onChange = fn;
-  }
-
-  /**
-   * Registers a callback function that is called by the forms API on component touch.
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  /**
-   * This function is called by the forms API when the control status changes to or from "DISABLED".
-   * @internal For internal use by Angular forms.
-   * @ignore
-   */
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled.set(isDisabled);
   }
 }

package/schematics/ui/files/icon/icon.ts

@@ -1,4 +1,4 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { booleanAttribute, Component, computed, inject, input } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 /** SVG icon data structure from HugeIcons library - an array of [tagName, attributes] tuples. */
@@ -43,7 +43,6 @@ export type IconSvgObject = readonly (readonly [string, Record<string, string |
     ></svg>
   `,
   styles: [':host { display: inline-flex; }'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenIcon {
   /** SVG object imported from HugeIcons library. */