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

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

@@ -1,7 +1,6 @@
 // src/app/directives/hlm-table-directives.ts
 import { computed, Directive, inject, InjectionToken, input, type ValueProvider } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 // Configuration Interface and InjectionToken
 export const HlmTableConfigToken = new InjectionToken<HlmTableVariant>('HlmTableConfig');
@@ -42,18 +41,14 @@ export function injectHlmTableConfig(): HlmTableVariant {
 
 @Directive({
 	selector: 'div[hlmTableContainer]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'table-container',
-	},
+	host: { 'data-slot': 'table-container' },
 })
 export class HlmTableContainer {
 	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _computedClass = computed(() =>
-		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tableContainer.trim() : '', this.userClass()),
-	);
+	constructor() {
+		classes(() => (this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tableContainer.trim() : ''));
+	}
 }
 
 /**
@@ -64,15 +59,11 @@ export class HlmTableContainer {
  */
 @Directive({
 	selector: 'table[hlmTable]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'table',
-	},
+	host: { 'data-slot': 'table' },
 })
 export class HlmTable {
 	/** Input to configure the variant of the table, this input has the highest priority. */
 	public readonly userVariant = input<Partial<HlmTableVariant> | string>({}, { alias: 'hlmTable' });
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	/** Global or default configuration provided by injectHlmTableConfig() */
 	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
@@ -93,28 +84,27 @@ export class HlmTable {
 		return globalOrDefaultConfig;
 	});
 
-	// Computed class for the host <table> element
-	protected readonly _computedClass = computed(() => hlm(this._variant().table, this.userClass()));
+	constructor() {
+		classes(() => this._variant().table);
+	}
 }
 
+// Computed class for the host <table> element}
+
 /**
  * Directive to apply Shadcn-like styling to a <thead> element
  * within an HlmTableDirective context.
  */
 @Directive({
 	selector: 'thead[hlmTHead]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'table-header',
-	},
+	host: { 'data-slot': 'table-header' },
 })
 export class HlmTHead {
 	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _computedClass = computed(() =>
-		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.thead.trim() : '', this.userClass()),
-	);
+	constructor() {
+		classes(() => (this._globalOrDefaultConfig ? this._globalOrDefaultConfig.thead.trim() : ''));
+	}
 }
 
 /**
@@ -123,18 +113,13 @@ export class HlmTHead {
  */
 @Directive({
 	selector: 'tbody[hlmTBody]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'table-body',
-	},
+	host: { 'data-slot': 'table-body' },
 })
 export class HlmTBody {
 	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tbody.trim() : '', this.userClass()),
-	);
+	constructor() {
+		classes(() => (this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tbody.trim() : ''));
+	}
 }
 
 /**
@@ -143,18 +128,13 @@ export class HlmTBody {
  */
 @Directive({
 	selector: 'tfoot[hlmTFoot]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'table-footer',
-	},
+	host: { 'data-slot': 'table-footer' },
 })
 export class HlmTFoot {
 	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tfoot.trim() : '', this.userClass()),
-	);
+	constructor() {
+		classes(() => (this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tfoot.trim() : ''));
+	}
 }
 
 /**
@@ -163,18 +143,13 @@ export class HlmTFoot {
  */
 @Directive({
 	selector: 'tr[hlmTr]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'table-row',
-	},
+	host: { 'data-slot': 'table-row' },
 })
 export class HlmTr {
 	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tr.trim() : '', this.userClass()),
-	);
+	constructor() {
+		classes(() => (this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tr.trim() : ''));
+	}
 }
 
 /**
@@ -183,18 +158,13 @@ export class HlmTr {
  */
 @Directive({
 	selector: 'th[hlmTh]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'table-head',
-	},
+	host: { 'data-slot': 'table-head' },
 })
 export class HlmTh {
 	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.th.trim() : '', this.userClass()),
-	);
+	constructor() {
+		classes(() => (this._globalOrDefaultConfig ? this._globalOrDefaultConfig.th.trim() : ''));
+	}
 }
 
 /**
@@ -203,18 +173,13 @@ export class HlmTh {
  */
 @Directive({
 	selector: 'td[hlmTd]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'table-cell',
-	},
+	host: { 'data-slot': 'table-cell' },
 })
 export class HlmTd {
 	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.td.trim() : '', this.userClass()),
-	);
+	constructor() {
+		classes(() => (this._globalOrDefaultConfig ? this._globalOrDefaultConfig.td.trim() : ''));
+	}
 }
 
 /**
@@ -223,16 +188,11 @@ export class HlmTd {
  */
 @Directive({
 	selector: 'caption[hlmCaption]',
-	host: {
-		'[class]': '_computedClass()',
-		'data-slot': 'table-caption',
-	},
+	host: { 'data-slot': 'table-caption' },
 })
 export class HlmCaption {
 	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.caption.trim() : '', this.userClass()),
-	);
+	constructor() {
+		classes(() => (this._globalOrDefaultConfig ? this._globalOrDefaultConfig.caption.trim() : ''));
+	}
 }

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

@@ -1,24 +1,21 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive, input } from '@angular/core';
 import { BrnTabsContent } from '@spartan-ng/brain/tabs';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmTabsContent]',
 	hostDirectives: [{ directive: BrnTabsContent, inputs: ['brnTabsContent: hlmTabsContent'] }],
 	host: {
 		'data-slot': 'tabs-content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmTabsContent {
 	public readonly contentFor = input.required<string>({ alias: 'hlmTabsContent' });
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+		);
+	}
 }

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

@@ -1,8 +1,7 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive, input } from '@angular/core';
 import { BrnTabsList } from '@spartan-ng/brain/tabs';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 export const listVariants = cva(
 	'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
@@ -25,14 +24,12 @@ type ListVariants = VariantProps<typeof listVariants>;
 	hostDirectives: [BrnTabsList],
 	host: {
 		'data-slot': 'tabs-list',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmTabsList {
 	public readonly orientation = input<ListVariants['orientation']>('horizontal');
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(listVariants({ orientation: this.orientation() }), this.userClass()),
-	);
+	constructor() {
+		classes(() => listVariants({ orientation: this.orientation() }));
+	}
 }

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

@@ -14,7 +14,7 @@ import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import { type BrnPaginatedTabHeaderItem, BrnTabsPaginatedList, BrnTabsTrigger } from '@spartan-ng/brain/tabs';
 import { buttonVariants } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes, hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import type { Observable } from 'rxjs';
 import { listVariants } from './hlm-tabs-list';
@@ -26,7 +26,6 @@ import { listVariants } from './hlm-tabs-list';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'tabs-paginated-list',
-		'[class]': '_computedClass()',
 	},
 	template: `
 		<button
@@ -73,6 +72,11 @@ import { listVariants } from './hlm-tabs-list';
 	`,
 })
 export class HlmTabsPaginatedList extends BrnTabsPaginatedList {
+	constructor() {
+		super();
+		classes(() => 'relative flex flex-shrink-0 gap-1 overflow-hidden');
+	}
+
 	public readonly items = contentChildren(BrnTabsTrigger, { descendants: false });
 	/** Explicitly annotating type to avoid non-portable inferred type */
 	public readonly itemsChanges: Observable<ReadonlyArray<BrnPaginatedTabHeaderItem>> = toObservable(this.items);
@@ -83,11 +87,6 @@ export class HlmTabsPaginatedList extends BrnTabsPaginatedList {
 	public readonly nextPaginator = viewChild.required<ElementRef<HTMLElement>>('nextPaginator');
 	public readonly previousPaginator = viewChild.required<ElementRef<HTMLElement>>('previousPaginator');
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('relative flex flex-shrink-0 gap-1 overflow-hidden', this.userClass()),
-	);
-
 	public readonly tabListClass = input<ClassValue>('', { alias: 'tabListClass' });
 	protected readonly _tabListClass = computed(() => hlm(listVariants(), this.tabListClass()));
 

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

@@ -1,23 +1,20 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive, input } from '@angular/core';
 import { BrnTabsTrigger } from '@spartan-ng/brain/tabs';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmTabsTrigger]',
 	hostDirectives: [{ directive: BrnTabsTrigger, inputs: ['brnTabsTrigger: hlmTabsTrigger', 'disabled'] }],
 	host: {
 		'data-slot': 'tabs-trigger',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmTabsTrigger {
 	public readonly triggerFor = input.required<string>({ alias: 'hlmTabsTrigger' });
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			`data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base`,
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				`data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base`,
+		);
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive, input } from '@angular/core';
 import { BrnTabs } from '@spartan-ng/brain/tabs';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmTabs],hlm-tabs',
@@ -14,12 +13,12 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'tabs',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmTabs {
 	public readonly tab = input.required<string>();
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex flex-col gap-2', this.userClass()));
+	constructor() {
+		classes(() => 'flex flex-col gap-2');
+	}
 }

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

@@ -14,9 +14,9 @@ import {
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
 
 export const textareaVariants = cva(
 	'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 flex [field-sizing:content] min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
@@ -44,7 +44,6 @@ type TextareaVariants = VariantProps<typeof textareaVariants>;
 	],
 	host: {
 		'data-slot': 'textarea',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmTextarea implements BrnFormFieldControl, DoCheck {
@@ -57,11 +56,6 @@ export class HlmTextarea implements BrnFormFieldControl, DoCheck {
 	private readonly _parentForm = inject(NgForm, { optional: true });
 	private readonly _parentFormGroup = inject(FormGroupDirective, { optional: true });
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(textareaVariants({ error: this._state().error }), this.userClass(), this._additionalClasses()),
-	);
-
 	public readonly error = input<TextareaVariants['error']>('auto');
 
 	protected readonly _state = linkedSignal(() => ({ error: this.error() }));
@@ -71,6 +65,8 @@ export class HlmTextarea implements BrnFormFieldControl, DoCheck {
 	public readonly errorState = computed(() => this._errorStateTracker.errorState());
 
 	constructor() {
+		classes(() => [textareaVariants({ error: this._state().error }), this._additionalClasses()]);
+
 		this._errorStateTracker = new ErrorStateTracker(
 			this._defaultErrorStateMatcher,
 			this.ngControl,

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

@@ -1,8 +1,7 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive, input } from '@angular/core';
 import { BrnToggle } from '@spartan-ng/brain/toggle';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 // TODO invalid styles uses aria-invalid
 // aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
@@ -39,21 +38,17 @@ export type ToggleVariants = VariantProps<typeof toggleVariants>;
 	],
 	host: {
 		'data-slot': 'toggle',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmToggle {
 	public readonly variant = input<ToggleVariants['variant']>('default');
 	public readonly size = input<ToggleVariants['size']>('default');
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() =>
 			toggleVariants({
 				variant: this.variant(),
 				size: this.size(),
 			}),
-			this.userClass(),
-		),
-	);
+		);
+	}
 }

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

@@ -1,8 +1,7 @@
-import { Directive, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
-import { ToggleVariants, toggleVariants } from '<%- importAlias %>/toggle';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { toggleVariants, ToggleVariants } from '<%- importAlias %>/toggle';
+import { classes } from '<%- importAlias %>/utils';
 import { injectHlmToggleGroup } from './hlm-toggle-group.token';
 
 @Directive({
@@ -16,7 +15,6 @@ import { injectHlmToggleGroup } from './hlm-toggle-group.token';
 	],
 	host: {
 		'data-slot': 'toggle-group-item',
-		'[class]': '_computedClass()',
 		'[attr.data-variant]': '_variant()',
 		'[attr.data-size]': '_size()',
 		'[attr.data-spacing]': '_toggleGroup.spacing()',
@@ -31,17 +29,14 @@ export class HlmToggleGroupItem {
 	protected readonly _variant = computed(() => this._toggleGroup.variant() || this.variant());
 	protected readonly _size = computed(() => this._toggleGroup.size() || this.size());
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			toggleVariants({
 				variant: this._variant(),
 				size: this._size(),
 			}),
 			'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
 			'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,9 +1,8 @@
 import { NumberInput } from '@angular/cdk/coercion';
-import { Directive, computed, input, numberAttribute } from '@angular/core';
+import { Directive, input, numberAttribute } from '@angular/core';
 import { BrnToggleGroup } from '@spartan-ng/brain/toggle-group';
 import { ToggleVariants } from '<%- importAlias %>/toggle';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 import { provideHlmToggleGroup } from './hlm-toggle-group.token';
 
 @Directive({
@@ -18,7 +17,6 @@ import { provideHlmToggleGroup } from './hlm-toggle-group.token';
 	],
 	host: {
 		'data-slot': 'toggle-group',
-		'[class]': '_computedClass()',
 		'[attr.data-variant]': 'variant()',
 		'[attr.data-size]': 'size()',
 		'[attr.data-spacing]': 'spacing()',
@@ -30,11 +28,7 @@ export class HlmToggleGroup {
 	public readonly size = input<ToggleVariants['size']>('default');
 	public readonly spacing = input<number, NumberInput>(0, { transform: numberAttribute });
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(() => 'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))]');
+	}
 }

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

@@ -1,16 +1,13 @@
-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';
 
 export const hlmBlockquote = 'mt-6 border-border border-l-2 pl-6 italic';
 
 @Directive({
 	selector: '[hlmBlockquote]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmBlockquote {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(hlmBlockquote, this.userClass()));
+	constructor() {
+		classes(() => hlmBlockquote);
+	}
 }

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

@@ -1,16 +1,13 @@
-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';
 
 export const hlmCode = 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold';
 
 @Directive({
 	selector: '[hlmCode]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmCode {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(hlmCode, this.userClass()));
+	constructor() {
+		classes(() => hlmCode);
+	}
 }

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

@@ -1,16 +1,13 @@
-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';
 
 export const hlmH1 = 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl';
 
 @Directive({
 	selector: '[hlmH1]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmH1 {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(hlmH1, this.userClass()));
+	constructor() {
+		classes(() => hlmH1);
+	}
 }

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

@@ -1,17 +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';
 
 export const hlmH2 =
 	'scroll-m-20 border-border border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0';
 
 @Directive({
 	selector: '[hlmH2]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmH2 {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(hlmH2, this.userClass()));
+	constructor() {
+		classes(() => hlmH2);
+	}
 }

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

@@ -1,16 +1,13 @@
-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';
 
 export const hlmH3 = 'scroll-m-20 text-2xl font-semibold tracking-tight';
 
 @Directive({
 	selector: '[hlmH3]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmH3 {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(hlmH3, this.userClass()));
+	constructor() {
+		classes(() => hlmH3);
+	}
 }