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

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

@@ -2,14 +2,14 @@ import { ChangeDetectionStrategy, Component, computed, inject, input } from '@an
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnSelectOptionDirective } from '@spartan-ng/brain/select';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { BrnSelectOption } from '@spartan-ng/brain/select';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-option',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	hostDirectives: [{ directive: BrnSelectOptionDirective, inputs: ['disabled', 'value'] }],
+	hostDirectives: [{ directive: BrnSelectOption, inputs: ['disabled', 'value'] }],
 	providers: [provideIcons({ lucideCheck })],
 	host: {
 		'[class]': '_computedClass()',
@@ -23,10 +23,10 @@ import type { ClassValue } from 'clsx';
 
 		<ng-content />
 	`,
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 })
-export class HlmSelectOptionComponent {
-	protected readonly _brnSelectOption = inject(BrnSelectOptionDirective, { host: true });
+export class HlmSelectOption {
+	protected readonly _brnSelectOption = inject(BrnSelectOption, { host: true });
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

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

@@ -2,12 +2,12 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } 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-select-scroll-down',
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronDown })],
 	host: {
 		'[class]': '_computedClass()',
@@ -17,7 +17,7 @@ import { ClassValue } from 'clsx';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSelectScrollDownComponent {
+export class HlmSelectScrollDown {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('flex cursor-default items-center justify-center py-1', this.userClass()),

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

@@ -2,12 +2,12 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronUp } 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-select-scroll-up',
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronUp })],
 	host: {
 		'[class]': '_computedClass()',
@@ -17,7 +17,7 @@ import { ClassValue } from 'clsx';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSelectScrollUpComponent {
+export class HlmSelectScrollUp {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('flex cursor-default items-center justify-center py-1', this.userClass()),

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

@@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component, computed, contentChild, inject, inp
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnSelectComponent, BrnSelectTriggerDirective } from '@spartan-ng/brain/select';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { BrnSelect, BrnSelectTrigger } from '@spartan-ng/brain/select';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import { cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
@@ -24,7 +24,7 @@ export const selectTriggerVariants = cva(
 
 @Component({
 	selector: 'hlm-select-trigger',
-	imports: [BrnSelectTriggerDirective, NgIcon, HlmIconDirective],
+	imports: [BrnSelectTrigger, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronDown })],
 	template: `
 		<button [class]="_computedClass()" #button hlmInput brnSelectTrigger type="button" [attr.data-size]="size()">
@@ -38,10 +38,10 @@ export const selectTriggerVariants = cva(
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSelectTriggerComponent {
-	protected readonly _icon = contentChild(HlmIconDirective);
+export class HlmSelectTrigger {
+	protected readonly _icon = contentChild(HlmIcon);
 
-	protected readonly _brnSelect = inject(BrnSelectComponent, { optional: true });
+	protected readonly _brnSelect = inject(BrnSelect, { optional: true });
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 

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

@@ -8,7 +8,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmSelectValueDirective {
+export class HlmSelectValue {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('line-clamp-1 flex items-center gap-2 data-[placeholder]:text-muted-foreground', this.userClass()),

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

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

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { HlmSeparatorDirective } from './lib/hlm-separator.directive';
+import { HlmSeparator } from './lib/hlm-separator';
 
-export * from './lib/hlm-separator.directive';
+export * from './lib/hlm-separator';
 
 @NgModule({
-	imports: [HlmSeparatorDirective],
-	exports: [HlmSeparatorDirective],
+	imports: [HlmSeparator],
+	exports: [HlmSeparator],
 })
 export class HlmSeparatorModule {}

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

@@ -9,7 +9,7 @@ export type HlmSeparatorOrientation = 'horizontal' | 'vertical';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmSeparatorDirective {
+export class HlmSeparator {
 	public readonly orientation = input<HlmSeparatorOrientation>('horizontal');
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>

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

@@ -1,32 +1,32 @@
 import { NgModule } from '@angular/core';
 
-import { HlmSheetCloseDirective } from './lib/hlm-sheet-close.directive';
-import { HlmSheetContentComponent } from './lib/hlm-sheet-content.component';
-import { HlmSheetDescriptionDirective } from './lib/hlm-sheet-description.directive';
-import { HlmSheetFooterComponent } from './lib/hlm-sheet-footer.component';
-import { HlmSheetHeaderComponent } from './lib/hlm-sheet-header.component';
-import { HlmSheetOverlayDirective } from './lib/hlm-sheet-overlay.directive';
-import { HlmSheetTitleDirective } from './lib/hlm-sheet-title.directive';
-import { HlmSheetComponent } from './lib/hlm-sheet.component';
+import { HlmSheet } from './lib/hlm-sheet';
+import { HlmSheetClose } from './lib/hlm-sheet-close';
+import { HlmSheetContent } from './lib/hlm-sheet-content';
+import { HlmSheetDescription } from './lib/hlm-sheet-description';
+import { HlmSheetFooter } from './lib/hlm-sheet-footer';
+import { HlmSheetHeader } from './lib/hlm-sheet-header';
+import { HlmSheetOverlay } from './lib/hlm-sheet-overlay';
+import { HlmSheetTitle } from './lib/hlm-sheet-title';
 
-export * from './lib/hlm-sheet-close.directive';
-export * from './lib/hlm-sheet-content.component';
-export * from './lib/hlm-sheet-description.directive';
-export * from './lib/hlm-sheet-footer.component';
-export * from './lib/hlm-sheet-header.component';
-export * from './lib/hlm-sheet-overlay.directive';
-export * from './lib/hlm-sheet-title.directive';
-export * from './lib/hlm-sheet.component';
+export * from './lib/hlm-sheet';
+export * from './lib/hlm-sheet-close';
+export * from './lib/hlm-sheet-content';
+export * from './lib/hlm-sheet-description';
+export * from './lib/hlm-sheet-footer';
+export * from './lib/hlm-sheet-header';
+export * from './lib/hlm-sheet-overlay';
+export * from './lib/hlm-sheet-title';
 
 export const HlmSheetImports = [
-	HlmSheetComponent,
-	HlmSheetCloseDirective,
-	HlmSheetContentComponent,
-	HlmSheetDescriptionDirective,
-	HlmSheetFooterComponent,
-	HlmSheetHeaderComponent,
-	HlmSheetOverlayDirective,
-	HlmSheetTitleDirective,
+	HlmSheet,
+	HlmSheetClose,
+	HlmSheetContent,
+	HlmSheetDescription,
+	HlmSheetFooter,
+	HlmSheetHeader,
+	HlmSheetOverlay,
+	HlmSheetTitle,
 ] as const;
 
 @NgModule({

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

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

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

@@ -12,11 +12,11 @@ import {
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
-import { BrnSheetCloseDirective } from '@spartan-ng/brain/sheet';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { BrnSheetClose } from '@spartan-ng/brain/sheet';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import { cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
-import { HlmSheetCloseDirective } from './hlm-sheet-close.directive';
+import { HlmSheetClose } from './hlm-sheet-close';
 
 export const sheetVariants = cva(
 	'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
@@ -39,7 +39,7 @@ export const sheetVariants = cva(
 
 @Component({
 	selector: 'hlm-sheet-content',
-	imports: [HlmSheetCloseDirective, BrnSheetCloseDirective, NgIcon, HlmIconDirective],
+	imports: [HlmSheetClose, BrnSheetClose, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideX })],
 	host: {
 		'[class]': '_computedClass()',
@@ -54,7 +54,7 @@ export const sheetVariants = cva(
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSheetContentComponent {
+export class HlmSheetContent {
 	private readonly _stateProvider = injectExposesStateProvider({ host: true });
 	private readonly _sideProvider = injectExposedSideProvider({ host: true });
 	public state = this._stateProvider.state ?? signal('closed');

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

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

@@ -12,7 +12,7 @@ import type { ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSheetFooterComponent {
+export class HlmSheetFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() => hlm('mt-auto flex flex-col gap-2 p-4', this.userClass()));
 }

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

@@ -12,7 +12,7 @@ import type { ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSheetHeaderComponent {
+export class HlmSheetHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() => hlm('flex flex-col gap-1.5 p-4', this.userClass()));
 }

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

@@ -8,7 +8,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmSheetOverlayDirective {
+export class HlmSheetOverlay {
 	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnSheetTitleDirective } from '@spartan-ng/brain/sheet';
+import { BrnSheetTitle } from '@spartan-ng/brain/sheet';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -8,9 +8,9 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnSheetTitleDirective],
+	hostDirectives: [BrnSheetTitle],
 })
-export class HlmSheetTitleDirective {
+export class HlmSheetTitle {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('text-foreground font-semibold', this.userClass()));
 }

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

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
+import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnSheet, BrnSheetOverlay } from '@spartan-ng/brain/sheet';
+import { HlmSheetOverlay } from './hlm-sheet-overlay';
+
+@Component({
+	selector: 'hlm-sheet',
+	imports: [BrnSheetOverlay, HlmSheetOverlay],
+	providers: [
+		{
+			provide: BrnDialog,
+			useExisting: forwardRef(() => BrnSheet),
+		},
+		{
+			provide: BrnSheet,
+			useExisting: forwardRef(() => HlmSheet),
+		},
+		provideBrnDialogDefaultOptions({
+			// add custom options here
+		}),
+	],
+	template: `
+		<brn-sheet-overlay hlm />
+		<ng-content />
+	`,
+	encapsulation: ViewEncapsulation.None,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	exportAs: 'hlmSheet',
+})
+export class HlmSheet extends BrnSheet {}

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

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
-import { HlmSkeletonComponent } from './lib/hlm-skeleton.component';
+import { HlmSkeleton } from './lib/hlm-skeleton';
 
-export * from './lib/hlm-skeleton.component';
+export * from './lib/hlm-skeleton';
 
-export const HlmSkeletonImports = [HlmSkeletonComponent] as const;
+export const HlmSkeletonImports = [HlmSkeleton] as const;
 
 @NgModule({
 	imports: [...HlmSkeletonImports],

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

@@ -10,7 +10,7 @@ import type { ClassValue } from 'clsx';
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSkeletonComponent {
+export class HlmSkeleton {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() => hlm('block animate-pulse rounded-md bg-muted', this.userClass()));
 }

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

@@ -1,4 +1,4 @@
-export * from './lib/hlm-slider.component';
-import { HlmSliderComponent } from './lib/hlm-slider.component';
+export * from './lib/hlm-slider';
+import { HlmSlider } from './lib/hlm-slider';
 
-export const HlmSliderImports = [HlmSliderComponent] as const;
+export const HlmSliderImports = [HlmSlider] as const;

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

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import {
-	BrnSliderDirective,
-	BrnSliderRangeDirective,
-	BrnSliderThumbDirective,
-	BrnSliderTickDirective,
-	BrnSliderTrackDirective,
+	BrnSlider,
+	BrnSliderRange,
+	BrnSliderThumb,
+	BrnSliderTick,
+	BrnSliderTrack,
 	injectBrnSlider,
 } from '@spartan-ng/brain/slider';
 import type { ClassValue } from 'clsx';
@@ -15,7 +15,7 @@ import type { ClassValue } from 'clsx';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
-			directive: BrnSliderDirective,
+			directive: BrnSlider,
 			inputs: ['value', 'disabled', 'min', 'max', 'step', 'showTicks'],
 			outputs: ['valueChange'],
 		},
@@ -45,9 +45,9 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	imports: [BrnSliderThumbDirective, BrnSliderTrackDirective, BrnSliderRangeDirective, BrnSliderTickDirective],
+	imports: [BrnSliderThumb, BrnSliderTrack, BrnSliderRange, BrnSliderTick],
 })
-export class HlmSliderComponent {
+export class HlmSlider {
 	protected readonly _slider = injectBrnSlider();
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 
-import { HlmToasterComponent } from './lib/hlm-toaster.component';
+import { HlmToaster } from './lib/hlm-toaster';
 
-export * from './lib/hlm-toaster.component';
+export * from './lib/hlm-toaster';
 
-export const HlmToasterImports = [HlmToasterComponent] as const;
+export const HlmToasterImports = [HlmToaster] as const;
 
 @NgModule({
 	imports: [...HlmToasterImports],

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

@@ -26,7 +26,7 @@ import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmToasterComponent {
+export class HlmToaster {
 	public readonly invert = input<ToasterProps['invert'], boolean | string>(false, {
 		transform: booleanAttribute,
 	});

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

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
-import { HlmSpinnerComponent } from './lib/hlm-spinner.component';
+import { HlmSpinner } from './lib/hlm-spinner';
 
-export * from './lib/hlm-spinner.component';
+export * from './lib/hlm-spinner';
 
-export const HlmSpinnerImports = [HlmSpinnerComponent] as const;
+export const HlmSpinnerImports = [HlmSpinner] as const;
 
 @NgModule({
 	imports: [...HlmSpinnerImports],

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

@@ -29,7 +29,7 @@ import type { ClassValue } from 'clsx';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSpinnerComponent {
+export class HlmSpinner {
 	public readonly userClass = input<ClassValue>('size-8', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('inline-block [&>svg]:text-foreground/30 [&>svg]:fill-accent', this.userClass()),

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

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 
-import { HlmSwitchThumbDirective } from './lib/hlm-switch-thumb.directive';
-import { HlmSwitchComponent } from './lib/hlm-switch.component';
+import { HlmSwitch } from './lib/hlm-switch';
+import { HlmSwitchThumb } from './lib/hlm-switch-thumb';
 
-export * from './lib/hlm-switch-thumb.directive';
-export * from './lib/hlm-switch.component';
+export * from './lib/hlm-switch';
+export * from './lib/hlm-switch-thumb';
 
-export const HlmSwitchImports = [HlmSwitchComponent, HlmSwitchThumbDirective] as const;
+export const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb] as const;
 @NgModule({
 	imports: [...HlmSwitchImports],
 	exports: [...HlmSwitchImports],

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

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

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

@@ -13,18 +13,18 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { hlm } from '@spartan-ng/brain/core';
 import { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
-import { BrnSwitchComponent, BrnSwitchThumbComponent } from '@spartan-ng/brain/switch';
+import { BrnSwitch, BrnSwitchThumb } from '@spartan-ng/brain/switch';
 import type { ClassValue } from 'clsx';
-import { HlmSwitchThumbDirective } from './hlm-switch-thumb.directive';
+import { HlmSwitchThumb } from './hlm-switch-thumb';
 export const HLM_SWITCH_VALUE_ACCESSOR = {
 	provide: NG_VALUE_ACCESSOR,
-	useExisting: forwardRef(() => HlmSwitchComponent),
+	useExisting: forwardRef(() => HlmSwitch),
 	multi: true,
 };
 
 @Component({
 	selector: 'hlm-switch',
-	imports: [BrnSwitchThumbComponent, BrnSwitchComponent, HlmSwitchThumbDirective],
+	imports: [BrnSwitchThumb, BrnSwitch, HlmSwitchThumb],
 	host: {
 		class: 'contents',
 		'[attr.id]': 'null',
@@ -50,7 +50,7 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 	providers: [HLM_SWITCH_VALUE_ACCESSOR],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSwitchComponent implements ControlValueAccessor {
+export class HlmSwitch implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

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

@@ -1,28 +1,10 @@
 import { NgModule } from '@angular/core';
 
-import {
-	HlmCaptionDirective,
-	HlmTableDirective,
-	HlmTBodyDirective,
-	HlmTdDirective,
-	HlmTFootDirective,
-	HlmThDirective,
-	HlmTHeadDirective,
-	HlmTrDirective,
-} from './lib/hlm-table.directive';
+import { HlmCaption, HlmTable, HlmTBody, HlmTd, HlmTFoot, HlmTh, HlmTHead, HlmTr } from './lib/hlm-table';
 
-export * from './lib/hlm-table.directive';
+export * from './lib/hlm-table';
 
-export const HlmTableImports = [
-	HlmCaptionDirective,
-	HlmTableDirective,
-	HlmTBodyDirective,
-	HlmTdDirective,
-	HlmTFootDirective,
-	HlmThDirective,
-	HlmTHeadDirective,
-	HlmTrDirective,
-] as const;
+export const HlmTableImports = [HlmCaption, HlmTable, HlmTBody, HlmTd, HlmTFoot, HlmTh, HlmTHead, HlmTr] as const;
 
 @NgModule({
 	imports: [...HlmTableImports],