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

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

@@ -1,35 +1,35 @@
 import { NgModule } from '@angular/core';
 
-import { HlmAlertDialogActionButtonDirective } from './lib/hlm-alert-dialog-action-button.directive';
-import { HlmAlertDialogCancelButtonDirective } from './lib/hlm-alert-dialog-cancel-button.directive';
-import { HlmAlertDialogContentComponent } from './lib/hlm-alert-dialog-content.component';
-import { HlmAlertDialogDescriptionDirective } from './lib/hlm-alert-dialog-description.directive';
-import { HlmAlertDialogFooterComponent } from './lib/hlm-alert-dialog-footer.component';
-import { HlmAlertDialogHeaderComponent } from './lib/hlm-alert-dialog-header.component';
-import { HlmAlertDialogOverlayDirective } from './lib/hlm-alert-dialog-overlay.directive';
-import { HlmAlertDialogTitleDirective } from './lib/hlm-alert-dialog-title.directive';
-import { HlmAlertDialogComponent } from './lib/hlm-alert-dialog.component';
+import { HlmAlertDialog } from './lib/hlm-alert-dialog';
+import { HlmAlertDialogActionButton } from './lib/hlm-alert-dialog-action-button';
+import { HlmAlertDialogCancelButton } from './lib/hlm-alert-dialog-cancel-button';
+import { HlmAlertDialogContent } from './lib/hlm-alert-dialog-content';
+import { HlmAlertDialogDescription } from './lib/hlm-alert-dialog-description';
+import { HlmAlertDialogFooter } from './lib/hlm-alert-dialog-footer';
+import { HlmAlertDialogHeader } from './lib/hlm-alert-dialog-header';
+import { HlmAlertDialogOverlay } from './lib/hlm-alert-dialog-overlay';
+import { HlmAlertDialogTitle } from './lib/hlm-alert-dialog-title';
 
-export * from './lib/hlm-alert-dialog-action-button.directive';
-export * from './lib/hlm-alert-dialog-cancel-button.directive';
-export * from './lib/hlm-alert-dialog-content.component';
-export * from './lib/hlm-alert-dialog-description.directive';
-export * from './lib/hlm-alert-dialog-footer.component';
-export * from './lib/hlm-alert-dialog-header.component';
-export * from './lib/hlm-alert-dialog-overlay.directive';
-export * from './lib/hlm-alert-dialog-title.directive';
-export * from './lib/hlm-alert-dialog.component';
+export * from './lib/hlm-alert-dialog';
+export * from './lib/hlm-alert-dialog-action-button';
+export * from './lib/hlm-alert-dialog-cancel-button';
+export * from './lib/hlm-alert-dialog-content';
+export * from './lib/hlm-alert-dialog-description';
+export * from './lib/hlm-alert-dialog-footer';
+export * from './lib/hlm-alert-dialog-header';
+export * from './lib/hlm-alert-dialog-overlay';
+export * from './lib/hlm-alert-dialog-title';
 
 export const HlmAlertDialogImports = [
-	HlmAlertDialogContentComponent,
-	HlmAlertDialogDescriptionDirective,
-	HlmAlertDialogFooterComponent,
-	HlmAlertDialogHeaderComponent,
-	HlmAlertDialogOverlayDirective,
-	HlmAlertDialogTitleDirective,
-	HlmAlertDialogActionButtonDirective,
-	HlmAlertDialogCancelButtonDirective,
-	HlmAlertDialogComponent,
+	HlmAlertDialogContent,
+	HlmAlertDialogDescription,
+	HlmAlertDialogFooter,
+	HlmAlertDialogHeader,
+	HlmAlertDialogOverlay,
+	HlmAlertDialogTitle,
+	HlmAlertDialogActionButton,
+	HlmAlertDialogCancelButton,
+	HlmAlertDialog,
 ] as const;
 
 @NgModule({

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-action-button.ts.template

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { HlmButton } from '@spartan-ng/helm/button';
+
+@Directive({
+	selector: 'button[hlmAlertDialogAction]',
+	hostDirectives: [HlmButton],
+})
+export class HlmAlertDialogActionButton {}

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

@@ -1,17 +1,17 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/helm/button';
+import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'button[hlmAlertDialogCancel]',
-	hostDirectives: [HlmButtonDirective],
+	hostDirectives: [HlmButton],
 	providers: [provideBrnButtonConfig({ variant: 'outline' })],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmAlertDialogCancelButtonDirective {
+export class HlmAlertDialogCancelButton {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('mt-2 sm:mt-0', this.userClass()));
 }

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

@@ -14,7 +14,7 @@ import type { ClassValue } from 'clsx';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 })
-export class HlmAlertDialogContentComponent {
+export class HlmAlertDialogContent {
 	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
 	public readonly state = this._stateProvider?.state ?? signal('closed');
 

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { BrnAlertDialogDescriptionDirective } from '@spartan-ng/brain/alert-dialog';
+import { BrnAlertDialogDescription } from '@spartan-ng/brain/alert-dialog';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
@@ -8,9 +8,9 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnAlertDialogDescriptionDirective],
+	hostDirectives: [BrnAlertDialogDescription],
 })
-export class HlmAlertDialogDescriptionDirective {
+export class HlmAlertDialogDescription {
 	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-alert-dialog-helm/files/lib/{hlm-alert-dialog-footer.component.ts.template → hlm-alert-dialog-footer.ts.template}

@@ -13,7 +13,7 @@ import type { ClassValue } from 'clsx';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 })
-export class HlmAlertDialogFooterComponent {
+export class HlmAlertDialogFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.userClass()),

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

@@ -13,7 +13,7 @@ import type { ClassValue } from 'clsx';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 })
-export class HlmAlertDialogHeaderComponent {
+export class HlmAlertDialogHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('flex flex-col gap-2 text-center sm:text-left', this.userClass()),

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

@@ -5,7 +5,7 @@ import type { ClassValue } from 'clsx';
 @Directive({
 	selector: '[hlmAlertDialogOverlay],brn-alert-dialog-overlay[hlm]',
 })
-export class HlmAlertDialogOverlayDirective {
+export class HlmAlertDialogOverlay {
 	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { BrnAlertDialogTitleDirective } from '@spartan-ng/brain/alert-dialog';
+import { BrnAlertDialogTitle } from '@spartan-ng/brain/alert-dialog';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
@@ -8,9 +8,9 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnAlertDialogTitleDirective],
+	hostDirectives: [BrnAlertDialogTitle],
 })
-export class HlmAlertDialogTitleDirective {
+export class HlmAlertDialogTitle {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('text-lg font-semibold', this.userClass()));
 }

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

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
 import {
 	BRN_ALERT_DIALOG_DEFAULT_OPTIONS,
-	BrnAlertDialogComponent,
-	BrnAlertDialogOverlayComponent,
+	BrnAlertDialog,
+	BrnAlertDialogOverlay,
 } from '@spartan-ng/brain/alert-dialog';
-import { BrnDialogComponent, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
-import { HlmAlertDialogOverlayDirective } from './hlm-alert-dialog-overlay.directive';
+import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { HlmAlertDialogOverlay } from './hlm-alert-dialog-overlay';
 
 @Component({
 	selector: 'hlm-alert-dialog',
@@ -15,8 +15,8 @@ import { HlmAlertDialogOverlayDirective } from './hlm-alert-dialog-overlay.direc
 	`,
 	providers: [
 		{
-			provide: BrnDialogComponent,
-			useExisting: forwardRef(() => HlmAlertDialogComponent),
+			provide: BrnDialog,
+			useExisting: forwardRef(() => HlmAlertDialog),
 		},
 		provideBrnDialogDefaultOptions({
 			...BRN_ALERT_DIALOG_DEFAULT_OPTIONS,
@@ -25,6 +25,6 @@ import { HlmAlertDialogOverlayDirective } from './hlm-alert-dialog-overlay.direc
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 	exportAs: 'hlmAlertDialog',
-	imports: [BrnAlertDialogOverlayComponent, HlmAlertDialogOverlayDirective],
+	imports: [BrnAlertDialogOverlay, HlmAlertDialogOverlay],
 })
-export class HlmAlertDialogComponent extends BrnAlertDialogComponent {}
+export class HlmAlertDialog extends BrnAlertDialog {}

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

@@ -1,21 +1,16 @@
 import { NgModule } from '@angular/core';
 
-import { HlmAlertDescriptionDirective } from './lib/hlm-alert-description.directive';
-import { HlmAlertIconDirective } from './lib/hlm-alert-icon.directive';
-import { HlmAlertTitleDirective } from './lib/hlm-alert-title.directive';
-import { HlmAlertDirective } from './lib/hlm-alert.directive';
+import { HlmAlert } from './lib/hlm-alert';
+import { HlmAlertDescription } from './lib/hlm-alert-description';
+import { HlmAlertIcon } from './lib/hlm-alert-icon';
+import { HlmAlertTitle } from './lib/hlm-alert-title';
 
-export * from './lib/hlm-alert-description.directive';
-export * from './lib/hlm-alert-icon.directive';
-export * from './lib/hlm-alert-title.directive';
-export * from './lib/hlm-alert.directive';
+export * from './lib/hlm-alert';
+export * from './lib/hlm-alert-description';
+export * from './lib/hlm-alert-icon';
+export * from './lib/hlm-alert-title';
 
-export const HlmAlertImports = [
-	HlmAlertDirective,
-	HlmAlertTitleDirective,
-	HlmAlertDescriptionDirective,
-	HlmAlertIconDirective,
-] as const;
+export const HlmAlertImports = [HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertIcon] as const;
 
 @NgModule({
 	imports: [...HlmAlertImports],

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

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

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

@@ -5,4 +5,4 @@ import { provideHlmIconConfig } from '@spartan-ng/helm/icon';
 	selector: '[hlmAlertIcon]',
 	providers: [provideHlmIconConfig({ size: 'sm' })],
 })
-export class HlmAlertIconDirective {}
+export class HlmAlertIcon {}

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

@@ -8,7 +8,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmAlertTitleDirective {
+export class HlmAlertTitle {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', this.userClass()),

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

@@ -28,7 +28,7 @@ export type AlertVariants = VariantProps<typeof alertVariants>;
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmAlertDirective {
+export class HlmAlert {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm(alertVariants({ variant: this.variant() }), this.userClass()));
 

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { HlmAspectRatioDirective } from './lib/helm-aspect-ratio.directive';
+import { HlmAspectRatio } from './lib/helm-aspect-ratio';
 
-export * from './lib/helm-aspect-ratio.directive';
+export * from './lib/helm-aspect-ratio';
 
 @NgModule({
-	imports: [HlmAspectRatioDirective],
-	exports: [HlmAspectRatioDirective],
+	imports: [HlmAspectRatio],
+	exports: [HlmAspectRatio],
 })
 export class HlmAspectRatioModule {}

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

@@ -18,7 +18,7 @@ const parseDividedString = (value: NumberInput): NumberInput => {
 		'[style.padding-bottom]': '_computedPaddingBottom()',
 	},
 })
-export class HlmAspectRatioDirective implements AfterViewInit {
+export class HlmAspectRatio implements AfterViewInit {
 	private readonly _el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
 
 	public readonly ratio = input(1, {

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

@@ -1,14 +1,14 @@
 import { NgModule } from '@angular/core';
 
-import { HlmAvatarFallbackDirective } from './lib/fallback';
-import { HlmAvatarComponent } from './lib/hlm-avatar.component';
-import { HlmAvatarImageDirective } from './lib/image';
+import { HlmAvatarFallback } from './lib/fallback';
+import { HlmAvatar } from './lib/hlm-avatar';
+import { HlmAvatarImage } from './lib/image';
 
 export * from './lib/fallback';
-export * from './lib/hlm-avatar.component';
+export * from './lib/hlm-avatar';
 export * from './lib/image';
 
-export const HlmAvatarImports = [HlmAvatarFallbackDirective, HlmAvatarImageDirective, HlmAvatarComponent] as const;
+export const HlmAvatarImports = [HlmAvatarFallback, HlmAvatarImage, HlmAvatar] as const;
 
 @NgModule({
 	imports: [...HlmAvatarImports],

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

@@ -1,5 +1,5 @@
 import { Directive, computed, inject } from '@angular/core';
-import { BrnAvatarFallbackDirective } from '@spartan-ng/brain/avatar';
+import { BrnAvatarFallback } from '@spartan-ng/brain/avatar';
 import { hlm } from '@spartan-ng/brain/core';
 
 @Directive({
@@ -7,7 +7,7 @@ import { hlm } from '@spartan-ng/brain/core';
 	exportAs: 'avatarFallback',
 	hostDirectives: [
 		{
-			directive: BrnAvatarFallbackDirective,
+			directive: BrnAvatarFallback,
 			inputs: ['class'],
 		},
 	],
@@ -15,8 +15,8 @@ import { hlm } from '@spartan-ng/brain/core';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmAvatarFallbackDirective {
-	private readonly _brn = inject(BrnAvatarFallbackDirective);
+export class HlmAvatarFallback {
+	private readonly _brn = inject(BrnAvatarFallback);
 
 	protected readonly _computedClass = computed(() => {
 		return hlm('bg-muted flex size-full items-center justify-center rounded-full', this._brn?.userClass());

package/src/generators/ui/libs/ui-avatar-helm/files/lib/fallback/index.ts.template

@@ -1 +1 @@
-export * from './hlm-avatar-fallback.directive';
+export * from './hlm-avatar-fallback';

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
-import { BrnAvatarComponent } from '@spartan-ng/brain/avatar';
+import { BrnAvatar } from '@spartan-ng/brain/avatar';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
@@ -18,7 +18,7 @@ import type { ClassValue } from 'clsx';
 		}
 	`,
 })
-export class HlmAvatarComponent extends BrnAvatarComponent {
+export class HlmAvatar extends BrnAvatar {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>

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

@@ -1,18 +1,18 @@
 import { Directive, computed, inject, input } from '@angular/core';
-import { BrnAvatarImageDirective } from '@spartan-ng/brain/avatar';
+import { BrnAvatarImage } from '@spartan-ng/brain/avatar';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'img[hlmAvatarImage]',
 	exportAs: 'avatarImage',
-	hostDirectives: [BrnAvatarImageDirective],
+	hostDirectives: [BrnAvatarImage],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmAvatarImageDirective {
-	public canShow = inject(BrnAvatarImageDirective).canShow;
+export class HlmAvatarImage {
+	public canShow = inject(BrnAvatarImage).canShow;
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() => hlm('aspect-square size-full', this.userClass()));

package/src/generators/ui/libs/ui-avatar-helm/files/lib/image/index.ts.template

@@ -1 +1 @@
-export * from './hlm-avatar-image.directive';
+export * from './hlm-avatar-image';

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

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
-import { HlmBadgeDirective } from './lib/hlm-badge.directive';
+import { HlmBadge } from './lib/hlm-badge';
 
-export * from './lib/hlm-badge.directive';
+export * from './lib/hlm-badge';
 
-export const HlmBadgeImports = [HlmBadgeDirective] as const;
+export const HlmBadgeImports = [HlmBadge] as const;
 
 @NgModule({
 	imports: [...HlmBadgeImports],

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

@@ -29,7 +29,7 @@ export type BadgeVariants = VariantProps<typeof badgeVariants>;
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmBadgeDirective {
+export class HlmBadge {
 	protected readonly _computedClass = computed(() => hlm(badgeVariants({ variant: this.variant() }), this.userClass()));
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,28 +1,28 @@
 import { NgModule } from '@angular/core';
-import { HlmBreadcrumbEllipsisComponent } from './lib/hlm-breadcrumb-ellipsis.component';
-import { HlmBreadcrumbItemDirective } from './lib/hlm-breadcrumb-item.directive';
-import { HlmBreadcrumbLinkDirective } from './lib/hlm-breadcrumb-link.directive';
-import { HlmBreadcrumbListDirective } from './lib/hlm-breadcrumb-list.directive';
-import { HlmBreadcrumbPageDirective } from './lib/hlm-breadcrumb-page.directive';
-import { HlmBreadcrumbSeparatorComponent } from './lib/hlm-breadcrumb-separator.component';
-import { HlmBreadcrumbDirective } from './lib/hlm-breadcrumb.directive';
+import { HlmBreadcrumb } from './lib/hlm-breadcrumb';
+import { HlmBreadcrumbEllipsis } from './lib/hlm-breadcrumb-ellipsis';
+import { HlmBreadcrumbItem } from './lib/hlm-breadcrumb-item';
+import { HlmBreadcrumbLink } from './lib/hlm-breadcrumb-link';
+import { HlmBreadcrumbList } from './lib/hlm-breadcrumb-list';
+import { HlmBreadcrumbPage } from './lib/hlm-breadcrumb-page';
+import { HlmBreadcrumbSeparator } from './lib/hlm-breadcrumb-separator';
 
-export * from './lib/hlm-breadcrumb-ellipsis.component';
-export * from './lib/hlm-breadcrumb-item.directive';
-export * from './lib/hlm-breadcrumb-link.directive';
-export * from './lib/hlm-breadcrumb-list.directive';
-export * from './lib/hlm-breadcrumb-page.directive';
-export * from './lib/hlm-breadcrumb-separator.component';
-export * from './lib/hlm-breadcrumb.directive';
+export * from './lib/hlm-breadcrumb';
+export * from './lib/hlm-breadcrumb-ellipsis';
+export * from './lib/hlm-breadcrumb-item';
+export * from './lib/hlm-breadcrumb-link';
+export * from './lib/hlm-breadcrumb-list';
+export * from './lib/hlm-breadcrumb-page';
+export * from './lib/hlm-breadcrumb-separator';
 
 export const HlmBreadCrumbImports = [
-	HlmBreadcrumbDirective,
-	HlmBreadcrumbEllipsisComponent,
-	HlmBreadcrumbSeparatorComponent,
-	HlmBreadcrumbItemDirective,
-	HlmBreadcrumbLinkDirective,
-	HlmBreadcrumbPageDirective,
-	HlmBreadcrumbListDirective,
+	HlmBreadcrumb,
+	HlmBreadcrumbEllipsis,
+	HlmBreadcrumbSeparator,
+	HlmBreadcrumbItem,
+	HlmBreadcrumbLink,
+	HlmBreadcrumbPage,
+	HlmBreadcrumbList,
 ] as const;
 
 @NgModule({

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

@@ -2,12 +2,12 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideEllipsis } 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-breadcrumb-ellipsis',
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideEllipsis })],
 	template: `
 		<span role="presentation" aria-hidden="true" [class]="_computedClass()">
@@ -17,7 +17,7 @@ import type { ClassValue } from 'clsx';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmBreadcrumbEllipsisComponent {
+export class HlmBreadcrumbEllipsis {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** Screen reader only text for the ellipsis */
 	public readonly srOnlyText = input<string>('More');

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

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

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

@@ -27,7 +27,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmBreadcrumbLinkDirective {
+export class HlmBreadcrumbLink {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** The link to navigate to the page. */
 	public readonly link = input<RouterLink['routerLink']>();

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

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

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

@@ -11,7 +11,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmBreadcrumbPageDirective {
+export class HlmBreadcrumbPage {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() => hlm('font-normal text-foreground', this.userClass()));

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

@@ -21,7 +21,7 @@ import type { ClassValue } from 'clsx';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmBreadcrumbSeparatorComponent {
+export class HlmBreadcrumbSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() => hlm('[&_ng-icon]:size-3.5 [&_ng-icon]:block', this.userClass()));

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

@@ -10,7 +10,7 @@ import type { ClassValue } from 'clsx';
 		'[attr.aria-label]': 'ariaLabel()',
 	},
 })
-export class HlmBreadcrumbDirective {
+export class HlmBreadcrumb {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly ariaLabel = input<string>('breadcrumb', { alias: 'aria-label' });
 

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { HlmButtonDirective } from './lib/hlm-button.directive';
-export * from './lib/hlm-button.directive';
+import { HlmButton } from './lib/hlm-button';
+export * from './lib/hlm-button';
 export * from './lib/hlm-button.token';
 
 @NgModule({
-	imports: [HlmButtonDirective],
-	exports: [HlmButtonDirective],
+	imports: [HlmButton],
+	exports: [HlmButton],
 })
 export class HlmButtonModule {}

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

@@ -1,5 +1,5 @@
 import { InjectionToken, ValueProvider, inject } from '@angular/core';
-import type { ButtonVariants } from './hlm-button.directive';
+import type { ButtonVariants } from './hlm-button';
 
 export interface BrnButtonConfig {
 	variant: ButtonVariants['variant'];

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

@@ -41,7 +41,7 @@ export type ButtonVariants = VariantProps<typeof buttonVariants>;
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmButtonDirective {
+export class HlmButton {
 	private readonly _config = injectBrnButtonConfig();
 
 	private readonly _additionalClasses = signal<ClassValue>('');

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

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
-import { HlmCalendarMultiComponent } from './lib/hlm-calendar-multi.component';
-import { HlmCalendarComponent } from './lib/hlm-calendar.component';
+import { HlmCalendar } from './lib/hlm-calendar';
+import { HlmCalendarMulti } from './lib/hlm-calendar-multi';
 
-export * from './lib/hlm-calendar-multi.component';
-export * from './lib/hlm-calendar.component';
+export * from './lib/hlm-calendar';
+export * from './lib/hlm-calendar-multi';
 
-export const HlmCalendarImports = [HlmCalendarComponent, HlmCalendarMultiComponent] as const;
+export const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti] as const;
 
 @NgModule({
 	imports: [...HlmCalendarImports],