@uxf/ui 11.111.0-canary.1 → 11.111.0

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.Basic, null));
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_picker_stories_1.Default, null));

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

@@ -1,43 +1,2 @@
 import React from "react";
-/** 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;
+export declare function Default(): React.JSX.Element;

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

@@ -33,213 +33,57 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-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");
+exports.Default = Default;
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_picker_1 = require("./date-picker");
-// 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 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() {
     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" }, "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)] })));
+    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);
 }

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.Basic, null));
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_range_picker_stories_1.Default, null));

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

@@ -1,58 +1,2 @@
 import React from "react";
-/** 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;
+export declare function Default(): React.JSX.Element;

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

@@ -33,232 +33,35 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.Default = Default;
 const noop_1 = require("@uxf/core/utils/noop");
-const date_string_1 = require("@uxf/datepicker/utils/date-string");
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_range_picker_1 = require("./date-range-picker");
-// 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 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);
-    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)] })));
+    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 raw"),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value }),
+        react_1.default.createElement("p", { className: "text-lg" }, "Date range picker 2.4.2026 - 12.4.2026"),
+        react_1.default.createElement(date_range_picker_1.DateRangePicker, { maxDate: new Date("2026-04-12"), minDate: new Date("2026-04-02"), minSelectedDays: 2, onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value }),
+        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 })));
 }

package/menu/components/menu-item.js

@@ -45,7 +45,14 @@ const menu_item_button_1 = require("./menu-item-button");
 function MenuItem(props) {
     var _a, _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(props.activeTree.isActive);
-    const button = (react_1.default.createElement(menu_item_button_1.MenuItemButton, { LinkComponent: (_b = (_a = props.item.as) !== null && _a !== void 0 ? _a : props.LinkComponent) !== null && _b !== void 0 ? _b : "a", badge: props.item.badge, hasChildren: (0, is_not_nil_1.isNotNil)(props.item.children) && (0, is_not_empty_1.isNotEmpty)(props.item.children), href: props.item.href, icon: props.item.icon, isActive: props.activeTree.isActive, isOpen: isOpen, label: props.item.label, level: props.level, onClick: () => setIsOpen((prev) => !prev) }));
+    const button = (react_1.default.createElement(menu_item_button_1.MenuItemButton, { LinkComponent: (_b = (_a = props.item.as) !== null && _a !== void 0 ? _a : props.LinkComponent) !== null && _b !== void 0 ? _b : "a", badge: props.item.badge, hasChildren: (0, is_not_nil_1.isNotNil)(props.item.children) && (0, is_not_empty_1.isNotEmpty)(props.item.children), href: props.item.href, icon: props.item.icon, isActive: props.activeTree.isActive, isOpen: isOpen, label: props.item.label, level: props.level, onClick: () => {
+            if ((0, is_not_nil_1.isNotNil)(props.item.onClick)) {
+                props.item.onClick();
+            }
+            else {
+                setIsOpen((prev) => !prev);
+            }
+        } }));
     if ((0, is_nil_1.isNil)(props.item.children) || (0, is_empty_1.isEmpty)(props.item.children)) {
         return button;
     }

package/menu/menu.stories.js

@@ -34,6 +34,11 @@ const CONFIGURATION = [
         icon: "file",
         badge: react_1.default.createElement(badge_1.Badge, null, "5"),
     },
+    {
+        label: "Link with onClick",
+        icon: "file",
+        onClick: () => alert("clicked"),
+    },
 ];
 function Default() {
     return (react_1.default.createElement("div", { className: "fixed inset-y-0 left-0 w-60 bg-white p-1" },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.111.0-canary.1",
+    "version": "11.111.0",
     "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.111.0-canary.1",
+        "@uxf/datepicker": "11.110.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.111.0-canary.1",
+        "@uxf/datepicker": "11.110.1",
         "@uxf/localize": "11.110.0",
         "@uxf/styles": "11.110.0",
         "dayjs": "^1.11.19",

package/text-input/text-input.stories.js

@@ -49,6 +49,7 @@ const action_1 = require("../utils/action");
 function Default() {
     const [value, setValue] = (0, react_1.useState)("");
     const [timeValue, setTimeValue] = (0, react_1.useState)("");
+    const [prefillValue, setPrefillValue] = (0, react_1.useState)("Prefilled text value");
     const onChange = (0, action_1.action)("onChange", setValue);
     const onTimeChange = (0, action_1.action)("onTimeChange", setTimeValue);
     const onCopy = (0, action_1.action)("onCopy", async () => {
@@ -64,6 +65,7 @@ function Default() {
         react_1.default.createElement(text_input_1.TextInput, { helperText: "Error helper text", isReadOnly: true, label: "Read only input", leftAddon: "https://", leftElement: "\uD83C\uDF37", name: "readOnly", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: ".cz", rightElement: "\uD83D\uDD14", value: value }),
         react_1.default.createElement(text_input_1.TextInput, { helperText: "Error helper text", isDisabled: true, label: "Disabled input", leftAddon: "https://", leftElement: "\uD83C\uDF37", name: "disabled", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: ".cz", rightElement: "\uD83D\uDD14", value: value }),
         react_1.default.createElement(text_input_1.TextInput, { label: "Default html time input", name: "defaultHtmlTime", onChange: onTimeChange, placeholder: "Some beautiful placeholder...", type: "time", value: timeValue }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Input with prefilled value", name: "withValue", onChange: setPrefillValue, value: prefillValue }),
         react_1.default.createElement(text_input_1.TextInput, { label: "Copy to clipboard input", leftAddon: "I can be copied!", name: "copyToClipboard", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: react_1.default.createElement(button_1.Button, { className: "size-full rounded-l-none border-none", isDisabled: value === "", onClick: onCopy, variant: "secondary" },
                 react_1.default.createElement(icon_1.Icon, { className: "w-4", name: "copy" })), value: value })));
 }