@spartan-ng/cli 0.0.1-alpha.584 → 0.0.1-alpha.585

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-previous.ts.template

@@ -1,10 +1,9 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, input, untracked } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, untracked } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowLeft } from '@ng-icons/lucide';
 import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
 import { HlmCarousel } from './hlm-carousel';
 
 @Component({
@@ -28,15 +27,12 @@ export class HlmCarouselPrevious {
 
 	protected readonly _carousel = inject(HlmCarousel);
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
 	private readonly _computedClass = computed(() =>
 		hlm(
 			'absolute h-8 w-8 rounded-full',
 			this._carousel.orientation() === 'horizontal'
 				? 'top-1/2 -left-12 -translate-y-1/2'
 				: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-			this.userClass(),
 		),
 	);
 	protected readonly isDisabled = () => !this._carousel.canScrollPrev();
@@ -44,7 +40,6 @@ export class HlmCarouselPrevious {
 	constructor() {
 		effect(() => {
 			const computedClass = this._computedClass();
-
 			untracked(() => this._button.setClass(computedClass));
 		});
 	}

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-slide-display.ts.template

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmCarousel } from './hlm-carousel';
 
@@ -8,7 +7,6 @@ import { HlmCarousel } from './hlm-carousel';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'carousel-slide-display',
-		'[class]': '_computedClass()',
 	},
 	template: `
 		<span class="sr-only">{{ _labelContent() }}</span>
@@ -20,9 +18,6 @@ export class HlmCarouselSlideDisplay {
 
 	protected readonly _currentSlide = computed(() => this._carousel.currentSlide() + 1);
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('', this.userClass()));
-
 	public readonly slideClass = input<ClassValue>('text-muted-foreground text-sm');
 
 	/** Screen reader only text for the slide display */

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel.ts.template

@@ -8,8 +8,7 @@ import {
 	signal,
 	viewChild,
 } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 import {
 	EmblaCarouselDirective,
 	type EmblaEventType,
@@ -23,7 +22,6 @@ import {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'carousel',
-		'[class]': '_computedClass()',
 		role: 'region',
 		'aria-roledescription': 'carousel',
 		'(keydown)': 'onKeydown($event)',
@@ -45,9 +43,6 @@ import {
 export class HlmCarousel {
 	protected readonly _emblaCarousel = viewChild.required(EmblaCarouselDirective);
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('relative', this.userClass()));
-
 	public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
 	public readonly options: InputSignal<Omit<EmblaOptionsType, 'axis'> | undefined> =
 		input<Omit<EmblaOptionsType, 'axis'>>();
@@ -68,6 +63,10 @@ export class HlmCarousel {
 	private readonly _slideCount = signal(0);
 	public readonly slideCount = this._slideCount.asReadonly();
 
+	constructor() {
+		classes(() => 'relative');
+	}
+
 	protected onEmblaEvent(event: EmblaEventType) {
 		const emblaApi = this._emblaCarousel().emblaApi;
 

package/src/generators/ui/libs/collapsible/files/lib/hlm-collapsible-content.ts.template

@@ -1,18 +1,16 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnCollapsibleContent } from '@spartan-ng/brain/collapsible';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCollapsibleContent],hlm-collapsible-content',
 	hostDirectives: [{ directive: BrnCollapsibleContent, inputs: ['id'] }],
 	host: {
 		'data-slot': 'collapsible-content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCollapsibleContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() => hlm('data-[state=closed]:hidden', this.userClass()));
+	constructor() {
+		classes(() => 'data-[state=closed]:hidden');
+	}
 }

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

@@ -1,24 +1,19 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnDialogClose } from '@spartan-ng/brain/dialog';
 import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
 import { provideHlmIconConfig } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandDialogCloseBtn]',
 	providers: [provideBrnButtonConfig({ variant: 'ghost' }), provideHlmIconConfig({ size: 'xs' })],
 	hostDirectives: [HlmButton, BrnDialogClose],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmCommandDialogCloseButton {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground ring-offset-background absolute top-3 right-3 inline-flex !h-5 h-10 !w-5 items-center justify-center rounded-md !p-1 px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground ring-offset-background absolute top-3 right-3 inline-flex !h-5 h-10 !w-5 items-center justify-center rounded-md !p-1 px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+		);
+	}
 }

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

@@ -1,14 +1,12 @@
-import { Directive, ElementRef, Renderer2, computed, contentChild, effect, inject, input, signal } from '@angular/core';
+import { Directive, ElementRef, Renderer2, contentChild, effect, inject, signal } from '@angular/core';
 import { BrnCommandSearchInputToken } from '@spartan-ng/brain/command';
 import { injectExposesStateProvider } from '@spartan-ng/brain/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandDialog]',
 	host: {
 		'data-slot': 'command-dialog',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandDialog {
@@ -20,15 +18,12 @@ export class HlmCommandDialog {
 	/** Access the search field */
 	private readonly _searchInput = contentChild(BrnCommandSearchInputToken, { read: ElementRef });
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _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() {
+		classes(
+			() =>
+				'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%]',
+		);
+
 		effect(() => {
 			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
 

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

@@ -1,15 +1,14 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandEmpty]',
 	host: {
 		'data-slot': 'command-empty',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandEmpty {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('py-6 text-center text-sm', this.userClass()));
+	constructor() {
+		classes(() => 'py-6 text-center text-sm');
+	}
 }

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

@@ -1,21 +1,15 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandGroupLabel],hlm-command-group-label',
 	host: {
 		'data-slot': 'command-group-label',
 		role: 'presentation',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandGroupLabel {
-	/** The user defined class  */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	/** The styles to apply  */
-	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground px-2 py-1.5 text-xs font-medium', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'text-muted-foreground px-2 py-1.5 text-xs font-medium');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnCommandGroup } from '@spartan-ng/brain/command';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandGroup],hlm-command-group',
@@ -13,15 +12,10 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'command-group',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandGroup {
-	/** The user defined class  */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	/** The styles to apply  */
-	protected readonly _computedClass = computed(() =>
-		hlm('text-foreground block overflow-hidden p-1 data-[hidden]:hidden', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'text-foreground block overflow-hidden p-1 data-[hidden]:hidden');
+	}
 }

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

@@ -1,19 +1,16 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { provideHlmIconConfig } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandIcon]',
 	providers: [provideHlmIconConfig({ size: 'sm' })],
 	host: {
 		'data-slot': 'command-icon',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandIcon {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground pointer-events-none shrink-0', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'text-muted-foreground pointer-events-none shrink-0');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnCommandItem } from '@spartan-ng/brain/command';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmCommandItem],button[hlm-command-item]',
@@ -14,18 +13,13 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'command-item',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandItem {
-	/** The user defined class  */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	/** The styles to apply  */
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			`data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[hidden]:hidden [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon:not([class*='text-'])]:text-base`,
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				"data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[hidden]:hidden [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon:not([class*='text-'])]:text-base",
+		);
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnCommandList } from '@spartan-ng/brain/command';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandList],hlm-command-list',
@@ -13,15 +12,10 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'command-list',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandList {
-	/** The user defined class  */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	/** The styles to apply  */
-	protected readonly _computedClass = computed(() =>
-		hlm('max-h-[300px] overflow-x-hidden overflow-y-auto', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'max-h-[300px] overflow-x-hidden overflow-y-auto');
+	}
 }

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

@@ -1,25 +1,19 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnCommandSearchInput } from '@spartan-ng/brain/command';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'input[hlmCommandSearchInput],input[hlm-command-search-input]',
 	hostDirectives: [{ directive: BrnCommandSearchInput, inputs: ['value'] }],
 	host: {
 		'data-slot': 'command-search-input',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandSearchInput {
-	/** The user defined class  */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	/** The styles to apply  */
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		);
+	}
 }

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

@@ -1,22 +1,16 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { provideHlmIconConfig } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandSearch],hlm-command-search',
 	providers: [provideHlmIconConfig({ size: 'sm' })],
 	host: {
 		'data-slot': 'command-search',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandSearch {
-	/** The user defined class  */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	/** The styles to apply  */
-	protected readonly _computedClass = computed(() =>
-		hlm('flex h-9 items-center gap-2 border-b px-3 [&>_ng-icon]:flex-none [&>_ng-icon]:opacity-50', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex h-9 items-center gap-2 border-b px-3 [&>_ng-icon]:flex-none [&>_ng-icon]:opacity-50');
+	}
 }

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

@@ -1,19 +1,15 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandSeparator],hlm-command-separator',
 	host: {
 		'data-slot': 'command-separator',
 		role: 'separator',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandSeparator {
-	/** The user defined class  */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	/** The styles to apply  */
-	protected readonly _computedClass = computed(() => hlm('bg-border -mx-1 block h-px', this.userClass()));
+	constructor() {
+		classes(() => 'bg-border -mx-1 block h-px');
+	}
 }

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

@@ -1,17 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandShortcut],hlm-command-shortcut',
 	host: {
 		'data-slot': 'command-shortcut',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandShortcut {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground ml-auto text-xs tracking-widest', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'text-muted-foreground ml-auto text-xs tracking-widest');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnCommand } from '@spartan-ng/brain/command';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommand],hlm-command',
@@ -14,15 +13,10 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'command',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommand {
-	/** The user defined class */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	/** The styles to apply  */
-	protected readonly _computedClass = computed(() =>
-		hlm('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md');
+	}
 }

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

@@ -1,23 +1,19 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnDialogClose } from '@spartan-ng/brain/dialog';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmDialogClose]',
 	hostDirectives: [{ directive: BrnDialogClose, inputs: ['delay'] }],
 	host: {
 		'data-slot': 'dialog-close',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDialogClose {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 flex items-center justify-center rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_ng-icon]:shrink-0',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 flex items-center justify-center rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_ng-icon]:shrink-0',
+		);
+	}
 }

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

@@ -1,11 +1,10 @@
 import { NgComponentOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
 import { HlmIconImports } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 import { HlmDialogClose } from './hlm-dialog-close';
 
 @Component({
@@ -15,7 +14,6 @@ import { HlmDialogClose } from './hlm-dialog-close';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'dialog-content',
-		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
 	},
 	template: `
@@ -40,12 +38,10 @@ export class HlmDialogContent {
 	public readonly component = this._dialogContext?.$component;
 	private readonly _dynamicComponentClass = this._dialogContext?.$dynamicComponentClass;
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'bg-background 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 relative z-50 mx-auto grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg data-[state=closed]:duration-200 data-[state=open]:duration-200 sm:mx-0 sm:max-w-lg',
-			this.userClass(),
 			this._dynamicComponentClass,
-		),
-	);
+		]);
+	}
 }

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

@@ -1,17 +1,16 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnDialogDescription } from '@spartan-ng/brain/dialog';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDialogDescription]',
 	hostDirectives: [BrnDialogDescription],
 	host: {
 		'data-slot': 'dialog-description',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDialogDescription {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('text-muted-foreground text-sm', this.userClass()));
+	constructor() {
+		classes(() => 'text-muted-foreground text-sm');
+	}
 }

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

@@ -1,17 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDialogFooter],hlm-dialog-footer',
 	host: {
 		'data-slot': 'dialog-footer',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDialogFooter {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end');
+	}
 }