@uxf/ui 11.112.1 → 11.114.0

package/avatar-file-input/avatar-file-input.stories.js

@@ -42,13 +42,11 @@ function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", (v) => {
         return new Promise(() => {
-            // eslint-disable-next-line no-console
             console.log("Changed:", v);
             setValue(v);
         });
     });
     const onUploadError = (err) => {
-        // eslint-disable-next-line no-console
         console.log("Upload error", err);
     };
     return (react_1.default.createElement("div", { className: "space-y-4 p-20" },

package/button/button.stories.js

@@ -45,7 +45,6 @@ function Basic() {
     const [isDisabled, setIsDisabled] = (0, react_1.useState)(false);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    // eslint-disable-next-line no-console
     const onClick = console.log;
     const gridColumnsCount = config.variants.length * config.sizes.length + 1;
     const gridTemplateColumns = `repeat(${gridColumnsCount}, 180px)`;
@@ -73,7 +72,6 @@ function Basic() {
 }
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    // eslint-disable-next-line no-console
     const onClick = console.log;
     return (react_1.default.createElement("div", { className: "space-y-2 p-20" }, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { className: "space-y-2 pb-4", key: `${size}${color}${variant}` },
         react_1.default.createElement("div", { className: "text-sm dark:text-gray-100" },

package/button-group/button-group.stories.js

@@ -10,7 +10,6 @@ const icon_1 = require("../icon");
 const tooltip_1 = require("../tooltip");
 const index_1 = require("./index");
 function Default() {
-    // eslint-disable-next-line no-console
     const onClick = console.log;
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.ButtonGroup, null,

package/button-list/button-list.js

@@ -46,7 +46,7 @@ const button_1 = require("../button");
 const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
 const MenuButton = (0, react_3.forwardRef)((props, ref) => {
-    // eslint-disable-next-line react/destructuring-assignment,@typescript-eslint/no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { as = "a", variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
     const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({

package/button-list/button-list.stories.js

@@ -30,27 +30,21 @@ function Default() {
             ], variant: "secondary", visibleButtonsCount: 4 }),
         react_1.default.createElement(index_1.ButtonList, { buttons: [
                 { label: "IconButton", isIconButton: true, icon: "camera" },
-                // eslint-disable-next-line no-console
                 { label: "First item", onClick: console.log },
                 { label: "Second item", color: "positive" },
                 { label: "Third item" },
-                // eslint-disable-next-line no-console
                 { label: "Fourth item", onClick: console.log },
             ], visibleButtonsCount: 3 }),
         react_1.default.createElement(index_1.ButtonList, { buttons: [
-                // eslint-disable-next-line no-console
                 { icon: "check", label: "First item", onClick: console.log },
                 { icon: "user", label: "Second item", color: "positive" },
                 { icon: "cloud", label: "Third item" },
-                // eslint-disable-next-line no-console
                 { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
             ], color: "negative", openButton: empty_object_1.EMPTY_OBJECT, size: "sm", variant: "secondary", visibleButtonsCount: 1 }),
         react_1.default.createElement(index_1.ButtonList, { buttons: [
-                // eslint-disable-next-line no-console
                 { icon: "check", label: "First item", onClick: console.log, color: "negative" },
                 { icon: "user", label: "Second item", color: "positive", size: "default" },
                 { icon: "cloud", label: "Third item" },
-                // eslint-disable-next-line no-console
                 { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
             ], color: "positive", openButton: { variant: "secondary", color: "default" }, size: "sm", visibleButtonsCount: 3 })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },

package/date-picker/date-picker-content.js

@@ -40,7 +40,6 @@ const date_picker_decade_1 = require("./date-picker-decade");
 const date_picker_month_1 = require("./date-picker-month");
 const date_picker_year_1 = require("./date-picker-year");
 const DatePickerContent = (props) => {
-    // eslint-disable-next-line react/destructuring-assignment
     const { goToDate, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     const onMonthChange = props.onMonthChange;
     const [viewMode, setViewMode] = (0, react_1.useState)("month");

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-content.js

@@ -40,7 +40,6 @@ const date_range_picker_decade_1 = require("./date-range-picker-decade");
 const date_range_picker_month_1 = require("./date-range-picker-month");
 const date_range_picker_year_1 = require("./date-range-picker-year");
 const DateRangePickerContent = (props) => {
-    // eslint-disable-next-line react/destructuring-assignment
     const { goToDate, activeMonths } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
     const [viewMode, setViewMode] = (0, react_1.useState)("month");
     const onYearSelect = (0, react_1.useCallback)(() => setViewMode("decade"), [setViewMode]);

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,35 +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() {
+// 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);
-    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 })));
+    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/dropdown/dropdown.js

@@ -39,7 +39,6 @@ const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props")
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const Item = (0, react_1.forwardRef)((props, ref) => {
-    // eslint-disable-next-line react/destructuring-assignment
     const { as = "a", children, className, ...restProps } = props;
     const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({

package/file-input/file-input.stories.js

@@ -42,7 +42,6 @@ function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
     const onUploadError = (err) => {
-        // eslint-disable-next-line no-console
         console.log("Upload error", err);
     };
     return (react_1.default.createElement("div", { className: "max-w-screen-sm space-y-2 p-20" },

package/icon-button/icon-button.js

@@ -38,7 +38,6 @@ const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importStar(require("react"));
 exports.IconButton = (0, react_1.forwardRef)((props, ref) => {
-    // eslint-disable-next-line react/destructuring-assignment
     const { className, iconName, iconSize, label, ...buttonProps } = props;
     return (react_1.default.createElement(button_1.Button, { className: `uxf-icon-button ${className !== null && className !== void 0 ? className : ""}`, ref: ref, ...buttonProps },
         react_1.default.createElement(icon_1.Icon, { "aria-label": label, name: iconName, size: iconSize })));

package/icon-button/icon-button.stories.js

@@ -42,7 +42,6 @@ function Default() {
     const [isDisabled, setIsDisabled] = (0, react_1.useState)(false);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const config = (0, storybook_config_1.useStorybookConfig)("IconButton");
-    // eslint-disable-next-line no-console
     const onClick = console.log;
     const gridColumnsCount = config.variants.length * config.sizes.length + 1;
     const gridTemplateColumns = `repeat(${gridColumnsCount}, 100px)`;

package/input/input.js

@@ -48,6 +48,7 @@ function getChildrenById(children, componentName) {
         .filter(react_1.isValidElement)
         .find((ch) => ch.type.displayName === componentName);
 }
+// eslint-disable-next-line complexity
 exports.Input = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const innerInputRef = (0, react_1.useRef)(null);

package/list-item/list-item.js

@@ -39,7 +39,6 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 exports.ListItem = (0, react_1.forwardRef)((props, ref) => {
-    // eslint-disable-next-line react/destructuring-assignment
     const { as = "a", className, children, endElement, endIcon, ...restProps } = props;
     const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({

package/list-item/list-item.stories.js

@@ -8,7 +8,6 @@ const react_1 = __importDefault(require("react"));
 const icon_1 = require("../icon");
 const index_1 = require("./index");
 function Default() {
-    // eslint-disable-next-line no-console
     const onClick = console.log;
     const storyListItem = (react_1.default.createElement("div", { className: "dark:text-white" },
         react_1.default.createElement(index_1.ListItem, { endIcon: "chevronRight", onClick: onClick }, "Jm\u00E9no p\u0159\u00EDjmen\u00ED"),

package/message/message.stories.js

@@ -15,7 +15,6 @@ const getConfirmForSize = (variant, colors) => {
                 cancelLabel: "Zrušit",
                 title: "Title",
                 description: "Description",
-                /* eslint-disable no-console */
                 onAccept: () => console.log("accepted"),
                 onCancel: () => console.log("canceled"),
                 color,
@@ -30,7 +29,6 @@ const getConfirmForSize = (variant, colors) => {
                 cancelLabel: "Rozumím",
                 title: "Title",
                 description: "Description",
-                /* eslint-disable no-console */
                 onCancel: () => console.log("canceled"),
                 color,
                 variant,
@@ -46,7 +44,6 @@ const getConfirmForSize = (variant, colors) => {
                 cancelLabel: "Zrušit",
                 title: "Title",
                 description: "Description",
-                /* eslint-disable no-console */
                 onAccept: () => console.log("accepted"),
                 onCancel: () => console.log("canceled"),
                 color,

package/multi-combobox/multi-combobox.stories.js

@@ -55,7 +55,6 @@ const options = [
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", (v) => {
-        // eslint-disable-next-line no-console
         console.log("Select values: ", v);
         setValue(v);
     });
@@ -72,7 +71,6 @@ function Default() {
 function Async() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", (v) => {
-        // eslint-disable-next-line no-console
         console.log("Select values: ", v);
         setValue(v);
     });

package/multi-select/multi-select.stories.js

@@ -54,7 +54,6 @@ const options = [
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", (v) => {
-        // eslint-disable-next-line no-console
         console.log("Select values: ", v);
         setValue(v);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.112.1",
+    "version": "11.114.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,11 +23,11 @@
     "peerDependencies": {
         "@floating-ui/react": "^0.27.17",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.111.2",
-        "@uxf/core-react": "11.111.2",
-        "@uxf/datepicker": "11.111.2",
-        "@uxf/localize": "11.111.2",
-        "@uxf/styles": "11.111.2",
+        "@uxf/core": "11.114.0",
+        "@uxf/core-react": "11.114.0",
+        "@uxf/datepicker": "11.114.0",
+        "@uxf/localize": "11.114.0",
+        "@uxf/styles": "11.114.0",
         "dayjs": "^1.11.19",
         "react": ">= 18.2.0",
         "react-dom": ">= 18.2.0",
@@ -39,11 +39,11 @@
         "@types/node": "24",
         "@types/react": "18.3.27",
         "@types/react-dom": "18.3.7",
-        "@uxf/core": "11.111.2",
-        "@uxf/core-react": "11.111.2",
-        "@uxf/datepicker": "11.111.2",
-        "@uxf/localize": "11.111.2",
-        "@uxf/styles": "11.111.2",
+        "@uxf/core": "11.114.0",
+        "@uxf/core-react": "11.114.0",
+        "@uxf/datepicker": "11.114.0",
+        "@uxf/localize": "11.114.0",
+        "@uxf/styles": "11.114.0",
         "dayjs": "^1.11.19",
         "react-dropzone": "^14.4.0"
     }

package/select/select.stories.js

@@ -57,7 +57,6 @@ const options = [
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", (v) => {
-        // eslint-disable-next-line no-console
         console.log("Select value: ", v);
         setValue(v);
     });

package/text-link/text-link.js

@@ -39,7 +39,6 @@ const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props")
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 exports.TextLink = (0, react_1.forwardRef)((props, ref) => {
-    // eslint-disable-next-line react/destructuring-assignment
     const { as = "a", className, children, variant, ...restProps } = props;
     const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({

package/text-link/text-link.stories.js

@@ -7,7 +7,6 @@ exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
 function Default() {
-    // eslint-disable-next-line no-console
     const onClick = console.log;
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "flex gap-4 p-20" },

package/time-picker/time-picker-hour.js

@@ -41,7 +41,6 @@ const use_hour_1 = require("@uxf/datepicker/hooks/use-hour");
 const react_1 = __importStar(require("react"));
 const TimePickerHour = (props) => {
     const hourRef = (0, react_1.useRef)(null);
-    // eslint-disable-next-line react/destructuring-assignment
     const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { onClick, onKeyDown, tabIndex, isSelected } = (0, use_hour_1.useHour)({
         hour: props.hour,

package/time-picker/time-picker-minute.js

@@ -41,7 +41,6 @@ const use_minute_1 = require("@uxf/datepicker/hooks/use-minute");
 const react_1 = __importStar(require("react"));
 const TimePickerMinute = (props) => {
     const minuteRef = (0, react_1.useRef)(null);
-    // eslint-disable-next-line react/destructuring-assignment
     const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { isSelected, onClick, onKeyDown, tabIndex } = (0, use_minute_1.useMinute)({
         minute: props.minute,