@spartan-ng/cli 0.0.1-alpha.507 → 0.0.1-alpha.509

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-search.ts.template

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { provideHlmIconConfig } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { provideHlmIconConfig } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-separator',
@@ -15,5 +15,5 @@ export class HlmCommandSeparator {
 	public readonly userClass = input<string>('', { alias: 'class' });
 
 	/*** The styles to apply  */
-	protected readonly _computedClass = computed(() => hlm('block bg-border -mx-1 h-px', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('bg-border -mx-1 block h-px', this.userClass()));
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-shortcut.ts.template

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommand } from '@spartan-ng/brain/command';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

package/src/generators/ui/libs/ui-date-picker-helm/files/index.ts.template

@@ -3,6 +3,7 @@ import { HlmDatePicker } from './lib/hlm-date-picker';
 import { HlmDatePickerMulti } from './lib/hlm-date-picker-multi';
 import { HlmDateRangePicker } from './lib/hlm-date-range-picker';
 
+export * from './lib/hlm-date-picker-multi.token';
 export * from './lib/hlm-date-picker.token';
 
 export * from './lib/hlm-date-picker';

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker-multi.token.ts.template

@@ -33,7 +33,7 @@ function getDefaultConfig<T>(): HlmDatePickerMultiConfig<T> {
 
 const HlmDatePickerMultiConfigToken = new InjectionToken<HlmDatePickerMultiConfig<unknown>>('HlmDatePickerMultiConfig');
 
-export function provideHlmDatePickerConfig<T>(config: Partial<HlmDatePickerMultiConfig<T>>): ValueProvider {
+export function provideHlmDatePickerMultiConfig<T>(config: Partial<HlmDatePickerMultiConfig<T>>): ValueProvider {
 	return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig(), ...config } };
 }
 

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker-multi.ts.template

@@ -13,14 +13,14 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCalendar } from '@ng-icons/lucide';
+import { lucideChevronDown } from '@ng-icons/lucide';
 import { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import { HlmCalendarMulti } from '@spartan-ng/helm/calendar';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { HlmPopoverContent } from '@spartan-ng/helm/popover';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmCalendarMulti } from '<%- importAlias %>/calendar';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
 
@@ -30,15 +30,21 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	multi: true,
 };
 
+let nextId = 0;
+
 @Component({
 	selector: 'hlm-date-picker-multi',
 	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarMulti],
-	providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+	providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	template: `
 		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
-			<button type="button" [class]="_computedClass()" [disabled]="_mutableDisabled()" brnPopoverTrigger>
-				<ng-icon hlm size="sm" name="lucideCalendar" />
-
+			<button
+				[id]="buttonId()"
+				type="button"
+				[class]="_computedClass()"
+				[disabled]="_mutableDisabled()"
+				brnPopoverTrigger
+			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
 						{{ formattedDate }}
@@ -46,6 +52,8 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 						<ng-content />
 					}
 				</span>
+
+				<ng-icon hlm size="sm" name="lucideChevronDown" />
 			</button>
 
 			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
@@ -73,15 +81,17 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-all border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[280px] justify-start text-left font-normal',
-			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
+			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
-			!this._mutableDate() ? 'text-muted-foreground' : '',
 			this.userClass(),
 		),
 	);
 
+	/** The id of the button that opens the date picker. */
+	public readonly buttonId = input<string>(`hlm-date-picker-multi-${nextId++}`);
+
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();
 

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker.ts.template

@@ -16,10 +16,10 @@ import { lucideChevronDown } from '@ng-icons/lucide';
 import { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import { HlmCalendar } from '@spartan-ng/helm/calendar';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { HlmPopoverContent } from '@spartan-ng/helm/popover';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmCalendar } from '<%- importAlias %>/calendar';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
 
@@ -29,13 +29,21 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	multi: true,
 };
 
+let nextId = 0;
+
 @Component({
 	selector: 'hlm-date-picker',
 	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendar],
 	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	template: `
 		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
-			<button type="button" [class]="_computedClass()" [disabled]="_mutableDisabled()" brnPopoverTrigger>
+			<button
+				[id]="buttonId()"
+				type="button"
+				[class]="_computedClass()"
+				[disabled]="_mutableDisabled()"
+				brnPopoverTrigger
+			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
 						{{ formattedDate }}
@@ -70,15 +78,17 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 ring-offset-background border border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground h-9 px-3 py-2 w-[280px] justify-start text-left font-normal cursor-default justify-between',
-			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
+			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
-			!this._mutableDate() ? 'text-muted-foreground' : '',
 			this.userClass(),
 		),
 	);
 
+	/** The id of the button that opens the date picker. */
+	public readonly buttonId = input<string>(`hlm-date-picker-${nextId++}`);
+
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();
 

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-range-picker.ts.template

@@ -13,14 +13,14 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCalendar } from '@ng-icons/lucide';
+import { lucideChevronDown } from '@ng-icons/lucide';
 import { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import { HlmCalendarRange } from '@spartan-ng/helm/calendar';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { HlmPopoverContent } from '@spartan-ng/helm/popover';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmCalendarRange } from '<%- importAlias %>/calendar';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 
@@ -30,10 +30,12 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 	multi: true,
 };
 
+let nextId = 0;
+
 @Component({
 	selector: 'hlm-date-range-picker',
 	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarRange],
-	providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+	providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	template: `
 		<brn-popover
 			sideOffset="5"
@@ -41,9 +43,13 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 			(stateChanged)="_popoverState.set($event)"
 			(closed)="_onClose()"
 		>
-			<button type="button" [class]="_computedClass()" [disabled]="_mutableDisabled()" brnPopoverTrigger>
-				<ng-icon hlm size="sm" name="lucideCalendar" />
-
+			<button
+				[id]="buttonId()"
+				type="button"
+				[class]="_computedClass()"
+				[disabled]="_mutableDisabled()"
+				brnPopoverTrigger
+			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
 						{{ formattedDate }}
@@ -51,6 +57,8 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 						<ng-content />
 					}
 				</span>
+
+				<ng-icon hlm size="sm" name="lucideChevronDown" />
 			</button>
 
 			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
@@ -78,15 +86,17 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-all border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[280px] justify-start text-left font-normal',
-			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
+			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
-			!this._mutableDate() ? 'text-muted-foreground' : '',
 			this.userClass(),
 		),
 	);
 
+	/** The id of the button that opens the date picker. */
+	public readonly buttonId = input<string>(`hlm-date-picker-range-${nextId++}`);
+
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();
 

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -13,7 +13,7 @@ export class HlmDialogClose {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+			'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs absolute right-4 top-4 flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_ng-icon]:shrink-0',
 			this.userClass(),
 		),
 	);

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

@@ -3,8 +3,8 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { BrnDialogClose, BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmDialogClose } from './hlm-dialog-close';
 
@@ -43,7 +43,7 @@ export class HlmDialogContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'border-border grid w-full max-w-lg relative gap-4 border bg-background p-6 shadow-lg [animation-duration:200] 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-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full',
+			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-50 mx-auto grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg data-[state=closed]:duration-200 data-[state=open]:duration-200 sm:mx-0 sm:max-w-lg',
 			this.userClass(),
 			this._dynamicComponentClass,
 		),

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnDialogDescription } from '@spartan-ng/brain/dialog';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmDialogDescription {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('text-sm text-muted-foreground', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('text-muted-foreground text-sm', this.userClass()));
 }

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -15,6 +15,6 @@ import type { ClassValue } from 'clsx';
 export class HlmDialogFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.userClass()),
+		hlm('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.userClass()),
 	);
 }

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -14,7 +14,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmDialogHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm('flex flex-col space-y-1.5 text-center sm:text-left', this.userClass()),
-	);
+	protected _computedClass = computed(() => hlm('flex flex-col gap-2 text-center sm:text-left', this.userClass()));
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-overlay.ts.template

@@ -1,10 +1,10 @@
 import { Directive, computed, effect, input, untracked } from '@angular/core';
 import { injectCustomClassSettable } from '@spartan-ng/brain/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 export const hlmDialogOverlayClass =
-	'bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0';
+	'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50';
 
 @Directive({
 	selector: '[hlmDialogOverlay],brn-dialog-overlay[hlm]',

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

@@ -1,18 +1,16 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnDialogTitle } from '@spartan-ng/brain/dialog';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmDialogTitle]',
+	hostDirectives: [BrnDialogTitle],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnDialogTitle],
 })
 export class HlmDialogTitle {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('text-lg font-semibold leading-none tracking-tight', this.userClass()),
-	);
+	protected readonly _computedClass = computed(() => hlm('text-lg font-semibold leading-none', this.userClass()));
 }

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

@@ -1,5 +1,5 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 
 @Directive({
@@ -12,6 +12,6 @@ import { ClassValue } from 'clsx';
 export class HlmError {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('block text-destructive text-sm font-medium', this.userClass()),
+		hlm('text-destructive block text-sm font-medium', this.userClass()),
 	);
 }

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

@@ -8,7 +8,7 @@ import {
 	input,
 } from '@angular/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 import { HlmError } from './hlm-error';
 
@@ -33,7 +33,7 @@ import { HlmError } from './hlm-error';
 })
 export class HlmFormField {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('space-y-2 block', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('block space-y-2', this.userClass()));
 	public readonly control = contentChild(BrnFormFieldControl);
 
 	public readonly errorChildren = contentChildren(HlmError);

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

@@ -1,5 +1,5 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 
 @Directive({
@@ -11,5 +11,5 @@ import { ClassValue } from 'clsx';
 })
 export class HlmHint {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('block text-sm text-muted-foreground', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('text-muted-foreground block text-sm', this.userClass()));
 }

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

@@ -10,7 +10,7 @@ import {
 	signal,
 } from '@angular/core';
 import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -40,7 +40,7 @@ export class HlmHoverCardContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+			'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/ui-input-helm/files/lib/hlm-input-error.ts.template

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 

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

@@ -13,12 +13,12 @@ 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 '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { cva, VariantProps } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const inputVariants = cva(
-	'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+	'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 	{
 		variants: {
 			error: {

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

@@ -1,5 +1,5 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { type ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideMinus } from '@ng-icons/lucide';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import { type ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,7 +1,7 @@
 import { NumberInput } from '@angular/cdk/coercion';
 import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
 import { BrnInputOtpSlot } from '@spartan-ng/brain/input-otp';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { type ClassValue } from 'clsx';
 import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 
@@ -26,8 +26,8 @@ export class HlmInputOtpSlot {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md',
-			'has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:z-10 has-[brn-input-otp-slot[data-active="true"]]:ring-[3px] has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50',
+			'dark:bg-input/30 border-input shadow-xs relative flex h-9 w-9 items-center justify-center border-y border-r text-sm outline-none transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+			'has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:z-10 has-[brn-input-otp-slot[data-active="true"]]:ring-[3px]',
 			this.userClass(),
 		),
 	);

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

@@ -1,5 +1,5 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { type ClassValue } from 'clsx';
 
 @Directive({
@@ -12,6 +12,6 @@ export class HlmInputOtp {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('flex items-center gap-2 has-disabled:opacity-50', this.userClass()),
+		hlm('has-disabled:opacity-50 flex items-center gap-2', this.userClass()),
 	);
 }

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnLabel } from '@spartan-ng/brain/label';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -20,7 +20,7 @@ export class HlmLabel {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50',
+			'flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-bar-item.ts.template

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnMenuItem } from '@spartan-ng/brain/menu';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -14,7 +14,7 @@ export class HlmMenuBarItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-none select-none',
+			'focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground flex select-none items-center rounded-sm px-2 py-1 text-sm font-medium outline-none',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-bar.ts.template

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnMenuBar } from '@spartan-ng/brain/menu';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -15,6 +15,6 @@ import type { ClassValue } from 'clsx';
 export class HlmMenuBar {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', this.userClass()),
+		hlm('bg-background shadow-xs flex h-9 items-center gap-1 rounded-md border p-1', this.userClass()),
 	);
 }