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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.584",
+  "version": "0.0.1-alpha.585",
   "type": "commonjs",
   "dependencies": {
     "@angular/core": ">=19.0.0",

package/src/generators/migrate-brain-imports/import-map.d.ts

@@ -20,7 +20,6 @@ declare const _default: {
     '@spartan-ng/ui-separator-brain': string;
     '@spartan-ng/ui-sheet-brain': string;
     '@spartan-ng/ui-switch-brain': string;
-    '@spartan-ng/ui-table-brain': string;
     '@spartan-ng/ui-tabs-brain': string;
     '@spartan-ng/ui-toggle-brain': string;
     '@spartan-ng/ui-toggle-group-brain': string;

package/src/generators/migrate-brain-imports/import-map.js

@@ -22,7 +22,6 @@ exports.default = {
     '@spartan-ng/ui-separator-brain': '@spartan-ng/brain/separator',
     '@spartan-ng/ui-sheet-brain': '@spartan-ng/brain/sheet',
     '@spartan-ng/ui-switch-brain': '@spartan-ng/brain/switch',
-    '@spartan-ng/ui-table-brain': '@spartan-ng/brain/table',
     '@spartan-ng/ui-tabs-brain': '@spartan-ng/brain/tabs',
     '@spartan-ng/ui-toggle-brain': '@spartan-ng/brain/toggle',
     '@spartan-ng/ui-toggle-group-brain': '@spartan-ng/brain/toggle-group',

package/src/generators/migrate-brain-imports/import-map.js.map

@@ -1 +1 @@
-{"version":3,"file":"import-map.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-brain-imports/import-map.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACd,+BAA+B,EAAE,4BAA4B;IAC7D,6BAA6B,EAAE,0BAA0B;IACzD,gCAAgC,EAAE,6BAA6B;IAC/D,4BAA4B,EAAE,yBAAyB;IACvD,6BAA6B,EAAE,0BAA0B;IACzD,mCAAmC,EAAE,gCAAgC;IACrE,+BAA+B,EAAE,4BAA4B;IAC7D,kCAAkC,EAAE,+BAA+B;IACnE,8BAA8B,EAAE,2BAA2B;IAC3D,6BAA6B,EAAE,0BAA0B;IACzD,iCAAiC,EAAE,8BAA8B;IACjE,4BAA4B,EAAE,yBAAyB;IACvD,iCAAiC,EAAE,8BAA8B;IACjE,2BAA2B,EAAE,wBAAwB;IACrD,8BAA8B,EAAE,2BAA2B;IAC3D,+BAA+B,EAAE,4BAA4B;IAC7D,kCAAkC,EAAE,+BAA+B;IACnE,6BAA6B,EAAE,0BAA0B;IACzD,gCAAgC,EAAE,6BAA6B;IAC/D,4BAA4B,EAAE,yBAAyB;IACvD,6BAA6B,EAAE,0BAA0B;IACzD,4BAA4B,EAAE,yBAAyB;IACvD,2BAA2B,EAAE,wBAAwB;IACrD,6BAA6B,EAAE,0BAA0B;IACzD,mCAAmC,EAAE,gCAAgC;IACrE,8BAA8B,EAAE,2BAA2B;IAC3D,gCAAgC,EAAE,6BAA6B;IAC/D,sCAAsC,EAAE,mCAAmC;CAC3E,CAAC"}
+{"version":3,"file":"import-map.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-brain-imports/import-map.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACd,+BAA+B,EAAE,4BAA4B;IAC7D,6BAA6B,EAAE,0BAA0B;IACzD,gCAAgC,EAAE,6BAA6B;IAC/D,4BAA4B,EAAE,yBAAyB;IACvD,6BAA6B,EAAE,0BAA0B;IACzD,mCAAmC,EAAE,gCAAgC;IACrE,+BAA+B,EAAE,4BAA4B;IAC7D,kCAAkC,EAAE,+BAA+B;IACnE,8BAA8B,EAAE,2BAA2B;IAC3D,6BAA6B,EAAE,0BAA0B;IACzD,iCAAiC,EAAE,8BAA8B;IACjE,4BAA4B,EAAE,yBAAyB;IACvD,iCAAiC,EAAE,8BAA8B;IACjE,2BAA2B,EAAE,wBAAwB;IACrD,8BAA8B,EAAE,2BAA2B;IAC3D,+BAA+B,EAAE,4BAA4B;IAC7D,kCAAkC,EAAE,+BAA+B;IACnE,6BAA6B,EAAE,0BAA0B;IACzD,gCAAgC,EAAE,6BAA6B;IAC/D,4BAA4B,EAAE,yBAAyB;IACvD,6BAA6B,EAAE,0BAA0B;IACzD,2BAA2B,EAAE,wBAAwB;IACrD,6BAA6B,EAAE,0BAA0B;IACzD,mCAAmC,EAAE,gCAAgC;IACrE,8BAA8B,EAAE,2BAA2B;IAC3D,gCAAgC,EAAE,6BAA6B;IAC/D,sCAAsC,EAAE,mCAAmC;CAC3E,CAAC"}

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

@@ -1,15 +1,11 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BrnAccordionContent } from '@spartan-ng/brain/accordion';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-accordion-content',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: BrnAccordionContent, inputs: ['style'] }],
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		<div class="flex flex-col gap-4 pt-0 pb-4 text-balance">
 			<ng-content />
@@ -17,12 +13,9 @@ import type { ClassValue } from 'clsx';
 	`,
 })
 export class HlmAccordionContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() => {
-		return hlm(
-			'text-sm transition-all data-[state=closed]:h-0 data-[state=open]:h-[var(--brn-accordion-content-height)]',
-			this.userClass(),
+	constructor() {
+		classes(
+			() => 'text-sm transition-all data-[state=closed]:h-0 data-[state=open]:h-[var(--brn-accordion-content-height)]',
 		);
-	});
+	}
 }

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

@@ -1,23 +1,18 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import { provideHlmIconConfig } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'ng-icon[hlmAccordionIcon], ng-icon[hlmAccIcon]',
 	providers: [provideIcons({ lucideChevronDown }), provideHlmIconConfig({ size: 'sm' })],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAccordionIcon {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-data-[state=open]:rotate-180',
+		);
+	}
 }

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

@@ -1,7 +1,6 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnAccordionItem } from '@spartan-ng/brain/accordion';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item',
@@ -12,13 +11,9 @@ import type { ClassValue } from 'clsx';
 			outputs: ['openedChange'],
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAccordionItem {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('border-border flex flex-1 flex-col border-b', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'border-border flex flex-1 flex-col border-b');
+	}
 }

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

@@ -1,22 +1,19 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnAccordionTrigger } from '@spartan-ng/brain/accordion';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAccordionTrigger]',
 	hostDirectives: [BrnAccordionTrigger],
 	host: {
 		'[style.--tw-ring-offset-shadow]': '"0 0 #000"',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmAccordionTrigger {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'group flex w-full items-center justify-between py-4 text-left font-medium transition-all hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&[data-state=open]>ng-icon]:rotate-180',
+		);
+	}
 }

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

@@ -1,18 +1,13 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnAccordion } from '@spartan-ng/brain/accordion';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAccordion], hlm-accordion',
 	hostDirectives: [{ directive: BrnAccordion, inputs: ['type', 'dir', 'orientation'] }],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAccordion {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col');
+	}
 }

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

@@ -1,19 +1,11 @@
-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: '[hlmAlertDesc],[hlmAlertDescription]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAlertDescription {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(() => 'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed');
+	}
 }

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

@@ -1,16 +1,11 @@
-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: '[hlmAlertTitle]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAlertTitle {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 const alertVariants = cva(
 	'relative w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>[hlmAlertIcon]]:grid has-[>[hlmAlertIcon]]:grid-cols-[calc(theme(spacing.1)*4)_1fr] has-[>[hlmAlertIcon]]:gap-x-3 [&>[hlmAlertIcon]]:size-4 [&>[hlmAlertIcon]]:translate-y-0.5 [&>[hlmAlertIcon]]:text-current',
@@ -25,12 +24,12 @@ export type AlertVariants = VariantProps<typeof alertVariants>;
 	selector: '[hlmAlert]',
 	host: {
 		role: 'alert',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmAlert {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(alertVariants({ variant: this.variant() }), this.userClass()));
-
 	public readonly variant = input<AlertVariants['variant']>('default');
+
+	constructor() {
+		classes(() => alertVariants({ variant: this.variant() }));
+	}
 }

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

@@ -1,13 +1,11 @@
-import { computed, Directive, input, signal } from '@angular/core';
+import { Directive, signal } from '@angular/core';
 import { injectExposesStateProvider } from '@spartan-ng/brain/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAlertDialogContent],hlm-alert-dialog-content',
 	host: {
 		'data-slot': 'alert-dialog-content',
-		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
 	},
 })
@@ -15,11 +13,10 @@ export class HlmAlertDialogContent {
 	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
 	public readonly state = this._stateProvider?.state ?? signal('closed');
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'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(),
-		),
-	);
+	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',
+		);
+	}
 }

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

@@ -1,17 +1,16 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnAlertDialogDescription } from '@spartan-ng/brain/alert-dialog';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAlertDialogDescription]',
 	hostDirectives: [BrnAlertDialogDescription],
 	host: {
 		'data-slot': 'alert-dialog-description',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmAlertDialogDescription {
-	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/alert-dialog/files/lib/hlm-alert-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: '[hlmAlertDialogFooter],hlm-alert-dialog-footer',
 	host: {
 		'data-slot': 'alert-dialog-footer',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmAlertDialogFooter {
-	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');
+	}
 }

package/src/generators/ui/libs/alert-dialog/files/lib/hlm-alert-dialog-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: '[hlmAlertDialogHeader],hlm-alert-dialog-header',
 	host: {
 		'data-slot': 'alert-dialog-header',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmAlertDialogHeader {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-col gap-2 text-center sm:text-left', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex flex-col gap-2 text-center sm:text-left');
+	}
 }

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

@@ -1,17 +1,16 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnAlertDialogTitle } from '@spartan-ng/brain/alert-dialog';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAlertDialogTitle]',
 	hostDirectives: [BrnAlertDialogTitle],
 	host: {
 		'data-slot': 'alert-dialog-title',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmAlertDialogTitle {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('text-lg font-semibold', this.userClass()));
+	constructor() {
+		classes(() => 'text-lg font-semibold');
+	}
 }

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

@@ -1,7 +1,6 @@
 import { type NumberInput, coerceNumberProperty } from '@angular/cdk/coercion';
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 const parseDividedString = (value: NumberInput): NumberInput => {
 	if (typeof value !== 'string' || !value.includes('/')) return value;
@@ -13,10 +12,7 @@ const parseDividedString = (value: NumberInput): NumberInput => {
 
 @Directive({
 	selector: '[hlmAspectRatio]',
-	host: {
-		'[class]': '_computedClass()',
-		'[style.padding-bottom.%]': '100 / ratio()',
-	},
+	host: { '[style.padding-bottom.%]': '100 / ratio()' },
 })
 export class HlmAspectRatio {
 	/**
@@ -30,12 +26,10 @@ export class HlmAspectRatio {
 		},
 	});
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'relative w-full [&>*:first-child]:absolute [&>*:first-child]:h-full [&>*:first-child]:w-full [&>*:first-child]:object-cover',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'relative w-full [&>*:first-child]:absolute [&>*:first-child]:h-full [&>*:first-child]:w-full [&>*:first-child]:object-cover',
+		);
+	}
 }

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

@@ -1,14 +1,11 @@
-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: '[hlmAutocompleteEmpty]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAutocompleteEmpty {
-	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/autocomplete/files/lib/hlm-autocomplete-group.ts.template

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnAutocompleteGroup } from '@spartan-ng/brain/autocomplete';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAutocompleteGroup],hlm-autocomplete-group',
@@ -11,16 +10,9 @@ import type { ClassValue } from 'clsx';
 			inputs: ['id'],
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAutocompleteGroup {
-	/** 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', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'text-foreground block overflow-hidden p-1');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnAutocompleteItem } from '@spartan-ng/brain/autocomplete';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmAutocompleteItem],button[hlm-autocomplete-item]',
@@ -12,19 +11,12 @@ import type { ClassValue } from 'clsx';
 			outputs: ['selected'],
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAutocompleteItem {
-	/** 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-start 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-start 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/autocomplete/files/lib/hlm-autocomplete-list.ts.template

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnAutocompleteList } from '@spartan-ng/brain/autocomplete';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAutocompleteList],hlm-autocomplete-list',
@@ -11,16 +10,9 @@ import type { ClassValue } from 'clsx';
 			inputs: ['id'],
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAutocompleteList {
-	/** The user defined class  */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	/** The styles to apply  */
-	protected readonly _computedClass = computed(() =>
-		hlm('block max-h-60 overflow-x-hidden overflow-y-auto', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'block max-h-60 overflow-x-hidden overflow-y-auto');
+	}
 }

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

@@ -25,7 +25,7 @@ import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopoverImports } from '@spartan-ng/brain/popover';
 import { HlmIconImports } from '<%- importAlias %>/icon';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes, hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmAutocompleteEmpty } from './hlm-autocomplete-empty';
 import { HlmAutocompleteGroup } from './hlm-autocomplete-group';
@@ -59,9 +59,6 @@ export const HLM_AUTOCOMPLETE_VALUE_ACCESSOR = {
 	],
 	providers: [HLM_AUTOCOMPLETE_VALUE_ACCESSOR, provideIcons({ lucideSearch, lucideChevronDown, lucideCircleX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		@let transformer = transformOptionToValue();
 		<hlm-popover
@@ -175,29 +172,25 @@ export class HlmAutocomplete<T, V = T> implements ControlValueAccessor {
 
 	protected readonly _elementRef = inject(ElementRef<HTMLElement>);
 
-	/** The user defined class  */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('block w-full', this.userClass()));
-
 	/** Custom class for the autocomplete search container. */
 	public readonly autocompleteSearchClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteSearchClass = computed(() => hlm('', this.autocompleteSearchClass()));
+	protected readonly _computedAutocompleteSearchClass = computed(() => hlm(this.autocompleteSearchClass()));
 
 	/** Custom class for the autocomplete input. */
 	public readonly autocompleteInputClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteInputClass = computed(() => hlm('', this.autocompleteInputClass()));
+	protected readonly _computedAutocompleteInputClass = computed(() => hlm(this.autocompleteInputClass()));
 
 	/** Custom class for the autocomplete list. */
 	public readonly autocompleteListClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteListClass = computed(() => hlm('', this.autocompleteListClass()));
+	protected readonly _computedAutocompleteListClass = computed(() => hlm(this.autocompleteListClass()));
 
 	/** Custom class for each autocomplete item. */
 	public readonly autocompleteItemClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteItemClass = computed(() => hlm('', this.autocompleteItemClass()));
+	protected readonly _computedAutocompleteItemClass = computed(() => hlm(this.autocompleteItemClass()));
 
 	/** Custom class for the empty and loading state container. */
 	public readonly autocompleteEmptyClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteEmptyClass = computed(() => hlm('', this.autocompleteEmptyClass()));
+	protected readonly _computedAutocompleteEmptyClass = computed(() => hlm(this.autocompleteEmptyClass()));
 
 	/** The list of filtered options to display in the autocomplete. */
 	public readonly filteredOptions = input<T[]>([]);
@@ -282,6 +275,7 @@ export class HlmAutocomplete<T, V = T> implements ControlValueAccessor {
 	protected _onTouched?: TouchFn;
 
 	constructor() {
+		classes(() => 'block w-full');
 		effect(() => {
 			const search = this._search();
 			this.searchChange.emit(search);