@spartan-ng/cli 0.0.1-alpha.335 → 0.0.1-alpha.337

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -17,14 +17,6 @@ export type InputErrorVariants = VariantProps<typeof inputErrorVariants>;
 	},
 })
 export class HlmInputErrorDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(inputErrorVariants(), this._userCls());
-	}
+	private 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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, Input, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -45,13 +45,8 @@ export class HlmInputDirective {
 		this._error.set(value);
 	}
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(inputVariants({ size: this._size(), error: this._error() }), this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(inputVariants({ size: this._size(), error: this._error() }), this._userClass()),
+	);
 }

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

@@ -1,11 +1,11 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { computed, Directive, inject, Input, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnLabelDirective } from '@spartan-ng/ui-label-brain';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
 export const labelVariants = cva(
-	'text-sm font-medium leading-none [&:has([hlmInput]:disabled)]:cursor-not-allowed [&:has([hlmInput]:disabled)]:opacity-70',
+	'text-sm font-medium leading-none [&>[hlmInput]]:my-1 [&:has([hlmInput]:disabled)]:cursor-not-allowed [&:has([hlmInput]:disabled)]:opacity-70',
 	{
 		variants: {
 			variant: {
@@ -45,6 +45,7 @@ export type LabelVariants = VariantProps<typeof labelVariants>;
 export class HlmLabelDirective {
 	private readonly _brn = inject(BrnLabelDirective, { host: true });
 
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			labelVariants({
@@ -52,7 +53,7 @@ export class HlmLabelDirective {
 				error: this._error(),
 				disabled: this._brn?.dataDisabled() ?? 'auto',
 			}),
-			this._userCls(),
+			this._userClass(),
 		),
 	);
 
@@ -67,11 +68,4 @@ export class HlmLabelDirective {
 	set error(value: LabelVariants['error']) {
 		this._error.set(value);
 	}
-
-	private readonly _userCls = signal<ClassValue>('');
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuItemDirective } from '@spartan-ng/ui-menu-brain';
 import { ClassValue } from 'clsx';
@@ -12,17 +12,11 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnMenuItemDirective],
 })
 export class HlmMenuBarItemDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

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

@@ -1,4 +1,4 @@
-import { Component, computed, Input, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuBarDirective } from '@spartan-ng/ui-menu-brain';
 import { ClassValue } from 'clsx';
@@ -13,14 +13,8 @@ import { ClassValue } from 'clsx';
 	template: '<ng-content/>',
 })
 export class HlmMenuBarComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('border-border flex h-10 items-center space-x-1 rounded-md border bg-background p-1', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('border-border flex h-10 items-center space-x-1 rounded-md border bg-background p-1', this._userClass()),
+	);
 }

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

@@ -1,5 +1,5 @@
-import { Component, computed, Input, signal } from '@angular/core';
-import { radixCheck } from '@ng-icons/radix-icons';
+import { Component, computed, input } from '@angular/core';
+import { lucideCheck } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { ClassValue } from 'clsx';
@@ -7,24 +7,22 @@ import { ClassValue } from 'clsx';
 @Component({
 	selector: 'hlm-menu-item-check',
 	standalone: true,
-	providers: [provideIcons({ radixCheck })],
+	providers: [provideIcons({ lucideCheck })],
 	imports: [HlmIconComponent],
 	template: `
-		<hlm-icon size="none" class="h-full w-full" name="radixCheck" />
+		<!-- Using 1rem for size to mimick h-4 w-4 -->
+		<hlm-icon size="1rem" name="lucideCheck" />
 	`,
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmMenuItemCheckComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('group-[.checked]:opacity-100 opacity-0 inline-block mr-2 h-5 w-5', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _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-checkbox.directive.ts.template

@@ -1,4 +1,4 @@
-import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuItemCheckboxDirective } from '@spartan-ng/ui-menu-brain';
 import { ClassValue } from 'clsx';
@@ -18,24 +18,11 @@ import { ClassValue } from 'clsx';
 	],
 })
 export class HlmMenuItemCheckboxDirective {
-	private readonly _inset = signal<ClassValue>(false);
-
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-	@Input({ transform: booleanAttribute })
-	set inset(value: boolean) {
-		this._inset.set(value);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
-			'group w-full relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
-			this._inset() && 'pl-10',
-			this._userCls(),
-		);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'group w-full relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
+			this._userClass(),
+		),
+	);
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { computed, Directive, inject, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
 import { ClassValue } from 'clsx';
@@ -17,14 +17,7 @@ export class HlmMenuItemIconDirective {
 		if (!this._menuIcon) return;
 		this._menuIcon.size = 'none';
 	}
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('mr-2 h-4 w-4', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('mr-2 h-4 w-4', this._userClass()));
 }

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

@@ -1,5 +1,5 @@
-import { Component, computed, Input, signal } from '@angular/core';
-import { radixDotFilled } from '@ng-icons/radix-icons';
+import { Component, computed, input } from '@angular/core';
+import { lucideCircle } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { ClassValue } from 'clsx';
@@ -7,24 +7,22 @@ import { ClassValue } from 'clsx';
 @Component({
 	selector: 'hlm-menu-item-radio',
 	standalone: true,
-	providers: [provideIcons({ radixDotFilled })],
+	providers: [provideIcons({ lucideCircle })],
 	imports: [HlmIconComponent],
 	template: `
-		<hlm-icon size="none" class="h-full w-full" name="radixDotFilled" />
+		<!-- Using 0.5rem for size to mimick h-2 w-2 -->
+		<hlm-icon size="0.5rem" class="*:*:fill-current" name="lucideCircle" />
 	`,
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmMenuItemRadioComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('group-[.checked]:opacity-100 opacity-0 inline-block mr-2 h-5 w-5', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _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

@@ -1,4 +1,4 @@
-import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuItemRadioDirective } from '@spartan-ng/ui-menu-brain';
 import { ClassValue } from 'clsx';
@@ -18,24 +18,11 @@ import { ClassValue } from 'clsx';
 	],
 })
 export class HlmMenuItemRadioDirective {
-	private readonly _inset = signal<ClassValue>(false);
-
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-	@Input({ transform: booleanAttribute })
-	set inset(value: boolean) {
-		this._inset.set(value);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
-			'group w-full relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
-			this._inset() && 'pl-10',
-			this._userCls(),
-		);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'group w-full relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
+			this._userClass(),
+		),
+	);
 }

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

@@ -1,5 +1,5 @@
-import { Component, Input, computed, signal } from '@angular/core';
-import { radixChevronRight } from '@ng-icons/radix-icons';
+import { Component, computed, input } from '@angular/core';
+import { lucideChevronRight } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { ClassValue } from 'clsx';
@@ -7,24 +7,16 @@ import { ClassValue } from 'clsx';
 @Component({
 	selector: 'hlm-menu-item-sub-indicator',
 	standalone: true,
-	providers: [provideIcons({ radixChevronRight })],
+	providers: [provideIcons({ lucideChevronRight })],
 	imports: [HlmIconComponent],
 	template: `
-		<hlm-icon size="none" class="h-full w-full" name="radixChevronRight" />
+		<hlm-icon size="none" class="h-full w-full" name="lucideChevronRight" />
 	`,
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmMenuItemSubIndicatorComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('inline-block ml-auto h-4 w-4', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('inline-block ml-auto h-4 w-4', this._userClass()));
 }

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

@@ -1,13 +1,13 @@
-import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
+import { Directive, Input, booleanAttribute, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuItemDirective } from '@spartan-ng/ui-menu-brain';
-import { cva, VariantProps } from 'class-variance-authority';
+import { VariantProps, cva } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
 export const hlmMenuItemVariants = cva(
 	'group w-full relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
 	{
-		variants: { inset: { true: 'pl-10', false: '' } },
+		variants: { inset: { true: 'pl-8', false: '' } },
 		defaultVariants: { inset: false },
 	},
 );
@@ -30,21 +30,11 @@ export type HlmMenuItemVariants = VariantProps<typeof hlmMenuItemVariants>;
 export class HlmMenuItemDirective {
 	private readonly _inset = signal<boolean>(false);
 
-	private readonly _userCls = signal<ClassValue>('');
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmMenuItemVariants({ inset: this._inset() }), this._userClass()));
 
 	@Input({ transform: booleanAttribute })
 	set inset(value: boolean) {
 		this._inset.set(value);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-
-	private _generateClass() {
-		return hlm(hlmMenuItemVariants({ inset: this._inset() }), this._userCls());
-	}
 }

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

@@ -1,4 +1,4 @@
-import { booleanAttribute, Component, computed, Input, signal } from '@angular/core';
+import { Component, Input, booleanAttribute, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -13,20 +13,14 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmMenuLabelComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('block px-2 py-1.5 text-sm font-semibold', this._inset() && 'pl-8', this._userClass()),
+	);
 
 	private readonly _inset = signal<ClassValue>(false);
 	@Input({ transform: booleanAttribute })
 	set inset(value: boolean) {
 		this._inset.set(value);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('block px-2 py-1.5 text-sm font-semibold', this._inset() && 'pl-10', this._userCls());
-	}
 }

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

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -11,14 +11,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmMenuSeparatorComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('block -mx-1 my-1 h-px bg-muted', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('block -mx-1 my-1 h-px bg-muted', this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -13,14 +13,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmMenuShortcutComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._userClass()),
+	);
 }

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

@@ -1,7 +1,7 @@
-import { Component, computed, Input, signal } from '@angular/core';
+import { Component, Input, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuDirective } from '@spartan-ng/ui-menu-brain';
-import { cva, VariantProps } from 'class-variance-authority';
+import { VariantProps, cva } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
 export const menuVariants = cva(
@@ -32,20 +32,12 @@ type MenuVariants = VariantProps<typeof menuVariants>;
 	`,
 })
 export class HlmMenuComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(menuVariants({ variant: this._variant() }), this._userClass()));
 
 	private readonly _variant = signal<MenuVariants['variant']>('default');
 	@Input()
 	set variant(value: MenuVariants['variant']) {
 		this._variant.set(value);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(menuVariants({ variant: this._variant() }), this._userCls());
-	}
 }

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

@@ -1,4 +1,4 @@
-import { Component, computed, Input, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuDirective } from '@spartan-ng/ui-menu-brain';
 import { ClassValue } from 'clsx';
@@ -15,17 +15,11 @@ import { ClassValue } from 'clsx';
 	`,
 })
 export class HlmSubMenuComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'border-border min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

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

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+
+import { HlmPaginationContentDirective } from './lib/hlm-pagination-content.directive';
+import { HlmPaginationEllipsisComponent } from './lib/hlm-pagination-ellipsis.componet';
+import { HlmPaginationItemDirective } from './lib/hlm-pagination-item.directive';
+import { HlmPaginationLinkDirective } from './lib/hlm-pagination-link.directive';
+import { HlmPaginationNextComponent } from './lib/hlm-pagination-next.componet';
+import { HlmPaginationPreviousComponent } from './lib/hlm-pagination-previous.componet';
+import { HlmPaginationDirective } from './lib/hlm-pagination.directive';
+
+export * from './lib/hlm-pagination-content.directive';
+export * from './lib/hlm-pagination-ellipsis.componet';
+export * from './lib/hlm-pagination-item.directive';
+export * from './lib/hlm-pagination-link.directive';
+export * from './lib/hlm-pagination-next.componet';
+export * from './lib/hlm-pagination-previous.componet';
+export * from './lib/hlm-pagination.directive';
+
+export const HlmPaginationImports = [
+	HlmPaginationDirective,
+	HlmPaginationContentDirective,
+	HlmPaginationItemDirective,
+	HlmPaginationLinkDirective,
+	HlmPaginationPreviousComponent,
+	HlmPaginationNextComponent,
+	HlmPaginationEllipsisComponent,
+] as const;
+
+@NgModule({
+	imports: [...HlmPaginationImports],
+	exports: [...HlmPaginationImports],
+})
+export class HlmPaginationModule {}

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

@@ -0,0 +1,21 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { cva, VariantProps } from 'class-variance-authority';
+
+export const paginationContentVariants = cva('flex flex-row items-center gap-1', {
+	variants: {},
+	defaultVariants: {},
+});
+export type PaginationContentVariants = VariantProps<typeof paginationContentVariants>;
+
+@Directive({
+	selector: '[hlmPaginationContent]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmPaginationContentDirective {
+	public readonly class = input('');
+	protected readonly _computedClass = computed(() => hlm(paginationContentVariants(), this.class()));
+}

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-pagination-ellipsis.componet.ts.template

@@ -0,0 +1,23 @@
+import { Component, computed, input } from '@angular/core';
+import { lucideMoreHorizontal } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
+
+@Component({
+	selector: 'hlm-pagination-ellipsis',
+	standalone: true,
+	imports: [HlmPaginationLinkDirective, HlmIconComponent],
+	providers: [provideIcons({ lucideMoreHorizontal })],
+	template: `
+		<span [class]="_computedClass()">
+			<hlm-icon size="sm" name="lucideMoreHorizontal" />
+			<span class="sr-only">More pages</span>
+		</span>
+	`,
+})
+export class HlmPaginationEllipsisComponent {
+	public readonly class = input('');
+
+	protected _computedClass = computed(() => hlm('flex h-9 w-9 items-center justify-center', this.class()));
+}