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

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

@@ -0,0 +1,56 @@
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { buttonVariants, ButtonVariants } from '@spartan-ng/ui-button-helm';
+import { hlm } from '@spartan-ng/ui-core';
+import { cva, VariantProps } from 'class-variance-authority';
+
+export const paginationLinkVariants = cva('', {
+	variants: {},
+	defaultVariants: {},
+});
+export type PaginationLinkVariants = VariantProps<typeof paginationLinkVariants>;
+
+@Directive({
+	selector: '[hlmPaginationLink]',
+	standalone: true,
+	hostDirectives: [
+		{
+			directive: RouterLink,
+			inputs: [
+				'target',
+				'queryParams',
+				'fragment',
+				'queryParamsHandling',
+				'state',
+				'info',
+				'relativeTo',
+				'preserveFragment',
+				'skipLocationChange',
+				'replaceUrl',
+				'routerLink: link',
+			],
+		},
+	],
+	host: {
+		'[class]': '_computedClass()',
+		'[attr.aria-current]': 'isActive() ? "page" : null',
+	},
+})
+export class HlmPaginationLinkDirective {
+	public readonly class = input('');
+	public readonly isActive = input(false, { transform: booleanAttribute });
+	public readonly size = input<ButtonVariants['size']>('icon');
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	public readonly link = input<string | any[] | null | undefined>();
+
+	protected _computedClass = computed(() =>
+		hlm(
+			paginationLinkVariants(),
+			buttonVariants({
+				variant: this.isActive() ? 'outline' : 'ghost',
+				size: this.size(),
+			}),
+			this.class(),
+		),
+	);
+}

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

@@ -0,0 +1,31 @@
+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 { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
+
+@Component({
+	selector: 'hlm-pagination-next',
+	standalone: true,
+	imports: [HlmPaginationLinkDirective, HlmIconComponent],
+	providers: [provideIcons({ lucideChevronRight })],
+	template: `
+		<a
+			[class]="_computedClass()"
+			hlmPaginationLink
+			[link]="link()"
+			size="default"
+			[attr.aria-label]="'Go to next page'"
+		>
+			<span>Next</span>
+			<hlm-icon size="sm" name="lucideChevronRight" />
+		</a>
+	`,
+})
+export class HlmPaginationNextComponent {
+	public readonly class = input('');
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	public readonly link = input<string | any[] | null | undefined>();
+
+	protected _computedClass = computed(() => hlm('gap-1 pr-2.5', this.class()));
+}

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

@@ -0,0 +1,31 @@
+import { Component, computed, input } from '@angular/core';
+import { lucideChevronLeft } 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-previous',
+	standalone: true,
+	imports: [HlmPaginationLinkDirective, HlmIconComponent],
+	providers: [provideIcons({ lucideChevronLeft })],
+	template: `
+		<a
+			[class]="_computedClass()"
+			hlmPaginationLink
+			[link]="link()"
+			size="default"
+			[attr.aria-label]="'Go to previous page'"
+		>
+			<hlm-icon size="sm" name="lucideChevronLeft" />
+			<span>Previous</span>
+		</a>
+	`,
+})
+export class HlmPaginationPreviousComponent {
+	public readonly class = input('');
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	public readonly link = input<string | any[] | null | undefined>();
+
+	protected _computedClass = computed(() => hlm('gap-1 pr-2.5', this.class()));
+}

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

@@ -0,0 +1,25 @@
+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';
+
+export const paginationVariants = cva('mx-auto flex w-full justify-center', {
+	variants: {},
+	defaultVariants: {},
+});
+export type PaginationVariants = VariantProps<typeof paginationVariants>;
+
+@Directive({
+	selector: '[hlmPagination]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+		'[attr.role]': '"navigation"',
+		'[attr.aria-label]': '"pagination"',
+	},
+})
+export class HlmPaginationDirective {
+	public readonly class = input<ClassValue>('');
+
+	protected _computedClass = computed(() => hlm(paginationVariants(), this.class()));
+}

package/src/generators/ui/libs/ui-pagination-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-pagination-helm/generator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = void 0;
+const tslib_1 = require("tslib");
+const generator_1 = require("../../../base/generator");
+function generator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield (0, generator_1.default)(tree, Object.assign(Object.assign({}, options), { primitiveName: 'pagination', internalName: 'ui-pagination-helm', publicName: 'ui-pagination-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-pagination-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-pagination-helm/generator.ts"],"names":[],"mappings":";;;;AACA,uDAAuD;AAGvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,YAAY,EAC3B,YAAY,EAAE,oBAAoB,EAClC,UAAU,EAAE,oBAAoB,IAC/B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,17 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmPopoverCloseDirective {
-	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(
 			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
 import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -21,17 +21,11 @@ export class HlmPopoverContentDirective {
 		});
 	}
 
-	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(
 			'relative border-border w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-progress-helm/files/lib/hlm-progress-indicator.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, DoCheck, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { Directive, DoCheck, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -14,16 +14,10 @@ export class HlmProgressIndicatorDirective implements DoCheck {
 	private _renderer = inject(Renderer2);
 	private readonly _value = signal(0);
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('inline-flex transform-gpu h-full w-full flex-1 bg-primary transition-all', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('inline-flex transform-gpu h-full w-full flex-1 bg-primary transition-all', this._userClass()),
+	);
 
 	constructor() {
 		effect(() => {

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,14 +10,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmProgressDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('inline-flex relative h-4 w-full overflow-hidden rounded-full bg-secondary', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('inline-flex relative h-4 w-full overflow-hidden rounded-full bg-secondary', this._userClass()),
+	);
 }

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

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

package/src/generators/ui/libs/ui-radio-group-helm/files/lib/hlm-radio-indicator.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';
 
@@ -19,14 +19,6 @@ const btnLike =
 	`,
 })
 export class HlmRadioIndicatorComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('relative inline-flex h-4 w-4', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('relative inline-flex h-4 w-4', this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,14 +10,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmRadioDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2', this._userClass()),
+	);
 }

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

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { HlmSelectContentDirective } from './lib/hlm-select-content.directive';
+import { HlmSelectGroupDirective } from './lib/hlm-select-group.directive';
+import { HlmSelectLabelDirective } from './lib/hlm-select-label.directive';
+import { HlmSelectOptionComponent } from './lib/hlm-select-option.component';
+import { HlmSelectScrollDownComponent } from './lib/hlm-select-scroll-down.component';
+import { HlmSelectScrollUpComponent } from './lib/hlm-select-scroll-up.component';
+import { HlmSelectTriggerComponent } from './lib/hlm-select-trigger.component';
+import { HlmSelectValueDirective } from './lib/hlm-select-value.directive';
+import { HlmSelectDirective } from './lib/hlm-select.directive';
+
+export * from './lib/hlm-select-content.directive';
+export * from './lib/hlm-select-group.directive';
+export * from './lib/hlm-select-label.directive';
+export * from './lib/hlm-select-option.component';
+export * from './lib/hlm-select-scroll-down.component';
+export * from './lib/hlm-select-scroll-up.component';
+export * from './lib/hlm-select-trigger.component';
+export * from './lib/hlm-select-value.directive';
+export * from './lib/hlm-select.directive';
+
+export const HlmSelectImports = [
+	HlmSelectContentDirective,
+	HlmSelectTriggerComponent,
+	HlmSelectOptionComponent,
+	HlmSelectValueDirective,
+	HlmSelectDirective,
+	HlmSelectScrollUpComponent,
+	HlmSelectScrollDownComponent,
+	HlmSelectLabelDirective,
+	HlmSelectGroupDirective,
+] as const;
+
+@NgModule({
+	imports: [...HlmSelectImports],
+	exports: [...HlmSelectImports],
+})
+export class HlmSelectModule {}

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

@@ -0,0 +1,34 @@
+import { computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmSelectContent], hlm-select-content',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectContentDirective {
+	private readonly _classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this._classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'top-[2px] relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 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._classNames(),
+		),
+	);
+
+	private readonly _stickyLabels = signal(false);
+	@Input()
+	set stickyLabels(value: boolean) {
+		this._stickyLabels.set(value);
+	}
+	get stickyLabels() {
+		return this._stickyLabels();
+	}
+}

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

@@ -0,0 +1,22 @@
+import { computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BrnSelectGroupDirective } from '@spartan-ng/ui-select-brain';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmSelectGroup], hlm-select-group',
+	hostDirectives: [BrnSelectGroupDirective],
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectGroupDirective {
+	private readonly _classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this._classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() => hlm(this._classNames()));
+}

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

@@ -0,0 +1,38 @@
+import { computed, Directive, inject, Input, OnInit, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BrnSelectLabelDirective } from '@spartan-ng/ui-select-brain';
+import { ClassValue } from 'clsx';
+import { HlmSelectContentDirective } from './hlm-select-content.directive';
+
+@Directive({
+	selector: '[hlmSelectLabel], hlm-select-label',
+	hostDirectives: [BrnSelectLabelDirective],
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectLabelDirective implements OnInit {
+	private readonly selectContent = inject(HlmSelectContentDirective);
+	private readonly _stickyLabels = signal(false);
+
+	private readonly _classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this._classNames.set(classNames);
+	}
+	protected _computedClass = computed(() =>
+		hlm(
+			'px-2 py-1.5 text-sm font-semibold',
+			this._stickyLabels() ? 'sticky top-0 bg-popover block z-[2]' : '',
+			this._classNames(),
+		),
+	);
+
+	ngOnInit(): void {
+		if (this.selectContent.stickyLabels) {
+			this._stickyLabels.set(true);
+		}
+	}
+}

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

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, computed, inject, Input, signal } 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 { BrnSelectOptionDirective } from '@spartan-ng/ui-select-brain';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-option',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnSelectOptionDirective],
+	providers: [provideIcons({ lucideCheck })],
+	host: {
+		'[class]': '_computedClass()',
+	},
+	template: `
+		<ng-content />
+		<span
+			[attr.dir]="_brnSelectOption.dir()"
+			class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center rtl:left-2 rtl:right-auto"
+			[attr.data-state]="this._brnSelectOption.checkedState()"
+		>
+			@if (this._brnSelectOption.selected()) {
+				<hlm-icon aria-hidden="true" name="lucideCheck" />
+			}
+		</span>
+	`,
+	imports: [HlmIconComponent],
+})
+export class HlmSelectOptionComponent {
+	protected readonly _brnSelectOption = inject(BrnSelectOptionDirective, { host: true });
+
+	private readonly classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this.classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2  rtl:flex-reverse rtl:pl-8 rtl:pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			this.classNames(),
+		),
+	);
+
+	@Input()
+	set value(value: unknown | null) {
+		this._brnSelectOption.value = value;
+	}
+
+	@Input()
+	public disabled = false;
+}

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+
+@Component({
+	selector: 'hlm-select-scroll-down',
+	standalone: true,
+	imports: [HlmIconComponent],
+	providers: [provideIcons({ lucideChevronDown })],
+	host: {
+		class: 'flex cursor-default items-center justify-center py-1',
+	},
+	template: `
+		<hlm-icon class="ml-2 h-4 w-4" name="lucideChevronDown" />
+	`,
+})
+export class HlmSelectScrollDownComponent {}

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { lucideChevronUp } from '@ng-icons/lucide';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+
+@Component({
+	selector: 'hlm-select-scroll-up',
+	standalone: true,
+	imports: [HlmIconComponent],
+	providers: [provideIcons({ lucideChevronUp })],
+	host: {
+		class: 'flex cursor-default items-center justify-center py-1',
+	},
+	template: `
+		<hlm-icon class="ml-2 h-4 w-4" name="lucideChevronUp" />
+	`,
+})
+export class HlmSelectScrollUpComponent {}

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

@@ -0,0 +1,44 @@
+import { Component, computed, ContentChild, ElementRef, Input, signal, ViewChild } from '@angular/core';
+import { provideIcons } from '@ng-icons/core';
+import { lucideChevronsUpDown } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+import { BrnSelectTriggerDirective } from '@spartan-ng/ui-select-brain';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-select-trigger',
+	standalone: true,
+	imports: [BrnSelectTriggerDirective, HlmIconComponent],
+	providers: [provideIcons({ lucideChevronsUpDown })],
+	template: `
+		<button [class]="_computedClass()" #button brnSelectTrigger type="button">
+			<ng-content />
+			@if (icon) {
+				<ng-content select="hlm-icon" />
+			} @else {
+				<hlm-icon class="ml-2 h-4 w-4 flex-none" name="lucideChevronsUpDown" />
+			}
+		</button>
+	`,
+})
+export class HlmSelectTriggerComponent {
+	@ViewChild('button', { static: true })
+	public buttonEl!: ElementRef;
+
+	@ContentChild(HlmIconComponent, { static: false })
+	protected icon!: HlmIconComponent;
+
+	private readonly classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this.classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'flex h-10 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-[180px]',
+			this.classNames(),
+		),
+	);
+}

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

@@ -0,0 +1,26 @@
+import { computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'hlm-select-value,[hlmSelectValue], brn-select-value[hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectValueDirective {
+	private readonly classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this.classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'!inline-block ltr:text-left rtl:text-right border-border w-[calc(100%)]] min-w-0 pointer-events-none truncate',
+			this.classNames(),
+		),
+	);
+}