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

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

@@ -1,21 +1,16 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnNavigationMenuTrigger } from '@spartan-ng/brain/navigation-menu';
-import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmNavigationMenuTrigger]',
 	hostDirectives: [BrnNavigationMenuTrigger],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmNavigationMenuTrigger {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50',
+		);
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnNavigationMenu } from '@spartan-ng/brain/navigation-menu';
-import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'nav[hlmNavigationMenu]',
@@ -12,13 +11,9 @@ import { ClassValue } from 'clsx';
 			outputs: ['valueChange'],
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmNavigationMenu {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center');
+	}
 }

package/src/generators/ui/libs/pagination/files/lib/hlm-pagination-content.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: 'ul[hlmPaginationContent]',
 	host: {
 		'data-slot': 'pagination-content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmPaginationContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex flex-row items-center gap-1', this.userClass()));
+	constructor() {
+		classes(() => 'flex flex-row items-center gap-1');
+	}
 }

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

@@ -1,9 +1,8 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideEllipsis } from '@ng-icons/lucide';
 import { HlmIconImports } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-pagination-ellipsis',
@@ -14,15 +13,16 @@ import type { ClassValue } from 'clsx';
 		'data-slot': 'pagination-ellipsis',
 	},
 	template: `
-		<span [class]="_computedClass()" aria-hidden="true">
+		<span aria-hidden="true">
 			<ng-icon hlm size="sm" name="lucideEllipsis" />
 			<span class="sr-only">{{ srOnlyText() }}</span>
 		</span>
 	`,
 })
 export class HlmPaginationEllipsis {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex size-9 items-center justify-center', this.userClass()));
+	constructor() {
+		classes(() => 'flex size-9 items-center justify-center');
+	}
 
 	/** Screen reader only text for the ellipsis */
 	public readonly srOnlyText = input<string>('More pages');

package/src/generators/ui/libs/pagination/files/lib/hlm-pagination-item.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: 'li[hlmPaginationItem]',
 	host: {
 		'data-slot': 'pagination-item',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmPaginationItem {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('', this.userClass()));
+	constructor() {
+		classes(() => '');
+	}
 }

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

@@ -1,9 +1,8 @@
 import type { BooleanInput } from '@angular/cdk/coercion';
-import { Directive, booleanAttribute, computed, input } from '@angular/core';
+import { Directive, booleanAttribute, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { type ButtonVariants, buttonVariants } from '<%- importAlias %>/button';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { buttonVariants, type ButtonVariants } from '<%- importAlias %>/button';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmPaginationLink]',
@@ -27,13 +26,11 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'pagination-link',
-		'[class]': '_computedClass()',
 		'[attr.data-active]': 'isActive() ? "true" : null',
 		'[attr.aria-current]': 'isActive() ? "page" : null',
 	},
 })
 export class HlmPaginationLink {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** Whether the link is active (i.e., the current page). */
 	public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 	/** The size of the button. */
@@ -41,15 +38,13 @@ export class HlmPaginationLink {
 	/** The link to navigate to the page. */
 	public readonly link = input<RouterLink['routerLink']>();
 
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'',
+	constructor() {
+		classes(() => [
 			this.link() === undefined ? 'cursor-pointer' : '',
 			buttonVariants({
 				variant: this.isActive() ? 'outline' : 'ghost',
 				size: this.size(),
 			}),
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -5,8 +5,7 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
 import type { ButtonVariants } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 import { HlmPaginationLink } from './hlm-pagination-link';
 
 @Component({
@@ -16,7 +15,6 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<a
-			[class]="_computedClass()"
 			hlmPaginationLink
 			[link]="link()"
 			[queryParams]="queryParams()"
@@ -30,7 +28,10 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 	`,
 })
 export class HlmPaginationNext {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	constructor() {
+		classes(() => ['gap-1 px-2.5', !this.iconOnly() ? 'sm:pr-2.5' : '']);
+	}
+
 	/** The link to navigate to the next page. */
 	public readonly link = input<RouterLink['routerLink']>();
 	/** The query parameters to pass to the next page. */
@@ -49,8 +50,4 @@ export class HlmPaginationNext {
 	protected readonly _labelClass = computed(() => (this.iconOnly() ? 'sr-only' : 'hidden sm:block'));
 
 	protected readonly _size = computed<ButtonVariants['size']>(() => (this.iconOnly() ? 'icon' : 'default'));
-
-	protected readonly _computedClass = computed(() =>
-		hlm('gap-1 px-2.5', !this.iconOnly() ? 'sm:pr-2.5' : '', this.userClass()),
-	);
 }

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

@@ -5,8 +5,7 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft } from '@ng-icons/lucide';
 import type { ButtonVariants } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 import { HlmPaginationLink } from './hlm-pagination-link';
 
 @Component({
@@ -16,7 +15,6 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<a
-			[class]="_computedClass()"
 			hlmPaginationLink
 			[link]="link()"
 			[queryParams]="queryParams()"
@@ -30,7 +28,6 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 	`,
 })
 export class HlmPaginationPrevious {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** The link to navigate to the previous page. */
 	public readonly link = input<RouterLink['routerLink']>();
 	/** The query parameters to pass to the previous page. */
@@ -47,10 +44,9 @@ export class HlmPaginationPrevious {
 		transform: booleanAttribute,
 	});
 	protected readonly _labelClass = computed(() => (this.iconOnly() ? 'sr-only' : 'hidden sm:block'));
-
 	protected readonly _size = computed<ButtonVariants['size']>(() => (this.iconOnly() ? 'icon' : 'default'));
 
-	protected readonly _computedClass = computed(() =>
-		hlm('gap-1 px-2.5', !this.iconOnly() ? 'sm:pl-2.5' : '', this.userClass()),
-	);
+	constructor() {
+		classes(() => ['gap-1 px-2.5', !this.iconOnly() ? 'sm:pl-2.5' : '']);
+	}
 }

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

@@ -1,20 +1,19 @@
-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';
 
 @Directive({
 	selector: '[hlmPagination],hlm-pagination',
 	host: {
 		'data-slot': 'pagination',
 		role: 'navigation',
-		'[class]': '_computedClass()',
 		'[attr.aria-label]': 'ariaLabel()',
 	},
 })
 export class HlmPagination {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('mx-auto flex w-full justify-center', this.userClass()));
-
 	/** The aria-label for the pagination component. */
 	public readonly ariaLabel = input<string>('pagination', { alias: 'aria-label' });
+
+	constructor() {
+		classes(() => 'mx-auto flex w-full justify-center');
+	}
 }

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

@@ -1,13 +1,9 @@
-import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
+import { Directive, ElementRef, Renderer2, effect, inject, 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: '[hlmPopoverContent],[brnPopoverContent][hlm]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmPopoverContent {
 	private readonly _stateProvider = injectExposesStateProvider({ host: true });
@@ -19,13 +15,10 @@ export class HlmPopoverContent {
 		effect(() => {
 			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
 		});
-	}
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative w-72 rounded-md border p-4 shadow-md outline-none',
-			this.userClass(),
-		),
-	);
+		classes(
+			() =>
+				'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative w-72 rounded-md border p-4 shadow-md outline-none',
+		);
+	}
 }

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

@@ -1,28 +1,20 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive, computed } from '@angular/core';
 import { BrnProgressIndicator, injectBrnProgress } from '@spartan-ng/brain/progress';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmProgressIndicator],hlm-progress-indicator',
 	hostDirectives: [BrnProgressIndicator],
-	host: {
-		'[class]': '_computedClass()',
-		'[class.animate-indeterminate]': '_indeterminate()',
-		'[style.transform]': '_transform()',
-	},
+	host: { '[class.animate-indeterminate]': '_indeterminate()', '[style.transform]': '_transform()' },
 })
 export class HlmProgressIndicator {
 	private readonly _progress = injectBrnProgress();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm('bg-primary h-full w-full flex-1 transition-all', this.userClass()),
-	);
-
 	protected readonly _transform = computed(() => `translateX(-${100 - (this._progress.value() ?? 100)}%)`);
-
 	protected readonly _indeterminate = computed(
 		() => this._progress.value() === null || this._progress.value() === undefined,
 	);
+
+	constructor() {
+		classes(() => 'bg-primary h-full w-full flex-1 transition-all');
+	}
 }

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

@@ -1,18 +1,13 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnProgress } from '@spartan-ng/brain/progress';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'hlm-progress,[hlmProgress]',
 	hostDirectives: [{ directive: BrnProgress, inputs: ['value', 'max', 'getValueLabel'] }],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmProgress {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('bg-primary/20 relative inline-flex h-2 w-full overflow-hidden rounded-full', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'bg-primary/20 relative inline-flex h-2 w-full overflow-hidden rounded-full');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnRadioGroup } from '@spartan-ng/brain/radio-group';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmRadioGroup],hlm-radio-group',
@@ -14,10 +13,10 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'radio-group',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmRadioGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('grid gap-3', this.userClass()));
+	constructor() {
+		classes(() => 'grid gap-3');
+	}
 }

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

@@ -1,24 +1,21 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-radio-indicator',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'radio-group-indicator',
-		'[class]': '_computedClass()',
 	},
 	template: `
 		<div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div>
 	`,
 })
 export class HlmRadioIndicator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/30 group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50 relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow] outline-none group-has-[:focus-visible]:ring-[3px]',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/30 group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50 relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow] outline-none group-has-[:focus-visible]:ring-[3px]',
+		);
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnResizableGroup } from '@spartan-ng/brain/resizable';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmResizableGroup],hlm-resizable-group',
@@ -14,13 +13,10 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'resizable-group',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmResizableGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm('group flex h-full w-full data-[panel-group-direction=vertical]:flex-col', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'group flex h-full w-full data-[panel-group-direction=vertical]:flex-col');
+	}
 }

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

@@ -1,10 +1,9 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideGripVertical } from '@ng-icons/lucide';
 import { BrnResizableHandle } from '@spartan-ng/brain/resizable';
 import { HlmIcon } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-resizable-handle',
@@ -15,7 +14,6 @@ import type { ClassValue } from 'clsx';
 	hostDirectives: [{ directive: BrnResizableHandle, inputs: ['withHandle', 'disabled'] }],
 	host: {
 		'data-slot': 'resizable-handle',
-		'[class]': '_computedClass()',
 	},
 	template: `
 		@if (_brnResizableHandle.withHandle()) {
@@ -28,12 +26,10 @@ import type { ClassValue } from 'clsx';
 export class HlmResizableHandle {
 	protected readonly _brnResizableHandle = inject(BrnResizableHandle);
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-none data-[panel-group-direction=horizontal]:hover:cursor-ew-resize data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:hover:cursor-ns-resize [&[data-panel-group-direction=vertical]>div]:rotate-90',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-none data-[panel-group-direction=horizontal]:hover:cursor-ew-resize data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:hover:cursor-ns-resize [&[data-panel-group-direction=vertical]>div]:rotate-90',
+		);
+	}
 }

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

@@ -1,7 +1,5 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnResizablePanel } from '@spartan-ng/brain/resizable';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmResizablePanel],hlm-resizable-panel',
@@ -13,10 +11,6 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'resizable-panel',
-		'[class]': '_computedClass()',
 	},
 })
-export class HlmResizablePanel {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(this.userClass()));
-}
+export class HlmResizablePanel {}

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

@@ -1,12 +1,10 @@
-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: 'ng-scrollbar[hlm],ng-scrollbar[hlmScrollbar]',
 	host: {
 		'data-slot': 'scroll-area',
-		'[class]': '_computedClass()',
 		'[style.--scrollbar-border-radius]': '100 + "px"',
 		'[style.--scrollbar-offset]': '3',
 		'[style.--scrollbar-thumb-color]': '"var(--border)"',
@@ -15,6 +13,7 @@ import type { ClassValue } from 'clsx';
 	},
 })
 export class HlmScrollArea {
-	protected readonly _computedClass = computed(() => hlm('block', this.userClass()));
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	constructor() {
+		classes(() => 'block');
+	}
 }

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

@@ -1,29 +1,26 @@
 import type { BooleanInput } from '@angular/cdk/coercion';
-import { Directive, booleanAttribute, computed, input } from '@angular/core';
+import { Directive, booleanAttribute, input } from '@angular/core';
 import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSelectContent], hlm-select-content',
 	host: {
-		'[class]': '_computedClass()',
 		'[attr.data-state]': '_stateProvider?.state() ?? "open"',
 		'[attr.data-side]': '_sideProvider?.side() ?? "bottom"',
 	},
 })
 export class HlmSelectContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly stickyLabels = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
 	});
 	protected readonly _stateProvider = injectExposesStateProvider({ optional: true });
 	protected readonly _sideProvider = injectExposedSideProvider({ optional: true });
 
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 w-full min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md data-[side=bottom]:top-[2px] data-[side=top]:bottom-[2px]',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 w-full min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md data-[side=bottom]:top-[2px] data-[side=top]:bottom-[2px]',
+		);
+	}
 }

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

@@ -1,16 +1,8 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnSelectGroup } from '@spartan-ng/brain/select';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmSelectGroup], hlm-select-group',
 	hostDirectives: [BrnSelectGroup],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
-export class HlmSelectGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(this.userClass()));
-}
+export class HlmSelectGroup {}