@spartan-ng/cli 0.0.1-alpha.492 → 0.0.1-alpha.494

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

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
-import { HlmIconDirective } from './lib/hlm-icon.directive';
+import { HlmIcon } from './lib/hlm-icon';
 
-export * from './lib/hlm-icon.directive';
+export * from './lib/hlm-icon';
 export * from './lib/hlm-icon.token';
 
 @NgModule({
-	imports: [HlmIconDirective],
-	exports: [HlmIconDirective],
+	imports: [HlmIcon],
+	exports: [HlmIcon],
 })
 export class HlmIconModule {}

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

@@ -1,5 +1,5 @@
 import { InjectionToken, ValueProvider, inject } from '@angular/core';
-import type { IconSize } from './hlm-icon.directive';
+import type { IconSize } from './hlm-icon';
 
 export interface HlmIconConfig {
 	size: IconSize;

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

@@ -9,7 +9,7 @@ export type IconSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'none' | (Record<nev
 		'[style.--ng-icon__size]': '_computedSize()',
 	},
 })
-export class HlmIconDirective {
+export class HlmIcon {
 	private readonly _config = injectHlmIconConfig();
 	public readonly size = input<IconSize>(this._config.size);
 

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { HlmInputDirective } from './lib/hlm-input.directive';
+import { HlmInput } from './lib/hlm-input';
 
-export * from './lib/hlm-input.directive';
+export * from './lib/hlm-input';
 
 @NgModule({
-	imports: [HlmInputDirective],
-	exports: [HlmInputDirective],
+	imports: [HlmInput],
+	exports: [HlmInput],
 })
 export class HlmInputModule {}

package/src/generators/ui/libs/ui-input-helm/files/lib/{hlm-input-error.directive.ts.template → hlm-input-error.ts.template}

@@ -15,7 +15,7 @@ export type InputErrorVariants = VariantProps<typeof inputErrorVariants>;
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmInputErrorDirective {
+export class HlmInputError {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() => hlm(inputErrorVariants(), this.userClass()));
 }

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

@@ -41,11 +41,11 @@ type InputVariants = VariantProps<typeof inputVariants>;
 	providers: [
 		{
 			provide: BrnFormFieldControl,
-			useExisting: forwardRef(() => HlmInputDirective),
+			useExisting: forwardRef(() => HlmInput),
 		},
 	],
 })
-export class HlmInputDirective implements BrnFormFieldControl, DoCheck {
+export class HlmInput implements BrnFormFieldControl, DoCheck {
 	public readonly error = input<InputVariants['error']>('auto');
 
 	protected readonly _state = linkedSignal(() => ({ error: this.error() }));

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

@@ -1,22 +1,22 @@
 import { NgModule } from '@angular/core';
-import { HlmInputOtpFakeCaretComponent } from './lib/hlm-input-otp-fake-caret.component';
-import { HlmInputOtpGroupDirective } from './lib/hlm-input-otp-group.directive';
-import { HlmInputOtpSeparatorComponent } from './lib/hlm-input-otp-separator.component';
-import { HlmInputOtpSlotComponent } from './lib/hlm-input-otp-slot.component';
-import { HlmInputOtpDirective } from './lib/hlm-input-otp.directive';
+import { HlmInputOtp } from './lib/hlm-input-otp';
+import { HlmInputOtpFakeCaret } from './lib/hlm-input-otp-fake-caret';
+import { HlmInputOtpGroup } from './lib/hlm-input-otp-group';
+import { HlmInputOtpSeparator } from './lib/hlm-input-otp-separator';
+import { HlmInputOtpSlot } from './lib/hlm-input-otp-slot';
 
-export * from './lib/hlm-input-otp-fake-caret.component';
-export * from './lib/hlm-input-otp-group.directive';
-export * from './lib/hlm-input-otp-separator.component';
-export * from './lib/hlm-input-otp-slot.component';
-export * from './lib/hlm-input-otp.directive';
+export * from './lib/hlm-input-otp';
+export * from './lib/hlm-input-otp-fake-caret';
+export * from './lib/hlm-input-otp-group';
+export * from './lib/hlm-input-otp-separator';
+export * from './lib/hlm-input-otp-slot';
 
 export const HlmInputOtpImports = [
-	HlmInputOtpDirective,
-	HlmInputOtpGroupDirective,
-	HlmInputOtpSeparatorComponent,
-	HlmInputOtpSlotComponent,
-	HlmInputOtpFakeCaretComponent,
+	HlmInputOtp,
+	HlmInputOtpGroup,
+	HlmInputOtpSeparator,
+	HlmInputOtpSlot,
+	HlmInputOtpFakeCaret,
 ] as const;
 
 @NgModule({

package/src/generators/ui/libs/ui-input-otp-helm/files/lib/{hlm-input-otp-fake-caret.component.ts.template → hlm-input-otp-fake-caret.ts.template}

@@ -9,4 +9,4 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmInputOtpFakeCaretComponent {}
+export class HlmInputOtpFakeCaret {}

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

@@ -8,7 +8,7 @@ import { type ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmInputOtpGroupDirective {
+export class HlmInputOtpGroup {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() => hlm('flex items-center', this.userClass()));

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

@@ -2,12 +2,12 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideMinus } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import { type ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-input-otp-separator',
-	imports: [HlmIconDirective, NgIcon],
+	imports: [HlmIcon, NgIcon],
 	providers: [provideIcons({ lucideMinus })],
 	template: `
 		<ng-icon hlm name="lucideMinus" />
@@ -18,7 +18,7 @@ import { type ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmInputOtpSeparatorComponent {
+export class HlmInputOtpSeparator {
 	public readonly userClass = input<ClassValue>('inline-flex', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() => hlm(this.userClass()));

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

@@ -1,13 +1,13 @@
 import { NumberInput } from '@angular/cdk/coercion';
 import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnInputOtpSlotComponent } from '@spartan-ng/brain/input-otp';
+import { BrnInputOtpSlot } from '@spartan-ng/brain/input-otp';
 import { type ClassValue } from 'clsx';
-import { HlmInputOtpFakeCaretComponent } from './hlm-input-otp-fake-caret.component';
+import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 
 @Component({
 	selector: 'hlm-input-otp-slot',
-	imports: [BrnInputOtpSlotComponent, HlmInputOtpFakeCaretComponent],
+	imports: [BrnInputOtpSlot, HlmInputOtpFakeCaret],
 	template: `
 		<brn-input-otp-slot [index]="index()">
 			<hlm-input-otp-fake-caret />
@@ -18,7 +18,7 @@ import { HlmInputOtpFakeCaretComponent } from './hlm-input-otp-fake-caret.compon
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmInputOtpSlotComponent {
+export class HlmInputOtpSlot {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	/** The index of the slot to render the char or a fake caret */

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

@@ -8,7 +8,7 @@ import { type ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmInputOtpDirective {
+export class HlmInputOtp {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { HlmLabelDirective } from './lib/hlm-label.directive';
+import { HlmLabel } from './lib/hlm-label';
 
-export * from './lib/hlm-label.directive';
+export * from './lib/hlm-label';
 
 @NgModule({
-	imports: [HlmLabelDirective],
-	exports: [HlmLabelDirective],
+	imports: [HlmLabel],
+	exports: [HlmLabel],
 })
 export class HlmLabelModule {}

package/src/generators/ui/libs/ui-label-helm/files/lib/{hlm-label.directive.ts.template → hlm-label.ts.template}

@@ -1,13 +1,13 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnLabelDirective } from '@spartan-ng/brain/label';
+import { BrnLabel } from '@spartan-ng/brain/label';
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmLabel]',
 	hostDirectives: [
 		{
-			directive: BrnLabelDirective,
+			directive: BrnLabel,
 			inputs: ['id'],
 		},
 	],
@@ -15,7 +15,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmLabelDirective {
+export class HlmLabel {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>

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

@@ -1,56 +1,51 @@
 import { NgModule } from '@angular/core';
 
-import { HlmMenuBarItemDirective } from './lib/hlm-menu-bar-item.directive';
-import { HlmMenuBarComponent } from './lib/hlm-menu-bar.component';
-import { HlmMenuGroupComponent } from './lib/hlm-menu-group.component';
-import { HlmMenuItemCheckComponent } from './lib/hlm-menu-item-check.component';
-import { HlmMenuItemCheckboxDirective } from './lib/hlm-menu-item-checkbox.directive';
-import { HlmMenuItemIconDirective } from './lib/hlm-menu-item-icon.directive';
-import { HlmMenuItemRadioComponent } from './lib/hlm-menu-item-radio.component';
-import { HlmMenuItemRadioDirective } from './lib/hlm-menu-item-radio.directive';
-import { HlmMenuItemSubIndicatorComponent } from './lib/hlm-menu-item-sub-indicator.component';
-import { HlmMenuItemDirective } from './lib/hlm-menu-item.directive';
-import { HlmMenuLabelComponent } from './lib/hlm-menu-label.component';
-import { HlmMenuSeparatorComponent } from './lib/hlm-menu-separator.component';
-import { HlmMenuShortcutComponent } from './lib/hlm-menu-shortcut.component';
-import { HlmMenuComponent } from './lib/hlm-menu.component';
-import { HlmSubMenuComponent } from './lib/hlm-sub-menu.component';
+import { HlmMenu } from './lib/hlm-menu';
+import { HlmMenuBar } from './lib/hlm-menu-bar';
+import { HlmMenuBarItem } from './lib/hlm-menu-bar-item';
+import { HlmMenuGroup } from './lib/hlm-menu-group';
+import { HlmMenuItem } from './lib/hlm-menu-item';
+import { HlmMenuItemCheck } from './lib/hlm-menu-item-check';
+import { HlmMenuItemCheckbox } from './lib/hlm-menu-item-checkbox';
+import { HlmMenuItemIcon } from './lib/hlm-menu-item-icon';
+import { HlmMenuItemRadio } from './lib/hlm-menu-item-radio';
+import { HlmMenuItemRadioIndicator } from './lib/hlm-menu-item-radio-indicator';
+import { HlmMenuItemSubIndicator } from './lib/hlm-menu-item-sub-indicator';
+import { HlmMenuLabel } from './lib/hlm-menu-label';
+import { HlmMenuSeparator } from './lib/hlm-menu-separator';
+import { HlmMenuShortcut } from './lib/hlm-menu-shortcut';
+import { HlmSubMenu } from './lib/hlm-sub-menu';
 
-export * from './lib/hlm-menu-bar-item.directive';
-export * from './lib/hlm-menu-bar.component';
-export * from './lib/hlm-menu-group.component';
-export * from './lib/hlm-menu-item-check.component';
-export * from './lib/hlm-menu-item-checkbox.directive';
-export * from './lib/hlm-menu-item-icon.directive';
-export * from './lib/hlm-menu-item-radio.component';
-export * from './lib/hlm-menu-item-radio.directive';
-export * from './lib/hlm-menu-item-sub-indicator.component';
-export * from './lib/hlm-menu-item.directive';
-export * from './lib/hlm-menu-label.component';
-export * from './lib/hlm-menu-separator.component';
-export * from './lib/hlm-menu-shortcut.component';
-export * from './lib/hlm-menu.component';
-export * from './lib/hlm-sub-menu.component';
+export * from './lib/hlm-menu';
+export * from './lib/hlm-menu-bar';
+export * from './lib/hlm-menu-bar-item';
+export * from './lib/hlm-menu-group';
+export * from './lib/hlm-menu-item';
+export * from './lib/hlm-menu-item-check';
+export * from './lib/hlm-menu-item-checkbox';
+export * from './lib/hlm-menu-item-icon';
+export * from './lib/hlm-menu-item-radio';
+export * from './lib/hlm-menu-item-radio-indicator';
+export * from './lib/hlm-menu-item-sub-indicator';
+export * from './lib/hlm-menu-label';
+export * from './lib/hlm-menu-separator';
+export * from './lib/hlm-menu-shortcut';
+export * from './lib/hlm-sub-menu';
 
 export const HlmMenuItemImports = [
-	HlmMenuItemDirective,
-	HlmMenuItemIconDirective,
-	HlmMenuGroupComponent,
-	HlmMenuItemSubIndicatorComponent,
-	HlmMenuItemRadioComponent,
-	HlmMenuItemCheckComponent,
-	HlmMenuShortcutComponent,
-	HlmMenuItemCheckboxDirective,
-	HlmMenuItemRadioDirective,
+	HlmMenuItem,
+	HlmMenuItemIcon,
+	HlmMenuGroup,
+	HlmMenuItemSubIndicator,
+	HlmMenuItemRadioIndicator,
+	HlmMenuItemCheck,
+	HlmMenuShortcut,
+	HlmMenuItemCheckbox,
+	HlmMenuItemRadio,
 ];
-export const HlmMenuStructureImports = [HlmMenuLabelComponent, HlmMenuSeparatorComponent] as const;
-export const HlmMenuImports = [
-	...HlmMenuItemImports,
-	...HlmMenuStructureImports,
-	HlmMenuComponent,
-	HlmSubMenuComponent,
-] as const;
-export const HlmMenuBarImports = [...HlmMenuImports, HlmMenuBarComponent, HlmMenuBarItemDirective] as const;
+export const HlmMenuStructureImports = [HlmMenuLabel, HlmMenuSeparator] as const;
+export const HlmMenuImports = [...HlmMenuItemImports, ...HlmMenuStructureImports, HlmMenu, HlmSubMenu] as const;
+export const HlmMenuBarImports = [...HlmMenuImports, HlmMenuBar, HlmMenuBarItem] as const;
 
 @NgModule({
 	imports: [...HlmMenuItemImports],

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnMenuItemDirective } from '@spartan-ng/brain/menu';
+import { BrnMenuItem } from '@spartan-ng/brain/menu';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -8,9 +8,9 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnMenuItemDirective],
+	hostDirectives: [BrnMenuItem],
 })
-export class HlmMenuBarItemDirective {
+export class HlmMenuBarItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnMenuBarDirective } from '@spartan-ng/brain/menu';
+import { BrnMenuBar } from '@spartan-ng/brain/menu';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -8,11 +8,11 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnMenuBarDirective],
+	hostDirectives: [BrnMenuBar],
 	template: '<ng-content/>',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmMenuBarComponent {
+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()),

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-group.component.ts.template → hlm-menu-group.ts.template}

@@ -1,15 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { BrnMenuGroupDirective } from '@spartan-ng/brain/menu';
+import { BrnMenuGroup } from '@spartan-ng/brain/menu';
 
 @Component({
 	selector: 'hlm-menu-group',
 	host: {
 		class: 'block',
 	},
-	hostDirectives: [BrnMenuGroupDirective],
+	hostDirectives: [BrnMenuGroup],
 	template: `
 		<ng-content />
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmMenuGroupComponent {}
+export class HlmMenuGroup {}

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-item-check.component.ts.template → hlm-menu-item-check.ts.template}

@@ -2,13 +2,13 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-check',
 	providers: [provideIcons({ lucideCheck })],
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 	template: `
 		<!-- Using 1rem for size to mimick h-4 w-4 -->
 		<ng-icon hlm size="1rem" name="lucideCheck" />
@@ -18,7 +18,7 @@ import type { ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmMenuItemCheckComponent {
+export class HlmMenuItemCheck {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-item-checkbox.directive.ts.template → hlm-menu-item-checkbox.ts.template}

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnMenuItemCheckboxDirective } from '@spartan-ng/brain/menu';
+import { BrnMenuItemCheckbox } from '@spartan-ng/brain/menu';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -10,13 +10,13 @@ import type { ClassValue } from 'clsx';
 	},
 	hostDirectives: [
 		{
-			directive: BrnMenuItemCheckboxDirective,
+			directive: BrnMenuItemCheckbox,
 			inputs: ['disabled: disabled', 'checked: checked'],
 			outputs: ['triggered: triggered'],
 		},
 	],
 })
-export class HlmMenuItemCheckboxDirective {
+export class HlmMenuItemCheckbox {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-item-icon.directive.ts.template → hlm-menu-item-icon.ts.template}

@@ -10,7 +10,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmMenuItemIconDirective {
+export class HlmMenuItemIcon {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() => hlm('mr-2', this.userClass()));
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-item-radio.component.ts.template → hlm-menu-item-radio-indicator.ts.template}

@@ -2,13 +2,13 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCircle } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-radio',
 	providers: [provideIcons({ lucideCircle })],
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 	template: `
 		<!-- Using 0.5rem for size to mimick h-2 w-2 -->
 		<ng-icon hlm size="0.5rem" class="*:*:fill-current" name="lucideCircle" />
@@ -18,9 +18,9 @@ import type { ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmMenuItemRadioComponent {
+export class HlmMenuItemRadioIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'group-[.checked]:opacity-100 opacity-0 absolute left-2 flex h-3.5 w-3.5 items-center justify-center',
 			this.userClass(),

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-item-radio.directive.ts.template → hlm-menu-item-radio.ts.template}

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnMenuItemRadioDirective } from '@spartan-ng/brain/menu';
+import { BrnMenuItemRadio } from '@spartan-ng/brain/menu';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -10,13 +10,13 @@ import type { ClassValue } from 'clsx';
 	},
 	hostDirectives: [
 		{
-			directive: BrnMenuItemRadioDirective,
+			directive: BrnMenuItemRadio,
 			inputs: ['disabled: disabled', 'checked: checked'],
 			outputs: ['triggered: triggered'],
 		},
 	],
 })
-export class HlmMenuItemRadioDirective {
+export class HlmMenuItemRadio {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-item-sub-indicator.component.ts.template → hlm-menu-item-sub-indicator.ts.template}

@@ -2,13 +2,13 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-sub-indicator',
 	providers: [provideIcons({ lucideChevronRight })],
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 	template: `
 		<ng-icon hlm size="sm" name="lucideChevronRight" class="text-popover-foreground" />
 	`,
@@ -17,7 +17,7 @@ import { ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmMenuItemSubIndicatorComponent {
+export class HlmMenuItemSubIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('ml-auto size-4', this.userClass()));
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-item.directive.ts.template → hlm-menu-item.ts.template}

@@ -1,7 +1,7 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnMenuItemDirective } from '@spartan-ng/brain/menu';
+import { BrnMenuItem } from '@spartan-ng/brain/menu';
 import { ClassValue } from 'clsx';
 
 @Directive({
@@ -13,13 +13,13 @@ import { ClassValue } from 'clsx';
 	},
 	hostDirectives: [
 		{
-			directive: BrnMenuItemDirective,
+			directive: BrnMenuItem,
 			inputs: ['disabled: disabled'],
 			outputs: ['triggered: triggered'],
 		},
 	],
 })
-export class HlmMenuItemDirective {
+export class HlmMenuItem {
 	public readonly variant = input<'default' | 'destructive'>('default');
 
 	public readonly inset = input<boolean, BooleanInput>(false, {

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-label.component.ts.template → hlm-menu-label.ts.template}

@@ -14,7 +14,7 @@ import { ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmMenuLabelComponent {
+export class HlmMenuLabel {
 	public readonly inset = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
 	});

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-separator.component.ts.template → hlm-menu-separator.ts.template}

@@ -10,7 +10,7 @@ import { ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmMenuSeparatorComponent {
+export class HlmMenuSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('block bg-border -mx-1 my-1 h-px', this.userClass()));
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu-shortcut.component.ts.template → hlm-menu-shortcut.ts.template}

@@ -12,7 +12,7 @@ import type { ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmMenuShortcutComponent {
+export class HlmMenuShortcut {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm('text-muted-foreground ml-auto text-xs tracking-widest', this.userClass()),

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-menu.component.ts.template → hlm-menu.ts.template}

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnMenuDirective } from '@spartan-ng/brain/menu';
+import { BrnMenu } from '@spartan-ng/brain/menu';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
@@ -25,13 +25,13 @@ type MenuVariants = VariantProps<typeof menuVariants>;
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnMenuDirective],
+	hostDirectives: [BrnMenu],
 	template: `
 		<ng-content />
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmMenuComponent {
+export class HlmMenu {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm(menuVariants({ variant: this.variant() }), this.userClass()));