@spartan-ng/cli 0.0.1-alpha.396 → 0.0.1-alpha.397

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.396",
+  "version": "0.0.1-alpha.397",
   "type": "commonjs",
   "dependencies": {
     "@nx/angular": ">=20.0.0",

package/src/generators/ui/libs/ui-accordion-helm/files/lib/hlm-accordion-icon.directive.ts.template

@@ -6,16 +6,16 @@ import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: 'hlm-icon[hlmAccordionIcon], hlm-icon[hlmAccIcon]',
+	selector: 'ng-icon[hlmAccordionIcon], ng-icon[hlmAccIcon]',
 	standalone: true,
-	providers: [provideIcons({ lucideChevronDown }), provideHlmIconConfig({ size: 'none' })],
+	providers: [provideIcons({ lucideChevronDown }), provideHlmIconConfig({ size: 'sm' })],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmAccordionIconDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm('inline-block h-4 w-4 transition-transform [animation-duration:200]', this.userClass()),
 	);
 }

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

@@ -26,6 +26,6 @@ export class HlmBreadcrumbSeparatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('[&>hlm-icon]:w-3.5 [&>hlm-icon]:h-3.5 [&>hlm-icon]:flex flex items-center', this.userClass()),
+		hlm('[&>ng-icon]:w-3.5 [&>ng-icon]:h-3.5 [&>ng-icon]:flex', this.userClass()),
 	);
 }

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

@@ -3,43 +3,45 @@ import { NgModule } from '@angular/core';
 import { HlmCommandDialogCloseButtonDirective } from './lib/hlm-command-dialog-close-button.directive';
 import { HlmCommandDialogDirective } from './lib/hlm-command-dialog.directive';
 import { HlmCommandEmptyDirective } from './lib/hlm-command-empty.directive';
-import { HlmCommandGroupDirective } from './lib/hlm-command-group.directive';
-import { HlmCommandInputWrapperComponent } from './lib/hlm-command-input-wrapper.component';
-import { HlmCommandInputDirective } from './lib/hlm-command-input.directive';
-import { HlmCommandItemIconDirective } from './lib/hlm-command-item-icon.directive';
-import { HlmCommandItemDirective } from './lib/hlm-command-item.directive';
-import { HlmCommandListDirective } from './lib/hlm-command-list.directive';
-import { HlmCommandSeparatorDirective } from './lib/hlm-command-separator.directive';
+import { HlmCommandGroupLabelComponent } from './lib/hlm-command-group-label.component';
+import { HlmCommandGroupComponent } from './lib/hlm-command-group.component';
+import { HlmCommandIconDirective } from './lib/hlm-command-icon.directive';
+import { HlmCommandItemComponent } from './lib/hlm-command-item.component';
+import { HlmCommandListComponent } from './lib/hlm-command-list.component';
+import { HlmCommandSearchInputComponent } from './lib/hlm-command-search-input.component';
+import { HlmCommandSearchComponent } from './lib/hlm-command-search.component';
+import { HlmCommandSeparatorComponent } from './lib/hlm-command-separator.component';
 import { HlmCommandShortcutComponent } from './lib/hlm-command-shortcut.component';
-import { HlmCommandDirective } from './lib/hlm-command.directive';
+import { HlmCommandComponent } from './lib/hlm-command.component';
 
 export * from './lib/hlm-command-dialog-close-button.directive';
 export * from './lib/hlm-command-dialog.directive';
 export * from './lib/hlm-command-empty.directive';
-export * from './lib/hlm-command-group.directive';
-export * from './lib/hlm-command-input-wrapper.component';
-export * from './lib/hlm-command-input.directive';
-export * from './lib/hlm-command-item-icon.directive';
-export * from './lib/hlm-command-item.directive';
-export * from './lib/hlm-command-list.directive';
-export * from './lib/hlm-command-loader.directive';
-export * from './lib/hlm-command-separator.directive';
+export * from './lib/hlm-command-group-label.component';
+export * from './lib/hlm-command-group.component';
+export * from './lib/hlm-command-icon.directive';
+export * from './lib/hlm-command-item.component';
+export * from './lib/hlm-command-list.component';
+export * from './lib/hlm-command-search-input.component';
+export * from './lib/hlm-command-search.component';
+export * from './lib/hlm-command-separator.component';
 export * from './lib/hlm-command-shortcut.component';
-export * from './lib/hlm-command.directive';
+export * from './lib/hlm-command.component';
 
 export const HlmCommandImports = [
-	HlmCommandDirective,
-	HlmCommandInputDirective,
-	HlmCommandItemDirective,
-	HlmCommandSeparatorDirective,
-	HlmCommandGroupDirective,
-	HlmCommandListDirective,
+	HlmCommandComponent,
+	HlmCommandItemComponent,
+	HlmCommandSeparatorComponent,
+	HlmCommandGroupComponent,
+	HlmCommandListComponent,
 	HlmCommandShortcutComponent,
-	HlmCommandItemIconDirective,
-	HlmCommandEmptyDirective,
-	HlmCommandInputWrapperComponent,
+	HlmCommandIconDirective,
 	HlmCommandDialogCloseButtonDirective,
 	HlmCommandDialogDirective,
+	HlmCommandSearchInputComponent,
+	HlmCommandSearchComponent,
+	HlmCommandGroupLabelComponent,
+	HlmCommandEmptyDirective,
 ] as const;
 
 @NgModule({

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

@@ -1,18 +1,25 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
+import { BrnDialogCloseDirective } from '@spartan-ng/brain/dialog';
 import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/ui-button-helm';
+import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmCmdDialogCloseBtn]',
+	selector: '[hlmCommandDialogCloseBtn]',
 	standalone: true,
-	hostDirectives: [HlmButtonDirective],
-	providers: [provideBrnButtonConfig({ variant: 'ghost' })],
+	hostDirectives: [HlmButtonDirective, BrnDialogCloseDirective],
+	providers: [provideBrnButtonConfig({ variant: 'ghost' }), provideHlmIconConfig({ size: 'xs' })],
 	host: {
-		'[class]': 'computedClass()',
+		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandDialogCloseButtonDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly computedClass = computed(() => hlm('!p-1 !h-5 !w-5', this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'absolute top-3 right-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring font-medium h-10 hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center px-4 py-2 ring-offset-background rounded-md text-sm transition-colors !h-5 !p-1 !w-5',
+			this.userClass(),
+		),
+	);
 }

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

@@ -1,22 +1,24 @@
-import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
+import { Directive, ElementRef, Renderer2, computed, contentChild, effect, inject, input, signal } from '@angular/core';
+import { BrnCommandSearchInputToken } from '@spartan-ng/brain/command';
 import { hlm, injectExposesStateProvider } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
-import { HlmCommandDirective } from './hlm-command.directive';
 
 @Directive({
-	selector: '[hlmCmdDialog]',
+	selector: '[hlmCommandDialog]',
 	standalone: true,
-	hostDirectives: [HlmCommandDirective],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandDialogDirective {
 	private readonly _stateProvider = injectExposesStateProvider({ host: true });
-	public state = this._stateProvider.state ?? signal('closed').asReadonly();
+	public readonly state = this._stateProvider.state ?? signal('closed').asReadonly();
 	private readonly _renderer = inject(Renderer2);
 	private readonly _element = inject(ElementRef);
 
+	/** Access the search field */
+	private readonly _searchInput = contentChild(BrnCommandSearchInputToken, { read: ElementRef });
+
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
@@ -28,6 +30,12 @@ export class HlmCommandDialogDirective {
 	constructor() {
 		effect(() => {
 			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+
+			const searchInput = this._searchInput();
+
+			if (this.state() === 'open' && searchInput) {
+				searchInput.nativeElement.focus();
+			}
 		});
 	}
 }

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

@@ -3,7 +3,7 @@ import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmCmdEmpty]',
+	selector: '[hlmCommandEmpty]',
 	standalone: true,
 	host: {
 		'[class]': '_computedClass()',
@@ -11,5 +11,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmCommandEmptyDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('py-6 text-center text-sm', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('py-6 text-center text-sm', this.userClass()));
 }

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

@@ -0,0 +1,21 @@
+import { Component, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+
+@Component({
+	standalone: true,
+	selector: 'hlm-command-group-label',
+	template: '<ng-content />',
+	host: {
+		role: 'presentation',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandGroupLabelComponent {
+	/*** The user defined class  */
+	public readonly userClass = input<string>('', { alias: 'class' });
+
+	/*** The styles to apply  */
+	protected readonly _computedClass = computed(() =>
+		hlm('font-medium px-2 py-1.5 text-muted-foreground text-xs', this.userClass()),
+	);
+}

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

@@ -0,0 +1,22 @@
+import { Component, computed, input } from '@angular/core';
+import { BrnCommandGroupDirective } from '@spartan-ng/brain/command';
+import { hlm } from '@spartan-ng/brain/core';
+
+@Component({
+	standalone: true,
+	selector: 'hlm-command-group',
+	template: '<ng-content />',
+	hostDirectives: [BrnCommandGroupDirective],
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandGroupComponent {
+	/*** The user defined class  */
+	public readonly userClass = input<string>('', { alias: 'class' });
+
+	/*** The styles to apply  */
+	protected readonly _computedClass = computed(() =>
+		hlm('flex flex-col overflow-hidden p-1 text-foreground data-[hidden]:hidden', this.userClass()),
+	);
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
+
+@Directive({
+	standalone: true,
+	selector: '[hlmCommandIcon]',
+	host: {
+		class: 'inline-flex mr-2 w-4 h-4',
+	},
+	providers: [provideHlmIconConfig({ size: 'sm' })],
+})
+export class HlmCommandIconDirective {}

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

@@ -0,0 +1,45 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Component, computed, input, output } from '@angular/core';
+import { BrnCommandItemDirective } from '@spartan-ng/brain/command';
+import { hlm } from '@spartan-ng/brain/core';
+
+@Component({
+	standalone: true,
+	selector: 'button[hlm-command-item]',
+	template: `
+		<ng-content />
+	`,
+	hostDirectives: [
+		{
+			directive: BrnCommandItemDirective,
+			inputs: ['value', 'disabled'],
+			outputs: ['selected'],
+		},
+	],
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandItemComponent {
+	/** The value this item represents. */
+	public readonly value = input<string>();
+
+	/** Whether the item is disabled. */
+	public readonly disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	/** Emits when the item is selected. */
+	public readonly selected = output<void>();
+
+	/*** The user defined class  */
+	public readonly userClass = input<string>('', { alias: 'class' });
+
+	/*** The styles to apply  */
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-start aria-selected:bg-accent aria-selected:text-accent-foreground cursor-default disabled:opacity-50 disabled:pointer-events-none hover:bg-accent/50 items-center outline-none px-2 py-1.5 relative flex rounded-sm select-none text-sm data-[hidden]:hidden',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,22 @@
+import { Component, computed, input } from '@angular/core';
+import { BrnCommandListDirective } from '@spartan-ng/brain/command';
+import { hlm } from '@spartan-ng/brain/core';
+
+@Component({
+	standalone: true,
+	selector: 'hlm-command-list',
+	template: '<ng-content />',
+	host: {
+		'[class]': '_computedClass()',
+	},
+	hostDirectives: [BrnCommandListDirective],
+})
+export class HlmCommandListComponent {
+	/** The user defined class  */
+	public readonly userClass = input<string>('', { alias: 'class' });
+
+	/** The styles to apply  */
+	protected readonly _computedClass = computed(() =>
+		hlm('max-h-[300px] overflow-x-hidden overflow-y-auto', this.userClass()),
+	);
+}

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

@@ -0,0 +1,25 @@
+import { Component, computed, input } from '@angular/core';
+import { BrnCommandSearchInputDirective } from '@spartan-ng/brain/command';
+import { hlm } from '@spartan-ng/brain/core';
+
+@Component({
+	standalone: true,
+	selector: 'input[hlm-command-search-input]',
+	template: '',
+	hostDirectives: [BrnCommandSearchInputDirective],
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandSearchInputComponent {
+	/*** The user defined class  */
+	public readonly userClass = input<string>('', { alias: 'class' });
+
+	/*** The styles to apply  */
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'bg-transparent disabled:cursor-not-allowed disabled:opacity-50 h-11 outline-none placeholder:text-muted-foreground py-3 text-sm w-full',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,24 @@
+import { Component, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
+
+@Component({
+	standalone: true,
+	selector: 'hlm-command-search',
+	template: `
+		<ng-content />
+	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	providers: [provideHlmIconConfig({ size: 'sm' })],
+})
+export class HlmCommandSearchComponent {
+	/*** The user defined class  */
+	public readonly userClass = input<string>('', { alias: 'class' });
+
+	/*** The styles to apply  */
+	protected readonly _computedClass = computed(() =>
+		hlm('relative [&_ng-icon]:flex-none border-b border-border flex items-center px-3 space-x-2', this.userClass()),
+	);
+}

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

@@ -0,0 +1,19 @@
+import { Component, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+
+@Component({
+	standalone: true,
+	selector: 'hlm-command-separator',
+	template: '',
+	host: {
+		role: 'separator',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandSeparatorComponent {
+	/*** The user defined class  */
+	public readonly userClass = input<string>('', { alias: 'class' });
+
+	/*** The styles to apply  */
+	protected readonly _computedClass = computed(() => hlm('h-px block w-full border-b border-border', this.userClass()));
+}

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

@@ -1,20 +1,11 @@
-import { Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
+import { Component } from '@angular/core';
 
 @Component({
-	selector: 'hlm-cmd-shortcut',
 	standalone: true,
-	template: `
-		<ng-content />
-	`,
+	selector: 'hlm-command-shortcut',
+	template: '<ng-content />',
 	host: {
-		'[class]': '_computedClass()',
+		class: 'font-light ml-auto opacity-60 text-xs tracking-widest',
 	},
 })
-export class HlmCommandShortcutComponent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm('ml-auto font-light text-xs tracking-widest opacity-60', this.userClass()),
-	);
-}
+export class HlmCommandShortcutComponent {}

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

@@ -0,0 +1,27 @@
+import { Component, computed, input } from '@angular/core';
+import { BrnCommandDirective } from '@spartan-ng/brain/command';
+import { hlm } from '@spartan-ng/brain/core';
+
+@Component({
+	standalone: true,
+	selector: 'hlm-command',
+	template: `
+		<ng-content />
+	`,
+	hostDirectives: [BrnCommandDirective],
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandComponent {
+	/*** The user defined class */
+	public readonly userClass = input<string>('', { alias: 'class' });
+
+	/*** The styles to apply  */
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'w-96 bg-popover border border-border flex flex-col h-full overflow-hidden rounded-md text-popover-foreground',
+			this.userClass(),
+		),
+	);
+}

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

@@ -11,7 +11,8 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmDialogCloseDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+
+	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',
 			this.userClass(),

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

@@ -39,7 +39,7 @@ type SelectTriggerVariants = VariantProps<typeof selectTriggerVariants>;
 		<button [class]="_computedClass()" #button hlmInput brnSelectTrigger type="button">
 			<ng-content />
 			@if (icon()) {
-				<ng-content select="hlm-icon" />
+				<ng-content select="ng-icon" />
 			} @else {
 				<ng-icon hlm size="sm" class="ml-2 flex-none" name="lucideChevronDown" />
 			}

package/src/generators/ui/supported-ui-libraries.json

@@ -5,7 +5,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -14,7 +14,7 @@
 		"internalName": "ui-alert-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
@@ -24,7 +24,7 @@
 		"internalName": "ui-alert-dialog-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -34,7 +34,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -42,7 +42,7 @@
 		"internalName": "ui-avatar-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -52,7 +52,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -64,7 +64,7 @@
 			"@angular/router": "18.2.5",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -73,7 +73,7 @@
 		"internalName": "ui-button-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -85,7 +85,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381"
 		}
@@ -94,7 +94,7 @@
 		"internalName": "ui-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -102,8 +102,9 @@
 	"command": {
 		"internalName": "ui-command-helm",
 		"peerDependencies": {
+			"@angular/cdk": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
@@ -117,7 +118,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -133,7 +134,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
 			"@angular/forms": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -142,7 +143,7 @@
 		"internalName": "ui-label-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -153,7 +154,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
@@ -163,7 +164,7 @@
 		"internalName": "ui-popover-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -171,7 +172,7 @@
 		"internalName": "ui-progress-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -179,7 +180,7 @@
 		"internalName": "ui-radio-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -187,7 +188,7 @@
 		"internalName": "ui-scroll-area-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1",
 			"ngx-scrollbar": ">=16.0.0"
 		}
@@ -196,7 +197,7 @@
 		"internalName": "ui-separator-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -206,7 +207,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
@@ -216,7 +217,7 @@
 		"internalName": "ui-skeleton-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -224,7 +225,7 @@
 		"internalName": "ui-spinner-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -235,7 +236,7 @@
 			"@angular/cdk": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
 			"@angular/forms": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -246,7 +247,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
@@ -257,7 +258,7 @@
 		"internalName": "ui-toggle-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -266,7 +267,7 @@
 		"internalName": "ui-typography-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -275,7 +276,7 @@
 		"peerDependencies": {
 			"@angular/common": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -283,7 +284,7 @@
 		"internalName": "ui-hover-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -294,7 +295,7 @@
 			"@angular/forms": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -303,7 +304,7 @@
 		"internalName": "ui-tooltip-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396"
+			"@spartan-ng/brain": "0.0.1-alpha.397"
 		}
 	},
 	"pagination": {
@@ -315,7 +316,7 @@
 			"@angular/router": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-select-helm": "0.0.1-alpha.381",
@@ -329,7 +330,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1",
@@ -342,7 +343,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
@@ -363,14 +364,14 @@
 		"internalName": "ui-form-field-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396"
+			"@spartan-ng/brain": "0.0.1-alpha.397"
 		}
 	},
 	"slider": {
 		"internalName": "ui-slider-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.396",
+			"@spartan-ng/brain": "0.0.1-alpha.397",
 			"clsx": "^2.1.1"
 		}
 	}

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

@@ -1,22 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Directive({
-	selector: 'brn-cmd-group[hlm],cmdk-group[hlm]',
-	standalone: true,
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmCommandGroupDirective {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm(
-			'block [&[cmdk-hidden="true"]]:hidden\n' +
-				'[&_.cmdk-group-label]:px-2 [&_.cmdk-group-label]:py-1.5 [&_.cmdk-group-label]:text-xs [&_.cmdk-group-label]:font-medium [&_.cmdk-group-label]:text-muted-foreground\n' +
-				'[&_.cmdk-group-content]:flex [&_.cmdk-group-content]:flex-col [&_.cmdk-group-content]:flex-col overflow-hidden p-1 text-foreground',
-			this.userClass(),
-		),
-	);
-}

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

@@ -1,18 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Component({
-	selector: 'hlm-cmd-input-wrapper',
-	standalone: true,
-	template: '<ng-content/>',
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmCommandInputWrapperComponent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm('flex space-x-2 items-center border-b border-border px-3 [&_ng-icon]:h-5 [&_ng-icon]:w-5', this.userClass()),
-	);
-}

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

@@ -1,21 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Directive({
-	selector: '[hlm][brnCmdInput],[hlm][cmdkInput]',
-	standalone: true,
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmCommandInputDirective {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected _computedClass = computed(() =>
-		hlm(
-			'h-11 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-			this.userClass(),
-		),
-	);
-}

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

@@ -1,17 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
-import type { ClassValue } from 'clsx';
-
-@Directive({
-	selector: '[hlmCmdIcon]',
-	standalone: true,
-	providers: [provideHlmIconConfig({ size: 'sm' })],
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmCommandItemIconDirective {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('mr-2', this.userClass()));
-}

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

@@ -1,28 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Directive({
-	selector: '[hlm][brnCmdItem],[hlm][cmdkItem]',
-	standalone: true,
-	host: {
-		'[class]': '_computedClass()',
-		// This is needed after changes to the underlying CMDK library used for the BrnCommand primitive
-		// Ideally we would remove the dependency on this outside module. If you are open to that please
-		// reach out and if you are feeling super ambitious you can implement it yourself and open a PR!
-		'[style.display]': '"flex"',
-	},
-})
-export class HlmCommandItemDirective {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected _computedClass = computed(() =>
-		hlm(
-			'items-center relative cursor-default select-none rounded-sm px-2 py-1.5 text-sm outline-none\n' +
-				'aria-selected:bg-accent aria-selected:text-accent-foreground\n' +
-				'hover:bg-accent/50\n' +
-				'disabled:pointer-events-none disabled:opacity-50',
-			this.userClass(),
-		),
-	);
-}

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

@@ -1,15 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Directive({
-	selector: 'cmdk-list[hlm],brn-cmd-list[hlm]',
-	standalone: true,
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmCommandListDirective {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this.userClass()));
-}

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

@@ -1,7 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-	selector: '[hlmCmdLoader]',
-	standalone: true,
-})
-export class HlmCommandLoaderDirective {}

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

@@ -1,10 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-	selector: 'cmdk-separator[hlm],brn-cmd-separator[hlm],[hlmCmdSeparator]',
-	standalone: true,
-	host: {
-		class: '[&_hr]:border-border [&[cmdk-hidden="true"]]:hidden',
-	},
-})
-export class HlmCommandSeparatorDirective {}

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

@@ -1,20 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Directive({
-	selector: 'cmdk-command[hlm],brn-cmd[hlm]',
-	standalone: true,
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmCommandDirective {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm(
-			'flex h-full w-full flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground',
-			this.userClass(),
-		),
-	);
-}