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

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

@@ -12,38 +12,38 @@ import {
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import {
-	BrnCalendarCellButtonDirective,
-	BrnCalendarCellDirective,
-	BrnCalendarGridDirective,
-	BrnCalendarHeaderDirective,
-	BrnCalendarMultiDirective,
-	BrnCalendarNextButtonDirective,
-	BrnCalendarPreviousButtonDirective,
-	BrnCalendarWeekDirective,
-	BrnCalendarWeekdayDirective,
+	BrnCalendarCell,
+	BrnCalendarCellButton,
+	BrnCalendarGrid,
+	BrnCalendarHeader,
+	BrnCalendarMulti,
+	BrnCalendarNextButton,
+	BrnCalendarPreviousButton,
+	BrnCalendarWeek,
+	BrnCalendarWeekday,
 	Weekday,
 	injectBrnCalendarI18n,
 } from '@spartan-ng/brain/calendar';
 import { hlm } from '@spartan-ng/brain/core';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
 import { buttonVariants } from '@spartan-ng/helm/button';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-calendar-multi',
 	imports: [
-		BrnCalendarMultiDirective,
-		BrnCalendarHeaderDirective,
-		BrnCalendarNextButtonDirective,
-		BrnCalendarPreviousButtonDirective,
-		BrnCalendarWeekdayDirective,
-		BrnCalendarWeekDirective,
-		BrnCalendarCellButtonDirective,
-		BrnCalendarCellDirective,
-		BrnCalendarGridDirective,
+		BrnCalendarMulti,
+		BrnCalendarHeader,
+		BrnCalendarNextButton,
+		BrnCalendarPreviousButton,
+		BrnCalendarWeekday,
+		BrnCalendarWeek,
+		BrnCalendarCellButton,
+		BrnCalendarCell,
+		BrnCalendarGrid,
 		NgIcon,
-		HlmIconDirective,
+		HlmIcon,
 	],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	template: `
@@ -120,7 +120,7 @@ import type { ClassValue } from 'clsx';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmCalendarMultiComponent<T> {
+export class HlmCalendarMulti<T> {
 	public readonly calendarClass = input<ClassValue>('');
 
 	protected readonly _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()));
@@ -167,7 +167,7 @@ export class HlmCalendarMultiComponent<T> {
 	public readonly defaultFocusedDate = input<T>();
 
 	/** Access the calendar directive */
-	private readonly _calendar = viewChild.required(BrnCalendarMultiDirective);
+	private readonly _calendar = viewChild.required(BrnCalendarMulti);
 
 	/** Get the heading for the current month and year */
 	protected readonly _heading = computed(() =>

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

@@ -12,38 +12,38 @@ import {
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import {
-	BrnCalendarCellButtonDirective,
-	BrnCalendarCellDirective,
-	BrnCalendarDirective,
-	BrnCalendarGridDirective,
-	BrnCalendarHeaderDirective,
-	BrnCalendarNextButtonDirective,
-	BrnCalendarPreviousButtonDirective,
-	BrnCalendarWeekDirective,
-	BrnCalendarWeekdayDirective,
+	BrnCalendar,
+	BrnCalendarCell,
+	BrnCalendarCellButton,
+	BrnCalendarGrid,
+	BrnCalendarHeader,
+	BrnCalendarNextButton,
+	BrnCalendarPreviousButton,
+	BrnCalendarWeek,
+	BrnCalendarWeekday,
 	Weekday,
 	injectBrnCalendarI18n,
 } from '@spartan-ng/brain/calendar';
 import { hlm } from '@spartan-ng/brain/core';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
 import { buttonVariants } from '@spartan-ng/helm/button';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-calendar',
 	imports: [
-		BrnCalendarDirective,
-		BrnCalendarHeaderDirective,
-		BrnCalendarNextButtonDirective,
-		BrnCalendarPreviousButtonDirective,
-		BrnCalendarWeekdayDirective,
-		BrnCalendarWeekDirective,
-		BrnCalendarCellButtonDirective,
-		BrnCalendarCellDirective,
-		BrnCalendarGridDirective,
+		BrnCalendar,
+		BrnCalendarHeader,
+		BrnCalendarNextButton,
+		BrnCalendarPreviousButton,
+		BrnCalendarWeekday,
+		BrnCalendarWeek,
+		BrnCalendarCellButton,
+		BrnCalendarCell,
+		BrnCalendarGrid,
 		NgIcon,
-		HlmIconDirective,
+		HlmIcon,
 	],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	template: `
@@ -118,7 +118,7 @@ import type { ClassValue } from 'clsx';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmCalendarComponent<T> {
+export class HlmCalendar<T> {
 	public readonly calendarClass = input<ClassValue>('');
 
 	protected readonly _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()));
@@ -155,7 +155,7 @@ export class HlmCalendarComponent<T> {
 	public readonly defaultFocusedDate = input<T>();
 
 	/** Access the calendar directive */
-	private readonly _calendar = viewChild.required(BrnCalendarDirective);
+	private readonly _calendar = viewChild.required(BrnCalendar);
 
 	/** Get the heading for the current month and year */
 	protected readonly _heading = computed(() =>

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

@@ -1,29 +1,29 @@
 import { NgModule } from '@angular/core';
 
-import { HlmCardActionDirective } from './lib/hlm-card-action.directive';
-import { HlmCardContentDirective } from './lib/hlm-card-content.directive';
-import { HlmCardDescriptionDirective } from './lib/hlm-card-description.directive';
-import { HlmCardFooterDirective } from './lib/hlm-card-footer.directive';
-import { HlmCardHeaderDirective } from './lib/hlm-card-header.directive';
-import { HlmCardTitleDirective } from './lib/hlm-card-title.directive';
-import { HlmCardDirective } from './lib/hlm-card.directive';
+import { HlmCard } from './lib/hlm-card';
+import { HlmCardAction } from './lib/hlm-card-action';
+import { HlmCardContent } from './lib/hlm-card-content';
+import { HlmCardDescription } from './lib/hlm-card-description';
+import { HlmCardFooter } from './lib/hlm-card-footer';
+import { HlmCardHeader } from './lib/hlm-card-header';
+import { HlmCardTitle } from './lib/hlm-card-title';
 
-export * from './lib/hlm-card-action.directive';
-export * from './lib/hlm-card-content.directive';
-export * from './lib/hlm-card-description.directive';
-export * from './lib/hlm-card-footer.directive';
-export * from './lib/hlm-card-header.directive';
-export * from './lib/hlm-card-title.directive';
-export * from './lib/hlm-card.directive';
+export * from './lib/hlm-card';
+export * from './lib/hlm-card-action';
+export * from './lib/hlm-card-content';
+export * from './lib/hlm-card-description';
+export * from './lib/hlm-card-footer';
+export * from './lib/hlm-card-header';
+export * from './lib/hlm-card-title';
 
 export const HlmCardImports = [
-	HlmCardDirective,
-	HlmCardHeaderDirective,
-	HlmCardFooterDirective,
-	HlmCardTitleDirective,
-	HlmCardDescriptionDirective,
-	HlmCardContentDirective,
-	HlmCardActionDirective,
+	HlmCard,
+	HlmCardHeader,
+	HlmCardFooter,
+	HlmCardTitle,
+	HlmCardDescription,
+	HlmCardContent,
+	HlmCardAction,
 ] as const;
 
 @NgModule({

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

@@ -9,7 +9,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmCardActionDirective {
+export class HlmCardAction {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('col-start-2 row-span-2 row-start-1 self-start justify-self-end', this.userClass()),

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

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

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

@@ -8,7 +8,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmCardDescriptionDirective {
+export class HlmCardDescription {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('text-muted-foreground text-sm', this.userClass()));
 }

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

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

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

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

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

@@ -8,7 +8,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmCardTitleDirective {
+export class HlmCardTitle {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('leading-none font-semibold', this.userClass()));
 }

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

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

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

@@ -1,25 +1,25 @@
 import { NgModule } from '@angular/core';
-import { HlmCarouselContentComponent } from './lib/hlm-carousel-content.component';
-import { HlmCarouselItemComponent } from './lib/hlm-carousel-item.component';
-import { HlmCarouselNextComponent } from './lib/hlm-carousel-next.component';
-import { HlmCarouselPreviousComponent } from './lib/hlm-carousel-previous.component';
-import { HlmCarouselSlideDisplayComponent } from './lib/hlm-carousel-slide-display.component';
-import { HlmCarouselComponent } from './lib/hlm-carousel.component';
+import { HlmCarousel } from './lib/hlm-carousel';
+import { HlmCarouselContent } from './lib/hlm-carousel-content';
+import { HlmCarouselItem } from './lib/hlm-carousel-item';
+import { HlmCarouselNext } from './lib/hlm-carousel-next';
+import { HlmCarouselPrevious } from './lib/hlm-carousel-previous';
+import { HlmCarouselSlideDisplay } from './lib/hlm-carousel-slide-display';
 
-export * from './lib/hlm-carousel-content.component';
-export * from './lib/hlm-carousel-item.component';
-export * from './lib/hlm-carousel-next.component';
-export * from './lib/hlm-carousel-previous.component';
-export * from './lib/hlm-carousel-slide-display.component';
-export * from './lib/hlm-carousel.component';
+export * from './lib/hlm-carousel';
+export * from './lib/hlm-carousel-content';
+export * from './lib/hlm-carousel-item';
+export * from './lib/hlm-carousel-next';
+export * from './lib/hlm-carousel-previous';
+export * from './lib/hlm-carousel-slide-display';
 
 export const HlmCarouselImports = [
-	HlmCarouselComponent,
-	HlmCarouselContentComponent,
-	HlmCarouselItemComponent,
-	HlmCarouselPreviousComponent,
-	HlmCarouselNextComponent,
-	HlmCarouselSlideDisplayComponent,
+	HlmCarousel,
+	HlmCarouselContent,
+	HlmCarouselItem,
+	HlmCarouselPrevious,
+	HlmCarouselNext,
+	HlmCarouselSlideDisplay,
 ] as const;
 
 @NgModule({

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
-import { HlmCarouselComponent } from './hlm-carousel.component';
+import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'hlm-carousel-content',
@@ -14,8 +14,8 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 		<ng-content />
 	`,
 })
-export class HlmCarouselContentComponent {
-	private readonly _orientation = inject(HlmCarouselComponent).orientation;
+export class HlmCarouselContent {
+	private readonly _orientation = inject(HlmCarousel).orientation;
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
-import { HlmCarouselComponent } from './hlm-carousel.component';
+import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'hlm-carousel-item',
@@ -16,9 +16,9 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 		<ng-content />
 	`,
 })
-export class HlmCarouselItemComponent {
+export class HlmCarouselItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	private readonly _orientation = inject(HlmCarouselComponent).orientation;
+	private readonly _orientation = inject(HlmCarousel).orientation;
 	protected readonly _computedClass = computed(() =>
 		hlm('min-w-0 shrink-0 grow-0 basis-full', this._orientation() === 'horizontal' ? 'pl-4' : 'pt-4', this.userClass()),
 	);

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

@@ -11,10 +11,10 @@ import {
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowRight } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/helm/button';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
-import { HlmCarouselComponent } from './hlm-carousel.component';
+import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
@@ -24,17 +24,17 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 		'[disabled]': 'isDisabled()',
 		'(click)': '_carousel.scrollNext()',
 	},
-	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
+	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
 	providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 	template: `
 		<ng-icon hlm size="sm" name="lucideArrowRight" />
 		<span class="sr-only">Next slide</span>
 	`,
 })
-export class HlmCarouselNextComponent {
-	private readonly _button = inject(HlmButtonDirective);
-	protected readonly _carousel = inject(HlmCarouselComponent);
+export class HlmCarouselNext {
+	private readonly _button = inject(HlmButton);
+	protected readonly _carousel = inject(HlmCarousel);
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	private readonly _computedClass = computed(() =>
 		hlm(

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

@@ -11,10 +11,10 @@ import {
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowLeft } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/helm/button';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
-import { HlmCarouselComponent } from './hlm-carousel.component';
+import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
@@ -24,18 +24,18 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 		'[disabled]': 'isDisabled()',
 		'(click)': '_carousel.scrollPrev()',
 	},
-	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
+	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
 	providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 	template: `
 		<ng-icon hlm size="sm" name="lucideArrowLeft" />
 		<span class="sr-only">Previous slide</span>
 	`,
 })
-export class HlmCarouselPreviousComponent {
-	private readonly _button = inject(HlmButtonDirective);
+export class HlmCarouselPrevious {
+	private readonly _button = inject(HlmButton);
 
-	protected readonly _carousel = inject(HlmCarouselComponent);
+	protected readonly _carousel = inject(HlmCarousel);
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { ClassValue } from 'clsx';
-import { HlmCarouselComponent } from './hlm-carousel.component';
+import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'hlm-carousel-slide-display',
@@ -15,8 +15,8 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmCarouselSlideDisplayComponent {
-	protected readonly _carousel = inject(HlmCarouselComponent);
+export class HlmCarouselSlideDisplay {
+	protected readonly _carousel = inject(HlmCarousel);
 
 	protected readonly _currentSlide = computed(() => this._carousel.currentSlide() + 1);
 

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

@@ -43,7 +43,7 @@ import {
 		<ng-content />
 	`,
 })
-export class HlmCarouselComponent {
+export class HlmCarousel {
 	protected readonly _emblaCarousel = viewChild.required(EmblaCarouselDirective);
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 
-import { HlmCheckboxComponent } from './lib/hlm-checkbox.component';
+import { HlmCheckbox } from './lib/hlm-checkbox';
 
-export * from './lib/hlm-checkbox.component';
+export * from './lib/hlm-checkbox';
 
-export const HlmCheckboxImports = [HlmCheckboxComponent] as const;
+export const HlmCheckboxImports = [HlmCheckbox] as const;
 @NgModule({
 	imports: [...HlmCheckboxImports],
 	exports: [...HlmCheckboxImports],

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

@@ -13,21 +13,21 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
-import { BrnCheckboxComponent } from '@spartan-ng/brain/checkbox';
+import { BrnCheckbox } from '@spartan-ng/brain/checkbox';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
 
 export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	provide: NG_VALUE_ACCESSOR,
-	useExisting: forwardRef(() => HlmCheckboxComponent),
+	useExisting: forwardRef(() => HlmCheckbox),
 	multi: true,
 };
 
 @Component({
 	selector: 'hlm-checkbox',
-	imports: [BrnCheckboxComponent, NgIcon, HlmIconDirective],
+	imports: [BrnCheckbox, NgIcon, HlmIcon],
 	template: `
 		<brn-checkbox
 			[id]="id()"
@@ -61,7 +61,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	viewProviders: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmCheckboxComponent implements ControlValueAccessor {
+export class HlmCheckbox implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>

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

@@ -1,47 +1,47 @@
 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 { 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 { HlmCommandComponent } from './lib/hlm-command.component';
+import { HlmCommand } from './lib/hlm-command';
+import { HlmCommandDialog } from './lib/hlm-command-dialog';
+import { HlmCommandDialogCloseButton } from './lib/hlm-command-dialog-close-button';
+import { HlmCommandEmpty } from './lib/hlm-command-empty';
+import { HlmCommandGroup } from './lib/hlm-command-group';
+import { HlmCommandGroupLabel } from './lib/hlm-command-group-label';
+import { HlmCommandIcon } from './lib/hlm-command-icon';
+import { HlmCommandItem } from './lib/hlm-command-item';
+import { HlmCommandList } from './lib/hlm-command-list';
+import { HlmCommandSearch } from './lib/hlm-command-search';
+import { HlmCommandSearchInput } from './lib/hlm-command-search-input';
+import { HlmCommandSeparator } from './lib/hlm-command-separator';
+import { HlmCommandShortcut } from './lib/hlm-command-shortcut';
 
-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-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.component';
+export * from './lib/hlm-command';
+export * from './lib/hlm-command-dialog';
+export * from './lib/hlm-command-dialog-close-button';
+export * from './lib/hlm-command-empty';
+export * from './lib/hlm-command-group';
+export * from './lib/hlm-command-group-label';
+export * from './lib/hlm-command-icon';
+export * from './lib/hlm-command-item';
+export * from './lib/hlm-command-list';
+export * from './lib/hlm-command-search';
+export * from './lib/hlm-command-search-input';
+export * from './lib/hlm-command-separator';
+export * from './lib/hlm-command-shortcut';
 
 export const HlmCommandImports = [
-	HlmCommandComponent,
-	HlmCommandItemComponent,
-	HlmCommandSeparatorComponent,
-	HlmCommandGroupComponent,
-	HlmCommandListComponent,
-	HlmCommandShortcutComponent,
-	HlmCommandIconDirective,
-	HlmCommandDialogCloseButtonDirective,
-	HlmCommandDialogDirective,
-	HlmCommandSearchInputComponent,
-	HlmCommandSearchComponent,
-	HlmCommandGroupLabelComponent,
-	HlmCommandEmptyDirective,
+	HlmCommand,
+	HlmCommandItem,
+	HlmCommandSeparator,
+	HlmCommandGroup,
+	HlmCommandList,
+	HlmCommandShortcut,
+	HlmCommandIcon,
+	HlmCommandDialogCloseButton,
+	HlmCommandDialog,
+	HlmCommandSearchInput,
+	HlmCommandSearch,
+	HlmCommandGroupLabel,
+	HlmCommandEmpty,
 ] as const;
 
 @NgModule({

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

@@ -1,19 +1,19 @@
 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/helm/button';
+import { BrnDialogClose } from '@spartan-ng/brain/dialog';
+import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
 import { provideHlmIconConfig } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmCommandDialogCloseBtn]',
-	hostDirectives: [HlmButtonDirective, BrnDialogCloseDirective],
+	hostDirectives: [HlmButton, BrnDialogClose],
 	providers: [provideBrnButtonConfig({ variant: 'ghost' }), provideHlmIconConfig({ size: 'xs' })],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmCommandDialogCloseButtonDirective {
+export class HlmCommandDialogCloseButton {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(