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

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

@@ -1,18 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmFieldContent],hlm-field-content',
 	host: {
 		'data-slot': 'field-content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmFieldContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'group/field-content flex flex-1 flex-col gap-1.5 leading-snug');
+	}
 }

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

@@ -1,23 +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: '[hlmFieldDescription],hlm-field-description',
 	host: {
 		'data-slot': 'field-description',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmFieldDescription {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
 			'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
 			'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

package/src/generators/ui/libs/field/files/lib/hlm-field-group.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: '[hlmFieldGroup],hlm-field-group',
 	host: {
 		'data-slot': 'field-group',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmFieldGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+		);
+	}
 }

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

@@ -1,26 +1,21 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { HlmLabel } from '<%- importAlias %>/label';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmFieldLabel],hlm-field-label',
 	hostDirectives: [HlmLabel],
 	host: {
 		'data-slot': 'field-label',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmFieldLabel {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
 			'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
 			'has-data-[checked=true]:bg-primary/5 has-data-[checked=true]:border-primary dark:has-data-[checked=true]:bg-primary/10',
 			'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,20 +1,17 @@
-import { computed, Directive, 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: 'legend[hlmFieldLegend]',
 	host: {
 		'data-slot': 'field-legend',
 		'[attr.data-variant]': 'variant()',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmFieldLegend {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	public readonly variant = input<'label' | 'legend'>('legend');
+	constructor() {
+		classes(() => 'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base');
+	}
 
-	protected readonly _computedClass = computed(() =>
-		hlm('mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', this.userClass()),
-	);
+	public readonly variant = input<'label' | 'legend'>('legend');
 }

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

@@ -1,7 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { HlmSeparator } from '<%- importAlias %>/separator';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-field-separator',
@@ -9,7 +8,6 @@ import type { ClassValue } from 'clsx';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'field-separator',
-		'[class]': '_computedClass()',
 	},
 	template: `
 		<hlm-separator class="absolute inset-0 top-1/2" />
@@ -22,9 +20,7 @@ import type { ClassValue } from 'clsx';
 	`,
 })
 export class HlmFieldSeparator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2');
+	}
 }

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

@@ -1,22 +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: 'fieldset[hlmFieldSet]',
 	host: {
 		'data-slot': 'field-set',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmFieldSet {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'flex flex-col gap-6',
 			'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 const fieldVariants = cva('group/field data-[invalid=true]:text-destructive flex w-full gap-3', {
 	variants: {
@@ -32,14 +31,11 @@ export type FieldVariants = VariantProps<typeof fieldVariants>;
 		role: 'group',
 		'data-slot': 'field',
 		'[attr.data-orientation]': 'orientation()',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmField {
 	public readonly orientation = input<FieldVariants['orientation']>('vertical');
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(fieldVariants({ orientation: this.orientation() }), this.userClass()),
-	);
+	constructor() {
+		classes(() => fieldVariants({ orientation: this.orientation() }));
+	}
 }

package/src/generators/ui/libs/form-field/files/lib/hlm-error.ts.template

@@ -1,17 +1,12 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	// eslint-disable-next-line @angular-eslint/directive-selector
 	selector: 'hlm-error',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmError {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('text-destructive block text-sm font-medium', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'text-destructive block text-sm font-medium');
+	}
 }

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

@@ -1,23 +1,11 @@
-import {
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	contentChild,
-	contentChildren,
-	effect,
-	input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, effect } from '@angular/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 import { HlmError } from './hlm-error';
 
 @Component({
 	selector: 'hlm-form-field',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		<ng-content />
 
@@ -32,8 +20,6 @@ import { HlmError } from './hlm-error';
 	`,
 })
 export class HlmFormField {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('block space-y-2', this.userClass()));
 	public readonly control = contentChild(BrnFormFieldControl);
 
 	public readonly errorChildren = contentChildren(HlmError);
@@ -43,6 +29,7 @@ export class HlmFormField {
 	);
 
 	constructor() {
+		classes(() => 'block space-y-2');
 		effect(() => {
 			if (!this.control()) {
 				throw new Error('hlm-form-field must contain a BrnFormFieldControl.');

package/src/generators/ui/libs/form-field/files/lib/hlm-hint.ts.template

@@ -1,15 +1,12 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	// eslint-disable-next-line @angular-eslint/directive-selector
 	selector: 'hlm-hint',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmHint {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('text-muted-foreground block text-sm', this.userClass()));
+	constructor() {
+		classes(() => 'text-muted-foreground block text-sm');
+	}
 }

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

@@ -1,13 +1,11 @@
-import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
+import { Directive, ElementRef, Renderer2, effect, inject, signal } 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: '[hlmHoverCardContent],hlm-hover-card-content',
 	host: {
 		'data-slot': 'hover-card-content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmHoverCardContent {
@@ -22,14 +20,10 @@ export class HlmHoverCardContent {
 			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
 			this._renderer.setAttribute(this._element.nativeElement, 'data-side', this.side());
 		});
-	}
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+		classes(() => [
 			'border-border bg-popover text-popover-foreground z-50 w-64 rounded-md border p-4 shadow-md outline-none',
 			'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',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,7 +1,6 @@
 import {
 	computed,
 	Directive,
-	type DoCheck,
 	effect,
 	forwardRef,
 	inject,
@@ -10,11 +9,12 @@ import {
 	linkedSignal,
 	signal,
 	untracked,
+	type DoCheck,
 } from '@angular/core';
 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';
 
@@ -42,9 +42,6 @@ type InputVariants = VariantProps<typeof inputVariants>;
 			useExisting: forwardRef(() => HlmInput),
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmInput implements BrnFormFieldControl, DoCheck {
 	private readonly _injector = inject(Injector);
@@ -56,11 +53,6 @@ export class HlmInput 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(inputVariants({ error: this._state().error }), this.userClass(), this._additionalClasses()),
-	);
-
 	public readonly error = input<InputVariants['error']>('auto');
 
 	protected readonly _state = linkedSignal(() => ({ error: this.error() }));
@@ -77,6 +69,8 @@ export class HlmInput implements BrnFormFieldControl, DoCheck {
 			this._parentForm,
 		);
 
+		classes(() => [inputVariants({ error: this._state().error }), this._additionalClasses()]);
+
 		effect(() => {
 			const error = this._errorStateTracker.errorState();
 			untracked(() => {

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 const inputGroupAddonVariants = cva(
 	"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*='text-'])]:text-base",
@@ -29,14 +28,12 @@ type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
 		role: 'group',
 		'data-slot': 'input-group-addon',
 		'[attr.data-align]': 'align()',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmInputGroupAddon {
 	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _computedClass = computed(() =>
-		hlm(inputGroupAddonVariants({ align: this.align() }), this.userClass()),
-	);
+	constructor() {
+		classes(() => inputGroupAddonVariants({ align: this.align() }));
+	}
 }

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

@@ -1,8 +1,7 @@
-import { computed, Directive, effect, inject, input } from '@angular/core';
+import { Directive, input } from '@angular/core';
 import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 const inputGroupAddonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
 	variants: {
@@ -39,18 +38,10 @@ type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
 	},
 })
 export class HlmInputGroupButton {
-	private readonly _hlmButton = inject(HlmButton);
 	public readonly size = input<InputGroupAddonVariants['size']>('xs');
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly type = input<'button' | 'submit' | 'reset'>('button');
 
-	protected readonly _computedClass = computed(() =>
-		hlm(inputGroupAddonVariants({ size: this.size() }), this.userClass()),
-	);
-
 	constructor() {
-		effect(() => {
-			this._hlmButton.setClass(this._computedClass());
-		});
+		classes(() => inputGroupAddonVariants({ size: this.size() }));
 	}
 }

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

@@ -1,31 +1,16 @@
-import { computed, Directive, effect, inject, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { HlmInput } from '<%- importAlias %>/input';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'input[hlmInputGroupInput]',
 	hostDirectives: [HlmInput],
 	host: {
 		'data-slot': 'input-group-control',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmInputGroupInput {
-	private readonly _hlmInput = inject(HlmInput);
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
-			this.userClass(),
-		),
-	);
-
 	constructor() {
-		effect(() => {
-			this._hlmInput.setClass(this._computedClass());
-		});
+		classes(() => `flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent`);
 	}
 }

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

@@ -1,20 +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: 'span[hlmInputGroupText]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmInputGroupText {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			`text-muted-foreground flex items-center gap-2 text-sm [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-base`,
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				`text-muted-foreground flex items-center gap-2 text-sm [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-base`,
+		);
+	}
 }

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

@@ -1,31 +1,19 @@
-import { computed, Directive, effect, inject, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { HlmTextarea } from '<%- importAlias %>/textarea';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'textarea[hlmInputGroupTextarea]',
 	hostDirectives: [HlmTextarea],
 	host: {
 		'data-slot': 'input-group-control',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmInputGroupTextarea {
-	private readonly _hlmInput = inject(HlmTextarea);
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
-			this.userClass(),
-		),
-	);
-
 	constructor() {
-		effect(() => {
-			this._hlmInput.setClass(this._computedClass());
-		});
+		classes(
+			() =>
+				'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+		);
 	}
 }

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

@@ -1,20 +1,16 @@
-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: '[hlmInputGroup],hlm-input-group',
 	host: {
 		'data-slot': 'input-group',
 		role: 'group',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmInputGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
 			'h-9 min-w-0 has-[>textarea]:h-auto',
 			// Variants based on alignment.
@@ -26,8 +22,6 @@ export class HlmInputGroup {
 			'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
 			// Error state.
 			'has-[>.ng-invalid.ng-touched]:ring-destructive/20 has-[>.ng-invalid.ng-touched]:border-destructive dark:has-[>.ng-invalid.ng-touched]:ring-destructive/40',
-
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }