@spartan-ng/cli 0.0.1-alpha.326 → 0.0.1-alpha.327

package/src/generators/ui/libs/ui-aspect-ratio-helm/files/lib/helm-aspect-ratio.directive.ts.template

@@ -23,26 +23,24 @@ export class HlmAspectRatioDirective implements AfterViewInit {
 	private readonly _ratio = signal(1);
 	private readonly _el: HTMLElement = inject(ElementRef).nativeElement;
 
+	protected readonly _computedPaddingBottom = computed(() => {
+		return `${100 / this._ratio()}%`;
+	});
+
+	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() => hlm(`relative w-full`, this._userCls()));
+
 	@Input()
 	set hlmAspectRatio(value: NumberInput) {
 		const coerced = coerceNumberProperty(parseDividedString(value));
 		this._ratio.set(coerced <= 0 ? 1 : coerced);
 	}
-	protected _computedPaddingBottom = computed(() => {
-		return `${100 / this._ratio()}%`;
-	});
 
-	private readonly _userCls = signal<ClassValue>('');
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(`relative w-full`, this._userCls());
-	}
-
 	ngAfterViewInit() {
 		// support delayed addition of image to dom
 		const child = this._el.firstElementChild;

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

@@ -1,11 +1,10 @@
-import { NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
 import { BrnAvatarComponent } from '@spartan-ng/ui-avatar-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
+export const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
 	variants: {
 		variant: {
 			small: 'h-6 w-6 text-xs',
@@ -24,22 +23,21 @@ type AvatarVariants = VariantProps<typeof avatarVariants>;
 	selector: 'hlm-avatar',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
-	imports: [NgIf],
 	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
 	template: `
-		<ng-container *ngIf="image?.canShow(); else fallback">
+		@if (image?.canShow()) {
 			<ng-content select="[hlmAvatarImage],[brnAvatarImage]" />
-		</ng-container>
-		<ng-template #fallback>
+		} @else {
 			<ng-content select="[hlmAvatarFallback],[brnAvatarFallback]" />
-		</ng-template>
+		}
 	`,
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAvatarComponent extends BrnAvatarComponent {
 	private readonly _userCls = signal<ClassValue>('');
+
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
@@ -51,8 +49,7 @@ export class HlmAvatarComponent extends BrnAvatarComponent {
 		this._variant.set(variant);
 	}
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(avatarVariants({ variant: this._variant() }), this._userCls());
-	}
+	protected readonly _computedClass = computed(() =>
+		hlm(avatarVariants({ variant: this._variant() }), this._userCls()),
+	);
 }

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

@@ -1,9 +1,9 @@
-import { Directive, Input, booleanAttribute, computed, signal } from '@angular/core';
+import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const badgeVariants = cva(
+export const badgeVariants = cva(
 	'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
 	{
 		variants: {

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const buttonVariants = cva(
+export const buttonVariants = cva(
 	'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
 	{
 		variants: {

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const cardContentVariants = cva('p-6 pt-0', {
+export const cardContentVariants = cva('p-6 pt-0', {
 	variants: {},
 	defaultVariants: {},
 });

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const cardDescriptionVariants = cva('text-sm text-muted-foreground', {
+export const cardDescriptionVariants = cva('text-sm text-muted-foreground', {
 	variants: {},
 	defaultVariants: {},
 });

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const cardFooterVariants = cva('flex p-6 pt-0', {
+export const cardFooterVariants = cva('flex p-6 pt-0', {
 	variants: {
 		direction: {
 			row: 'flex-row items-center space-x-1.5',

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const cardHeaderVariants = cva('flex p-6', {
+export const cardHeaderVariants = cva('flex p-6', {
 	variants: {
 		direction: {
 			row: 'flex-row items-center space-x-1.5',

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const cardTitleVariants = cva('text-lg font-semibold leading-none tracking-tight', {
+export const cardTitleVariants = cva('text-lg font-semibold leading-none tracking-tight', {
 	variants: {},
 	defaultVariants: {},
 });

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const cardVariants = cva(
+export const cardVariants = cva(
 	'rounded-lg border border-border bg-card focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-card-foreground shadow-sm',
 	{
 		variants: {},

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+
+import { HlmCheckboxCheckIconComponent } from './lib/hlm-checkbox-checkicon.component';
+import { HlmCheckboxDirective } from './lib/hlm-checkbox.directive';
+
+export * from './lib/hlm-checkbox-checkicon.component';
+export * from './lib/hlm-checkbox.directive';
+
+export const HlmCheckboxImports = [HlmCheckboxDirective, HlmCheckboxCheckIconComponent] as const;
+@NgModule({
+	imports: [...HlmCheckboxImports],
+	exports: [...HlmCheckboxImports],
+})
+export class HlmCheckboxModule {}

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

@@ -0,0 +1,37 @@
+import { Component, computed, inject, Input, signal } from '@angular/core';
+import { radixCheck } from '@ng-icons/radix-icons';
+import { BrnCheckboxComponent } from '@spartan-ng/ui-checkbox-brain';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-checkbox-checkicon',
+	standalone: true,
+	imports: [HlmIconComponent],
+	providers: [provideIcons({ radixCheck })],
+	host: {
+		'[class]': '_computedClass()',
+	},
+	template: `
+		<hlm-icon size="sm" name="radixCheck" />
+	`,
+})
+export class HlmCheckboxCheckIconComponent {
+	private _brnCheckbox = inject(BrnCheckboxComponent);
+	protected _checked = this._brnCheckbox?.isChecked;
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'h-4 w-4 leading-none group-data-[state=unchecked]:opacity-0',
+			this._checked() === 'indeterminate' ? 'opacity-50' : '',
+			this._userCls(),
+		);
+	}
+}

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

@@ -0,0 +1,30 @@
+import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { BrnCheckboxComponent } from '@spartan-ng/ui-checkbox-brain';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'brn-checkbox[hlm],[hlmCheckbox]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCheckboxDirective {
+	private readonly _brnCheckbox = inject(BrnCheckboxComponent);
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return 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._brnCheckbox.disabled ? 'cursor-not-allowed opacity-50' : '',
+			this._userCls(),
+		);
+	}
+}

package/src/generators/ui/libs/ui-checkbox-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-checkbox-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: 'checkbox', internalName: 'ui-checkbox-helm', publicName: 'ui-checkbox-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-checkbox-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,UAAU,EACzB,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE,kBAAkB,IAC7B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

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

@@ -1,24 +1,27 @@
 import { NgModule } from '@angular/core';
 
 import { HlmDialogCloseDirective } from './lib/hlm-dialog-close.directive';
-import { HlmDialogContentDirective } from './lib/hlm-dialog-content.directive';
+import { HlmDialogContentComponent } from './lib/hlm-dialog-content.component';
 import { HlmDialogDescriptionDirective } from './lib/hlm-dialog-description.directive';
 import { HlmDialogFooterComponent } from './lib/hlm-dialog-footer.component';
 import { HlmDialogHeaderComponent } from './lib/hlm-dialog-header.component';
 import { HlmDialogOverlayDirective } from './lib/hlm-dialog-overlay.directive';
 import { HlmDialogTitleDirective } from './lib/hlm-dialog-title.directive';
+import { HlmDialogComponent } from './lib/hlm-dialog.component';
 
 export * from './lib/hlm-dialog-close.directive';
-export * from './lib/hlm-dialog-content.directive';
+export * from './lib/hlm-dialog-content.component';
 export * from './lib/hlm-dialog-description.directive';
 export * from './lib/hlm-dialog-footer.component';
 export * from './lib/hlm-dialog-header.component';
 export * from './lib/hlm-dialog-overlay.directive';
 export * from './lib/hlm-dialog-title.directive';
+export * from './lib/hlm-dialog.component';
 
 export const HlmDialogImports = [
+	HlmDialogComponent,
 	HlmDialogCloseDirective,
-	HlmDialogContentDirective,
+	HlmDialogContentComponent,
 	HlmDialogDescriptionDirective,
 	HlmDialogFooterComponent,
 	HlmDialogHeaderComponent,

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

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
+import { radixCross1 } from '@ng-icons/radix-icons';
+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';
+import { ClassValue } from 'clsx';
+import { HlmDialogCloseDirective } from './hlm-dialog-close.directive';
+
+@Component({
+	selector: 'hlm-dialog-content',
+	standalone: true,
+	imports: [BrnDialogCloseDirective, HlmDialogCloseDirective, HlmIconComponent],
+	providers: [provideIcons({ radixCross1 })],
+	host: {
+		'[class]': '_computedClass()',
+		'[attr.data-state]': 'state()',
+	},
+	template: `
+		<ng-content />
+		<button brnDialogClose hlm>
+			<span class="sr-only">Close</span>
+			<hlm-icon class="flex h-4 w-4" size="100%" name="radixCross1" />
+		</button>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+})
+export class HlmDialogContentComponent {
+	private readonly _statusProvider = injectExposesStateProvider({ host: true });
+	public readonly state = this._statusProvider.state ?? signal('closed').asReadonly();
+
+	private readonly _userCls = signal<ClassValue>('');
+	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(),
+		),
+	);
+
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+}

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

@@ -1,33 +1,27 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, effect, Input, signal } from '@angular/core';
 import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmDialogOverlay],brn-dialog-overlay[hlm]',
 	standalone: true,
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmDialogOverlayDirective {
-	private _classSettable = injectCustomClassSettable({ optional: true, host: true });
-
-	constructor() {
-		this._classSettable?.setClassToCustomElement(this._computedClass());
-	}
+	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 
 	private readonly _userCls = signal<ClassValue>('');
+	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(),
+		),
+	);
 	@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(),
-		);
+	constructor() {
+		effect(() => this._classSettable?.setClassToCustomElement(this._computedClass()));
 	}
 }

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

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
+import { BrnDialogComponent, BrnDialogOverlayComponent, provideBrnDialog } from '@spartan-ng/ui-dialog-brain';
+import { HlmDialogOverlayDirective } from './hlm-dialog-overlay.directive';
+
+@Component({
+	selector: 'hlm-dialog',
+	standalone: true,
+	imports: [BrnDialogComponent, BrnDialogOverlayComponent, HlmDialogOverlayDirective],
+	providers: [
+		provideBrnDialog(),
+		{
+			provide: BrnDialogComponent,
+			useExisting: forwardRef(() => HlmDialogComponent),
+		},
+	],
+	template: `
+		<brn-dialog-overlay hlm />
+		<ng-content />
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	exportAs: 'hlmDialog',
+})
+export class HlmDialogComponent extends BrnDialogComponent {
+	constructor() {
+		super();
+		this.closeDelay = 100;
+	}
+}

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

@@ -1,4 +1,16 @@
-import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	ElementRef,
+	inject,
+	Input,
+	OnDestroy,
+	PLATFORM_ID,
+	signal,
+	ViewEncapsulation,
+} from '@angular/core';
 import { IconName, NgIconComponent } from '@ng-icons/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva } from 'class-variance-authority';
@@ -8,7 +20,7 @@ const DEFINED_SIZES = ['xs', 'sm', 'base', 'lg', 'xl', 'none'] as const;
 
 type DefinedSizes = (typeof DEFINED_SIZES)[number];
 
-const iconVariants = cva('inline-flex', {
+export const iconVariants = cva('inline-flex', {
 	variants: {
 		variant: {
 			xs: 'h-3 w-3',
@@ -30,6 +42,8 @@ const isDefinedSize = (size: IconSize): size is DefinedSizes => {
 	return DEFINED_SIZES.includes(size as DefinedSizes);
 };
 
+const TAILWIND_H_W_PATTERN = /\b(h-\d+|w-\d+)\b/g;
+
 @Component({
 	selector: 'hlm-icon',
 	standalone: true,
@@ -49,7 +63,14 @@ const isDefinedSize = (size: IconSize): size is DefinedSizes => {
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmIconComponent {
+export class HlmIconComponent implements OnDestroy {
+	private readonly _host = inject(ElementRef);
+	private readonly _platformId = inject(PLATFORM_ID);
+
+	private _mutObs?: MutationObserver;
+
+	private readonly _hostClasses = signal<string>('');
+
 	protected readonly _name = signal<IconName | string>('');
 	protected readonly _size = signal<IconSize>('base');
 	protected readonly _color = signal<string | undefined>(undefined);
@@ -61,10 +82,34 @@ export class HlmIconComponent {
 	protected readonly _computedClass = computed(() => {
 		const size: IconSize = this._size();
 		const variant = isDefinedSize(size) ? size : 'none';
-		return hlm(iconVariants({ variant }), this.userCls());
+		const hostClasses =
+			variant === 'none' ? this._hostClasses().replace(TAILWIND_H_W_PATTERN, '') : this._hostClasses();
+
+		return hlm(iconVariants({ variant }), this.userCls(), hostClasses);
 	});
 
-	@Input({ required: true })
+	constructor() {
+		if (isPlatformBrowser(this._platformId)) {
+			this._mutObs = new MutationObserver((mutations: MutationRecord[]) => {
+				mutations.forEach((mutation: MutationRecord) => {
+					if (mutation.attributeName !== 'class') return;
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-expect-error
+					this._hostClasses.set(mutation.target?.['className'] ?? '');
+				});
+			});
+			this._mutObs.observe(this._host.nativeElement, {
+				attributes: true,
+			});
+		}
+	}
+
+	ngOnDestroy() {
+		this._mutObs?.disconnect();
+		this._mutObs = undefined;
+	}
+
+	@Input()
 	set name(value: IconName | string) {
 		this._name.set(value);
 	}

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const inputErrorVariants = cva('text-destructive text-sm font-medium', {
+export const inputErrorVariants = cva('text-destructive text-sm font-medium', {
 	variants: {},
 	defaultVariants: {},
 });

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const inputVariants = cva(
+export const inputVariants = cva(
 	'flex rounded-md border font-normal border-input bg-transparent text-sm ring-offset-background file:border-0 file:text-foreground file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
 	{
 		variants: {

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

@@ -1,9 +1,10 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { computed, Directive, ElementRef, inject, Input, OnInit, PLATFORM_ID, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const labelVariants = cva(
+export const labelVariants = cva(
 	'text-sm font-medium leading-none [&:has([hlmInput]:disabled)]:cursor-not-allowed [&:has([hlmInput]:disabled)]:opacity-70',
 	{
 		variants: {
@@ -14,6 +15,11 @@ const labelVariants = cva(
 				auto: '[&:has([hlmInput].ng-invalid.ng-touched)]:text-destructive',
 				true: 'text-destructive',
 			},
+			disabled: {
+				auto: '[&:has([hlmInput]:disabled)]:opacity-70',
+				true: 'opacity-70',
+				false: '',
+			},
 		},
 		defaultVariants: {
 			variant: 'default',
@@ -30,7 +36,28 @@ export type LabelVariants = VariantProps<typeof labelVariants>;
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmLabelDirective {
+export class HlmLabelDirective implements OnInit {
+	private readonly _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+	private readonly _element = inject(ElementRef).nativeElement;
+	private _changes?: MutationObserver;
+	private readonly _dataDisabled = signal<boolean | 'auto'>('auto');
+
+	ngOnInit(): void {
+		if (!this._isBrowser) return;
+		this._changes = new MutationObserver((mutations: MutationRecord[]) => {
+			mutations.forEach((mutation: MutationRecord) => {
+				if (mutation.attributeName !== 'data-disabled') return;
+				// eslint-disable-next-line
+				const state = (mutation.target as any).attributes.getNamedItem(mutation.attributeName)?.value === 'true';
+				this._dataDisabled.set(state ?? 'auto');
+			});
+		});
+		this._changes?.observe(this._element, {
+			attributes: true,
+			childList: true,
+			characterData: true,
+		});
+	}
 	private readonly _variant = signal<LabelVariants['variant']>('default');
 	@Input()
 	set variant(value: LabelVariants['variant']) {
@@ -49,8 +76,10 @@ export class HlmLabelDirective {
 		this._userCls.set(userCls);
 	}
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(labelVariants({ variant: this._variant(), error: this._error() }), this._userCls());
-	}
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			labelVariants({ variant: this._variant(), error: this._error(), disabled: this._dataDisabled() }),
+			this._userCls(),
+		),
+	);
 }