@spartan-ng/cli 0.0.1-alpha.402 → 0.0.1-alpha.404

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.402",
+  "version": "0.0.1-alpha.404",
   "type": "commonjs",
   "dependencies": {
     "@nx/angular": ">=20.0.0",

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

@@ -19,6 +19,7 @@ import { hlm } from '@spartan-ng/brain/core';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
 import { buttonVariants } from '@spartan-ng/ui-button-helm';
 import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	standalone: true,
@@ -47,7 +48,7 @@ import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 			[dateDisabled]="dateDisabled()"
 			[weekStartsOn]="weekStartsOn()"
 			[defaultFocusedDate]="defaultFocusedDate()"
-			class="rounded-md border p-3"
+			[class]="_computedCalenderClass()"
 		>
 			<div class="inline-flex flex-col space-y-4">
 				<!-- Header -->
@@ -109,6 +110,10 @@ import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 	`,
 })
 export class HlmCalendarComponent<T> {
+	public readonly calendarClass = input<ClassValue>('');
+
+	protected readonly _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()));
+
 	/** Access the calendar i18n */
 	protected readonly i18n = injectBrnCalendarI18n();
 

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

@@ -8,7 +8,12 @@ import { hlm } from '@spartan-ng/brain/core';
 	template: `
 		<ng-content />
 	`,
-	hostDirectives: [BrnCommandDirective],
+	hostDirectives: [
+		{
+			directive: BrnCommandDirective,
+			outputs: ['valueChange'],
+		},
+	],
 	host: {
 		'[class]': '_computedClass()',
 	},

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { HlmDatePickerComponent } from './lib/hlm-date-picker.component';
+
+export * from './lib/hlm-date-picker.token';
+
+export * from './lib/hlm-date-picker.component';
+
+@NgModule({
+	imports: [HlmDatePickerComponent],
+	exports: [HlmDatePickerComponent],
+})
+export class HlmDatePickerModule {}

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

@@ -0,0 +1,139 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Component, computed, forwardRef, input, model, 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 { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
+import { BrnPopoverComponent, BrnPopoverContentDirective, BrnPopoverTriggerDirective } from '@spartan-ng/brain/popover';
+import { HlmCalendarComponent } 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 { injectHlmDatePickerConfig } from './hlm-date-picker.token';
+
+export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => HlmDatePickerComponent),
+	multi: true,
+};
+
+@Component({
+	selector: 'hlm-date-picker',
+	standalone: true,
+	imports: [
+		NgIcon,
+		HlmIconDirective,
+		BrnPopoverComponent,
+		BrnPopoverTriggerDirective,
+		BrnPopoverContentDirective,
+		HlmPopoverContentDirective,
+		HlmCalendarComponent,
+	],
+	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+	template: `
+		<brn-popover sideOffset="5" closeDelay="100">
+			<button type="button" [class]="_computedClass()" [disabled]="state().disabled()" brnPopoverTrigger>
+				<ng-icon hlm size="sm" name="lucideCalendar" />
+
+				@if (formattedDate(); as formattedDate) {
+					{{ formattedDate }}
+				} @else {
+					<ng-content />
+				}
+			</button>
+
+			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+				<hlm-calendar
+					calendarClass="border-0 rounded-none"
+					[date]="date()"
+					[min]="min()"
+					[max]="max()"
+					[disabled]="state().disabled()"
+					(dateChange)="_handleChange($event)"
+				/>
+			</div>
+		</brn-popover>
+	`,
+	host: {
+		class: 'block',
+	},
+})
+export class HlmDatePickerComponent<T> {
+	private readonly _config = injectHlmDatePickerConfig<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>();
+
+	/** Determine if the date picker is disabled. */
+	public readonly disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	/** The selected value. */
+	public readonly date = model<T>();
+
+	protected readonly state = computed(() => ({
+		disabled: signal(this.disabled()),
+	}));
+
+	/** Defines how the date should be displayed in the UI.  */
+	public readonly formatDate = input<(date: T) => string>(this._config.formatDate);
+
+	/** Defines how the date should be transformed before saving to model/form. */
+	public readonly transformDate = input<(date: T) => T>(this._config.transformDate);
+
+	protected readonly formattedDate = computed(() => {
+		const date = this.date();
+		return date ? this.formatDate()(date) : undefined;
+	});
+
+	public readonly changed = output<T>();
+
+	protected _onChange?: ChangeFn<T>;
+	protected _onTouched?: TouchFn;
+
+	protected _handleChange(value: T) {
+		if (this.state().disabled()) return;
+		const transformedDate = this.transformDate()(value);
+
+		this.date.set(transformedDate);
+		this._onChange?.(transformedDate);
+		this.changed.emit(transformedDate);
+	}
+
+	/** CONROL VALUE ACCESSOR */
+	writeValue(value: T | null): void {
+		// optional FormControl is initialized with null value
+		if (value === null) return;
+
+		this.date.set(this.transformDate()(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);
+	}
+}

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

@@ -0,0 +1,37 @@
+import { inject, InjectionToken, ValueProvider } from '@angular/core';
+
+export interface HlmDatePickerConfig<T> {
+	/**
+	 * Defines how the date should be displayed in the UI.
+	 *
+	 * @param date
+	 * @returns formatted date
+	 */
+	formatDate: (date: T) => string;
+
+	/**
+	 * Defines how the date should be transformed before saving to model/form.
+	 *
+	 * @param date
+	 * @returns transformed date
+	 */
+	transformDate: (date: T) => T;
+}
+
+function getDefaultConfig<T>(): HlmDatePickerConfig<T> {
+	return {
+		formatDate: (date) => (date instanceof Date ? date.toDateString() : `${date}`),
+		transformDate: (date) => date,
+	};
+}
+
+const HlmDatePickerConfigToken = new InjectionToken<HlmDatePickerConfig<unknown>>('HlmDatePickerConfig');
+
+export function provideHlmDatePickerConfig<T>(config: Partial<HlmDatePickerConfig<T>>): ValueProvider {
+	return { provide: HlmDatePickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+
+export function injectHlmDatePickerConfig<T>(): HlmDatePickerConfig<T> {
+	const injectedConfig = inject(HlmDatePickerConfigToken, { optional: true });
+	return injectedConfig ? (injectedConfig as HlmDatePickerConfig<T>) : getDefaultConfig();
+}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-date-picker-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,YAAY;QAC3B,YAAY,EAAE,qBAAqB;QACnC,UAAU,EAAE,oBAAoB;KAChC,CAAC,CAAC;AACJ,CAAC"}

package/src/generators/ui/primivite-deps.js

@@ -10,12 +10,14 @@ exports.primitiveDependencies = {
     badge: [],
     breadcrumb: ['icon'],
     button: [],
+    calendar: ['button', 'icon'],
     card: [],
     carousel: [],
     checkbox: ['icon'],
     collapsible: [],
     command: ['button', 'icon'],
     contextmenu: [],
+    datepicker: ['calendar', 'icon', 'popover'],
     dialog: [],
     formfield: [],
     hovercard: [],

package/src/generators/ui/primivite-deps.js.map

@@ -1 +1 @@
-{"version":3,"file":"primivite-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primivite-deps.ts"],"names":[],"mappings":";;;AAEa,QAAA,qBAAqB,GAAmC;IACpE,SAAS,EAAE,CAAC,MAAM,CAAC;IACnB,KAAK,EAAE,CAAC,MAAM,CAAC;IACf,WAAW,EAAE,CAAC,QAAQ,CAAC;IACvB,WAAW,EAAE,EAAE;IACf,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,MAAM,EAAE,EAAE;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,CAAC,MAAM,CAAC;IAClB,WAAW,EAAE,EAAE;IACf,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,EAAE;IACf,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,CAAC,WAAW,CAAC;IACpB,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,CAAC,MAAM,CAAC;IACd,OAAO,EAAE,EAAE;IACX,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC9B,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,SAAS,EAAE,EAAE;IACb,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;IACZ,MAAM,EAAE,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,EAAE;CACX,CAAC;AAEK,MAAM,sBAAsB,GAAG,CAAC,UAAuB,EAAe,EAAE;IAC9E,MAAM,mBAAmB,GAAG,IAAI,GAAG,EAAa,CAAC;IAEjD,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACpC,MAAM,IAAI,GAAG,6BAAqB,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACpD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC/B,2FAA2F;gBAC3F,mBAAmB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC;QACF,CAAC;IACF,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;AACxC,CAAC,CAAC;AAdW,QAAA,sBAAsB,0BAcjC"}
+{"version":3,"file":"primivite-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primivite-deps.ts"],"names":[],"mappings":";;;AAEa,QAAA,qBAAqB,GAAmC;IACpE,SAAS,EAAE,CAAC,MAAM,CAAC;IACnB,KAAK,EAAE,CAAC,MAAM,CAAC;IACf,WAAW,EAAE,CAAC,QAAQ,CAAC;IACvB,WAAW,EAAE,EAAE;IACf,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC5B,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,CAAC,MAAM,CAAC;IAClB,WAAW,EAAE,EAAE;IACf,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC;IAC3C,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,CAAC,WAAW,CAAC;IACpB,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,CAAC,MAAM,CAAC;IACd,OAAO,EAAE,EAAE;IACX,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC9B,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,SAAS,EAAE,EAAE;IACb,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;IACZ,MAAM,EAAE,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,EAAE;CACX,CAAC;AAEK,MAAM,sBAAsB,GAAG,CAAC,UAAuB,EAAe,EAAE;IAC9E,MAAM,mBAAmB,GAAG,IAAI,GAAG,EAAa,CAAC;IAEjD,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACpC,MAAM,IAAI,GAAG,6BAAqB,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACpD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC/B,2FAA2F;gBAC3F,mBAAmB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC;QACF,CAAC;IACF,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;AACxC,CAAC,CAAC;AAdW,QAAA,sBAAsB,0BAcjC"}

package/src/generators/ui/primivites.d.ts

@@ -1 +1 @@
-export type Primitive = 'accordion' | 'alert' | 'alertdialog' | 'aspectratio' | 'avatar' | 'badge' | 'breadcrumb' | 'button' | 'card' | 'carousel' | 'checkbox' | 'collapsible' | 'command' | 'contextmenu' | 'dialog' | 'formfield' | 'hovercard' | 'icon' | 'input' | 'label' | 'menu' | 'menubar' | 'pagination' | 'popover' | 'progress' | 'radiogroup' | 'scrollarea' | 'select' | 'separator' | 'sheet' | 'skeleton' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'toggle' | 'tooltip';
+export type Primitive = 'accordion' | 'alert' | 'alertdialog' | 'aspectratio' | 'avatar' | 'badge' | 'breadcrumb' | 'button' | 'calendar' | 'card' | 'carousel' | 'checkbox' | 'collapsible' | 'command' | 'contextmenu' | 'datepicker' | 'dialog' | 'formfield' | 'hovercard' | 'icon' | 'input' | 'label' | 'menu' | 'menubar' | 'pagination' | 'popover' | 'progress' | 'radiogroup' | 'scrollarea' | 'select' | 'separator' | 'sheet' | 'skeleton' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'toggle' | 'tooltip';

package/src/generators/ui/supported-ui-libraries.json

@@ -5,7 +5,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -14,7 +14,7 @@
 		"internalName": "ui-alert-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
@@ -24,7 +24,7 @@
 		"internalName": "ui-alert-dialog-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -34,7 +34,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -42,7 +42,7 @@
 		"internalName": "ui-avatar-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -52,7 +52,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -64,7 +64,7 @@
 			"@angular/router": "18.2.5",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -73,7 +73,7 @@
 		"internalName": "ui-button-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -85,16 +85,17 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
-			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381"
+			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
+			"clsx": "^2.1.1"
 		}
 	},
 	"card": {
 		"internalName": "ui-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -104,12 +105,27 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
 	},
+	"datepicker": {
+		"internalName": "ui-date-picker-helm",
+		"peerDependencies": {
+			"@angular/cdk": ">=18.0.0",
+			"@angular/core": ">=18.0.0",
+			"@angular/forms": ">=18.0.0",
+			"@ng-icons/core": ">=29.0.0",
+			"@ng-icons/lucide": ">=29.0.0",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
+			"@spartan-ng/ui-calendar-helm": "0.0.1-alpha.381",
+			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
+			"@spartan-ng/ui-popover-helm": "0.0.1-alpha.381",
+			"clsx": "^2.1.1"
+		}
+	},
 	"dialog": {
 		"internalName": "ui-dialog-helm",
 		"peerDependencies": {
@@ -118,7 +134,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -134,7 +150,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
 			"@angular/forms": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -143,7 +159,7 @@
 		"internalName": "ui-label-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -154,7 +170,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
@@ -164,7 +180,7 @@
 		"internalName": "ui-popover-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -172,7 +188,7 @@
 		"internalName": "ui-progress-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -180,7 +196,7 @@
 		"internalName": "ui-radio-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -188,7 +204,7 @@
 		"internalName": "ui-scroll-area-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1",
 			"ngx-scrollbar": ">=16.0.0"
 		}
@@ -197,7 +213,7 @@
 		"internalName": "ui-separator-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -207,7 +223,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
@@ -217,7 +233,7 @@
 		"internalName": "ui-skeleton-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -225,7 +241,7 @@
 		"internalName": "ui-spinner-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -236,7 +252,7 @@
 			"@angular/cdk": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
 			"@angular/forms": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -247,7 +263,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
@@ -258,7 +274,7 @@
 		"internalName": "ui-toggle-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -267,7 +283,7 @@
 		"internalName": "ui-typography-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -276,7 +292,7 @@
 		"peerDependencies": {
 			"@angular/common": ">=18.0.0",
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -284,7 +300,7 @@
 		"internalName": "ui-hover-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -295,7 +311,7 @@
 			"@angular/forms": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1"
 		}
@@ -304,7 +320,7 @@
 		"internalName": "ui-tooltip-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402"
+			"@spartan-ng/brain": "0.0.1-alpha.404"
 		}
 	},
 	"pagination": {
@@ -316,7 +332,7 @@
 			"@angular/router": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-select-helm": "0.0.1-alpha.381",
@@ -330,7 +346,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"clsx": "^2.1.1",
@@ -343,7 +359,7 @@
 			"@angular/core": ">=18.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
@@ -364,14 +380,14 @@
 		"internalName": "ui-form-field-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402"
+			"@spartan-ng/brain": "0.0.1-alpha.404"
 		}
 	},
 	"slider": {
 		"internalName": "ui-slider-helm",
 		"peerDependencies": {
 			"@angular/core": ">=18.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.402",
+			"@spartan-ng/brain": "0.0.1-alpha.404",
 			"clsx": "^2.1.1"
 		}
 	}