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

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

@@ -1,25 +1,20 @@
-import { Directive, computed, inject, input } from '@angular/core';
+import { computed, Directive, inject } from '@angular/core';
 import { BrnSelectLabel } from '@spartan-ng/brain/select';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 import { HlmSelectContent } from './hlm-select-content';
 
 @Directive({
 	selector: '[hlmSelectLabel], hlm-select-label',
 	hostDirectives: [BrnSelectLabel],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmSelectLabel {
 	private readonly _selectContent = inject(HlmSelectContent);
 	private readonly _stickyLabels = computed(() => this._selectContent.stickyLabels());
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+
+	constructor() {
+		classes(() => [
 			'text-muted-foreground px-2 py-1.5 text-xs',
 			this._stickyLabels() ? 'bg-popover sticky top-0 z-[2] block' : '',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

package/src/generators/ui/libs/select/files/lib/hlm-select-option.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 { lucideCheck } from '@ng-icons/lucide';
 import { BrnSelectOption } from '@spartan-ng/brain/select';
 import { HlmIcon } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-option',
@@ -12,9 +11,6 @@ import type { ClassValue } from 'clsx';
 	providers: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: BrnSelectOption, inputs: ['disabled', 'value'] }],
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		<span class="absolute right-2 flex size-3.5 items-center justify-center">
 			@if (this._brnSelectOption.selected()) {
@@ -27,11 +23,10 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSelectOption {
 	protected readonly _brnSelectOption = inject(BrnSelectOption, { host: true });
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			`data-[active]:bg-accent data-[active]:text-accent-foreground [&>ng-icon:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 [&>ng-icon]:pointer-events-none [&>ng-icon]:size-4 [&>ng-icon]:shrink-0`,
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				`data-[active]:bg-accent data-[active]:text-accent-foreground [&>ng-icon:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 [&>ng-icon]:pointer-events-none [&>ng-icon]:size-4 [&>ng-icon]:shrink-0`,
+		);
+	}
 }

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

@@ -1,25 +1,20 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } 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-select-scroll-down',
 	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronDown })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		<ng-icon hlm size="sm" class="ml-2" name="lucideChevronDown" />
 	`,
 })
 export class HlmSelectScrollDown {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex cursor-default items-center justify-center py-1', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex cursor-default items-center justify-center py-1');
+	}
 }

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

@@ -1,25 +1,20 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronUp } 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-select-scroll-up',
 	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronUp })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		<ng-icon hlm size="sm" class="ml-2" name="lucideChevronUp" />
 	`,
 })
 export class HlmSelectScrollUp {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex cursor-default items-center justify-center py-1', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex cursor-default items-center justify-center py-1');
+	}
 }

package/src/generators/ui/libs/select/files/lib/hlm-select-value.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: 'hlm-select-value,[hlmSelectValue], brn-select-value[hlm]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmSelectValue {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('data-[placeholder]:text-muted-foreground line-clamp-1 flex items-center gap-2 truncate', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'data-[placeholder]:text-muted-foreground line-clamp-1 flex items-center gap-2 truncate');
+	}
 }

package/src/generators/ui/libs/select/files/lib/hlm-select.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: 'hlm-select, brn-select [hlm]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmSelect {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('space-y-2', this.userClass()));
+	constructor() {
+		classes(() => 'space-y-2');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnSeparator } from '@spartan-ng/brain/separator';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 export const hlmSeparatorClass =
 	'bg-border inline-flex shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px';
@@ -9,11 +8,9 @@ export const hlmSeparatorClass =
 @Directive({
 	selector: '[hlmSeparator],hlm-separator',
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmSeparator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(hlmSeparatorClass, this.userClass()));
+	constructor() {
+		classes(() => hlmSeparatorClass);
+	}
 }

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

@@ -1,22 +1,19 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnSheetClose } from '@spartan-ng/brain/sheet';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmSheetClose]',
 	hostDirectives: [{ directive: BrnSheetClose, inputs: ['delay'] }],
 	host: {
 		'data-slot': 'sheet-close',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSheetClose {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none',
+		);
+	}
 }

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

@@ -1,21 +1,10 @@
-import {
-	ChangeDetectionStrategy,
-	Component,
-	ElementRef,
-	Renderer2,
-	computed,
-	effect,
-	inject,
-	input,
-	signal,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, effect, inject, signal } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
 import { HlmIconImports } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes } from '<%- importAlias %>/utils';
 import { cva } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 import { HlmSheetClose } from './hlm-sheet-close';
 
 export const sheetVariants = cva(
@@ -44,7 +33,6 @@ export const sheetVariants = cva(
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'sheet-content',
-		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
 	},
 	template: `
@@ -63,13 +51,9 @@ export class HlmSheetContent {
 	private readonly _element = inject(ElementRef);
 
 	constructor() {
+		classes(() => sheetVariants({ side: this._sideProvider.side() }));
 		effect(() => {
 			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
 		});
 	}
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(sheetVariants({ side: this._sideProvider.side() }), this.userClass()),
-	);
 }

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

@@ -1,17 +1,16 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnSheetDescription } from '@spartan-ng/brain/sheet';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSheetDescription]',
 	hostDirectives: [BrnSheetDescription],
 	host: {
 		'data-slot': 'sheet-description',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSheetDescription {
-	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/sheet/files/lib/hlm-sheet-footer.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: '[hlmSheetFooter],hlm-sheet-footer',
 	host: {
 		'data-slot': 'sheet-footer',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSheetFooter {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('mt-auto flex flex-col gap-2 p-4', this.userClass()));
+	constructor() {
+		classes(() => 'mt-auto flex flex-col gap-2 p-4');
+	}
 }

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-header.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: '[hlmSheetHeader],hlm-sheet-header',
 	host: {
 		'data-slot': 'sheet-header',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSheetHeader {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex flex-col gap-1.5 p-4', this.userClass()));
+	constructor() {
+		classes(() => 'flex flex-col gap-1.5 p-4');
+	}
 }

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

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

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-content.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: '[hlmSidebarContent],hlm-sidebar-content',
 	host: {
 		'data-slot': 'sidebar-content',
 		'data-sidebar': 'content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(() => 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden');
+	}
 }

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

@@ -1,16 +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: '[hlmSidebarFooter],hlm-sidebar-footer',
 	host: {
 		'data-slot': 'sidebar-footer',
 		'data-sidebar': 'footer',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarFooter {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex flex-col gap-2 p-2', this.userClass()));
+	constructor() {
+		classes(() => 'flex flex-col gap-2 p-2');
+	}
 }

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

@@ -1,24 +1,20 @@
-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: 'button[hlmSidebarGroupAction]',
 	host: {
 		'data-slot': 'sidebar-group-action',
 		'data-sidebar': 'group-action',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarGroupAction {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none hover:cursor-pointer focus-visible:ring-2 disabled:hover:cursor-default [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',
 			// Increases the hit area of the button on mobile.
 			'after:absolute after:-inset-2 after:md:hidden',
 			'group-data-[collapsible=icon]:hidden',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,16 +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: 'div[hlmSidebarGroupContent]',
 	host: {
 		'data-slot': 'sidebar-group-content',
 		'data-sidebar': 'group-content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarGroupContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('w-full text-sm', this.userClass()));
+	constructor() {
+		classes(() => 'w-full text-sm');
+	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group-label.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: 'div[hlmSidebarGroupLabel], button[hlmSidebarGroupLabel]',
 	host: {
 		'data-slot': 'sidebar-group-label',
 		'data-sidebar': 'group-label',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarGroupLabel {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opa] duration-200 ease-linear outline-none focus-visible:ring-2 [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',
 			'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,18 +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: '[hlmSidebarGroup],hlm-sidebar-group',
 	host: {
 		'data-slot': 'sidebar-group',
 		'data-sidebar': 'group',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('relative flex w-full min-w-0 flex-col p-2', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'relative flex w-full min-w-0 flex-col p-2');
+	}
 }

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

@@ -1,16 +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: '[hlmSidebarHeader],hlm-sidebar-header',
 	host: {
 		'data-slot': 'sidebar-header',
 		'data-sidebar': 'header',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarHeader {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex flex-col gap-2 p-2', this.userClass()));
+	constructor() {
+		classes(() => 'flex flex-col gap-2 p-2');
+	}
 }

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

@@ -1,21 +1,20 @@
-import { computed, Directive } from '@angular/core';
+import { Directive } from '@angular/core';
 import { HlmInput, inputVariants } from '<%- importAlias %>/input';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'input[hlmSidebarInput]',
 	host: {
 		'data-slot': 'sidebar-input',
 		'data-sidebar': 'input',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarInput extends HlmInput {
-	protected override readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		super();
+		classes(() => [
 			inputVariants({ error: this._state().error }),
 			'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-inset.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: 'main[hlmSidebarInset]',
 	host: {
 		'data-slot': 'sidebar-inset',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarInset {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'bg-background relative flex w-full flex-1 flex-col',
 			'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }