@spartan-ng/cli 0.0.1-alpha.437 → 0.0.1-alpha.439

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker-multi.component.ts.template

@@ -0,0 +1,184 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	Component,
+	computed,
+	forwardRef,
+	input,
+	model,
+	numberAttribute,
+	output,
+	signal,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCalendar } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnDialogState } from '@spartan-ng/brain/dialog';
+import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
+import { BrnPopoverComponent, BrnPopoverContentDirective, BrnPopoverTriggerDirective } from '@spartan-ng/brain/popover';
+import { HlmCalendarMultiComponent } from '@spartan-ng/ui-calendar-helm';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
+import { HlmPopoverContentDirective } from '@spartan-ng/ui-popover-helm';
+import type { ClassValue } from 'clsx';
+import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
+
+export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => HlmDatePickerMultiComponent),
+	multi: true,
+};
+
+@Component({
+	selector: 'hlm-date-picker-multi',
+	imports: [
+		NgIcon,
+		HlmIconDirective,
+		BrnPopoverComponent,
+		BrnPopoverTriggerDirective,
+		BrnPopoverContentDirective,
+		HlmPopoverContentDirective,
+		HlmCalendarMultiComponent,
+	],
+	providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+	template: `
+		<brn-popover sideOffset="5" [state]="popoverState()" (stateChanged)="popoverState.set($event)">
+			<button type="button" [class]="_computedClass()" [disabled]="state().disabled()" brnPopoverTrigger>
+				<ng-icon hlm size="sm" name="lucideCalendar" />
+
+				<span class="truncate">
+					@if (formattedDate(); as formattedDate) {
+						{{ formattedDate }}
+					} @else {
+						<ng-content />
+					}
+				</span>
+			</button>
+
+			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+				<hlm-calendar-multi
+					calendarClass="border-0 rounded-none"
+					[date]="date()"
+					[min]="min()"
+					[max]="max()"
+					[minSelection]="minSelection()"
+					[maxSelection]="maxSelection()"
+					[disabled]="state().disabled()"
+					(dateChange)="_handleChange($event)"
+				/>
+			</div>
+		</brn-popover>
+	`,
+	host: {
+		class: 'block',
+	},
+})
+export class HlmDatePickerMultiComponent<T> {
+	private readonly _config = injectHlmDatePickerMultiConfig<T>();
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[280px] justify-start text-left font-normal',
+			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			'disabled:pointer-events-none disabled:opacity-50',
+			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+			!this.date() ? 'text-muted-foreground' : '',
+			this.userClass(),
+		),
+	);
+
+	/** The minimum date that can be selected.*/
+	public readonly min = input<T>();
+
+	/** The maximum date that can be selected. */
+	public readonly max = input<T>();
+
+	/** The minimum selectable dates.  */
+	public readonly minSelection = input<number, NumberInput>(undefined, {
+		transform: numberAttribute,
+	});
+
+	/** The maximum selectable dates.  */
+	public readonly maxSelection = input<number, NumberInput>(undefined, {
+		transform: numberAttribute,
+	});
+
+	/** Determine if the date picker is disabled. */
+	public readonly disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	/** The selected value. */
+	public readonly date = model<T[]>();
+
+	/** If true, the date picker will close when the max selection of dates is reached.. */
+	public readonly autoCloseOnMaxSelection = input<boolean, BooleanInput>(this._config.autoCloseOnMaxSelection, {
+		transform: booleanAttribute,
+	});
+
+	/** Defines how the date should be displayed in the UI.  */
+	public readonly formatDates = input<(date: T[]) => string>(this._config.formatDates);
+
+	/** Defines how the date should be transformed before saving to model/form. */
+	public readonly transformDates = input<(date: T[]) => T[]>(this._config.transformDates);
+
+	protected readonly popoverState = signal<BrnDialogState | null>(null);
+
+	protected readonly state = computed(() => ({
+		disabled: signal(this.disabled()),
+	}));
+
+	protected readonly formattedDate = computed(() => {
+		const dates = this.date();
+		return dates ? this.formatDates()(dates) : undefined;
+	});
+
+	public readonly changed = output<T[]>();
+
+	protected _onChange?: ChangeFn<T[]>;
+	protected _onTouched?: TouchFn;
+
+	protected _handleChange(value: T[] | undefined) {
+		if (value === undefined) return;
+
+		if (this.state().disabled()) return;
+		const transformedDate = this.transformDates()(value);
+
+		this.date.set(transformedDate);
+		this._onChange?.(transformedDate);
+		this.changed.emit(transformedDate);
+
+		if (this.autoCloseOnMaxSelection() && this.date()?.length === this.maxSelection()) {
+			this.popoverState.set('closed');
+		}
+	}
+
+	/** CONROL VALUE ACCESSOR */
+	writeValue(value: T[] | null): void {
+		// optional FormControl is initialized with null value
+		if (value === null) return;
+
+		this.date.set(this.transformDates()(value));
+	}
+
+	registerOnChange(fn: ChangeFn<T[]>): void {
+		this._onChange = fn;
+	}
+
+	registerOnTouched(fn: TouchFn): void {
+		this._onTouched = fn;
+	}
+
+	setDisabledState(isDisabled: boolean): void {
+		this.state().disabled.set(isDisabled);
+	}
+
+	open() {
+		this.popoverState.set('open');
+	}
+
+	close() {
+		this.popoverState.set('closed');
+	}
+}

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker-multi.token.ts.template

@@ -0,0 +1,43 @@
+import { inject, InjectionToken, ValueProvider } from '@angular/core';
+
+export interface HlmDatePickerMultiConfig<T> {
+	/**
+	 * If true, the date picker will close when the max selection of dates is reached.
+	 */
+	autoCloseOnMaxSelection: boolean;
+
+	/**
+	 * Defines how the date should be displayed in the UI.
+	 *
+	 * @param dates
+	 * @returns formatted date
+	 */
+	formatDates: (dates: T[]) => string;
+
+	/**
+	 * Defines how the date should be transformed before saving to model/form.
+	 *
+	 * @param dates
+	 * @returns transformed date
+	 */
+	transformDates: (dates: T[]) => T[];
+}
+
+function getDefaultConfig<T>(): HlmDatePickerMultiConfig<T> {
+	return {
+		formatDates: (dates) => dates.map((date) => (date instanceof Date ? date.toDateString() : `${date}`)).join(', '),
+		transformDates: (dates) => dates,
+		autoCloseOnMaxSelection: false,
+	};
+}
+
+const HlmDatePickerMultiConfigToken = new InjectionToken<HlmDatePickerMultiConfig<unknown>>('HlmDatePickerMultiConfig');
+
+export function provideHlmDatePickerConfig<T>(config: Partial<HlmDatePickerMultiConfig<T>>): ValueProvider {
+	return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+
+export function injectHlmDatePickerMultiConfig<T>(): HlmDatePickerMultiConfig<T> {
+	const injectedConfig = inject(HlmDatePickerMultiConfigToken, { optional: true });
+	return injectedConfig ? (injectedConfig as HlmDatePickerMultiConfig<T>) : getDefaultConfig();
+}

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

@@ -36,11 +36,13 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 			<button type="button" [class]="_computedClass()" [disabled]="state().disabled()" brnPopoverTrigger>
 				<ng-icon hlm size="sm" name="lucideCalendar" />
 
-				@if (formattedDate(); as formattedDate) {
-					{{ formattedDate }}
-				} @else {
-					<ng-content />
-				}
+				<span class="truncate">
+					@if (formattedDate(); as formattedDate) {
+						{{ formattedDate }}
+					} @else {
+						<ng-content />
+					}
+				</span>
 			</button>
 
 			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
@@ -77,7 +79,7 @@ export class HlmDatePickerComponent<T> {
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();
 
-	/* * The maximum date that can be selected. */
+	/** The maximum date that can be selected. */
 	public readonly max = input<T>();
 
 	/** Determine if the date picker is disabled. */

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

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { HlmInputOtpFakeCaretComponent } from './lib/hlm-input-otp-fake-caret.component';
+import { HlmInputOtpGroupDirective } from './lib/hlm-input-otp-group.directive';
+import { HlmInputOtpSeparatorComponent } from './lib/hlm-input-otp-separator.component';
+import { HlmInputOtpSlotComponent } from './lib/hlm-input-otp-slot.component';
+import { HlmInputOtpDirective } from './lib/hlm-input-otp.directive';
+
+export * from './lib/hlm-input-otp-fake-caret.component';
+export * from './lib/hlm-input-otp-group.directive';
+export * from './lib/hlm-input-otp-separator.component';
+export * from './lib/hlm-input-otp-slot.component';
+export * from './lib/hlm-input-otp.directive';
+
+@NgModule({
+	imports: [
+		HlmInputOtpDirective,
+		HlmInputOtpGroupDirective,
+		HlmInputOtpSeparatorComponent,
+		HlmInputOtpSlotComponent,
+		HlmInputOtpFakeCaretComponent,
+	],
+	exports: [
+		HlmInputOtpDirective,
+		HlmInputOtpGroupDirective,
+		HlmInputOtpSeparatorComponent,
+		HlmInputOtpSlotComponent,
+		HlmInputOtpFakeCaretComponent,
+	],
+})
+export class HlmInputOtpModule {}

package/src/generators/ui/libs/ui-input-otp-helm/files/lib/hlm-input-otp-fake-caret.component.ts.template

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'hlm-input-otp-fake-caret',
+	standalone: true,
+	template: `
+		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+		</div>
+	`,
+})
+export class HlmInputOtpFakeCaretComponent {}

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

@@ -0,0 +1,16 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { type ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmInputOtpGroup]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmInputOtpGroupDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() => hlm('flex items-center', this.userClass()));
+}

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

@@ -0,0 +1,25 @@
+import { Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideDot } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
+import { type ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-input-otp-separator',
+	standalone: true,
+	imports: [HlmIconDirective, NgIcon],
+	providers: [provideIcons({ lucideDot })],
+	template: `
+		<ng-icon hlm name="lucideDot" />
+	`,
+	host: {
+		role: 'separator',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmInputOtpSeparatorComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() => hlm(this.userClass()));
+}

package/src/generators/ui/libs/ui-input-otp-helm/files/lib/hlm-input-otp-slot.component.ts.template

@@ -0,0 +1,33 @@
+import { NumberInput } from '@angular/cdk/coercion';
+import { Component, computed, input, numberAttribute } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnInputOtpSlotComponent } from '@spartan-ng/brain/input-otp';
+import { type ClassValue } from 'clsx';
+import { HlmInputOtpFakeCaretComponent } from './hlm-input-otp-fake-caret.component';
+
+@Component({
+	selector: 'hlm-input-otp-slot',
+	standalone: true,
+	imports: [BrnInputOtpSlotComponent, HlmInputOtpFakeCaretComponent],
+	template: `
+		<brn-input-otp-slot [index]="index()">
+			<hlm-input-otp-fake-caret />
+		</brn-input-otp-slot>
+	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmInputOtpSlotComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	public readonly index = input.required<number, NumberInput>({ transform: numberAttribute });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+			'has-[brn-input-otp-slot[data-active="true"]]:z-10 has-[brn-input-otp-slot[data-active="true"]]:ring-2 has-[brn-input-otp-slot[data-active="true"]]:ring-ring has-[brn-input-otp-slot[data-active="true"]]:ring-offset-background',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,18 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { type ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'brn-input-otp [hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmInputOtpDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm('flex items-center gap-2 has-[:disabled]:opacity-50', this.userClass()),
+	);
+}

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

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

package/src/generators/ui/libs/ui-input-otp-helm/generator.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'inputotp',
+        internalName: 'ui-input-otp-helm',
+        publicName: 'ui-inputotp-helm',
+    });
+}
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-input-otp-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,UAAU;QACzB,YAAY,EAAE,mBAAmB;QACjC,UAAU,EAAE,kBAAkB;KAC9B,CAAC,CAAC;AACJ,CAAC"}

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

@@ -8,7 +8,7 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const selectTriggerVariants = cva(
-	'flex items-center justify-between rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+	'flex items-center justify-between rounded-md border border-input bg-background text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
 	{
 		variants: {
 			size: {

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

@@ -13,7 +13,7 @@ export class HlmSelectValueDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	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',
+			'!inline-block ltr:text-left rtl:text-right border-border w-[calc(100%)]] min-w-0 pointer-events-none truncate data-[placeholder]:text-muted-foreground',
 			this.userClass(),
 		),
 	);

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

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

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

@@ -1,6 +1,13 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BRN_SLIDER, BrnSliderDirective } from '@spartan-ng/brain/slider';
+import {
+	BrnSliderDirective,
+	BrnSliderRangeDirective,
+	BrnSliderThumbDirective,
+	BrnSliderTickDirective,
+	BrnSliderTrackDirective,
+	injectBrnSlider,
+} from '@spartan-ng/brain/slider';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -10,19 +17,45 @@ import type { ClassValue } from 'clsx';
 	hostDirectives: [
 		{
 			directive: BrnSliderDirective,
-			inputs: ['brnSliderDisabled: disabled', 'min', 'max', 'step', 'dir', 'label', 'ariaLabel', 'showTickMarks'],
+			inputs: ['value', 'disabled', 'min', 'max', 'step', 'showTicks'],
+			outputs: ['valueChange'],
 		},
 	],
-	template: '<ng-content/>',
+	template: `
+		<div brnSliderTrack class="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
+			<div class="bg-primary absolute h-full" brnSliderRange></div>
+		</div>
+
+		@if (slider.showTicks()) {
+			<div class="pointer-events-none absolute -inset-x-px top-2 h-1 w-full cursor-pointer transition-all">
+				<div
+					*brnSliderTick="let tick; let position = position"
+					class="absolute size-1 rounded-full"
+					[class.bg-secondary]="tick"
+					[class.bg-primary]="!tick"
+					[style.inset-inline-start.%]="position"
+				></div>
+			</div>
+		}
+
+		<span
+			class="border-primary bg-background ring-offset-background focus-visible:ring-ring absolute block h-5 w-5 -translate-x-1/2 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+			brnSliderThumb
+		></span>
+	`,
 	host: {
 		'[class]': '_computedClass()',
 	},
+	imports: [BrnSliderThumbDirective, BrnSliderTrackDirective, BrnSliderRangeDirective, BrnSliderTickDirective],
 })
 export class HlmSliderComponent {
+	protected readonly slider = injectBrnSlider();
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm('w-full h-5 flex relative', this._brnSlider.disabled() ? 'opacity-40' : '', this.userClass()),
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'w-full h-5 flex relative select-none items-center touch-none',
+			this.slider.disabled() ? 'opacity-40' : '',
+			this.userClass(),
+		),
 	);
-
-	private readonly _brnSlider = inject(BRN_SLIDER, { host: true });
 }

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { HlmToggleGroupDirective } from './lib/hlm-toggle-group.directive';
+import { HlmToggleGroupItemDirective } from './lib/hlm-toggle-item.directive';
+
+export * from './lib/hlm-toggle-group.directive';
+export * from './lib/hlm-toggle-item.directive';
+
+@NgModule({
+	imports: [HlmToggleGroupItemDirective, HlmToggleGroupDirective],
+	exports: [HlmToggleGroupItemDirective, HlmToggleGroupDirective],
+})
+export class HlmToggleGroupModule {}

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

@@ -0,0 +1,29 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import { provideHlmToggleGroup } from './hlm-toggle-group.token';
+import { toggleGroupItemVariants } from './hlm-toggle-item.directive';
+
+type ToggleGroupItemVariants = VariantProps<typeof toggleGroupItemVariants>;
+@Directive({
+	selector: 'brn-toggle-group[hlm],[hlmToggleGroup]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	providers: [provideHlmToggleGroup(HlmToggleGroupDirective)],
+})
+export class HlmToggleGroupDirective {
+	public readonly variant = input<ToggleGroupItemVariants['variant']>('default');
+	public readonly size = input<ToggleGroupItemVariants['size']>('default');
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm('inline-flex items-center gap-x-2 focus:[&>[hlm][brnToggle]]:z-10', {
+			'gap-x-0 rounded-md first-of-type:[&>[hlmToggleGroupItem]]:rounded-l-md last-of-type:[&>[hlmToggleGroupItem]]:rounded-r-md [&>[hlmToggleGroupItem][variant="outline"]]:-mx-[0.5px] [&>[hlmToggleGroupItem]]:rounded-none':
+				this.variant() === 'merged',
+			[String(this.userClass())]: !!this.userClass(),
+		}),
+	);
+}

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

@@ -0,0 +1,12 @@
+import { ExistingProvider, InjectionToken, Type, inject } from '@angular/core';
+import type { HlmToggleGroupDirective } from './hlm-toggle-group.directive';
+
+const HlmToggleGroupToken = new InjectionToken<HlmToggleGroupDirective>('HlmToggleGroupToken');
+
+export function provideHlmToggleGroup(config: Type<HlmToggleGroupDirective>): ExistingProvider {
+	return { provide: HlmToggleGroupToken, useExisting: config };
+}
+
+export function injectHlmToggleGroup(): HlmToggleGroupDirective {
+	return inject(HlmToggleGroupToken, { optional: true }) as HlmToggleGroupDirective;
+}

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

@@ -0,0 +1,55 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { type VariantProps, cva } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import { injectHlmToggleGroup } from './hlm-toggle-group.token';
+
+export const toggleGroupItemVariants = cva(
+	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+				merged:
+					'border border-l-0 first-of-type:border-l border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+			},
+			size: {
+				default: 'h-9 px-3',
+				sm: 'h-8 px-2',
+				lg: 'h-10 px-3',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+type ToggleGroupItemVariants = VariantProps<typeof toggleGroupItemVariants>;
+
+@Directive({
+	selector: '[hlmToggleGroupItem],[brnToggleGroupItem][hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmToggleGroupItemDirective {
+	private readonly _parentGroup = injectHlmToggleGroup();
+	public readonly variant = input<ToggleGroupItemVariants['variant']>('default');
+	public readonly size = input<ToggleGroupItemVariants['size']>('default');
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => {
+		const variantToUse = this._parentGroup?.variant() ?? this.variant();
+		const sizeToUse = this._parentGroup?.size() ?? this.size();
+		const userClass = this._parentGroup?.userClass() ?? this.userClass();
+		return hlm(
+			toggleGroupItemVariants({
+				variant: variantToUse,
+				size: sizeToUse,
+			}),
+			userClass,
+		);
+	});
+}

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

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

package/src/generators/ui/libs/ui-toggle-group-helm/generator.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'togglegroup',
+        internalName: 'ui-toggle-group-helm',
+        publicName: 'ui-togglegroup-helm',
+    });
+}
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-toggle-group-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,aAAa;QAC5B,YAAY,EAAE,sBAAsB;QACpC,UAAU,EAAE,qBAAqB;KACjC,CAAC,CAAC;AACJ,CAAC"}