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

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

@@ -1,16 +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: '[hlmInputOtpGroup]',
 	host: {
 		'data-slot': 'input-otp-group',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmInputOtpGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() => hlm('flex items-center', this.userClass()));
+	constructor() {
+		classes(() => 'flex items-center');
+	}
 }

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

@@ -1,9 +1,8 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideMinus } from '@ng-icons/lucide';
 import { HlmIcon } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-input-otp-separator',
@@ -13,14 +12,13 @@ import type { ClassValue } from 'clsx';
 	host: {
 		role: 'separator',
 		'data-slot': 'input-otp-separator',
-		'[class]': '_computedClass()',
 	},
 	template: `
 		<ng-icon hlm name="lucideMinus" />
 	`,
 })
 export class HlmInputOtpSeparator {
-	public readonly userClass = input<ClassValue>('inline-flex', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() => hlm(this.userClass()));
+	constructor() {
+		classes(() => 'inline-flex');
+	}
 }

package/src/generators/ui/libs/input-otp/files/lib/hlm-input-otp-slot.ts.template

@@ -1,8 +1,7 @@
 import type { NumberInput } from '@angular/cdk/coercion';
-import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, numberAttribute } from '@angular/core';
 import { BrnInputOtpSlot } from '@spartan-ng/brain/input-otp';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 
 @Component({
@@ -11,7 +10,6 @@ import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'input-otp-slot',
-		'[class]': '_computedClass()',
 	},
 	template: `
 		<brn-input-otp-slot [index]="index()">
@@ -20,16 +18,13 @@ import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 	`,
 })
 export class HlmInputOtpSlot {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
 	/** The index of the slot to render the char or a fake caret */
 	public readonly index = input.required<number, NumberInput>({ transform: numberAttribute });
 
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md',
 			'has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:z-10 has-[brn-input-otp-slot[data-active="true"]]:ring-[3px]',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,18 +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: 'brn-input-otp[hlmInputOtp], brn-input-otp[hlm]',
 	host: {
 		'data-slot': 'input-otp',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmInputOtp {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm('flex items-center gap-2 has-disabled:opacity-50', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex items-center gap-2 has-disabled:opacity-50');
+	}
 }

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

@@ -1,15 +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: '[hlmItemActions],hlm-item-actions',
 	host: {
 		'data-slot': 'item-actions',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmItemActions {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex items-center gap-2', this.userClass()));
+	constructor() {
+		classes(() => 'flex items-center gap-2');
+	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-content.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: '[hlmItemContent],hlm-item-content',
 	host: {
 		'data-slot': 'item-content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmItemContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none');
+	}
 }

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

@@ -1,21 +1,17 @@
-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: 'p[hlmItemDescription]',
 	host: {
 		'data-slot': 'item-description',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmItemDescription {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
 			'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-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: '[hlmItemFooter],hlm-item-footer',
 	host: {
 		'data-slot': 'item-footer',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmItemFooter {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex basis-full items-center justify-between gap-2', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex basis-full items-center justify-between gap-2');
+	}
 }

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

@@ -1,12 +1,12 @@
-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: '[hlmItemGroup],hlm-item-group',
-	host: { 'data-slot': 'item-group', '[class]': '_computedClass()' },
+	host: { 'data-slot': 'item-group' },
 })
 export class HlmItemGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('group/item-group flex flex-col', this.userClass()));
+	constructor() {
+		classes(() => 'group/item-group flex flex-col');
+	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-header.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: '[hlmItemHeader],hlm-item-header',
 	host: {
 		'data-slot': 'item-header',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmItemHeader {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex basis-full items-center justify-between gap-2', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex basis-full items-center justify-between gap-2');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 import { injectHlmItemMediaConfig } from './hlm-item-token';
 
 const itemMediaVariants = cva(
@@ -26,16 +25,13 @@ export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
 	host: {
 		'data-slot': 'item-media',
 		'[attr.data-variant]': 'variant()',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmItemMedia {
 	private readonly _config = injectHlmItemMediaConfig();
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(itemMediaVariants({ variant: this.variant() }), this.userClass()),
-	);
 	public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);
+
+	constructor() {
+		classes(() => itemMediaVariants({ variant: this.variant() }));
+	}
 }

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

@@ -1,15 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnSeparator } from '@spartan-ng/brain/separator';
 import { hlmSeparatorClass } from '<%- importAlias %>/separator';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
-
+import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: 'div[hlmItemSeparator]',
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
-	host: { 'data-slot': 'item-separator', '[class]': '_computedClass()' },
+	host: { 'data-slot': 'item-separator' },
 })
 export class HlmItemSeparator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(hlmSeparatorClass, 'my-0', this.userClass()));
+	constructor() {
+		classes(() => [hlmSeparatorClass, 'my-0']);
+	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-title.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: '[hlmItemTitle],hlm-item-title',
 	host: {
 		'data-slot': 'item-title',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmItemTitle {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex w-fit items-center gap-2 text-sm leading-snug font-medium', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex w-fit items-center gap-2 text-sm leading-snug font-medium');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 import { injectHlmItemConfig } from './hlm-item-token';
 
 const itemVariants = cva(
@@ -33,17 +32,14 @@ export type ItemVariants = VariantProps<typeof itemVariants>;
 		'data-slot': 'item',
 		'[attr.data-variant]': 'variant()',
 		'[attr.data-size]': 'size()',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmItem {
 	private readonly _config = injectHlmItemConfig();
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(itemVariants({ variant: this.variant(), size: this.size() }), this.userClass()),
-	);
 	public readonly variant = input<ItemVariants['variant']>(this._config.variant);
 	public readonly size = input<ItemVariants['size']>(this._config.size);
+
+	constructor() {
+		classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
+	}
 }

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

@@ -1,15 +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: 'kbd[hlmKbdGroup]',
 	host: {
 		'data-slot': 'kbd-group',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmKbdGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('inline-flex items-center gap-1', this.userClass()));
+	constructor() {
+		classes(() => 'inline-flex items-center gap-1');
+	}
 }

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

@@ -1,22 +1,18 @@
-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: 'kbd[hlmKbd]',
 	host: {
 		'data-slot': 'kbd',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmKbd {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
 			"[&_ng-icon:not([class*='text-'])]:text-xs",
 			'[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,7 +1,6 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnLabel } from '@spartan-ng/brain/label';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmLabel]',
@@ -11,17 +10,12 @@ import type { ClassValue } from 'clsx';
 			inputs: ['id'],
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmLabel {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50',
+		);
+	}
 }

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

@@ -3,8 +3,7 @@ import { CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 import { injectHlmMenubarConfig } from './hlm-menubar-token';
 
 @Directive({
@@ -24,21 +23,12 @@ import { injectHlmMenubarConfig } from './hlm-menubar-token';
 		'data-slot': 'menubar-trigger',
 		'[disabled]': 'disabled() ',
 		'[attr.data-disabled]': 'disabled() ? "" : null',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmMenubarTrigger {
 	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
 	private readonly _config = injectHlmMenubarConfig();
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-			this.userClass(),
-		),
-	);
-
 	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
 	public readonly align = input<MenuAlign>(this._config.align);
@@ -62,5 +52,10 @@ export class HlmMenubarTrigger {
 		effect(() => {
 			this._cdkTrigger.menuPosition = this._menuPosition();
 		});
+
+		classes(
+			() =>
+				'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		);
 	}
 }

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

@@ -1,19 +1,16 @@
 import { CdkMenuBar } from '@angular/cdk/menu';
-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: '[hlmMenubar],hlm-menubar',
 	hostDirectives: [CdkMenuBar],
 	host: {
 		'data-slot': 'menubar',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmMenubar {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs');
+	}
 }

package/src/generators/ui/libs/navigation-menu/files/hlm-navigation-menu-content.ts.template

@@ -1,23 +1,17 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmNavigationMenuContent]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'navigation-menu-content',
-	},
+	host: { 'data-slot': 'navigation-menu-content' },
 })
 export class HlmNavigationMenuContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out top-0 left-0 w-full p-2 pr-2.5 md:w-auto',
 			'data-[orientation=horizontal]:data-[motion=from-end]:slide-in-from-right-52 data-[orientation=horizontal]:data-[motion=from-start]:slide-in-from-left-52 data-[orientation=horizontal]:data-[motion=to-end]:slide-out-to-right-52 data-[orientation=horizontal]:data-[motion=to-start]:slide-out-to-left-52',
 			'data-[orientation=vertical]:data-[motion=from-end]:slide-in-from-bottom-52 data-[orientation=vertical]:data-[motion=from-start]:slide-in-from-top-52 data-[orientation=vertical]:data-[motion=to-end]:slide-out-to-bottom-52 data-[orientation=vertical]:data-[motion=to-start]:slide-out-to-top-52',
 			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 top-full overflow-hidden rounded-md border shadow duration-200 data-[orientation=horizontal]:mt-1.5 data-[orientation=vertical]:mx-1.5 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

package/src/generators/ui/libs/navigation-menu/files/hlm-navigation-menu-item.ts.template

@@ -1,16 +1,13 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnNavigationMenuItem } from '@spartan-ng/brain/navigation-menu';
-import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'li[hlmNavigationMenuItem]',
 	hostDirectives: [{ directive: BrnNavigationMenuItem, inputs: ['id'] }],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmNavigationMenuItem {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('relative', this.userClass()));
+	constructor() {
+		classes(() => 'relative');
+	}
 }

package/src/generators/ui/libs/navigation-menu/files/hlm-navigation-menu-link.ts.template

@@ -1,22 +1,16 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnNavigationMenuLink } from '@spartan-ng/brain/navigation-menu';
-import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'a[hlmNavigationMenuLink]',
 	hostDirectives: [{ directive: BrnNavigationMenuLink, inputs: ['active'] }],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmNavigationMenuLink {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_ng-icon:not([class*="text-"])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_ng-icon:not([class*="text-"])]:text-base',
 			'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

package/src/generators/ui/libs/navigation-menu/files/hlm-navigation-menu-list.ts.template

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnNavigationMenuList } from '@spartan-ng/brain/navigation-menu';
-import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'ul[hlmNavigationMenuList]',
@@ -10,17 +9,12 @@ import { ClassValue } from 'clsx';
 			directive: BrnNavigationMenuList,
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmNavigationMenuList {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'group flex flex-1 list-none items-center justify-center gap-1',
 			'data-[orientation=vertical]:flex-col',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }