@spartan-ng/cli 0.0.1-alpha.502 → 0.0.1-alpha.503

package/package.json

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

package/src/generators/healthcheck/generator.js

@@ -8,6 +8,7 @@ const brn_radio_1 = require("./healthchecks/brn-radio");
 const brn_toggle_group_1 = require("./healthchecks/brn-toggle-group");
 const core_imports_1 = require("./healthchecks/core-imports");
 const helm_imports_1 = require("./healthchecks/helm-imports");
+const hlm_date_picker_1 = require("./healthchecks/hlm-date-picker");
 const hlm_icon_1 = require("./healthchecks/hlm-icon");
 const hlm_progress_1 = require("./healthchecks/hlm-progress");
 const hlm_scroll_area_1 = require("./healthchecks/hlm-scroll-area");
@@ -30,6 +31,7 @@ async function healthcheckGenerator(tree, options) {
         brn_toggle_group_1.brainToggleHealthcheck,
         helm_imports_1.helmImportsHealthcheck,
         naming_conventions_1.namingConventionHealthcheck,
+        hlm_date_picker_1.datePickerHealthcheck,
         hlm_progress_1.progressHealthcheck,
     ];
     const failedReports = [];

package/src/generators/healthcheck/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/healthcheck/generator.ts"],"names":[],"mappings":";;AAkBA,oDAyCC;AA3DD,uCAAuD;AACvD,iDAAyG;AACzG,gEAAuE;AACvE,wDAAiE;AACjE,sEAAyE;AACzE,8DAAqE;AACrE,8DAAqE;AACrE,sDAA8D;AAC9D,8DAAkE;AAClE,oEAAuE;AACvE,0DAA8D;AAC9D,0EAAgF;AAChF,oDAA4D;AAE5D,2CAA4C;AAC5C,+CAA+C;AAC/C,2CAAgD;AAEzC,KAAK,UAAU,oBAAoB,CAAC,IAAU,EAAE,OAA8D;IACpH,eAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAkB;QACnC,4BAAkB;QAClB,uCAAuB;QACvB,qCAAsB;QACtB,8BAAmB;QACnB,uCAAqB;QACrB,iCAAqB;QACrB,8BAAiB;QACjB,yCAAsB;QACtB,qCAAsB;QACtB,gDAA2B;QAC3B,kCAAmB;KACnB,CAAC;IAEF,MAAM,aAAa,GAAwB,EAAE,CAAC;IAE9C,KAAK,MAAM,WAAW,IAAI,YAAY,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,MAAM,IAAA,uBAAc,EAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACvD,IAAA,sBAAW,EAAC,MAAM,CAAC,CAAC;QAEpB,IAAI,MAAM,CAAC,MAAM,KAAK,gCAAiB,CAAC,OAAO,EAAE,CAAC;YACjD,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;IACF,CAAC;IAED,KAAK,MAAM,MAAM,IAAI,aAAa,EAAE,CAAC;QACpC,IAAI,MAAM,CAAC,OAAO,IAAI,IAAA,mCAAoB,EAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;YAChE,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,IAAI,CAAC,MAAM,IAAA,mBAAU,EAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;YAE7E,IAAI,GAAG,EAAE,CAAC;gBACT,MAAM,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;YACxE,CAAC;QACF,CAAC;IACF,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACzB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED,kBAAe,oBAAoB,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/healthcheck/generator.ts"],"names":[],"mappings":";;AAmBA,oDA0CC;AA7DD,uCAAuD;AACvD,iDAAyG;AACzG,gEAAuE;AACvE,wDAAiE;AACjE,sEAAyE;AACzE,8DAAqE;AACrE,8DAAqE;AACrE,oEAAuE;AACvE,sDAA8D;AAC9D,8DAAkE;AAClE,oEAAuE;AACvE,0DAA8D;AAC9D,0EAAgF;AAChF,oDAA4D;AAE5D,2CAA4C;AAC5C,+CAA+C;AAC/C,2CAAgD;AAEzC,KAAK,UAAU,oBAAoB,CAAC,IAAU,EAAE,OAA8D;IACpH,eAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAkB;QACnC,4BAAkB;QAClB,uCAAuB;QACvB,qCAAsB;QACtB,8BAAmB;QACnB,uCAAqB;QACrB,iCAAqB;QACrB,8BAAiB;QACjB,yCAAsB;QACtB,qCAAsB;QACtB,gDAA2B;QAC3B,uCAAqB;QACrB,kCAAmB;KACnB,CAAC;IAEF,MAAM,aAAa,GAAwB,EAAE,CAAC;IAE9C,KAAK,MAAM,WAAW,IAAI,YAAY,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,MAAM,IAAA,uBAAc,EAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACvD,IAAA,sBAAW,EAAC,MAAM,CAAC,CAAC;QAEpB,IAAI,MAAM,CAAC,MAAM,KAAK,gCAAiB,CAAC,OAAO,EAAE,CAAC;YACjD,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;IACF,CAAC;IAED,KAAK,MAAM,MAAM,IAAI,aAAa,EAAE,CAAC;QACpC,IAAI,MAAM,CAAC,OAAO,IAAI,IAAA,mCAAoB,EAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;YAChE,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,IAAI,CAAC,MAAM,IAAA,mBAAU,EAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;YAE7E,IAAI,GAAG,EAAE,CAAC;gBACT,MAAM,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;YACxE,CAAC;QACF,CAAC;IACF,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACzB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED,kBAAe,oBAAoB,CAAC"}

package/src/generators/healthcheck/healthchecks/hlm-date-picker.d.ts

@@ -0,0 +1,2 @@
+import { Healthcheck } from '../healthchecks';
+export declare const datePickerHealthcheck: Healthcheck;

package/src/generators/healthcheck/healthchecks/hlm-date-picker.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerHealthcheck = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const generator_1 = tslib_1.__importDefault(require("../../migrate-date-picker/generator"));
+const healthchecks_1 = require("../healthchecks");
+exports.datePickerHealthcheck = {
+    name: 'Helm DatePicker',
+    async detect(tree, failure) {
+        (0, devkit_1.visitNotIgnoredFiles)(tree, '/', (file) => {
+            // if the file is a .ts or .htlm file, check for helm icons
+            if (!file.endsWith('.ts') && !file.endsWith('.html')) {
+                return;
+            }
+            const contents = tree.read(file, 'utf-8');
+            if (!contents) {
+                return;
+            }
+            // check if the legacy openedChange event is being used
+            if (/<(hlm-date-picker)[^>]*\(\s*changed\s*\)=/g.test(contents)) {
+                failure('DatePicker is using the renamed changed event.', healthchecks_1.HealthcheckSeverity.Error, true);
+            }
+        });
+    },
+    fix: async (tree) => {
+        await (0, generator_1.default)(tree, { skipFormat: true });
+        return true;
+    },
+    prompt: 'Would you like to migrate date picker?',
+};
+//# sourceMappingURL=hlm-date-picker.js.map

package/src/generators/healthcheck/healthchecks/hlm-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hlm-date-picker.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/healthcheck/healthchecks/hlm-date-picker.ts"],"names":[],"mappings":";;;;AAAA,uCAAkD;AAClD,4FAA6E;AAC7E,kDAAmE;AAEtD,QAAA,qBAAqB,GAAgB;IACjD,IAAI,EAAE,iBAAiB;IACvB,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO;QACzB,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACxC,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBACtD,OAAO;YACR,CAAC;YAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAE1C,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACf,OAAO;YACR,CAAC;YAED,uDAAuD;YACvD,IAAI,4CAA4C,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACjE,OAAO,CAAC,gDAAgD,EAAE,kCAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAC5F,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QACnB,MAAM,IAAA,mBAA0B,EAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7D,OAAO,IAAI,CAAC;IACb,CAAC;IACD,MAAM,EAAE,wCAAwC;CAChD,CAAC"}

package/src/generators/migrate-date-picker/compat.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (generatorOptions: import("./schema").MigrateDatePickerGeneratorSchema) => (tree: any, context: any) => Promise<any>;
+export default _default;

package/src/generators/migrate-date-picker/compat.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const generator_1 = tslib_1.__importDefault(require("./generator"));
+exports.default = (0, devkit_1.convertNxGenerator)(generator_1.default);
+//# sourceMappingURL=compat.js.map

package/src/generators/migrate-date-picker/compat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-date-picker/compat.ts"],"names":[],"mappings":";;;AAAA,uCAAgD;AAChD,oEAAiD;AAEjD,kBAAe,IAAA,2BAAkB,EAAC,mBAAsB,CAAC,CAAC"}

package/src/generators/migrate-date-picker/generator.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { MigrateDatePickerGeneratorSchema } from './schema';
+export declare function migrateDatePickerGenerator(tree: Tree, { skipFormat }: MigrateDatePickerGeneratorSchema): Promise<void>;
+export default migrateDatePickerGenerator;

package/src/generators/migrate-date-picker/generator.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateDatePickerGenerator = migrateDatePickerGenerator;
+const devkit_1 = require("@nx/devkit");
+const visit_files_1 = require("../../utils/visit-files");
+async function migrateDatePickerGenerator(tree, { skipFormat }) {
+    replaceOpenChangeEvent(tree);
+    if (!skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+function replaceOpenChangeEvent(tree) {
+    // if the element is `'<hlm-select' and it has an `(openedChange)` event, we need to replace it with `(openChange)`
+    (0, visit_files_1.visitFiles)(tree, '.', (path) => {
+        // if this is not an html file or typescript file (inline templates) then skip
+        if (!path.endsWith('.html') && !path.endsWith('.ts')) {
+            return;
+        }
+        let content = tree.read(path, 'utf-8');
+        if (!content) {
+            return;
+        }
+        // find all the brn-select or hlm-select elements that have an `(openedChange)` event
+        content = content.replace(/<(hlm-date-picker)[^>]*\(\s*changed\s*\)=/g, (match) => match.replace(/\(\s*changed\s*\)/, '(dateChange)'));
+        tree.write(path, content);
+    });
+}
+exports.default = migrateDatePickerGenerator;
+//# sourceMappingURL=generator.js.map

package/src/generators/migrate-date-picker/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-date-picker/generator.ts"],"names":[],"mappings":";;AAIA,gEAMC;AAVD,uCAA+C;AAC/C,yDAAqD;AAG9C,KAAK,UAAU,0BAA0B,CAAC,IAAU,EAAE,EAAE,UAAU,EAAoC;IAC5G,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAE7B,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED,SAAS,sBAAsB,CAAC,IAAU;IACzC,mHAAmH;IACnH,IAAA,wBAAU,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAC9B,8EAA8E;QAC9E,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YACtD,OAAO;QACR,CAAC;QAED,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QAED,qFAAqF;QACrF,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,4CAA4C,EAAE,CAAC,KAAK,EAAE,EAAE,CACjF,KAAK,CAAC,OAAO,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAClD,CAAC;QAEF,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,kBAAe,0BAA0B,CAAC"}

package/src/generators/migrate-date-picker/schema.d.ts

@@ -0,0 +1,3 @@
+export interface MigrateDatePickerGeneratorSchema {
+	skipFormat?: boolean;
+}

package/src/generators/migrate-date-picker/schema.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "http://json-schema.org/draft-07/schema",
+	"$id": "MigrateSelect",
+	"title": "",
+	"type": "object",
+	"properties": {
+		"skipFormat": {
+			"type": "boolean",
+			"default": false,
+			"description": "Skip formatting files"
+		}
+	},
+	"required": []
+}

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

@@ -1,11 +1,12 @@
 import { Directive, computed, input, signal } from '@angular/core';
+import { BrnButton } from '@spartan-ng/brain/button';
 import { hlm } from '@spartan-ng/brain/core';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 import { injectBrnButtonConfig } from './hlm-button.token';
 
 export const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none shrink-0 [&_ng-icon]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-default',
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_ng-icon]:pointer-events-none shrink-0 [&_ng-icon]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-default',
 	{
 		variants: {
 			variant: {
@@ -35,8 +36,9 @@ export const buttonVariants = cva(
 export type ButtonVariants = VariantProps<typeof buttonVariants>;
 
 @Directive({
-	selector: '[hlmBtn]',
+	selector: 'button[hlmBtn], a[hlmBtn]',
 	exportAs: 'hlmBtn',
+	hostDirectives: [{ directive: BrnButton, inputs: ['disabled'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},

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

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { HlmCalendar } from './lib/hlm-calendar';
 import { HlmCalendarMulti } from './lib/hlm-calendar-multi';
+import { HlmCalendarRange } from './lib/hlm-calendar-range';
 
 export * from './lib/hlm-calendar';
 export * from './lib/hlm-calendar-multi';
+export * from './lib/hlm-calendar-range';
 
-export const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti] as const;
+export const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti, HlmCalendarRange] as const;
 
 @NgModule({
 	imports: [...HlmCalendarImports],

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

@@ -0,0 +1,183 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+	numberAttribute,
+	viewChild,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import {
+	BrnCalendarCell,
+	BrnCalendarCellButton,
+	BrnCalendarGrid,
+	BrnCalendarHeader,
+	BrnCalendarNextButton,
+	BrnCalendarPreviousButton,
+	BrnCalendarRange,
+	BrnCalendarWeek,
+	BrnCalendarWeekday,
+	Weekday,
+	injectBrnCalendarI18n,
+} from '@spartan-ng/brain/calendar';
+import { hlm } from '@spartan-ng/brain/core';
+import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { buttonVariants } from '@spartan-ng/helm/button';
+import { HlmIcon } from '@spartan-ng/helm/icon';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-calendar-range',
+	imports: [
+		BrnCalendarHeader,
+		BrnCalendarNextButton,
+		BrnCalendarPreviousButton,
+		BrnCalendarWeekday,
+		BrnCalendarWeek,
+		BrnCalendarCellButton,
+		BrnCalendarCell,
+		BrnCalendarGrid,
+		NgIcon,
+		HlmIcon,
+		BrnCalendarRange,
+	],
+	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	template: `
+		<div
+			brnCalendarRange
+			[min]="min()"
+			[max]="max()"
+			[disabled]="disabled()"
+			[(startDate)]="startDate"
+			[(endDate)]="endDate"
+			[dateDisabled]="dateDisabled()"
+			[weekStartsOn]="weekStartsOn()"
+			[defaultFocusedDate]="defaultFocusedDate()"
+			[class]="_computedCalenderClass()"
+		>
+			<div class="inline-flex flex-col space-y-4">
+				<!-- Header -->
+				<div class="space-y-4">
+					<div class="relative flex items-center justify-center pt-1">
+						<div brnCalendarHeader class="text-sm font-medium">
+							{{ _heading() }}
+						</div>
+
+						<div class="flex items-center space-x-1">
+							<button
+								brnCalendarPreviousButton
+								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+							>
+								<ng-icon hlm name="lucideChevronLeft" size="sm" />
+							</button>
+
+							<button
+								brnCalendarNextButton
+								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+							>
+								<ng-icon hlm name="lucideChevronRight" size="sm" />
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<table class="w-full border-collapse space-y-1" brnCalendarGrid>
+					<thead>
+						<tr class="flex">
+							<th
+								*brnCalendarWeekday="let weekday"
+								scope="col"
+								class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
+								[attr.aria-label]="_i18n.labelWeekday(weekday)"
+							>
+								{{ _i18n.formatWeekdayName(weekday) }}
+							</th>
+						</tr>
+					</thead>
+
+					<tbody role="rowgroup">
+						<tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+							@for (date of week; track _dateAdapter.getTime(date)) {
+								<td
+									brnCalendarCell
+									class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
+								>
+									<button brnCalendarCellButton [date]="date" [class]="_btnClass">
+										{{ _dateAdapter.getDate(date) }}
+									</button>
+								</td>
+							}
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HlmCalendarRange<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();
+
+	/** Access the date time adapter */
+	protected readonly _dateAdapter = injectDateAdapter<T>();
+
+	/** 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 start date of the range. */
+	public readonly startDate = model<T>();
+
+	/** The end date of the range. */
+	public readonly endDate = model<T>();
+
+	/** Whether a specific date is disabled. */
+	public readonly dateDisabled = input<(date: T) => boolean>(() => false);
+
+	/** The day the week starts on */
+	public readonly weekStartsOn = input<Weekday, NumberInput>(0, {
+		transform: (v: unknown) => numberAttribute(v) as Weekday,
+	});
+
+	/** The default focused date. */
+	public readonly defaultFocusedDate = input<T>();
+
+	/** Access the calendar directive */
+	private readonly _calendar = viewChild.required(BrnCalendarRange);
+
+	/** Get the heading for the current month and year */
+	protected readonly _heading = computed(() =>
+		this._i18n.formatHeader(
+			this._dateAdapter.getMonth(this._calendar().focusedDate()),
+			this._dateAdapter.getYear(this._calendar().focusedDate()),
+		),
+	);
+
+	protected readonly _btnClass = hlm(
+		buttonVariants({ variant: 'ghost' }),
+		'size-8 p-0 font-normal aria-selected:opacity-100',
+		'data-[outside]:text-muted-foreground data-[outside]:aria-selected:text-muted-foreground',
+		'data-[today]:bg-accent data-[today]:text-accent-foreground',
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+		'data-[range-start]:rounded-l-md',
+		'data-[range-end]:rounded-r-md',
+		'data-[range-between]:rounded-none data-[range-between]:bg-accent data-[range-between]:text-accent-foreground',
+	);
+}

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

@@ -1,13 +1,16 @@
 import { NgModule } from '@angular/core';
 import { HlmDatePicker } from './lib/hlm-date-picker';
 import { HlmDatePickerMulti } from './lib/hlm-date-picker-multi';
+import { HlmDateRangePicker } from './lib/hlm-date-range-picker';
 
 export * from './lib/hlm-date-picker.token';
 
 export * from './lib/hlm-date-picker';
 export * from './lib/hlm-date-picker-multi';
+export * from './lib/hlm-date-range-picker';
+export * from './lib/hlm-date-range-picker.token';
 
-export const HlmDatePickerImports = [HlmDatePicker, HlmDatePickerMulti] as const;
+export const HlmDatePickerImports = [HlmDatePicker, HlmDatePickerMulti, HlmDateRangePicker] as const;
 
 @NgModule({
 	imports: [...HlmDatePickerImports],

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

@@ -6,7 +6,7 @@ import {
 	computed,
 	forwardRef,
 	input,
-	model,
+	linkedSignal,
 	numberAttribute,
 	output,
 	signal,
@@ -36,7 +36,7 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	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>
+			<button type="button" [class]="_computedClass()" [disabled]="_mutableDisabled()" brnPopoverTrigger>
 				<ng-icon hlm size="sm" name="lucideCalendar" />
 
 				<span class="truncate">
@@ -51,12 +51,12 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
 				<hlm-calendar-multi
 					calendarClass="border-0 rounded-none"
-					[date]="date()"
+					[date]="_mutableDate()"
 					[min]="min()"
 					[max]="max()"
 					[minSelection]="minSelection()"
 					[maxSelection]="maxSelection()"
-					[disabled]="_state().disabled()"
+					[disabled]="_mutableDisabled()"
 					(dateChange)="_handleChange($event)"
 				/>
 			</div>
@@ -73,11 +73,11 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	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',
+			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-all 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._mutableDate() ? 'text-muted-foreground' : '',
 			this.userClass(),
 		),
 	);
@@ -104,9 +104,11 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	});
 
 	/** The selected value. */
-	public readonly date = model<T[]>();
+	public readonly date = input<T[]>();
 
-	/** If true, the date picker will close when the max selection of dates is reached.. */
+	protected readonly _mutableDate = linkedSignal(this.date);
+
+	/** 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,
 	});
@@ -119,16 +121,14 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 
 	protected readonly _popoverState = signal<BrnDialogState | null>(null);
 
-	protected readonly _state = computed(() => ({
-		disabled: signal(this.disabled()),
-	}));
+	protected readonly _mutableDisabled = linkedSignal(this.disabled);
 
 	protected readonly _formattedDate = computed(() => {
-		const dates = this.date();
+		const dates = this._mutableDate();
 		return dates ? this.formatDates()(dates) : undefined;
 	});
 
-	public readonly changed = output<T[]>();
+	public readonly dateChange = output<T[]>();
 
 	protected _onChange?: ChangeFn<T[]>;
 	protected _onTouched?: TouchFn;
@@ -136,43 +136,40 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	protected _handleChange(value: T[] | undefined) {
 		if (value === undefined) return;
 
-		if (this._state().disabled()) return;
+		if (this._mutableDisabled()) return;
 		const transformedDate = this.transformDates()(value);
 
-		this.date.set(transformedDate);
+		this._mutableDate.set(transformedDate);
 		this._onChange?.(transformedDate);
-		this.changed.emit(transformedDate);
+		this.dateChange.emit(transformedDate);
 
-		if (this.autoCloseOnMaxSelection() && this.date()?.length === this.maxSelection()) {
+		if (this.autoCloseOnMaxSelection() && this._mutableDate()?.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));
+	/** CONTROL VALUE ACCESSOR */
+	public writeValue(value: T[] | null): void {
+		this._mutableDate.set(value ? this.transformDates()(value) : undefined);
 	}
 
-	registerOnChange(fn: ChangeFn<T[]>): void {
+	public registerOnChange(fn: ChangeFn<T[]>): void {
 		this._onChange = fn;
 	}
 
-	registerOnTouched(fn: TouchFn): void {
+	public registerOnTouched(fn: TouchFn): void {
 		this._onTouched = fn;
 	}
 
-	setDisabledState(isDisabled: boolean): void {
-		this._state().disabled.set(isDisabled);
+	public setDisabledState(isDisabled: boolean): void {
+		this._mutableDisabled.set(isDisabled);
 	}
 
-	open() {
+	public open() {
 		this._popoverState.set('open');
 	}
 
-	close() {
+	public close() {
 		this._popoverState.set('closed');
 	}
 }

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

@@ -6,7 +6,7 @@ import {
 	computed,
 	forwardRef,
 	input,
-	model,
+	linkedSignal,
 	output,
 	signal,
 } from '@angular/core';
@@ -35,7 +35,7 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	template: `
 		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
-			<button type="button" [class]="_computedClass()" [disabled]="_state().disabled()" brnPopoverTrigger>
+			<button type="button" [class]="_computedClass()" [disabled]="_mutableDisabled()" brnPopoverTrigger>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
 						{{ formattedDate }}
@@ -50,10 +50,10 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
 				<hlm-calendar
 					calendarClass="border-0 rounded-none"
-					[date]="date()"
+					[date]="_mutableDate()"
 					[min]="min()"
 					[max]="max()"
-					[disabled]="_state().disabled()"
+					[disabled]="_mutableDisabled()"
 					(dateChange)="_handleChange($event)"
 				/>
 			</div>
@@ -70,11 +70,11 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 ring-offset-background transition-colors border border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground h-9 px-3 py-2 w-[280px] justify-start text-left font-normal cursor-default justify-between',
+			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 ring-offset-background border border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground h-9 px-3 py-2 w-[280px] justify-start text-left font-normal cursor-default justify-between',
 			'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._mutableDate() ? 'text-muted-foreground' : '',
 			this.userClass(),
 		),
 	);
@@ -91,7 +91,9 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 	});
 
 	/** The selected value. */
-	public readonly date = model<T>();
+	public readonly date = input<T>();
+
+	protected readonly _mutableDate = linkedSignal(this.date);
 
 	/** If true, the date picker will close when a date is selected. */
 	public readonly autoCloseOnSelect = input<boolean, BooleanInput>(this._config.autoCloseOnSelect, {
@@ -106,58 +108,53 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 
 	protected readonly _popoverState = signal<BrnDialogState | null>(null);
 
-	protected readonly _state = computed(() => ({
-		disabled: signal(this.disabled()),
-	}));
+	protected readonly _mutableDisabled = linkedSignal(this.disabled);
 
 	protected readonly _formattedDate = computed(() => {
-		const date = this.date();
+		const date = this._mutableDate();
 		return date ? this.formatDate()(date) : undefined;
 	});
 
-	public readonly changed = output<T>();
+	public readonly dateChange = output<T>();
 
 	protected _onChange?: ChangeFn<T>;
 	protected _onTouched?: TouchFn;
 
 	protected _handleChange(value: T) {
-		if (this._state().disabled()) return;
+		if (this._mutableDisabled()) return;
 		const transformedDate = this.transformDate()(value);
 
-		this.date.set(transformedDate);
+		this._mutableDate.set(transformedDate);
 		this._onChange?.(transformedDate);
-		this.changed.emit(transformedDate);
+		this.dateChange.emit(transformedDate);
 
 		if (this.autoCloseOnSelect()) {
 			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.transformDate()(value));
+	/** CONTROL VALUE ACCESSOR */
+	public writeValue(value: T | null): void {
+		this._mutableDate.set(value ? this.transformDate()(value) : undefined);
 	}
 
-	registerOnChange(fn: ChangeFn<T>): void {
+	public registerOnChange(fn: ChangeFn<T>): void {
 		this._onChange = fn;
 	}
 
-	registerOnTouched(fn: TouchFn): void {
+	public registerOnTouched(fn: TouchFn): void {
 		this._onTouched = fn;
 	}
 
-	setDisabledState(isDisabled: boolean): void {
-		this._state().disabled.set(isDisabled);
+	public setDisabledState(isDisabled: boolean): void {
+		this._mutableDisabled.set(isDisabled);
 	}
 
-	open() {
+	public open() {
 		this._popoverState.set('open');
 	}
 
-	close() {
+	public close() {
 		this._popoverState.set('closed');
 	}
 }

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

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

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

@@ -0,0 +1,194 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	forwardRef,
+	input,
+	linkedSignal,
+	output,
+	signal,
+	untracked,
+} from '@angular/core';
+import { ControlValueAccessor, 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 { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+import { HlmCalendarRange } from '@spartan-ng/helm/calendar';
+import { HlmIcon } from '@spartan-ng/helm/icon';
+import { HlmPopoverContent } from '@spartan-ng/helm/popover';
+import type { ClassValue } from 'clsx';
+import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
+
+export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => HlmDateRangePicker),
+	multi: true,
+};
+
+@Component({
+	selector: 'hlm-date-range-picker',
+	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarRange],
+	providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+	template: `
+		<brn-popover
+			sideOffset="5"
+			[state]="_popoverState()"
+			(stateChanged)="_popoverState.set($event)"
+			(closed)="_onClose()"
+		>
+			<button type="button" [class]="_computedClass()" [disabled]="_mutableDisabled()" 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-range
+					calendarClass="border-0 rounded-none"
+					[startDate]="_start()"
+					[endDate]="_end()"
+					[min]="min()"
+					[max]="max()"
+					[disabled]="_mutableDisabled()"
+					(startDateChange)="_handleStartDayChange($event)"
+					(endDateChange)="_handleEndDateChange($event)"
+				/>
+			</div>
+		</brn-popover>
+	`,
+	host: {
+		class: 'block',
+	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HlmDateRangePicker<T> implements ControlValueAccessor {
+	private readonly _config = injectHlmDateRangePickerConfig<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-all 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._mutableDate() ? '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 = input<[T, T]>();
+
+	protected readonly _mutableDate = linkedSignal(this.date);
+
+	protected readonly _start = linkedSignal(() => this._mutableDate()?.[0]);
+	protected readonly _end = linkedSignal(() => this._mutableDate()?.[1]);
+
+	/** If true, the date picker will close when the end date is selected */
+	public readonly autoCloseOnEndSelection = input<boolean, BooleanInput>(this._config.autoCloseOnEndSelection, {
+		transform: booleanAttribute,
+	});
+
+	/** Defines how the date should be displayed in the UI.  */
+	public readonly formatDates = input<(dates: [T | undefined, T | undefined]) => string>(this._config.formatDates);
+
+	/** Defines how the date should be transformed before saving to model/form. */
+	public readonly transformDates = input<(date: [T, T]) => [T, T]>(this._config.transformDates);
+
+	protected readonly _popoverState = signal<BrnDialogState | null>(null);
+
+	protected readonly _mutableDisabled = linkedSignal(this.disabled);
+
+	protected readonly _formattedDate = computed(() => {
+		const start = this._start();
+		const end = this._end();
+		return start || end ? this.formatDates()([start, end]) : undefined;
+	});
+
+	public readonly dateChange = output<[T, T] | null>();
+
+	protected _onChange?: ChangeFn<[T, T] | null>;
+	protected _onTouched?: TouchFn;
+
+	protected _handleStartDayChange(value: T) {
+		this._start.set(value);
+	}
+
+	protected _handleEndDateChange(value: T): void {
+		this._end.set(value);
+		if (this._mutableDisabled()) return;
+
+		const start = this._start();
+		if (start && value) {
+			const transformedDates = this.transformDates()([start, value]);
+			this._mutableDate.set(transformedDates);
+			this.dateChange.emit(transformedDates);
+			this._onChange?.(transformedDates);
+
+			if (this.autoCloseOnEndSelection()) {
+				this._popoverState.set('closed');
+			}
+		}
+	}
+
+	/** CONTROL VALUE ACCESSOR */
+	public writeValue(value: [T, T] | null): void {
+		untracked(() => {
+			if (!value) {
+				this._mutableDate.set(undefined);
+			} else {
+				this._mutableDate.set(this.transformDates()(value));
+			}
+		});
+	}
+
+	public registerOnChange(fn: ChangeFn<[T, T] | null>): void {
+		this._onChange = fn;
+	}
+
+	public registerOnTouched(fn: TouchFn): void {
+		this._onTouched = fn;
+	}
+
+	public setDisabledState(isDisabled: boolean): void {
+		this._mutableDisabled.set(isDisabled);
+	}
+
+	public open() {
+		this._popoverState.set('open');
+	}
+
+	public close() {
+		this._popoverState.set('closed');
+	}
+
+	protected _onClose(): void {
+		const dates = this._mutableDate();
+		if (this._start() && !this._end() && dates) {
+			this._start.set(dates[0]);
+			this._end.set(dates[1]);
+		}
+	}
+}

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

@@ -6,9 +6,9 @@ import {
 	computed,
 	forwardRef,
 	input,
+	linkedSignal,
 	model,
 	output,
-	signal,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { hlm } from '@spartan-ng/brain/core';
@@ -38,7 +38,7 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 			[checked]="checked()"
 			(changed)="handleChange($event)"
 			(touched)="_onTouched?.()"
-			[disabled]="disabled()"
+			[disabled]="_disabled()"
 			[id]="id()"
 			[aria-label]="ariaLabel()"
 			[aria-labelledby]="ariaLabelledby()"
@@ -63,9 +63,8 @@ export class HlmSwitch implements ControlValueAccessor {
 	public readonly checked = model<boolean>(false);
 
 	/** The disabled state of the switch. */
-	public readonly disabledInput = input<boolean, BooleanInput>(false, {
+	public readonly disabled = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
-		alias: 'disabled',
 	});
 
 	/** Used to set the id on the underlying brn element. */
@@ -83,9 +82,7 @@ export class HlmSwitch implements ControlValueAccessor {
 	/** Emits when the checked state of the switch changes. */
 	public readonly changed = output<boolean>();
 
-	private readonly _writableDisabled = computed(() => signal(this.disabledInput()));
-
-	public readonly disabled = computed(() => this._writableDisabled()());
+	protected readonly _disabled = linkedSignal(this.disabled);
 
 	protected _onChange?: ChangeFn<boolean>;
 	protected _onTouched?: TouchFn;
@@ -111,6 +108,6 @@ export class HlmSwitch implements ControlValueAccessor {
 	}
 
 	setDisabledState(isDisabled: boolean): void {
-		this._writableDisabled().set(isDisabled);
+		this._disabled.set(isDisabled);
 	}
 }

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

@@ -3,7 +3,7 @@
 		"internalName": "ui-accordion-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0"
@@ -13,7 +13,7 @@
 		"internalName": "ui-alert-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0"
 		}
@@ -22,7 +22,7 @@
 		"internalName": "ui-alert-dialog-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -31,7 +31,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/cdk": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -39,7 +39,7 @@
 		"internalName": "ui-avatar-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -47,7 +47,7 @@
 		"internalName": "ui-badge-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -58,7 +58,7 @@
 			"@angular/core": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@angular/router": ">=19.0.0"
 		}
@@ -67,7 +67,7 @@
 		"internalName": "ui-button-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -79,7 +79,7 @@
 			"@angular/cdk": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -87,7 +87,7 @@
 		"internalName": "ui-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0"
 		}
@@ -96,7 +96,7 @@
 		"internalName": "ui-carousel-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -111,7 +111,7 @@
 			"@angular/forms": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -119,7 +119,7 @@
 		"internalName": "ui-command-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=19.0.0"
 		}
@@ -132,7 +132,7 @@
 			"@angular/forms": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -140,7 +140,7 @@
 		"internalName": "ui-dialog-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@angular/common": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
@@ -153,7 +153,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -161,7 +161,7 @@
 		"internalName": "ui-hover-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -177,7 +177,7 @@
 		"internalName": "ui-input-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@angular/forms": ">=19.0.0"
@@ -187,7 +187,7 @@
 		"internalName": "ui-input-otp-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -198,7 +198,7 @@
 		"internalName": "ui-label-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -206,7 +206,7 @@
 		"internalName": "ui-menu-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -220,7 +220,7 @@
 			"@angular/core": ">=19.0.0",
 			"@angular/cdk": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
@@ -232,7 +232,7 @@
 		"internalName": "ui-popover-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -240,7 +240,7 @@
 		"internalName": "ui-progress-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -248,7 +248,7 @@
 		"internalName": "ui-radio-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@angular/common": ">=19.0.0"
 		}
@@ -257,7 +257,7 @@
 		"internalName": "ui-scroll-area-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -266,7 +266,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/cdk": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -277,7 +277,7 @@
 		"internalName": "ui-separator-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -285,7 +285,7 @@
 		"internalName": "ui-sheet-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -296,7 +296,7 @@
 		"internalName": "ui-skeleton-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -304,7 +304,7 @@
 		"internalName": "ui-slider-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -312,7 +312,7 @@
 		"internalName": "ui-sonner-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"ngx-sonner": ">=3.0.0"
 		}
@@ -321,7 +321,7 @@
 		"internalName": "ui-spinner-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -329,7 +329,7 @@
 		"internalName": "ui-switch-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=19.0.0",
 			"@angular/forms": ">=19.0.0"
@@ -339,7 +339,7 @@
 		"internalName": "ui-table-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -347,7 +347,7 @@
 		"internalName": "ui-tabs-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=19.0.0",
@@ -360,7 +360,7 @@
 		"internalName": "ui-toggle-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -369,7 +369,7 @@
 		"internalName": "ui-toggle-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -378,14 +378,14 @@
 		"internalName": "ui-tooltip-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502"
+			"@spartan-ng/brain": "0.0.1-alpha.503"
 		}
 	},
 	"typography": {
 		"internalName": "ui-typography-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.502",
+			"@spartan-ng/brain": "0.0.1-alpha.503",
 			"clsx": "^2.1.1"
 		}
 	}