@spartan-ng/cli 0.0.1-alpha.506 → 0.0.1-alpha.508

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

@@ -1,5 +1,6 @@
 import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
-import { hlm, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -23,7 +24,7 @@ export class HlmPopoverContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'relative border-border w-72 rounded-md border bg-popover p-4 text-popover-foreground 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',
+			'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative w-72 rounded-md border p-4 shadow-md outline-none',
 			this.userClass(),
 		),
 	);

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

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnProgressIndicator, injectBrnProgress } from '@spartan-ng/brain/progress';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnProgress } from '@spartan-ng/brain/progress';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -13,6 +13,6 @@ import type { ClassValue } from 'clsx';
 export class HlmProgress {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('inline-flex bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', this.userClass()),
+		hlm('bg-primary/20 relative inline-flex h-2 w-full overflow-hidden rounded-full', this.userClass()),
 	);
 }

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnRadioGroup } from '@spartan-ng/brain/radio-group';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -16,7 +16,7 @@ export class HlmRadioIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'relative flex items-center justify-center border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none group-has-[:focus-visible]:ring-[3px] group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50',
+			'border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/30 shadow-xs group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50 relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border outline-none transition-[color,box-shadow] group-has-[:focus-visible]:ring-[3px]',
 			this.userClass(),
 		),
 	);

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

@@ -13,8 +13,8 @@ import {
 	Renderer2,
 	signal,
 } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnRadio, BrnRadioChange } from '@spartan-ng/brain/radio-group';
+import { hlm } from '@spartan-ng/helm/utils';
 import { ClassValue } from 'clsx';
 
 @Component({

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

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

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

@@ -1,6 +1,7 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Directive, booleanAttribute, computed, input } from '@angular/core';
-import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -21,7 +22,7 @@ export class HlmSelectContent {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'w-full relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 data-[side=bottom]:top-[2px] data-[side=top]:bottom-[2px] 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',
+			'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 w-full min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md data-[side=bottom]:top-[2px] data-[side=top]:bottom-[2px]',
 			this.userClass(),
 		),
 	);

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnSelectGroup } from '@spartan-ng/brain/select';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,6 +1,6 @@
 import { Directive, computed, inject, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnSelectLabel } from '@spartan-ng/brain/select';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 import { HlmSelectContent } from './hlm-select-content';
 
@@ -18,7 +18,7 @@ export class HlmSelectLabel {
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'text-muted-foreground px-2 py-1.5 text-xs',
-			this._stickyLabels() ? 'sticky top-0 bg-popover block z-[2]' : '',
+			this._stickyLabels() ? 'bg-popover sticky top-0 z-[2] block' : '',
 			this.userClass(),
 		),
 	);

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

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnSelectOption } from '@spartan-ng/brain/select';
 import { HlmIcon } from '@spartan-ng/helm/icon';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -30,7 +30,7 @@ export class HlmSelectOption {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'data-[active]:bg-accent data-[active]:text-accent-foreground [&>ng-icon]: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-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+			'data-[active]:bg-accent data-[active]:text-accent-foreground [&>ng-icon]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:size-4 [&>ng-icon]:shrink-0',
 			this.userClass(),
 		),
 	);

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

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

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

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

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

@@ -1,14 +1,14 @@
 import { ChangeDetectionStrategy, Component, computed, contentChild, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnSelect, BrnSelectTrigger } from '@spartan-ng/brain/select';
 import { HlmIcon } from '@spartan-ng/helm/icon';
+import { hlm } from '@spartan-ng/helm/utils';
 import { cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const selectTriggerVariants = cva(
-	`border-input [&>ng-icon]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:size-4`,
+	`border-input [&>ng-icon]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 [&>ng-icon]:pointer-events-none [&>ng-icon]:size-4 [&>ng-icon]:shrink-0`,
 	{
 		variants: {
 			error: {

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -11,6 +11,6 @@ import type { ClassValue } from 'clsx';
 export class HlmSelectValue {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('line-clamp-1 flex items-center gap-2 data-[placeholder]:text-muted-foreground', this.userClass()),
+		hlm('data-[placeholder]:text-muted-foreground line-clamp-1 flex items-center gap-2', this.userClass()),
 	);
 }

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

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

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

@@ -3,8 +3,10 @@ import { HlmSeparator } from './lib/hlm-separator';
 
 export * from './lib/hlm-separator';
 
+export const HlmSeparatorImports = [HlmSeparator] as const;
+
 @NgModule({
-	imports: [HlmSeparator],
-	exports: [HlmSeparator],
+	imports: [...HlmSeparatorImports],
+	exports: [...HlmSeparatorImports],
 })
 export class HlmSeparatorModule {}

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

@@ -1,21 +1,20 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { computed, Directive, input } from '@angular/core';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
-export type HlmSeparatorOrientation = 'horizontal' | 'vertical';
 @Directive({
-	selector: '[hlmSeparator],brn-separator[hlm]',
+	selector: '[hlmSeparator],hlm-separator',
+	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmSeparator {
-	public readonly orientation = input<HlmSeparatorOrientation>('horizontal');
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
-			'inline-flex shrink-0 border-0 bg-border',
-			this.orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+			'bg-border inline-flex shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
 			this.userClass(),
 		),
 	);

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -12,7 +12,7 @@ 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',
+			'ring-offset-background focus:ring-ring data-[state=open]:bg-secondary rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none',
 			this.userClass(),
 		),
 	);

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

@@ -11,9 +11,10 @@ import {
 } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
-import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
 import { BrnSheetClose } from '@spartan-ng/brain/sheet';
 import { HlmIcon } from '@spartan-ng/helm/icon';
+import { hlm } from '@spartan-ng/helm/utils';
 import { cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 import { HlmSheetClose } from './hlm-sheet-close';
@@ -28,7 +29,7 @@ export const sheetVariants = cva(
 					'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
 				left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
 				right:
-					'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+					'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
 			},
 		},
 		defaultVariants: {

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnSheetDescription } from '@spartan-ng/brain/sheet';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

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

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

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

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

@@ -1,5 +1,6 @@
 import { Directive, computed, effect, input, untracked } from '@angular/core';
-import { hlm, injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -13,7 +14,7 @@ export class HlmSheetOverlay {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'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',
 			this.userClass(),
 		),
 	);

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnSheetTitle } from '@spartan-ng/brain/sheet';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSkeleton {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('block animate-pulse rounded-md bg-muted', this.userClass()));
+	protected _computedClass = computed(() => hlm('bg-muted block animate-pulse rounded-md', this.userClass()));
 }

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

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import {
 	BrnSlider,
 	BrnSliderRange,
@@ -8,6 +7,7 @@ import {
 	BrnSliderTrack,
 	injectBrnSlider,
 } from '@spartan-ng/brain/slider';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input, numberAttribute } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner';
 

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -32,6 +32,6 @@ import type { ClassValue } from 'clsx';
 export class HlmSpinner {
 	public readonly userClass = input<ClassValue>('size-8', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('inline-block [&>svg]:text-foreground/30 [&>svg]:fill-accent', this.userClass()),
+		hlm('[&>svg]:text-foreground/30 [&>svg]:fill-accent inline-block', this.userClass()),
 	);
 }

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -13,7 +13,7 @@ export class HlmSwitchThumb {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'bg-background dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform group-data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+			'bg-background dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=unchecked]:translate-x-0 group-data-[state=checked]:translate-x-[calc(100%-2px)]',
 			this.userClass(),
 		),
 	);

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

@@ -11,9 +11,9 @@ import {
 	output,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { hlm } from '@spartan-ng/brain/core';
 import { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { BrnSwitch, BrnSwitchThumb } from '@spartan-ng/brain/switch';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 import { HlmSwitchThumb } from './hlm-switch-thumb';
 export const HLM_SWITCH_VALUE_ACCESSOR = {
@@ -54,7 +54,7 @@ export class HlmSwitch implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'group data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+			'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs group inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
 			this.userClass(),
 		),
 	);

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

@@ -1,6 +1,6 @@
 // src/app/directives/hlm-table-directives.ts
 import { computed, Directive, inject, InjectionToken, input, ValueProvider } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 // Configuration Interface and InjectionToken

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnTabsContent } from '@spartan-ng/brain/tabs';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -16,7 +16,7 @@ export class HlmTabsContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			this.userClass(),
 		),
 	);

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

@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnTabsList } from '@spartan-ng/brain/tabs';
+import { hlm } from '@spartan-ng/helm/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const listVariants = cva(
-	'inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground',
+	'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
 	{
 		variants: {
 			orientation: {
 				horizontal: 'h-10 space-x-1',
-				vertical: 'mt-2 flex-col h-fit space-y-1',
+				vertical: 'mt-2 h-fit flex-col space-y-1',
 			},
 		},
 		defaultVariants: {

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

@@ -11,10 +11,10 @@ import {
 import { toObservable } from '@angular/core/rxjs-interop';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/brain/core';
 import { type BrnPaginatedTabHeaderItem, BrnTabsPaginatedList, BrnTabsTrigger } from '@spartan-ng/brain/tabs';
 import { buttonVariants } from '@spartan-ng/helm/button';
 import { HlmIcon } from '@spartan-ng/helm/icon';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 import type { Observable } from 'rxjs';
 import { listVariants } from './hlm-tabs-list';
@@ -84,7 +84,7 @@ export class HlmTabsPaginatedList extends BrnTabsPaginatedList {
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex overflow-hidden relative gap-1 flex-shrink-0', this.userClass()),
+		hlm('relative flex flex-shrink-0 gap-1 overflow-hidden', this.userClass()),
 	);
 
 	public readonly tabListClass = input<ClassValue>('', { alias: 'tabListClass' });

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnTabsTrigger } from '@spartan-ng/brain/tabs';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -15,7 +15,7 @@ export class 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]:text-base',
+			'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 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon]:text-base',
 			this.userClass(),
 		),
 	);

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
 import { BrnTabs } from '@spartan-ng/brain/tabs';
+import { hlm } from '@spartan-ng/helm/utils';
 import { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import { VariantProps } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 import { provideHlmToggleGroup } from './hlm-toggle-group.token';
@@ -21,7 +21,7 @@ export class HlmToggleGroup {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs focus:[&>[hlm][brnToggle]]:z-10',
+			'group/toggle-group data-[variant=outline]:shadow-xs flex w-fit items-center rounded-md focus:[&>[hlm][brnToggle]]:z-10',
 			this.userClass(),
 		),
 	);

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

@@ -1,21 +1,21 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 import { injectHlmToggleGroup } from './hlm-toggle-group.token';
 
 export const toggleGroupItemVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_ng-icon]:pointer-events-none [&_ng-icon]:text-base [&_ng-icon]:shrink-0 gap-2',
+	'ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors 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 [&_ng-icon]:text-base',
 	{
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+				outline: 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent',
 			},
 			size: {
-				default: 'h-10 px-3 min-w-10',
-				sm: 'h-9 px-2 min-w-9',
-				lg: 'h-11 px-5 min-w-11',
+				default: 'h-10 min-w-10 px-3',
+				sm: 'h-9 min-w-9 px-2',
+				lg: 'h-11 min-w-11 px-5',
 			},
 		},
 		defaultVariants: {

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

@@ -1,15 +1,15 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const toggleVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+	'ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+				outline: 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent',
 			},
 			size: {
 				default: 'h-9 px-3',