@uxf/ui 11.110.0 → 11.111.0-canary.1

package/date-picker/date-picker.spec.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const snap_test_1 = require("../utils/snap-test");
 const date_picker_stories_1 = require("./date-picker.stories");
-(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_picker_stories_1.Default, null));
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_picker_stories_1.Basic, null));

package/date-picker/date-picker.stories.d.ts

@@ -1,2 +1,43 @@
 import React from "react";
-export declare function Default(): React.JSX.Element;
+/** Minimal date picker with no constraints. Select any date and it is logged to console. */
+export declare function Basic(): React.JSX.Element;
+/** Opens with today pre-selected so the user can see the highlighted state immediately. */
+export declare function PreSelected(): React.JSX.Element;
+/**
+ * Only dates within the selectable range are available.
+ * Dates outside appear dimmed and cannot be chosen.
+ */
+export declare function MinMaxDates(): React.JSX.Element;
+/**
+ * Today and a cluster of dates next week are marked as unavailable.
+ * They appear crossed-out and cannot be selected even though they are within min/max.
+ */
+export declare function UnavailableDates(): React.JSX.Element;
+/**
+ * datesConfig lets you attach custom CSS flags to date cells and disable whole groups.
+ *
+ * - flag-1 (selectable): +1 / +2
+ * - flag-2 (disabled):   +4 / +5
+ * - no flag (disabled):  +8
+ */
+export declare function DatesConfigFlags(): React.JSX.Element;
+/**
+ * Combines a tight date window with several unavailable dates inside that window.
+ * Useful for availability calendars where only a handful of slots remain.
+ */
+export declare function MinMaxWithUnavailable(): React.JSX.Element;
+/**
+ * The `bottomContent` prop renders arbitrary JSX below the calendar grid.
+ * Useful for legends, CTAs, or pricing summaries.
+ */
+export declare function WithBottomContent(): React.JSX.Element;
+/**
+ * `onMonthChange` fires whenever the user navigates to a different month.
+ * The currently visible month is displayed below the description.
+ */
+export declare function OnMonthChange(): React.JSX.Element;
+/**
+ * Kitchen-sink story combining min/max, unavailable dates, datesConfig flags,
+ * bottom content, and onMonthChange — useful for regression testing the full API.
+ */
+export declare function AllFeatures(): React.JSX.Element;

package/date-picker/date-picker.stories.js

@@ -33,57 +33,213 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = Default;
-const date_1 = require("@uxf/localize/src/date");
+exports.Basic = Basic;
+exports.PreSelected = PreSelected;
+exports.MinMaxDates = MinMaxDates;
+exports.UnavailableDates = UnavailableDates;
+exports.DatesConfigFlags = DatesConfigFlags;
+exports.MinMaxWithUnavailable = MinMaxWithUnavailable;
+exports.WithBottomContent = WithBottomContent;
+exports.OnMonthChange = OnMonthChange;
+exports.AllFeatures = AllFeatures;
+const date_string_1 = require("@uxf/datepicker/utils/date-string");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_picker_1 = require("./date-picker");
-const today = (0, date_1.dayjsTz)().startOf("day");
-const minDate = today.subtract(10, "day").toDate();
-const maxDate = today.add(20, "days").toDate();
-const unavailableDates = [
-    today.toDate(),
-    today.add(5, "days").toDate(),
-    today.add(6, "days").toDate(),
-    today.add(7, "days").toDate(),
-    today.add(11, "days").toDate(),
-    today.add(12, "days").toDate(),
-];
-const datesConfig = [
-    {
-        flag: "flag-1",
-        dates: [today.add(5, "days").toDate(), today.add(6, "days").toDate()],
-    },
-    {
-        flag: "flag-2",
-        dates: [today.add(3, "days").toDate(), today.add(4, "days").toDate()],
-        isDisabled: true,
-    },
-    {
-        dates: [today.add(8, "days").toDate()],
-        isDisabled: true,
-    },
-];
-function Default() {
+// Build all demo dates relative to today using timezone-safe arithmetic
+const todayStr = (0, date_string_1.todayDateString)();
+const d = (n) => (0, date_string_1.fromDateString)((0, date_string_1.addDays)(todayStr, n));
+const s = (n) => (0, date_string_1.addDays)(todayStr, n); // DateString for use in descriptions
+// ─── Basic usage ───────────────────────────────────────────────────────────────
+/** Minimal date picker with no constraints. Select any date and it is logged to console. */
+function Basic() {
     const [value, setValue] = (0, react_1.useState)(null);
-    const onChange = (0, action_1.action)("onChange", setValue);
-    const onClose = () => null;
-    const testDatePickers = (react_1.default.createElement("div", { className: "flex flex-col space-y-5 dark:text-white" },
-        react_1.default.createElement("p", { className: "text-lg" }, "Date picker"),
-        react_1.default.createElement(date_picker_1.DatePicker, { closePopoverHandler: onClose, onChange: onChange, selectedDate: value }),
-        react_1.default.createElement("p", { className: "text-lg" }, "Date picker with unavailable dates and min max dates"),
-        react_1.default.createElement(date_picker_1.DatePicker, { maxDate: maxDate, minDate: minDate, onChange: onChange, selectedDate: value, unavailableDates: unavailableDates }),
-        react_1.default.createElement("p", { className: "text-lg" }, "Date picker with dates config"),
-        react_1.default.createElement("ul", null,
-            react_1.default.createElement("li", null, "now + 5 days & now + 6 days -> flag-1 className, not disabled"),
-            react_1.default.createElement("li", null, "now + 3 days & now + 4 days -> flag-2 className, disabled"),
-            react_1.default.createElement("li", null, "now + 8 days -> no custom className, disabled")),
-        react_1.default.createElement(date_picker_1.DatePicker, { datesConfig: datesConfig, onChange: onChange, selectedDate: value }),
-        react_1.default.createElement("p", { className: "text-lg" }, "Date picker with bottom content"),
-        react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: react_1.default.createElement("div", null,
-                "Bottom content",
-                react_1.default.createElement("p", null, "Here can goes anything")), onChange: onChange, selectedDate: value }),
-        react_1.default.createElement("p", { className: "text-lg" }, "Date picker with onMonthChange callback"),
-        react_1.default.createElement(date_picker_1.DatePicker, { onChange: onChange, onMonthChange: (months) => { var _a, _b; return alert((_b = (_a = months.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : "No month"); }, selectedDate: value })));
-    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "Select any date \u2014 no constraints applied."),
+        react_1.default.createElement(date_picker_1.DatePicker, { onChange: (0, action_1.action)("onChange", setValue), selectedDate: value })));
+}
+// ─── Pre-selected date ─────────────────────────────────────────────────────────
+/** Opens with today pre-selected so the user can see the highlighted state immediately. */
+function PreSelected() {
+    const [value, setValue] = (0, react_1.useState)(d(0));
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            s(0),
+            " (today) is pre-selected on mount."),
+        react_1.default.createElement(date_picker_1.DatePicker, { onChange: (0, action_1.action)("onChange", setValue), selectedDate: value })));
+}
+// ─── Min / max date constraints ────────────────────────────────────────────────
+/**
+ * Only dates within the selectable range are available.
+ * Dates outside appear dimmed and cannot be chosen.
+ */
+function MinMaxDates() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Selectable range: ",
+            s(-2),
+            " \u2192 ",
+            s(28),
+            ". Dates outside are dimmed."),
+        react_1.default.createElement(date_picker_1.DatePicker, { maxDate: d(28), minDate: d(-2), onChange: (0, action_1.action)("onChange", setValue), selectedDate: value })));
+}
+// ─── Unavailable (blocked) dates ───────────────────────────────────────────────
+/**
+ * Today and a cluster of dates next week are marked as unavailable.
+ * They appear crossed-out and cannot be selected even though they are within min/max.
+ */
+function UnavailableDates() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const unavailableDates = [d(0), d(5), d(6), d(7), d(11), d(12)];
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Blocked dates: ",
+            s(0),
+            ", ",
+            s(5),
+            ", ",
+            s(6),
+            ", ",
+            s(7),
+            ", ",
+            s(11),
+            ", ",
+            s(12),
+            "."),
+        react_1.default.createElement(date_picker_1.DatePicker, { onChange: (0, action_1.action)("onChange", setValue), selectedDate: value, unavailableDates: unavailableDates })));
+}
+// ─── DatesConfig — custom flags and disabled groups ───────────────────────────
+/**
+ * datesConfig lets you attach custom CSS flags to date cells and disable whole groups.
+ *
+ * - flag-1 (selectable): +1 / +2
+ * - flag-2 (disabled):   +4 / +5
+ * - no flag (disabled):  +8
+ */
+function DatesConfigFlags() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const datesConfig = [
+        {
+            flag: "flag-1",
+            dates: [d(1), d(2)],
+        },
+        {
+            flag: "flag-2",
+            dates: [d(4), d(5)],
+            isDisabled: true,
+        },
+        {
+            dates: [d(8)],
+            isDisabled: true,
+        },
+    ];
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            react_1.default.createElement("code", null, "flag-1"),
+            " (selectable): ",
+            s(1),
+            ", ",
+            s(2),
+            " \u00B7 ",
+            react_1.default.createElement("code", null, "flag-2"),
+            " (disabled): ",
+            s(4),
+            ", ",
+            s(5),
+            " \u00B7",
+            " ",
+            "disabled (no flag): ",
+            s(8)),
+        react_1.default.createElement(date_picker_1.DatePicker, { datesConfig: datesConfig, onChange: (0, action_1.action)("onChange", setValue), selectedDate: value })));
+}
+// ─── Min / max + unavailable combined ─────────────────────────────────────────
+/**
+ * Combines a tight date window with several unavailable dates inside that window.
+ * Useful for availability calendars where only a handful of slots remain.
+ */
+function MinMaxWithUnavailable() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Window: ",
+            s(-5),
+            " \u2192 ",
+            s(20),
+            ". Additionally blocked: ",
+            s(0),
+            ", ",
+            s(3),
+            ", ",
+            s(9),
+            ", ",
+            s(15),
+            "."),
+        react_1.default.createElement(date_picker_1.DatePicker, { maxDate: d(20), minDate: d(-5), onChange: (0, action_1.action)("onChange", setValue), selectedDate: value, unavailableDates: [d(0), d(3), d(9), d(15)] })));
+}
+// ─── Bottom content slot ───────────────────────────────────────────────────────
+/**
+ * The `bottomContent` prop renders arbitrary JSX below the calendar grid.
+ * Useful for legends, CTAs, or pricing summaries.
+ */
+function WithBottomContent() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "Custom content rendered below the calendar grid."),
+        react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: react_1.default.createElement("div", { className: "border-t pt-2 text-sm text-gray-600" },
+                react_1.default.createElement("p", null, "Legend: highlighted = special offer")), onChange: (0, action_1.action)("onChange", setValue), selectedDate: value })));
+}
+// ─── onMonthChange callback ────────────────────────────────────────────────────
+/**
+ * `onMonthChange` fires whenever the user navigates to a different month.
+ * The currently visible month is displayed below the description.
+ */
+function OnMonthChange() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const [lastMonth, setLastMonth] = (0, react_1.useState)("—");
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Navigate with the arrows. Last reported month: ",
+            react_1.default.createElement("strong", null, lastMonth)),
+        react_1.default.createElement(date_picker_1.DatePicker, { onChange: (0, action_1.action)("onChange", setValue), onMonthChange: (months) => {
+                const m = months.at(0);
+                setLastMonth(m ? `${m.year}-${String(m.month + 1).padStart(2, "0")}` : "—");
+            }, selectedDate: value })));
+}
+// ─── All features together ─────────────────────────────────────────────────────
+/**
+ * Kitchen-sink story combining min/max, unavailable dates, datesConfig flags,
+ * bottom content, and onMonthChange — useful for regression testing the full API.
+ */
+function AllFeatures() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const datesConfig = [
+        { flag: "flag-1", dates: [d(3), d(4)] },
+        { flag: "flag-2", dates: [d(6), d(7)], isDisabled: true },
+    ];
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Window: ",
+            s(-3),
+            " \u2192 ",
+            s(25),
+            ". Blocked: ",
+            s(0),
+            ", ",
+            s(10),
+            ". ",
+            react_1.default.createElement("code", null, "flag-1"),
+            ": ",
+            s(3),
+            ", ",
+            s(4),
+            ".",
+            " ",
+            react_1.default.createElement("code", null, "flag-2"),
+            " (disabled): ",
+            s(6),
+            ", ",
+            s(7),
+            "."),
+        react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: react_1.default.createElement("div", { className: "border-t pt-2 text-xs text-gray-500" }, "flag-1 = highlighted \u00B7 flag-2 = disabled highlight"), datesConfig: datesConfig, maxDate: d(25), minDate: d(-3), onChange: (0, action_1.action)("onChange", setValue), onMonthChange: (months) => { var _a; return console.log("month changed", (_a = months.at(0)) === null || _a === void 0 ? void 0 : _a.month); }, selectedDate: value, unavailableDates: [d(0), d(10)] })));
 }

package/date-range-picker/date-range-picker-decade.js

@@ -32,9 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePickerDecade = void 0;
 const translations_1 = require("@uxf/core-react/translations");
@@ -44,7 +41,7 @@ const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range
 const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
 const use_month_1 = require("@uxf/datepicker/hooks/use-month");
 const use_year_1 = require("@uxf/datepicker/hooks/use-year");
-const dayjs_1 = __importDefault(require("dayjs"));
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
@@ -58,17 +55,17 @@ exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
     });
     const { yearLabel } = (0, use_year_1.useYear)({
         year: currentYear,
-        yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        yearLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("YYYY"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
     });
     const { monthLabel } = (0, use_month_1.useMonth)({
         firstDayOfWeek,
         month: currentMonth,
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
         year: currentYear,
     });
-    const canGoToPrevDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).subtract(5, "years").toDate());
-    const canGoToNextDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).add(5, "years").toDate());
+    const canGoToPrevDecade = canGoToYear((0, date_1.dayjsTz)(new Date(currentYear, 0)).subtract(5, "years").toDate());
+    const canGoToNextDecade = canGoToYear((0, date_1.dayjsTz)(new Date(currentYear, 0)).add(5, "years").toDate());
     const handleGoToPrevDecadeClick = (0, react_1.useCallback)(() => {
         if (canGoToPrevDecade) {
             goToPrevYear(9);
@@ -102,6 +99,6 @@ exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
                 children: yearLabel,
                 isDisabled: true,
             } }),
-        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(year.date).year() === currentYear && "uxf-calendar__cell-year--current"), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
+        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, date_1.dayjsTz)(year.date).year() === currentYear && "uxf-calendar__cell-year--current"), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
 });
 exports.DateRangePickerDecade.displayName = "UxfUiDatePickerDecade";

package/date-range-picker/date-range-picker-month.js

@@ -32,16 +32,13 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePickerMonth = void 0;
 const translations_1 = require("@uxf/core-react/translations");
 const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
 const use_month_1 = require("@uxf/datepicker/hooks/use-month");
 const use_year_1 = require("@uxf/datepicker/hooks/use-year");
-const dayjs_1 = __importDefault(require("dayjs"));
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
@@ -50,16 +47,16 @@ exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
     const dateRangePickerProps = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
     const { canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth } = dateRangePickerProps;
     const { monthLabel } = (0, use_month_1.useMonth)({
-        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        dayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("D"),
         firstDayOfWeek,
         month: props.month,
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
-        weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
+        weekdayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("dd"),
         year: props.year,
     });
     const { yearLabel } = (0, use_year_1.useYear)({
         year: props.year,
-        yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
+        yearLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("YYYY"),
     });
     const handleGoToPrevMonth = (0, react_1.useCallback)(() => {
         goToPrevMonthsByOneMonth();

package/date-range-picker/date-range-picker-year.js

@@ -32,9 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePickerYear = void 0;
 const translations_1 = require("@uxf/core-react/translations");
@@ -43,7 +40,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
 const use_month_1 = require("@uxf/datepicker/hooks/use-month");
 const use_year_1 = require("@uxf/datepicker/hooks/use-year");
-const dayjs_1 = __importDefault(require("dayjs"));
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DateRangePickerYear = (0, react_1.memo)((props) => {
@@ -54,13 +51,13 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
     const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
     const { months, yearLabel } = (0, use_year_1.useYear)({
         year: currentYear,
-        yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        yearLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("YYYY"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
     });
     const { monthLabel } = (0, use_month_1.useMonth)({
         firstDayOfWeek,
         month: currentMonth,
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
         year: currentYear,
     });
     const handleGoToNextYear = (0, react_1.useCallback)(() => {
@@ -98,6 +95,6 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
                 onClick: handleYearClick,
                 title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.selectYear) !== null && _k !== void 0 ? _k : t("uxf-ui-date-range-picker:select-year"),
             } }),
-        react_1.default.createElement("div", { className: "uxf-calendar__year" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(month.date).month() === currentMonth && "uxf-calendar__cell-month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
+        react_1.default.createElement("div", { className: "uxf-calendar__year" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, date_1.dayjsTz)(month.date).month() === currentMonth && "uxf-calendar__cell-month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
 });
 exports.DateRangePickerYear.displayName = "UxfUiDatePickerYear";

package/date-range-picker/date-range-picker.spec.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const snap_test_1 = require("../utils/snap-test");
 const date_range_picker_stories_1 = require("./date-range-picker.stories");
-(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_range_picker_stories_1.Default, null));
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_range_picker_stories_1.Basic, null));

package/date-range-picker/date-range-picker.stories.d.ts

@@ -1,2 +1,58 @@
 import React from "react";
-export declare function Default(): React.JSX.Element;
+/** Minimal range picker with no constraints. Click start date then end date. */
+export declare function Basic(): React.JSX.Element;
+/** Opens with a range already selected. Shows the highlighted band immediately. */
+export declare function PreSelected(): React.JSX.Element;
+/**
+ * Only dates within a fixed window are selectable.
+ * Useful for short-stay booking forms with a specific availability window.
+ */
+export declare function MinMaxDates(): React.JSX.Element;
+/**
+ * A cluster of dates is marked unavailable.
+ * The user cannot start or end a range on those dates.
+ */
+export declare function UnavailableDates(): React.JSX.Element;
+/**
+ * `minSelectedDays` enforces a minimum stay of 3 days.
+ * The end date cannot be selected closer than 3 days after the start date.
+ */
+export declare function MinStayDays(): React.JSX.Element;
+/**
+ * `exactSelectedDays` pins the stay to exactly 5 days.
+ * Selecting a start date automatically highlights the fixed-length range.
+ */
+export declare function ExactStayDays(): React.JSX.Element;
+/**
+ * `numberOfMonths={2}` shows the current and next month side-by-side.
+ * Handy when users typically book multi-week stays spanning a month boundary.
+ */
+export declare function TwoMonthView(): React.JSX.Element;
+/**
+ * `datesConfig` lets you style and disable arbitrary date groups independently of
+ * the global `unavailableDates` list.
+ */
+export declare function DatesConfigFlags(): React.JSX.Element;
+/**
+ * `bottomContent` renders arbitrary JSX below the calendar.
+ * Typical uses: price summary, legend, or action buttons.
+ */
+export declare function WithBottomContent(): React.JSX.Element;
+/**
+ * Regression story for the DST off-by-one bug.
+ *
+ * In Europe, clocks go back on the night of 2026-10-25 → 2026-10-26 (CEST → CET).
+ * Before the fix, `toDateString()` would misread a UTC-midnight Date in a UTC+ timezone
+ * and shift it one day back, making Oct 26 appear as Oct 25 in the calendar.
+ *
+ * This story opens on October 2026 with minSelectedDays=2 so you can verify that:
+ * - Oct 25 and Oct 26 are both visible as distinct, correct cells
+ * - Selecting Oct 25 as start date allows Oct 26 as the earliest valid end date
+ * - The highlighted range 2026-10-25 → 2026-10-26 renders without off-by-one shift
+ */
+export declare function DstBoundaryOct2026(): React.JSX.Element;
+/**
+ * Kitchen-sink story: two months, min/max window, blocked dates, datesConfig flags,
+ * minimum 2-day stay, and a bottom content footer. Good for regression testing.
+ */
+export declare function AllFeatures(): React.JSX.Element;

package/date-range-picker/date-range-picker.stories.js

@@ -33,31 +33,232 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = Default;
+exports.Basic = Basic;
+exports.PreSelected = PreSelected;
+exports.MinMaxDates = MinMaxDates;
+exports.UnavailableDates = UnavailableDates;
+exports.MinStayDays = MinStayDays;
+exports.ExactStayDays = ExactStayDays;
+exports.TwoMonthView = TwoMonthView;
+exports.DatesConfigFlags = DatesConfigFlags;
+exports.WithBottomContent = WithBottomContent;
+exports.DstBoundaryOct2026 = DstBoundaryOct2026;
+exports.AllFeatures = AllFeatures;
 const noop_1 = require("@uxf/core/utils/noop");
-const date_1 = require("@uxf/localize/src/date");
+const date_string_1 = require("@uxf/datepicker/utils/date-string");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_range_picker_1 = require("./date-range-picker");
-const today = (0, date_1.dayjsTz)();
-const minDate = today.subtract(10, "day").toDate();
-const maxDate = today.add(20, "days").toDate();
-const unavailableDates = [
-    today.toDate(),
-    today.add(5, "days").toDate(),
-    today.add(6, "days").toDate(),
-    today.add(7, "days").toDate(),
-    today.add(11, "days").toDate(),
-    today.add(12, "days").toDate(),
-];
-function Default() {
-    const [value, setValue] = (0, react_1.useState)(null);
-    const onChange = (0, action_1.action)("onChange", setValue);
-    return (react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8 dark:text-white" },
-        react_1.default.createElement("p", { className: "text-lg" }, "Date range picker with min max and unavailable dates"),
-        react_1.default.createElement(date_range_picker_1.DateRangePicker, { maxDate: maxDate, minDate: minDate, onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value, unavailableDates: unavailableDates }),
-        react_1.default.createElement("p", { className: "text-lg" }, "Date range picker with min selected days"),
-        react_1.default.createElement(date_range_picker_1.DateRangePicker, { minSelectedDays: 6, onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value }),
-        react_1.default.createElement("p", { className: "text-lg" }, "Date range picker with exact selected days"),
-        react_1.default.createElement(date_range_picker_1.DateRangePicker, { exactSelectedDays: 4, onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value })));
+// Build all demo dates relative to today using timezone-safe arithmetic
+const todayStr = (0, date_string_1.todayDateString)();
+const d = (n) => (0, date_string_1.fromDateString)((0, date_string_1.addDays)(todayStr, n));
+const s = (n) => (0, date_string_1.addDays)(todayStr, n); // DateString for use in descriptions
+// ─── Basic usage ───────────────────────────────────────────────────────────────
+/** Minimal range picker with no constraints. Click start date then end date. */
+function Basic() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "Click a start date, then an end date. No constraints applied."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value })));
+}
+// ─── Pre-selected range ────────────────────────────────────────────────────────
+/** Opens with a range already selected. Shows the highlighted band immediately. */
+function PreSelected() {
+    const [value, setValue] = (0, react_1.useState)({
+        from: d(0),
+        to: d(7),
+    });
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Pre-selected range: ",
+            s(0),
+            " \u2192 ",
+            s(7),
+            "."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value })));
+}
+// ─── Min / max date constraints ────────────────────────────────────────────────
+/**
+ * Only dates within a fixed window are selectable.
+ * Useful for short-stay booking forms with a specific availability window.
+ */
+function MinMaxDates() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Bookable window: ",
+            s(2),
+            " \u2192 ",
+            s(16),
+            ". Dates outside are dimmed."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { maxDate: d(16), minDate: d(2), onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value })));
+}
+// ─── Unavailable dates ─────────────────────────────────────────────────────────
+/**
+ * A cluster of dates is marked unavailable.
+ * The user cannot start or end a range on those dates.
+ */
+function UnavailableDates() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const unavailableDates = [d(0), d(5), d(6), d(7), d(11), d(12)];
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Blocked dates: ",
+            s(0),
+            ", ",
+            s(5),
+            ", ",
+            s(6),
+            ", ",
+            s(7),
+            ", ",
+            s(11),
+            ", ",
+            s(12),
+            ". A range cannot cross them."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value, unavailableDates: unavailableDates })));
+}
+// ─── Minimum stay length ───────────────────────────────────────────────────────
+/**
+ * `minSelectedDays` enforces a minimum stay of 3 days.
+ * The end date cannot be selected closer than 3 days after the start date.
+ */
+function MinStayDays() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Minimum 3 days \u2014 if start is ",
+            s(0),
+            ", earliest end is ",
+            s(2),
+            "."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { minSelectedDays: 3, onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value })));
+}
+// ─── Exact stay length ─────────────────────────────────────────────────────────
+/**
+ * `exactSelectedDays` pins the stay to exactly 5 days.
+ * Selecting a start date automatically highlights the fixed-length range.
+ */
+function ExactStayDays() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "Exactly 5 days \u2014 if start is ",
+            s(0),
+            ", end is locked to ",
+            s(4),
+            "."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { exactSelectedDays: 5, onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value })));
+}
+// ─── Two-month view ────────────────────────────────────────────────────────────
+/**
+ * `numberOfMonths={2}` shows the current and next month side-by-side.
+ * Handy when users typically book multi-week stays spanning a month boundary.
+ */
+function TwoMonthView() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "Two months displayed side-by-side for easier range selection."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { numberOfMonths: 2, onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value })));
+}
+// ─── DatesConfig — flags and disabled groups ───────────────────────────────────
+/**
+ * `datesConfig` lets you style and disable arbitrary date groups independently of
+ * the global `unavailableDates` list.
+ */
+function DatesConfigFlags() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const datesConfig = [
+        { flag: "flag-promo", dates: [d(2), d(3)] },
+        { flag: "flag-sold-out", dates: [d(6), d(7)], isDisabled: true },
+    ];
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            react_1.default.createElement("code", null, "flag-promo"),
+            " (selectable): ",
+            s(2),
+            ", ",
+            s(3),
+            " \u00B7 ",
+            react_1.default.createElement("code", null, "flag-sold-out"),
+            " (disabled): ",
+            s(6),
+            ",",
+            " ",
+            s(7),
+            "."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { datesConfig: datesConfig, onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value })));
+}
+// ─── Bottom content slot ───────────────────────────────────────────────────────
+/**
+ * `bottomContent` renders arbitrary JSX below the calendar.
+ * Typical uses: price summary, legend, or action buttons.
+ */
+function WithBottomContent() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "Custom footer rendered below the calendar grid."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: react_1.default.createElement("div", { className: "border-t pt-2 text-sm text-gray-600" },
+                react_1.default.createElement("p", null,
+                    "Average nightly rate: ",
+                    react_1.default.createElement("strong", null, "\u20AC120"))), onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value })));
+}
+// ─── DST boundary — Oct 25/26 2026 ────────────────────────────────────────────
+/**
+ * Regression story for the DST off-by-one bug.
+ *
+ * In Europe, clocks go back on the night of 2026-10-25 → 2026-10-26 (CEST → CET).
+ * Before the fix, `toDateString()` would misread a UTC-midnight Date in a UTC+ timezone
+ * and shift it one day back, making Oct 26 appear as Oct 25 in the calendar.
+ *
+ * This story opens on October 2026 with minSelectedDays=2 so you can verify that:
+ * - Oct 25 and Oct 26 are both visible as distinct, correct cells
+ * - Selecting Oct 25 as start date allows Oct 26 as the earliest valid end date
+ * - The highlighted range 2026-10-25 → 2026-10-26 renders without off-by-one shift
+ */
+function DstBoundaryOct2026() {
+    const [value, setValue] = (0, react_1.useState)({
+        from: (0, date_string_1.fromDateString)("2026-10-25"),
+        to: null,
+    });
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "DST regression: Europe clocks go back on 2026-10-25 \u2192 2026-10-26. Start is pre-set to 2026-10-25; select 2026-10-26 as end (minSelectedDays=2). Both cells must appear on the correct day without any off-by-one shift."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { maxDate: (0, date_string_1.fromDateString)("2026-11-05"), minDate: (0, date_string_1.fromDateString)("2026-10-20"), minSelectedDays: 2, onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value })));
+}
+// ─── All features together ─────────────────────────────────────────────────────
+/**
+ * Kitchen-sink story: two months, min/max window, blocked dates, datesConfig flags,
+ * minimum 2-day stay, and a bottom content footer. Good for regression testing.
+ */
+function AllFeatures() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const datesConfig = [
+        { flag: "flag-promo", dates: [d(3), d(4)] },
+        { flag: "flag-sold-out", dates: [d(9), d(10)], isDisabled: true },
+    ];
+    return (react_1.default.createElement("div", { className: "space-y-2 p-8" },
+        react_1.default.createElement("p", { className: "text-sm text-gray-500" },
+            "2 months \u00B7 window ",
+            s(-1),
+            " \u2192 ",
+            s(30),
+            " \u00B7 blocked: ",
+            s(0),
+            ", ",
+            s(15),
+            " \u00B7 ",
+            react_1.default.createElement("code", null, "flag-promo"),
+            ": ",
+            s(3),
+            ", ",
+            s(4),
+            " ",
+            "\u00B7 ",
+            react_1.default.createElement("code", null, "flag-sold-out"),
+            ": ",
+            s(9),
+            ", ",
+            s(10),
+            " \u00B7 min 2 days."),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: react_1.default.createElement("div", { className: "border-t pt-2 text-xs text-gray-500" }, "Promo = discounted rate \u00B7 Sold-out = unavailable"), datesConfig: datesConfig, maxDate: d(30), minDate: d(-1), minSelectedDays: 2, numberOfMonths: 2, onChange: (0, action_1.action)("onChange", setValue), onClosePopover: noop_1.noop, selectedDates: value, unavailableDates: [d(0), d(15)] })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.110.0",
+    "version": "11.111.0-canary.1",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -25,7 +25,7 @@
         "@headlessui/react": "1.7.19",
         "@uxf/core": "11.110.0",
         "@uxf/core-react": "11.110.0",
-        "@uxf/datepicker": "11.110.0",
+        "@uxf/datepicker": "11.111.0-canary.1",
         "@uxf/localize": "11.110.0",
         "@uxf/styles": "11.110.0",
         "dayjs": "^1.11.19",
@@ -41,7 +41,7 @@
         "@types/react-dom": "18.3.7",
         "@uxf/core": "11.110.0",
         "@uxf/core-react": "11.110.0",
-        "@uxf/datepicker": "11.110.0",
+        "@uxf/datepicker": "11.111.0-canary.1",
         "@uxf/localize": "11.110.0",
         "@uxf/styles": "11.110.0",
         "dayjs": "^1.11.19",