@spartan-ng/cli 0.0.1-alpha.336 → 0.0.1-alpha.338

package/src/generators/ui/libs/ui-select-helm/files/index.ts.template

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { HlmSelectContentDirective } from './lib/hlm-select-content.directive';
+import { HlmSelectGroupDirective } from './lib/hlm-select-group.directive';
+import { HlmSelectLabelDirective } from './lib/hlm-select-label.directive';
+import { HlmSelectOptionComponent } from './lib/hlm-select-option.component';
+import { HlmSelectScrollDownComponent } from './lib/hlm-select-scroll-down.component';
+import { HlmSelectScrollUpComponent } from './lib/hlm-select-scroll-up.component';
+import { HlmSelectTriggerComponent } from './lib/hlm-select-trigger.component';
+import { HlmSelectValueDirective } from './lib/hlm-select-value.directive';
+import { HlmSelectDirective } from './lib/hlm-select.directive';
+
+export * from './lib/hlm-select-content.directive';
+export * from './lib/hlm-select-group.directive';
+export * from './lib/hlm-select-label.directive';
+export * from './lib/hlm-select-option.component';
+export * from './lib/hlm-select-scroll-down.component';
+export * from './lib/hlm-select-scroll-up.component';
+export * from './lib/hlm-select-trigger.component';
+export * from './lib/hlm-select-value.directive';
+export * from './lib/hlm-select.directive';
+
+export const HlmSelectImports = [
+	HlmSelectContentDirective,
+	HlmSelectTriggerComponent,
+	HlmSelectOptionComponent,
+	HlmSelectValueDirective,
+	HlmSelectDirective,
+	HlmSelectScrollUpComponent,
+	HlmSelectScrollDownComponent,
+	HlmSelectLabelDirective,
+	HlmSelectGroupDirective,
+] as const;
+
+@NgModule({
+	imports: [...HlmSelectImports],
+	exports: [...HlmSelectImports],
+})
+export class HlmSelectModule {}

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

@@ -0,0 +1,34 @@
+import { computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmSelectContent], hlm-select-content',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectContentDirective {
+	private readonly _classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this._classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'top-[2px] relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			this._classNames(),
+		),
+	);
+
+	private readonly _stickyLabels = signal(false);
+	@Input()
+	set stickyLabels(value: boolean) {
+		this._stickyLabels.set(value);
+	}
+	get stickyLabels() {
+		return this._stickyLabels();
+	}
+}

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

@@ -0,0 +1,22 @@
+import { computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BrnSelectGroupDirective } from '@spartan-ng/ui-select-brain';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmSelectGroup], hlm-select-group',
+	hostDirectives: [BrnSelectGroupDirective],
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectGroupDirective {
+	private readonly _classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this._classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() => hlm(this._classNames()));
+}

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

@@ -0,0 +1,38 @@
+import { computed, Directive, inject, Input, OnInit, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BrnSelectLabelDirective } from '@spartan-ng/ui-select-brain';
+import { ClassValue } from 'clsx';
+import { HlmSelectContentDirective } from './hlm-select-content.directive';
+
+@Directive({
+	selector: '[hlmSelectLabel], hlm-select-label',
+	hostDirectives: [BrnSelectLabelDirective],
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectLabelDirective implements OnInit {
+	private readonly selectContent = inject(HlmSelectContentDirective);
+	private readonly _stickyLabels = signal(false);
+
+	private readonly _classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this._classNames.set(classNames);
+	}
+	protected _computedClass = computed(() =>
+		hlm(
+			'pl-8 pr-2 text-sm font-semibold rtl:pl-2 rtl:pr-8',
+			this._stickyLabels() ? 'sticky top-0 bg-popover block z-[2]' : '',
+			this._classNames(),
+		),
+	);
+
+	ngOnInit(): void {
+		if (this.selectContent.stickyLabels) {
+			this._stickyLabels.set(true);
+		}
+	}
+}

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

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, computed, inject, Input, signal } from '@angular/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { BrnSelectOptionDirective } from '@spartan-ng/ui-select-brain';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-option',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnSelectOptionDirective],
+	providers: [provideIcons({ lucideCheck })],
+	host: {
+		'[class]': '_computedClass()',
+	},
+	template: `
+		<ng-content />
+		<span
+			[attr.dir]="_brnSelectOption.dir()"
+			class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center rtl:left-auto rtl:right-2"
+			[attr.data-state]="this._brnSelectOption.checkedState()"
+		>
+			@if (this._brnSelectOption.selected()) {
+				<hlm-icon aria-hidden="true" name="lucideCheck" />
+			}
+		</span>
+	`,
+	imports: [HlmIconComponent],
+})
+export class HlmSelectOptionComponent {
+	protected readonly _brnSelectOption = inject(BrnSelectOptionDirective, { host: true });
+
+	private readonly classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this.classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2  rtl:flex-reverse rtl:pr-8 rtl:pl-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			this.classNames(),
+		),
+	);
+
+	@Input()
+	set value(value: unknown | null) {
+		this._brnSelectOption.value = value;
+	}
+
+	@Input()
+	public disabled = false;
+}

package/src/generators/ui/libs/ui-select-helm/files/lib/hlm-select-scroll-down.component.ts.template

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+
+@Component({
+	selector: 'hlm-select-scroll-down',
+	standalone: true,
+	imports: [HlmIconComponent],
+	providers: [provideIcons({ lucideChevronDown })],
+	host: {
+		class: 'flex cursor-default items-center justify-center py-1',
+	},
+	template: `
+		<hlm-icon class="ml-2 h-4 w-4" name="lucideChevronDown" />
+	`,
+})
+export class HlmSelectScrollDownComponent {}

package/src/generators/ui/libs/ui-select-helm/files/lib/hlm-select-scroll-up.component.ts.template

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { lucideChevronUp } from '@ng-icons/lucide';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+
+@Component({
+	selector: 'hlm-select-scroll-up',
+	standalone: true,
+	imports: [HlmIconComponent],
+	providers: [provideIcons({ lucideChevronUp })],
+	host: {
+		class: 'flex cursor-default items-center justify-center py-1',
+	},
+	template: `
+		<hlm-icon class="ml-2 h-4 w-4" name="lucideChevronUp" />
+	`,
+})
+export class HlmSelectScrollUpComponent {}

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

@@ -0,0 +1,44 @@
+import { Component, computed, ContentChild, ElementRef, Input, signal, ViewChild } from '@angular/core';
+import { provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+import { BrnSelectTriggerDirective } from '@spartan-ng/ui-select-brain';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-select-trigger',
+	standalone: true,
+	imports: [BrnSelectTriggerDirective, HlmIconComponent],
+	providers: [provideIcons({ lucideChevronDown })],
+	template: `
+		<button [class]="_computedClass()" #button brnSelectTrigger type="button">
+			<ng-content />
+			@if (icon) {
+				<ng-content select="hlm-icon" />
+			} @else {
+				<hlm-icon class="ml-2 h-4 w-4 flex-none" name="lucideChevronDown" />
+			}
+		</button>
+	`,
+})
+export class HlmSelectTriggerComponent {
+	@ViewChild('button', { static: true })
+	public buttonEl!: ElementRef;
+
+	@ContentChild(HlmIconComponent, { static: false })
+	protected icon!: HlmIconComponent;
+
+	private readonly classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this.classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'flex h-10 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-[180px]',
+			this.classNames(),
+		),
+	);
+}

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

@@ -0,0 +1,26 @@
+import { computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'hlm-select-value,[hlmSelectValue], brn-select-value[hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectValueDirective {
+	private readonly classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this.classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'!inline-block ltr:text-left rtl:text-right border-border w-[calc(100%)]] min-w-0 pointer-events-none truncate',
+			this.classNames(),
+		),
+	);
+}

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

@@ -0,0 +1,21 @@
+import { computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	// eslint-disable-next-line @angular-eslint/directive-selector
+	selector: 'hlm-select, brn-select [hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectDirective {
+	private readonly _classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this._classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() => hlm('', this._classNames()));
+}

package/src/generators/ui/libs/ui-select-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-select-helm/generator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = void 0;
+const tslib_1 = require("tslib");
+const generator_1 = require("../../../base/generator");
+function generator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield (0, generator_1.default)(tree, Object.assign(Object.assign({}, options), { primitiveName: 'select', internalName: 'ui-select-helm', publicName: 'ui-select-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-select-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-select-helm/generator.ts"],"names":[],"mappings":";;;;AACA,uDAAuD;AAGvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,QAAQ,EACvB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,gBAAgB,IAC3B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, Input, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -17,18 +17,12 @@ export class HlmSeparatorDirective {
 		this._orientation.set(value);
 	}
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'inline-flex shrink-0 border-0 bg-border',
 			this._orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-			this._userCls(),
-		);
-	}
+			this.userClass(),
+		),
+	);
 }

package/src/generators/ui/libs/ui-sheet-helm/files/lib/hlm-sheet-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 HlmSheetCloseDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	public 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-sheet-helm/files/lib/hlm-sheet-content.component.ts.template

@@ -1,5 +1,5 @@
-import { Component, computed, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
-import { radixCross1 } from '@ng-icons/radix-icons';
+import { Component, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
+import { lucideX } from '@ng-icons/lucide';
 import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { BrnSheetCloseDirective } from '@spartan-ng/ui-sheet-brain';
@@ -30,7 +30,7 @@ export const sheetVariants = cva(
 	selector: 'hlm-sheet-content',
 	standalone: true,
 	imports: [HlmSheetCloseDirective, BrnSheetCloseDirective, HlmIconComponent],
-	providers: [provideIcons({ radixCross1 })],
+	providers: [provideIcons({ lucideX })],
 	host: {
 		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
@@ -39,7 +39,7 @@ export const sheetVariants = cva(
 		<ng-content />
 		<button brnSheetClose 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>
 	`,
 })
@@ -56,14 +56,6 @@ export class HlmSheetContentComponent {
 		});
 	}
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(sheetVariants({ side: this._sideProvider.side() }), this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(sheetVariants({ side: this._sideProvider.side() }), this.userClass()));
 }

package/src/generators/ui/libs/ui-sheet-helm/files/lib/hlm-sheet-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 { BrnSheetDescriptionDirective } from '@spartan-ng/ui-sheet-brain';
 import { ClassValue } from 'clsx';
@@ -12,14 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnSheetDescriptionDirective],
 })
 export class HlmSheetDescriptionDirective {
-	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);
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('text-sm text-muted-foreground', this.userClass()));
 }

package/src/generators/ui/libs/ui-sheet-helm/files/lib/hlm-sheet-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 HlmSheetFooterComponent {
-	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());
-	}
+	public 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-sheet-helm/files/lib/hlm-sheet-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,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmSheetHeaderComponent {
-	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-2 text-center sm:text-left', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('flex flex-col space-y-2 text-center sm:text-left', this.userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, effect, input } from '@angular/core';
 import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -11,23 +11,17 @@ import { ClassValue } from 'clsx';
 })
 export class HlmSheetOverlayDirective {
 	private _classSettable = injectCustomClassSettable({ optional: true, host: true });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _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.userClass(),
+		),
+	);
 
 	constructor() {
-		this._classSettable?.setClassToCustomElement(this._computedClass());
-	}
-
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-		this._classSettable?.setClassToCustomElement(this._computedClass());
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return 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(),
-		);
+		effect(() => {
+			this._classSettable?.setClassToCustomElement(this._computedClass());
+		});
 	}
 }

package/src/generators/ui/libs/ui-sheet-helm/files/lib/hlm-sheet-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 { BrnSheetTitleDirective } from '@spartan-ng/ui-sheet-brain';
 import { ClassValue } from 'clsx';
@@ -12,14 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnSheetTitleDirective],
 })
 export class HlmSheetTitleDirective {
-	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', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('text-lg font-semibold', this.userClass()));
 }

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
-import { BrnDialogComponent, provideBrnDialog } from '@spartan-ng/ui-dialog-brain';
+import { BrnDialogComponent } from '@spartan-ng/ui-dialog-brain';
 import { BrnSheetComponent, BrnSheetOverlayComponent } from '@spartan-ng/ui-sheet-brain';
 import { HlmSheetOverlayDirective } from './hlm-sheet-overlay.directive';
 
@@ -8,7 +8,6 @@ import { HlmSheetOverlayDirective } from './hlm-sheet-overlay.directive';
 	standalone: true,
 	imports: [BrnSheetOverlayComponent, HlmSheetOverlayDirective],
 	providers: [
-		provideBrnDialog(),
 		{
 			provide: BrnDialogComponent,
 			useExisting: forwardRef(() => BrnSheetComponent),

package/src/generators/ui/libs/ui-skeleton-helm/files/lib/hlm-skeleton.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,14 +11,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmSkeletonComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('block animate-pulse rounded-md bg-muted', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('block animate-pulse rounded-md bg-muted', this.userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Component, computed, Input, signal } from '@angular/core';
+import { Component, computed, input, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -12,6 +12,8 @@ export const spinnerVariants = cva('inline-block', {
 			xs: 'h-4 w-4',
 			sm: 'h-6 w-6',
 			default: 'w-8 h-8 ',
+			lg: 'w-12 h-12',
+			xl: 'w-16 h-16',
 		},
 	},
 	defaultVariants: {
@@ -49,14 +51,6 @@ export class HlmSpinnerComponent {
 		this._size.set(value);
 	}
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(spinnerVariants({ size: this._size() }), this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(spinnerVariants({ size: this._size() }), this.userClass()));
 }