@spartan-ng/cli 0.0.1-alpha.360 → 0.0.1-alpha.362

package/src/generators/ui/libs/ui-form-field-helm/files/lib/form-field.spec.ts.template

@@ -0,0 +1,135 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+
+import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
+
+import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@spartan-ng/ui-forms-brain';
+import { HlmErrorDirective } from './hlm-error.directive';
+import { HlmFormFieldComponent } from './hlm-form-field.component';
+import { HlmHintDirective } from './hlm-hint.directive';
+
+const DIRECTIVES = [HlmFormFieldComponent, HlmErrorDirective, HlmHintDirective, HlmInputDirective];
+
+@Component({
+	standalone: true,
+	selector: 'single-form-field-example',
+	imports: [ReactiveFormsModule, ...DIRECTIVES],
+	template: `
+		<hlm-form-field>
+			<input
+				data-testid="hlm-input"
+				aria-label="Your Name"
+				[formControl]="name"
+				class="w-80"
+				hlmInput
+				type="text"
+				placeholder="Your Name"
+			/>
+			<hlm-error data-testid="hlm-error">Your name is required</hlm-error>
+			<hlm-hint data-testid="hlm-hint">This is your public display name.</hlm-hint>
+		</hlm-form-field>
+	`,
+})
+class SingleFormFieldMock {
+	name = new FormControl('', Validators.required);
+}
+
+@Component({
+	standalone: true,
+	selector: 'single-form-field-dirty-example',
+	imports: [ReactiveFormsModule, ...DIRECTIVES],
+	template: `
+		<hlm-form-field>
+			<input
+				data-testid="hlm-input"
+				aria-label="Your Name"
+				[formControl]="name"
+				class="w-80"
+				hlmInput
+				type="text"
+				placeholder="Your Name"
+			/>
+			<hlm-error data-testid="hlm-error">Your name is required</hlm-error>
+			<hlm-hint data-testid="hlm-hint">This is your public display name.</hlm-hint>
+		</hlm-form-field>
+	`,
+	providers: [{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }],
+})
+class SingleFormFieldDirtyMock {
+	name = new FormControl('', Validators.required);
+}
+
+
+describe('Hlm Form Field Component', () => {
+	const TEXT_HINT = 'This is your public display name.';
+	const TEXT_ERROR = 'Your name is required';
+
+	const setupFormField = async () => {
+		const { fixture } = await render(SingleFormFieldMock);
+		return {
+			user: userEvent.setup(),
+			fixture,
+			hint: screen.getByTestId('hlm-hint'),
+			error: () => screen.queryByTestId('hlm-error'),
+			trigger: screen.getByTestId('hlm-input'),
+		};
+	};
+
+	const setupFormFieldWithErrorStateDirty = async () => {
+		const { fixture } = await render(SingleFormFieldDirtyMock);
+		return {
+			user: userEvent.setup(),
+			fixture,
+			hint: screen.getByTestId('hlm-hint'),
+			error: () => screen.queryByTestId('hlm-error'),
+			trigger: screen.getByTestId('hlm-input'),
+		};
+	};
+
+	describe('SingleFormField', () => {
+		it('should show the hint if the errorState is false', async () => {
+			const { hint } = await setupFormField();
+
+			expect(hint.textContent).toBe(TEXT_HINT);
+		});
+
+		it('should show the error if the errorState is true', async () => {
+			const { user, error, trigger } = await setupFormField();
+
+			expect(error()).toBeNull();
+
+			await user.click(trigger);
+
+			await user.click(document.body);
+
+			expect(screen.queryByTestId('hlm-hint')).toBeNull();
+			expect(error()?.textContent?.trim()).toBe(TEXT_ERROR);
+		});
+	});
+
+	describe('SingleFormFieldDirty', () => {
+		it('should not display the error if the input does not have the dirty state due to the ErrorStateMatcher', async () => {
+			const { error, user, trigger } = await setupFormFieldWithErrorStateDirty();
+
+			await user.click(trigger);
+
+			await user.click(document.body);
+
+			expect(error()).toBeNull();
+		});
+
+		it('should display the error if the input has the dirty state due to the ErrorStateMatcher', async () => {
+			const { error, user, trigger } = await setupFormFieldWithErrorStateDirty();
+
+			await user.click(trigger);
+			await user.type(trigger, 'a');
+			await user.clear(trigger);
+
+			await user.click(document.body);
+
+			expect(error()?.textContent?.trim()).toBe(TEXT_ERROR);
+		});
+	});
+});

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

@@ -0,0 +1,10 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+    standalone: true,
+    selector: 'hlm-error',
+    host: {
+        class: 'block text-destructive text-sm font-medium'
+    }
+})
+export class HlmErrorDirective {}

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

@@ -0,0 +1,41 @@
+import { Component, type Signal, computed, contentChild, contentChildren, effect } from '@angular/core';
+
+import { BrnFormFieldControl } from '@spartan-ng/ui-form-field-brain';
+import { HlmErrorDirective } from './hlm-error.directive';
+
+@Component({
+	selector: 'hlm-form-field',
+	template: `
+		<ng-content></ng-content>
+
+		@switch (hasDisplayedMessage()) {
+			@case ('error') {
+				<ng-content select="hlm-error"></ng-content>
+			}
+			@default {
+				<ng-content select="hlm-hint"></ng-content>
+			}
+		}
+	`,
+	standalone: true,
+	host: {
+		class: 'space-y-2 block',
+	},
+})
+export class HlmFormFieldComponent {
+	control = contentChild(BrnFormFieldControl);
+
+	errorChildren = contentChildren(HlmErrorDirective);
+
+	hasDisplayedMessage: Signal<'error' | 'hint'> = computed(() => {
+		return this.errorChildren() && this.errorChildren().length > 0 && this.control()?.errorState() ? 'error' : 'hint';
+	});
+
+	constructor() {
+		effect(() => {
+			if(!this.control()) {
+				throw new Error('hlm-form-field must contain a BrnFormFieldControl.');
+			}
+		})
+	}
+}

package/src/generators/ui/libs/ui-form-field-helm/files/lib/hlm-hint.directive.ts.template

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: 'hlm-hint',
+	standalone: true,
+	host: {
+		class: 'block text-sm text-muted-foreground',
+	},
+})
+export class HlmHintDirective {}

package/src/generators/ui/libs/ui-form-field-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-form-field-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: 'formfield', internalName: 'ui-form-field-helm', publicName: 'ui-formfield-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-form-field-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,WAAW,EAC1B,YAAY,EAAE,oBAAoB,EAClC,UAAU,EAAE,mBAAmB,IAC9B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

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

@@ -1,5 +1,9 @@
-import { Directive, Input, computed, input, signal } from '@angular/core';
+import { Directive, type DoCheck, Injector, Input, computed, effect, inject, input, signal } from '@angular/core';
+import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { hlm } from '@spartan-ng/ui-core';
+import { BrnFormFieldControl } from '@spartan-ng/ui-form-field-brain';
+import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/ui-forms-brain';
+
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
@@ -31,8 +35,14 @@ type InputVariants = VariantProps<typeof inputVariants>;
 	host: {
 		'[class]': '_computedClass()',
 	},
+	providers: [
+		{
+			provide: BrnFormFieldControl,
+			useExisting: HlmInputDirective,
+		},
+	],
 })
-export class HlmInputDirective {
+export class HlmInputDirective implements BrnFormFieldControl, DoCheck {
 	private readonly _size = signal<InputVariants['size']>('default');
 	@Input()
 	set size(value: InputVariants['size']) {
@@ -49,4 +59,38 @@ export class HlmInputDirective {
 	protected _computedClass = computed(() =>
 		hlm(inputVariants({ size: this._size(), error: this._error() }), this.userClass()),
 	);
+
+	private injector = inject(Injector)
+
+	ngControl: NgControl | null = this.injector.get(NgControl, null);
+
+	errorStateTracker: ErrorStateTracker;
+
+	private defaultErrorStateMatcher = inject(ErrorStateMatcher);
+	private parentForm = inject(NgForm, { optional: true });
+	private parentFormGroup = inject(FormGroupDirective, { optional: true });
+
+	errorState = computed(() => this.errorStateTracker.errorState());
+	
+	constructor() {
+		this.errorStateTracker = new ErrorStateTracker(
+			this.defaultErrorStateMatcher,
+			this.ngControl,
+			this.parentFormGroup,
+			this.parentForm,
+		);
+
+		effect(
+			() => {
+				if (this.ngControl) {
+					this.error = this.errorStateTracker.errorState();
+				}
+			},
+			{ allowSignalWrites: true },
+		);
+	}
+
+	ngDoCheck() {
+		this.errorStateTracker.updateErrorState();
+	}
 }

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

@@ -1,19 +1,19 @@
 import { NgModule } from '@angular/core';
 
 import { HlmPaginationContentDirective } from './lib/hlm-pagination-content.directive';
-import { HlmPaginationEllipsisComponent } from './lib/hlm-pagination-ellipsis.componet';
+import { HlmPaginationEllipsisComponent } from './lib/hlm-pagination-ellipsis.component';
 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 { HlmPaginationNextComponent } from './lib/hlm-pagination-next.component';
+import { HlmPaginationPreviousComponent } from './lib/hlm-pagination-previous.component';
 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-ellipsis.component';
 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-next.component';
+export * from './lib/hlm-pagination-previous.component';
 export * from './lib/hlm-pagination.directive';
 
 export const HlmPaginationImports = [

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

@@ -1,9 +1,9 @@
-import { Component, ContentChild, type ElementRef, ViewChild, computed, input } from '@angular/core';
+import { Component, ContentChild, type ElementRef, ViewChild, computed, inject, input } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } 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 { BrnSelectComponent, BrnSelectTriggerDirective } from '@spartan-ng/ui-select-brain';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
@@ -40,7 +40,7 @@ type SelectTriggerVariants = VariantProps<typeof selectTriggerVariants>;
 			@if (icon) {
 				<ng-content select="hlm-icon" />
 			} @else {
-				<hlm-icon class="flex-none w-4 h-4 ml-2" name="lucideChevronDown" />
+				<hlm-icon class="ml-2 h-4 w-4 flex-none" name="lucideChevronDown" />
 			}
 		</button>
 	`,
@@ -52,11 +52,12 @@ export class HlmSelectTriggerComponent {
 	@ContentChild(HlmIconComponent, { static: false })
 	protected icon!: HlmIconComponent;
 
+	protected readonly brnSelect = inject(BrnSelectComponent, { optional: true });
+
 	public readonly _size = input<SelectTriggerVariants['size']>('default');
-	public readonly _error = input<SelectTriggerVariants['error']>('auto');
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected _computedClass = computed(() =>
-		hlm(selectTriggerVariants({ size: this._size(), error: this._error() }), this.userClass()),
+		hlm(selectTriggerVariants({ size: this._size(), error: this.brnSelect?.errorState() }), this.userClass()),
 	);
 }

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

@@ -0,0 +1,11 @@
+import { HlmSliderInputDirective } from './lib/hlm-slider-input.directive';
+import { HlmSliderThumbDirective } from './lib/hlm-slider-thumb.directive';
+import { HlmSliderTrackComponent } from './lib/hlm-slider-track.component';
+import { HlmSliderComponent } from './lib/hlm-slider.component';
+
+export const HlmSliderImports = [
+	HlmSliderComponent,
+	HlmSliderTrackComponent,
+	HlmSliderInputDirective,
+	HlmSliderThumbDirective,
+] as const;

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

@@ -0,0 +1,19 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BrnSliderInputDirective } from '@spartan-ng/ui-slider-brain';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'input[hlmSliderInput], input[brnSliderInput]',
+	standalone: true,
+	hostDirectives: [BrnSliderInputDirective],
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSliderInputDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('w-full h-5 -top-1.5 left-0 opacity-0 absolute cursor-pointer transition-all', this.userClass()),
+	);
+}

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

@@ -0,0 +1,27 @@
+import { Directive, computed, inject, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BRN_SLIDER, BrnSliderThumbDirective } from '@spartan-ng/ui-slider-brain';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'hlm-slider-thumb, brn-slider-thumb [hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+		'[attr.dir]': '_direction()',
+	},
+	hostDirectives: [BrnSliderThumbDirective],
+})
+export class HlmSliderThumbDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'-translate-y-1/2 h-5 w-5 absolute rounded-full top-1/2 ltr:left-0 rtl:right-0 bg-secondary border-2 border-black cursor-pointer pointer-events-none transition-all',
+			this._brnSlider.brnSliderTrack()?.brnSliderInput()?.isFocused() ? 'ring-2 ring-gray-400' : '',
+			this.userClass(),
+		),
+	);
+	protected _direction = computed(() => this._brnSlider.direction());
+
+	private readonly _brnSlider = inject(BRN_SLIDER);
+}

package/src/generators/ui/libs/ui-slider-helm/files/lib/hlm-slider-tick-mark.directive.ts.template

@@ -0,0 +1,29 @@
+import { Directive, computed, inject, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BRN_SLIDER, BrnSliderTickMarkDirective } from '@spartan-ng/ui-slider-brain';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmSliderTickMark]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+		'[attr.dir]': '_direction()',
+	},
+	hostDirectives: [{ directive: BrnSliderTickMarkDirective, inputs: ['data'] }],
+})
+export class HlmSliderTickMarkDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly active = input<boolean>();
+
+	protected _computedClass = computed(() =>
+		hlm(
+			'absolute w-1 h-1 top-0.5 rounded-full rtl:right-0',
+			this.active() ? 'bg-secondary' : 'bg-primary',
+			this.userClass(),
+		),
+	);
+	protected _direction = computed(() => this._brnSlider.direction());
+
+	private readonly _brnSlider = inject(BRN_SLIDER);
+}

package/src/generators/ui/libs/ui-slider-helm/files/lib/hlm-slider-tick-marks.directive.ts.template

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmSliderTickMarks]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSliderTickMarksDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('h-full w-full relative -top-4 cursor-pointer pointer-events-none transition-all', this.userClass()),
+	);
+}

package/src/generators/ui/libs/ui-slider-helm/files/lib/hlm-slider-track-active-fill.directive.ts.template

@@ -0,0 +1,26 @@
+import { Directive, computed, inject, input } from "@angular/core";
+import { hlm } from "@spartan-ng/ui-core";
+import { BRN_SLIDER, BrnSliderTrackActiveFillDirective } from "@spartan-ng/ui-slider-brain";
+import type { ClassValue } from "clsx";
+
+@Directive({
+	selector: '[hlmSliderTrackActiveFill]',
+	standalone: true,
+	hostDirectives: [BrnSliderTrackActiveFillDirective],
+	host: {
+		'[class]': '_computedClass()',
+		'[attr.dir]': '_direction()',
+	},
+})
+export class HlmSliderTrackActiveFillDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'h-full w-full absolute top-0 pointer-events-none bg-primary ltr:origin-left rtl:origin-right transition-all scale-x-0',
+			this.userClass(),
+		),
+	);
+	protected _direction = computed(() => this._brnSlider.direction());
+
+	private readonly _brnSlider = inject(BRN_SLIDER);
+}

package/src/generators/ui/libs/ui-slider-helm/files/lib/hlm-slider-track-active.directive.ts.template

@@ -0,0 +1,20 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmSliderTrackActive]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSliderTrackActiveDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'h-full w-full relative -top-2 pointer-events-none overflow-hidden rounded-full transition-all',
+			this.userClass(),
+		),
+	);
+}

package/src/generators/ui/libs/ui-slider-helm/files/lib/hlm-slider-track-inactive.directive.ts.template

@@ -0,0 +1,20 @@
+import { Directive, computed, input } from "@angular/core";
+import { hlm } from "@spartan-ng/ui-core";
+import type { ClassValue } from "clsx";
+
+@Directive({
+    selector: '[hlmSliderTrackInactive]',    
+    standalone: true,          
+    host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSliderTrackInactiveDirective {
+    public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'w-full h-full bg-secondary rounded-full transition-all',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BRN_SLIDER, BRN_SLIDER_TRACK, BrnSliderTrackDirective } from '@spartan-ng/ui-slider-brain';
+import type { ClassValue } from 'clsx';
+import { HlmSliderTickMarkDirective } from './hlm-slider-tick-mark.directive';
+import { HlmSliderTickMarksDirective } from './hlm-slider-tick-marks.directive';
+import { HlmSliderTrackActiveFillDirective } from './hlm-slider-track-active-fill.directive';
+import { HlmSliderTrackActiveDirective } from './hlm-slider-track-active.directive';
+import { HlmSliderTrackInactiveDirective } from './hlm-slider-track-inactive.directive';
+
+@Component({
+	selector: 'hlm-slider-track, brn-slider-track [hlm]',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content></ng-content>
+		<div class="flex w-full flex-wrap">
+			<div hlmSliderTrackInactive></div>
+			<div hlmSliderTrackActive>
+				<div hlmSliderTrackActiveFill></div>
+			</div>
+			@if (_brnSlider.showTickMarks()) {
+				<div hlmSliderTickMarks>
+					@for (tickMark of _brnSliderTrack.tickMarks(); track $index) {
+						<div
+							hlmSliderTickMark
+							[data]="{ tickMarkIndex: $index, totalTickMarks: _brnSliderTrack.tickMarks().length }"
+							[active]="tickMark"
+						></div>
+					}
+				</div>
+			}
+		</div>
+	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	hostDirectives: [BrnSliderTrackDirective],
+	imports: [
+		HlmSliderTrackInactiveDirective,
+		HlmSliderTrackActiveDirective,
+		HlmSliderTrackActiveFillDirective,
+		HlmSliderTickMarksDirective,
+		HlmSliderTickMarkDirective,
+	],
+})
+export class HlmSliderTrackComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('flex w-full h-2 px-3 self-center relative transition-all', this.userClass()),
+	);
+
+	protected readonly _brnSlider = inject(BRN_SLIDER);
+	protected readonly _brnSliderTrack = inject(BRN_SLIDER_TRACK, { host: true });
+}

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

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BRN_SLIDER, BrnSliderDirective } from '@spartan-ng/ui-slider-brain';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-slider, brn-slider [hlm]',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [
+		{
+			directive: BrnSliderDirective,
+			inputs: ['brnSliderDisabled: disabled', 'min', 'max', 'step', 'dir', 'label', 'ariaLabel', 'showTickMarks'],
+		},
+	],
+	template: '<ng-content/>',
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSliderComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('w-full h-5 flex relative', this._brnSlider.disabled() ? 'opacity-40' : '', this.userClass()),
+	);
+
+	private readonly _brnSlider = inject(BRN_SLIDER, { host: true });
+}

package/src/generators/ui/libs/ui-slider-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-slider-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: 'slider', internalName: 'ui-slider-helm', publicName: 'ui-slider-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-slider-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,QAAQ,EACvB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,gBAAgB,IAC3B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

package/src/generators/ui/libs/ui-tabs-helm/files/lib/hlm-tabs-paginated-list.component.ts.template

@@ -1,11 +1,11 @@
 import { CdkObserveContent } from '@angular/cdk/observers';
-import { Component, ContentChildren, ElementRef, QueryList, ViewChild, computed, input } from '@angular/core';
+import { Component, ContentChildren, type ElementRef, type QueryList, ViewChild, computed, input } from '@angular/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import { buttonVariants } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { BrnTabsPaginatedListDirective, BrnTabsTriggerDirective } from '@spartan-ng/ui-tabs-brain';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 import { listVariants } from './hlm-tabs-list.component';
 
 @Component({

package/src/generators/ui/primivite-deps.d.ts

@@ -0,0 +1,3 @@
+import type { Primitive } from './primivites';
+export declare const primitiveDependencies: Record<Primitive, Primitive[]>;
+export declare const getDependentPrimitives: (primitives: Primitive[]) => Primitive[];