@spartan-ng/cli 0.0.1-alpha.335 → 0.0.1-alpha.337

package/src/generators/ui/libs/ui-checkbox-helm/files/lib/hlm-checkbox.component.ts.template

@@ -1,4 +1,14 @@
-import { booleanAttribute, Component, computed, EventEmitter, forwardRef, Input, Output, signal } from '@angular/core';
+import {
+	Component,
+	EventEmitter,
+	Input,
+	Output,
+	booleanAttribute,
+	computed,
+	forwardRef,
+	input,
+	signal,
+} from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BrnCheckboxComponent, indeterminateBooleanAttribute } from '@spartan-ng/ui-checkbox-brain';
 import { hlm } from '@spartan-ng/ui-core';
@@ -24,7 +34,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			[disabled]="_disabled()"
 			[id]="id"
 		>
-			<hlm-checkbox-checkicon [iconName]="_checkIconName()" />
+			<hlm-checkbox-checkicon [class]="_checkIconClass()" [iconName]="_checkIconName()" />
 		</brn-checkbox>
 	`,
 	host: {
@@ -37,17 +47,28 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 })
 export class HlmCheckboxComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-	protected readonly _checkIconName = signal<string>('radixCheck');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'group inline-flex border border-foreground shrink-0 cursor-pointer items-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring' +
+				' focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:text-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-background',
+			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this._userClass(),
+		),
+	);
+
+	protected readonly _checkIconName = signal<string>('lucideCheck');
 	@Input()
 	set checkIconName(checkIconName: string) {
 		this._checkIconName.set(checkIconName);
 	}
 
+	protected readonly _checkIconClass = signal<string>('');
+	@Input()
+	set checkIconClass(checkIconName: string) {
+		this._checkIconClass.set(checkIconName);
+	}
+
 	@Output()
 	public changed = new EventEmitter<boolean>();
 
@@ -88,15 +109,6 @@ export class HlmCheckboxComponent {
 	@Input('aria-describedby')
 	ariaDescribedby: string | null = null;
 
-	protected _computedClass = computed(() =>
-		hlm(
-			'group inline-flex border border-foreground shrink-0 cursor-pointer items-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring' +
-				' focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:text-background data-[state=unchecked]:bg-foreground data-[state=checked]:bg-primary data-[state=unchecked]:bg-background',
-			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
-			this._userCls(),
-		),
-	);
-
 	/** CONROL VALUE ACCESSOR */
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog-close-button.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { Directive, computed, inject, input } from '@angular/core';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -17,14 +17,6 @@ export class HlmCommandDialogCloseButtonDirective {
 		this._hlmBtn.variant = 'ghost';
 	}
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('!p-1 !h-5 !w-5', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('!p-1 !h-5 !w-5', this._userClass()));
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
 import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 import { HlmCommandDirective } from './hlm-command.directive';
@@ -17,23 +17,17 @@ export class HlmCommandDialogDirective {
 	private _renderer = inject(Renderer2);
 	private _element = inject(ElementRef);
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%]',
+			this._userClass(),
+		),
+	);
 
 	constructor() {
 		effect(() => {
 			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
 		});
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
-			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%]',
-			this._userCls(),
-		);
-	}
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-empty.directive.ts.template

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,14 +10,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandEmptyDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('py-6 text-center text-sm', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('py-6 text-center text-sm', this._userClass()));
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-group.directive.ts.template

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,19 +10,13 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandGroupDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'block [&[cmdk-hidden="true"]]:hidden\n' +
 				'[&_.cmdk-group-label]:px-2 [&_.cmdk-group-label]:py-1.5 [&_.cmdk-group-label]:text-xs [&_.cmdk-group-label]:font-medium [&_.cmdk-group-label]:text-muted-foreground\n' +
 				'[&_.cmdk-group-content]:flex [&_.cmdk-group-content]:flex-col [&_.cmdk-group-content]:flex-col overflow-hidden p-1 text-foreground',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-input-wrapper.component.ts.template

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -11,17 +11,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandInputWrapperComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
-			'flex space-x-2 items-center border-b border-border px-3 [&_hlm-icon]:h-5 [&_hlm-icon]:w-5',
-			this._userCls(),
-		);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('flex space-x-2 items-center border-b border-border px-3 [&_hlm-icon]:h-5 [&_hlm-icon]:w-5', this._userClass()),
+	);
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-input.directive.ts.template

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,17 +10,12 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandInputDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	protected _computedClass = computed(() =>
+		hlm(
 			'h-11 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item-icon.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { computed, Directive, inject, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
 import { ClassValue } from 'clsx';
@@ -17,14 +17,7 @@ export class HlmCommandItemIconDirective {
 		if (!this._menuIcon) return;
 		this._menuIcon.size = 'none';
 	}
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('mr-2 h-4 w-4', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('mr-2 h-4 w-4', this._userClass()));
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -14,20 +14,15 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandItemDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	protected _computedClass = computed(() =>
+		hlm(
 			'items-center relative cursor-default select-none rounded-sm px-2 py-1.5 text-sm outline-none\n' +
 				'aria-selected:bg-accent aria-selected:text-accent-foreground\n' +
 				'hover:bg-accent/50\n' +
 				'disabled:pointer-events-none disabled:opacity-50',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-list.directive.ts.template

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,14 +10,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandListDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this._userClass()));
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-shortcut.component.ts.template

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -13,14 +13,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandShortcutComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._userClass()),
+	);
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command.directive.ts.template

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,17 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'flex h-full w-full flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-close.directive.ts.template

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,17 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmDialogCloseDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-			this._userCls,
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-content.component.ts.template

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
-import { radixCross1 } from '@ng-icons/radix-icons';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, signal } from '@angular/core';
+import { lucideX } from '@ng-icons/lucide';
 import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
 import { BrnDialogCloseDirective } from '@spartan-ng/ui-dialog-brain';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
@@ -10,7 +10,7 @@ import { HlmDialogCloseDirective } from './hlm-dialog-close.directive';
 	selector: 'hlm-dialog-content',
 	standalone: true,
 	imports: [BrnDialogCloseDirective, HlmDialogCloseDirective, HlmIconComponent],
-	providers: [provideIcons({ radixCross1 })],
+	providers: [provideIcons({ lucideX })],
 	host: {
 		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
@@ -19,7 +19,7 @@ import { HlmDialogCloseDirective } from './hlm-dialog-close.directive';
 		<ng-content />
 		<button brnDialogClose hlm>
 			<span class="sr-only">Close</span>
-			<hlm-icon class="flex h-4 w-4" size="100%" name="radixCross1" />
+			<hlm-icon class="flex h-4 w-4" size="100%" name="lucideX" />
 		</button>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -29,16 +29,11 @@ export class HlmDialogContentComponent {
 	private readonly _statusProvider = injectExposesStateProvider({ host: true });
 	public readonly state = this._statusProvider.state ?? signal('closed').asReadonly();
 
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'border-border grid w-full max-w-lg relative gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full',
-			this._userCls(),
+			this._userClass(),
 		),
 	);
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-description.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnDialogDescriptionDirective } from '@spartan-ng/ui-dialog-brain';
 import { ClassValue } from 'clsx';
@@ -12,14 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnDialogDescriptionDirective],
 })
 export class HlmDialogDescriptionDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('text-sm text-muted-foreground', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('text-sm text-muted-foreground', this._userClass()));
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-footer.component.ts.template

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -13,14 +13,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmDialogFooterComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._userClass()),
+	);
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-header.component.ts.template

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -13,14 +13,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmDialogHeaderComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('flex flex-col space-y-1.5 text-center sm:text-left', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('flex flex-col space-y-1.5 text-center sm:text-left', this._userClass()),
+	);
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-overlay.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, effect, Input, signal } from '@angular/core';
+import { computed, Directive, effect, input } from '@angular/core';
 import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -9,17 +9,13 @@ import { ClassValue } from 'clsx';
 export class HlmDialogOverlayDirective {
 	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-			this._userCls(),
+			this._userClass(),
 		),
 	);
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 
 	constructor() {
 		effect(() => this._classSettable?.setClassToCustomElement(this._computedClass()));

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-title.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnDialogTitleDirective } from '@spartan-ng/ui-dialog-brain';
 import { ClassValue } from 'clsx';
@@ -12,14 +12,8 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnDialogTitleDirective],
 })
 export class HlmDialogTitleDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('text-lg font-semibold leading-none tracking-tight', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('text-lg font-semibold leading-none tracking-tight', this._userClass()),
+	);
 }

package/src/generators/ui/libs/ui-hover-card-helm/files/lib/hlm-hover-card-content.component.ts.template

@@ -1,4 +1,4 @@
-import { Component, computed, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { Component, computed, effect, ElementRef, inject, input, Renderer2, signal } from '@angular/core';
 import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -28,7 +28,7 @@ export class HlmHoverCardContentComponent {
 		});
 	}
 
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',
@@ -36,9 +36,4 @@ export class HlmHoverCardContentComponent {
 			this._inputs,
 		),
 	);
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 }

package/src/generators/ui/libs/ui-icon-helm/files/lib/hlm-icon.component.spec.ts.template

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
-import { radixCheck } from '@ng-icons/radix-icons';
+import { lucideCheck } from '@ng-icons/lucide';
 import { RenderResult, render } from '@testing-library/angular';
 import { HlmIconComponent } from './hlm-icon.component';
 
@@ -10,9 +10,9 @@ import { HlmIconComponent } from './hlm-icon.component';
 	standalone: true,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [HlmIconComponent],
-	providers: [provideIcons({ radixCheck })],
+	providers: [provideIcons({ lucideCheck })],
 	template: `
-		<hlm-icon class="test" ngIconClass="test2" name="radixCheck" [size]="size" color="red" strokeWidth="2" />
+		<hlm-icon class="test" ngIconClass="test2" name="lucideCheck" [size]="size" color="red" strokeWidth="2" />
 	`,
 })
 class HlmMockComponent {