@windrun-huaiin/third-ui 29.2.0 → 30.0.0

package/dist/main/calendar/random-date-range-dialog.js

@@ -5,14 +5,17 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactDom = require('react-dom');
 var icons = require('@windrun-huaiin/base-ui/icons');
+var lib = require('@windrun-huaiin/base-ui/lib');
 var utils = require('@windrun-huaiin/lib/utils');
+var dialogLoadingAction = require('../alert-dialog/dialog-loading-action.js');
+var xButton = require('../buttons/x-button.js');
 var usePressFeedback = require('../buttons/use-press-feedback.js');
 
 const DEFAULT_RANGE_DAYS = 7;
-const MAX_RANGE_DAYS = 30;
-const TRACK_MIN_DAYS = 45;
-const TRACK_PADDING_DAYS = 20;
-const DIALOG_ICON_BUTTON_CLASS_NAME = 'inline-flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white text-slate-500 transition duration-150 hover:border-black/20 hover:bg-black/5 hover:text-slate-900 dark:border-white/10 dark:bg-slate-950 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-white';
+const MAX_RANGE_DAYS = 31;
+const VISIBLE_TRACK_DAYS = 36;
+const EDGE_OVERFLOW_PIXELS_PER_DAY = 24;
+const DIALOG_ICON_BUTTON_CLASS_NAME = 'inline-flex h-8 w-8 items-center justify-center rounded-full bg-white text-slate-500 transition duration-150 hover:bg-black/5 hover:text-slate-900 dark:bg-slate-950 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-white';
 const DIALOG_NAV_BUTTON_CLASS_NAME = 'inline-flex h-8 w-8 items-center justify-center rounded-full transition-[transform,background-color,color,box-shadow,border-color] duration-150 ease-out';
 const DIALOG_NAV_BUTTON_REST_CLASS_NAME = 'border border-black/10 bg-white text-slate-500 shadow-[0_1px_2px_rgba(15,23,42,0.08)] hover:border-black/15 dark:border-white/10 dark:bg-slate-950 dark:text-slate-400 dark:hover:border-white/15';
 const DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME = 'translate-y-[2px] scale-[0.9] border border-black/30 bg-slate-300 text-slate-950 shadow-[inset_0_2px_4px_rgba(15,23,42,0.22)] dark:border-white/25 dark:bg-white/20 dark:text-white dark:shadow-[inset_0_2px_4px_rgba(255,255,255,0.16)]';
@@ -54,12 +57,31 @@ function clampWindowDays(days) {
 }
 function buildTrackRange(referenceDate, windowDays = DEFAULT_RANGE_DAYS) {
     const resolvedWindowDays = clampWindowDays(windowDays);
-    const resolvedTotalDays = Math.max(TRACK_MIN_DAYS, resolvedWindowDays + TRACK_PADDING_DAYS);
-    const daysBefore = Math.floor((resolvedTotalDays - resolvedWindowDays) / 3);
+    const daysBefore = Math.floor((VISIBLE_TRACK_DAYS - resolvedWindowDays) / 3);
     const startDate = addDays(referenceDate, -daysBefore);
-    const endDate = addDays(startDate, resolvedTotalDays - 1);
+    const endDate = addDays(startDate, VISIBLE_TRACK_DAYS - 1);
     return { startDate, endDate };
 }
+function ensureRangeVisibleOnTrack(range, bounds) {
+    if (!range.startDate || !range.endDate || !bounds.startDate || !bounds.endDate) {
+        return bounds;
+    }
+    let nextStartDate = bounds.startDate;
+    if (compareDateStrings(range.startDate, nextStartDate) < 0) {
+        nextStartDate = range.startDate;
+    }
+    const nextEndDate = addDays(nextStartDate, VISIBLE_TRACK_DAYS - 1);
+    if (compareDateStrings(range.endDate, nextEndDate) > 0) {
+        nextStartDate = addDays(range.endDate, -35);
+    }
+    if (nextStartDate === bounds.startDate && addDays(nextStartDate, VISIBLE_TRACK_DAYS - 1) === bounds.endDate) {
+        return bounds;
+    }
+    return {
+        startDate: nextStartDate,
+        endDate: addDays(nextStartDate, VISIBLE_TRACK_DAYS - 1),
+    };
+}
 function clampDateToRange(date, bounds) {
     if (!bounds.startDate || !bounds.endDate) {
         return date;
@@ -82,6 +104,19 @@ function getDateByRatio(bounds, ratio) {
         return getTodayString();
     }
     const totalDays = Math.max(1, getDaysBetween(bounds.startDate, bounds.endDate));
+    return addDays(bounds.startDate, Math.round(totalDays * Math.max(0, Math.min(1, ratio))));
+}
+function getDateByOverflowRatio(bounds, ratio, trackWidth) {
+    if (!bounds.startDate || !bounds.endDate) {
+        return getTodayString();
+    }
+    const totalDays = Math.max(1, getDaysBetween(bounds.startDate, bounds.endDate));
+    if (ratio < 0) {
+        return addDays(bounds.startDate, Math.floor((ratio * trackWidth) / EDGE_OVERFLOW_PIXELS_PER_DAY));
+    }
+    if (ratio > 1) {
+        return addDays(bounds.endDate, Math.ceil(((ratio - 1) * trackWidth) / EDGE_OVERFLOW_PIXELS_PER_DAY));
+    }
     return addDays(bounds.startDate, Math.round(totalDays * ratio));
 }
 function getRatioByDate(date, bounds) {
@@ -118,8 +153,24 @@ function getMonthEnd(value) {
     const date = parseDateString(value);
     return formatDateString(new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)));
 }
-function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEFAULT_RANGE_DAYS, onOpenChange, onApply, onClear, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+function RollingMonthLabel({ value }) {
+    const [displayValue, setDisplayValue] = React.useState(value);
+    const [previousValue, setPreviousValue] = React.useState(null);
+    React.useEffect(() => {
+        if (value === displayValue) {
+            return undefined;
+        }
+        setPreviousValue(displayValue);
+        setDisplayValue(value);
+        const timeout = window.setTimeout(() => {
+            setPreviousValue(null);
+        }, 180);
+        return () => window.clearTimeout(timeout);
+    }, [displayValue, value]);
+    return (jsxRuntime.jsxs("span", { className: "relative inline-block h-5 min-w-10 overflow-hidden align-bottom", children: [previousValue ? (jsxRuntime.jsx("span", { className: "rd-date-range-month-out absolute inset-x-0 top-0 text-center", children: previousValue })) : null, jsxRuntime.jsx("span", { className: utils.cn('absolute inset-x-0 top-0 text-center', previousValue && 'rd-date-range-month-in'), children: displayValue })] }));
+}
+function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEFAULT_RANGE_DAYS, onOpenChange, loadingActions, loadingFullPage, onApply, onClear, }) {
+    var _a, _b, _c, _d, _e, _f;
     const resolvedDefaultRangeDays = clampWindowDays(defaultRangeDays);
     const [draftRange, setDraftRange] = React.useState(value);
     const [referenceDate, setReferenceDate] = React.useState(anchorDate);
@@ -137,12 +188,15 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
     const resultLabelRef = React.useRef(null);
     const selectionDaysRef = React.useRef(null);
     const dragPreviewRef = React.useRef(null);
+    const trackBoundsRef = React.useRef(trackBounds);
+    const dragStartTrackBoundsRef = React.useRef(null);
     const frameRef = React.useRef(null);
     const pendingClientXRef = React.useRef(null);
     const syncPreviewDomRef = React.useRef(() => { });
     const buildDraggedRangeRef = React.useRef(() => null);
     const previousBodyOverflowRef = React.useRef(null);
     const today = React.useMemo(() => getTodayString(), []);
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     const baseReferenceDate = anchorDate || today;
     const previousOpenRef = React.useRef(false);
     const startRatio = getRatioByDate((_a = draftRange.startDate) !== null && _a !== void 0 ? _a : baseReferenceDate, trackBounds);
@@ -153,22 +207,27 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
     const isSingleDay = ((_c = draftRange.startDate) !== null && _c !== void 0 ? _c : null) === ((_d = draftRange.endDate) !== null && _d !== void 0 ? _d : null);
     const startHandlePercent = isSingleDay ? Math.max(leftPercent - 0.8, 0) : leftPercent;
     const endHandlePercent = isSingleDay ? Math.min(rightPercent + 0.8, 100) : rightPercent;
-    const trackTickCount = Math.max(getDaysBetween((_e = trackBounds.startDate) !== null && _e !== void 0 ? _e : baseReferenceDate, (_f = trackBounds.endDate) !== null && _f !== void 0 ? _f : baseReferenceDate) + 1, 2);
-    const monthLabels = React.useMemo(() => {
-        const values = [trackBounds.startDate, trackBounds.endDate]
-            .filter((item) => Boolean(item))
-            .map((item) => formatMonthShort(item));
-        return [...new Set(values)];
-    }, [trackBounds.endDate, trackBounds.startDate]);
+    const trackTickCount = VISIBLE_TRACK_DAYS;
+    const leftMonthLabel = formatMonthShort((_e = trackBounds.startDate) !== null && _e !== void 0 ? _e : baseReferenceDate);
+    const rightMonthLabel = formatMonthShort((_f = trackBounds.endDate) !== null && _f !== void 0 ? _f : baseReferenceDate);
+    const handleApply = React.useCallback(() => {
+        return onApply(draftRange);
+    }, [draftRange, onApply]);
+    function commitTrackBounds(nextTrackBounds) {
+        trackBoundsRef.current = nextTrackBounds;
+        setTrackBounds(nextTrackBounds);
+    }
     React.useEffect(() => {
         if (open && !previousOpenRef.current) {
+            const nextTrackBounds = buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays);
             const nextRange = {
                 startDate: baseReferenceDate,
                 endDate: addDays(baseReferenceDate, resolvedDefaultRangeDays - 1),
             };
             setDraftRange(nextRange);
             setReferenceDate(baseReferenceDate);
-            setTrackBounds(buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays));
+            trackBoundsRef.current = nextTrackBounds;
+            setTrackBounds(nextTrackBounds);
             setWindowDays(resolvedDefaultRangeDays);
             dragStartRangeRef.current = null;
             dragModeRef.current = null;
@@ -186,16 +245,20 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         setReferenceDate(nextReferenceDate);
         setWindowDays(clampedWindowDays);
         setDraftRange(nextRange);
-        if (!(options === null || options === void 0 ? void 0 : options.preserveTrack)) {
-            setTrackBounds(buildTrackRange(nextReferenceDate, clampedWindowDays));
+        if (options === null || options === void 0 ? void 0 : options.preserveTrack) {
+            commitTrackBounds(ensureRangeVisibleOnTrack(nextRange, trackBoundsRef.current));
+        }
+        else {
+            commitTrackBounds(buildTrackRange(nextReferenceDate, clampedWindowDays));
         }
     }
     const getPreviewPercents = React.useCallback((range) => {
         var _a, _b;
         const start = (_a = range.startDate) !== null && _a !== void 0 ? _a : baseReferenceDate;
         const end = (_b = range.endDate) !== null && _b !== void 0 ? _b : start;
-        const startR = getRatioByDate(start, trackBounds);
-        const endR = getRatioByDate(end, trackBounds);
+        const currentTrackBounds = trackBoundsRef.current;
+        const startR = getRatioByDate(start, currentTrackBounds);
+        const endR = getRatioByDate(end, currentTrackBounds);
         const left = Math.min(startR, endR) * 100;
         const right = Math.max(startR, endR) * 100;
         const width = Math.max(right - left, 0.5);
@@ -207,7 +270,7 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
             startHandle: single ? Math.max(left - 0.8, 0) : left,
             endHandle: single ? Math.min(right + 0.8, 100) : right,
         };
-    }, [baseReferenceDate, trackBounds]);
+    }, [baseReferenceDate]);
     const syncPreviewDom = React.useCallback((range) => {
         const percents = getPreviewPercents(range);
         if (selectionRef.current) {
@@ -231,17 +294,20 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         dragPreviewRef.current = draftRange;
         syncPreviewDom(draftRange);
     }, [draftRange, syncPreviewDom]);
+    React.useEffect(() => {
+        trackBoundsRef.current = trackBounds;
+    }, [trackBounds]);
     function resetReferenceFromClientX(clientX) {
         if (!trackRef.current) {
             return;
         }
         const rect = trackRef.current.getBoundingClientRect();
-        const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const ratio = (clientX - rect.left) / rect.width;
         const nextReferenceDate = getDateByRatio(trackBounds, ratio);
         updateRangeByReference(nextReferenceDate, resolvedDefaultRangeDays, { preserveTrack: true });
     }
     function applyQuickRange(dayCount) {
-        updateRangeByReference(referenceDate, dayCount);
+        updateRangeByReference(referenceDate, dayCount, { preserveTrack: true });
     }
     function shiftReferenceDateByMonths(monthOffset) {
         updateRangeByReference(addMonthsClamped(referenceDate, monthOffset), windowDays);
@@ -255,16 +321,17 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         pointerIdRef.current = pointerId;
         dragStartRangeRef.current = Object.assign({}, draftRange);
         dragPreviewRef.current = Object.assign({}, draftRange);
+        dragStartTrackBoundsRef.current = Object.assign({}, trackBoundsRef.current);
         if (mode === 'window' &&
             clientX !== undefined &&
             trackRef.current &&
             draftRange.startDate &&
             draftRange.endDate &&
-            trackBounds.startDate &&
-            trackBounds.endDate) {
+            dragStartTrackBoundsRef.current.startDate &&
+            dragStartTrackBoundsRef.current.endDate) {
             const rect = trackRef.current.getBoundingClientRect();
-            const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-            const pointerDate = getDateByRatio(trackBounds, ratio);
+            const ratio = (clientX - rect.left) / rect.width;
+            const pointerDate = getDateByRatio(dragStartTrackBoundsRef.current, ratio);
             windowDragOffsetDaysRef.current = getDaysBetween(draftRange.startDate, pointerDate);
         }
         else {
@@ -272,36 +339,62 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         }
     }
     const buildDraggedRange = React.useCallback((clientX) => {
-        if (!dragModeRef.current || !dragStartRangeRef.current || !trackBounds.startDate || !trackBounds.endDate || !trackRef.current) {
+        const currentTrackBounds = trackBoundsRef.current;
+        const dragStartTrackBounds = dragStartTrackBoundsRef.current;
+        if (!dragModeRef.current ||
+            !dragStartRangeRef.current ||
+            !(dragStartTrackBounds === null || dragStartTrackBounds === void 0 ? void 0 : dragStartTrackBounds.startDate) ||
+            !dragStartTrackBounds.endDate ||
+            !currentTrackBounds.startDate ||
+            !currentTrackBounds.endDate ||
+            !trackRef.current) {
             return null;
         }
         const rect = trackRef.current.getBoundingClientRect();
-        const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-        const pointerDate = getDateByRatio(trackBounds, ratio);
+        const ratio = (clientX - rect.left) / rect.width;
+        const pointerDate = getDateByOverflowRatio(dragStartTrackBounds, ratio, rect.width);
         const currentRange = dragStartRangeRef.current;
         if (!currentRange.startDate || !currentRange.endDate) {
             return null;
         }
         if (dragModeRef.current === 'start') {
-            const earliestStart = addDays(currentRange.endDate, -29);
+            const earliestStart = addDays(currentRange.endDate, -30);
             const boundedPointerDate = compareDateStrings(pointerDate, earliestStart) < 0 ? earliestStart : pointerDate;
             const nextStart = compareDateStrings(boundedPointerDate, currentRange.endDate) > 0 ? currentRange.endDate : boundedPointerDate;
-            return { startDate: nextStart, endDate: currentRange.endDate };
+            const nextRange = { startDate: nextStart, endDate: currentRange.endDate };
+            const nextTrackBounds = ensureRangeVisibleOnTrack(nextRange, currentTrackBounds);
+            if (nextTrackBounds !== currentTrackBounds) {
+                trackBoundsRef.current = nextTrackBounds;
+                setDraftRange(nextRange);
+                setTrackBounds(nextTrackBounds);
+            }
+            return nextRange;
         }
         if (dragModeRef.current === 'end') {
             const latestEnd = addDays(currentRange.startDate, MAX_RANGE_DAYS - 1);
             const boundedPointerDate = compareDateStrings(pointerDate, latestEnd) > 0 ? latestEnd : pointerDate;
             const nextEnd = compareDateStrings(boundedPointerDate, currentRange.startDate) < 0 ? currentRange.startDate : boundedPointerDate;
-            return { startDate: currentRange.startDate, endDate: nextEnd };
+            const nextRange = { startDate: currentRange.startDate, endDate: nextEnd };
+            const nextTrackBounds = ensureRangeVisibleOnTrack(nextRange, currentTrackBounds);
+            if (nextTrackBounds !== currentTrackBounds) {
+                trackBoundsRef.current = nextTrackBounds;
+                setDraftRange(nextRange);
+                setTrackBounds(nextTrackBounds);
+            }
+            return nextRange;
         }
         const spanDays = getDaysBetween(currentRange.startDate, currentRange.endDate);
-        const nextStart = clampDateToRange(addDays(pointerDate, -windowDragOffsetDaysRef.current), {
-            startDate: trackBounds.startDate,
-            endDate: addDays(trackBounds.endDate, -spanDays),
-        });
+        const nextStart = addDays(pointerDate, -windowDragOffsetDaysRef.current);
         const nextEnd = addDays(nextStart, spanDays);
-        return { startDate: nextStart, endDate: nextEnd };
-    }, [trackBounds]);
+        const nextRange = { startDate: nextStart, endDate: nextEnd };
+        const nextTrackBounds = ensureRangeVisibleOnTrack(nextRange, currentTrackBounds);
+        if (nextTrackBounds !== currentTrackBounds) {
+            trackBoundsRef.current = nextTrackBounds;
+            setDraftRange(nextRange);
+            setTrackBounds(nextTrackBounds);
+        }
+        return nextRange;
+    }, []);
     React.useEffect(() => {
         syncPreviewDomRef.current = syncPreviewDom;
         buildDraggedRangeRef.current = buildDraggedRange;
@@ -315,6 +408,7 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         document.body.style.userSelect = '';
         const nextRange = dragPreviewRef.current;
         dragStartRangeRef.current = null;
+        dragStartTrackBoundsRef.current = null;
         dragModeRef.current = null;
         pointerIdRef.current = null;
         windowDragOffsetDaysRef.current = 0;
@@ -322,6 +416,7 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
             setDraftRange(nextRange);
             setReferenceDate(nextRange.startDate);
             setWindowDays(getInclusiveDayCount(nextRange));
+            commitTrackBounds(ensureRangeVisibleOnTrack(nextRange, trackBoundsRef.current));
         }
     }
     React.useEffect(() => {
@@ -372,76 +467,111 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         };
     }, [open]);
     if (!open) {
-        return null;
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: dialogLoading });
     }
-    return reactDom.createPortal(jsxRuntime.jsx("div", { className: "fixed inset-0 z-120 flex select-none items-center justify-center bg-slate-950/60 px-3 py-6 backdrop-blur-sm", children: jsxRuntime.jsx("div", { className: "w-full max-w-2xl overflow-hidden rounded-3xl border border-black/10 bg-white shadow-2xl dark:border-white/10 dark:bg-slate-950", children: jsxRuntime.jsxs("div", { className: "space-y-5 p-4", children: [jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center px-16 text-center", children: [jsxRuntime.jsx("div", { ref: resultLabelRef, className: "select-none text-base font-semibold text-slate-900 dark:text-white", children: getRangeLabel(draftRange) }), jsxRuntime.jsxs("div", { className: "absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-2", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => onOpenChange(false), className: DIALOG_ICON_BUTTON_CLASS_NAME, "aria-label": "Cancel", children: jsxRuntime.jsx(icons.XIcon, { className: "h-4 w-4" }) }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                            onApply(draftRange);
-                                            onOpenChange(false);
-                                        }, disabled: !draftRange.startDate || !draftRange.endDate, className: utils.cn(DIALOG_ICON_BUTTON_CLASS_NAME, 'text-slate-700 dark:text-slate-100', 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-black/10 disabled:hover:bg-white disabled:hover:text-slate-700 dark:disabled:hover:border-white/10 dark:disabled:hover:bg-slate-950 dark:disabled:hover:text-slate-100'), "aria-label": "Apply", children: jsxRuntime.jsx(icons.CheckCheckIcon, { className: "h-4 w-4" }) })] })] }), jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('prevYear');
-                                                    shiftReferenceDateByYears(-1);
-                                                }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevYear'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevYear'), { "aria-label": "Previous year", title: "Previous year", children: jsxRuntime.jsx(icons.ChevronsLeftIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('prevMonth');
-                                                    shiftReferenceDateByMonths(-1);
-                                                }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevMonth'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevMonth'), { "aria-label": "Previous month", title: "Previous month", children: jsxRuntime.jsx(icons.ChevronLeftIcon, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                                    const nextRange = {
-                                                        startDate: baseReferenceDate,
-                                                        endDate: addDays(baseReferenceDate, resolvedDefaultRangeDays - 1),
-                                                    };
-                                                    setReferenceDate(baseReferenceDate);
-                                                    setTrackBounds(buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays));
-                                                    setWindowDays(resolvedDefaultRangeDays);
-                                                    setDraftRange(nextRange);
-                                                    onClear === null || onClear === void 0 ? void 0 : onClear(nextRange);
-                                                }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "Current Day" }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                                    const nextRange = {
-                                                        startDate: getMonthStart(referenceDate),
-                                                        endDate: addDays(getMonthStart(referenceDate), MAX_RANGE_DAYS - 1),
-                                                    };
-                                                    const clampedEndDate = compareDateStrings(nextRange.endDate, getMonthEnd(referenceDate)) > 0
-                                                        ? getMonthEnd(referenceDate)
-                                                        : nextRange.endDate;
-                                                    const normalizedRange = {
-                                                        startDate: nextRange.startDate,
-                                                        endDate: clampedEndDate,
-                                                    };
-                                                    setDraftRange(normalizedRange);
-                                                    setWindowDays(getInclusiveDayCount(normalizedRange));
-                                                    setTrackBounds(buildTrackRange(normalizedRange.startDate, getInclusiveDayCount(normalizedRange)));
-                                                }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "This Month" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('nextMonth');
-                                                    shiftReferenceDateByMonths(1);
-                                                }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextMonth'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextMonth'), { "aria-label": "Next month", title: "Next month", children: jsxRuntime.jsx(icons.ChevronRightIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('nextYear');
-                                                    shiftReferenceDateByYears(1);
-                                                }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextYear'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextYear'), { "aria-label": "Next year", title: "Next year", children: jsxRuntime.jsx(icons.ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsxRuntime.jsxs("div", { className: "relative h-24", children: [jsxRuntime.jsxs("div", { className: "absolute inset-x-0 top-0 grid grid-cols-[3.5rem_minmax(0,1fr)_3.5rem] items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400", children: [jsxRuntime.jsxs("span", { className: "relative block select-none text-center", children: [(_g = monthLabels[0]) !== null && _g !== void 0 ? _g : formatMonthShort((_h = trackBounds.startDate) !== null && _h !== void 0 ? _h : baseReferenceDate), jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-1/2 top-7 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-1/2 top-[1.95rem] h-9 w-0.5 -translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] }), jsxRuntime.jsx("div", { className: "flex min-w-0 items-center justify-center gap-1", children: [
-                                                    { label: '+7', days: 7 },
-                                                    { label: '+10', days: 10 },
-                                                    { label: '+15', days: 15 },
-                                                    { label: '+30', days: 30 },
-                                                ].map((item) => (jsxRuntime.jsx("button", { type: "button", onClick: () => applyQuickRange(item.days), className: DIALOG_PILL_BUTTON_COMPACT_CLASS_NAME, children: item.label }, item.label))) }), jsxRuntime.jsxs("span", { className: "relative block select-none text-center", children: [(_j = monthLabels[1]) !== null && _j !== void 0 ? _j : formatMonthShort((_k = trackBounds.endDate) !== null && _k !== void 0 ? _k : baseReferenceDate), jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-1/2 top-7 h-2.5 w-2.5 translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-1/2 top-[1.95rem] h-9 w-0.5 translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] })] }), jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-[3.35rem] h-10 touch-none", onDoubleClick: (event) => {
-                                            event.stopPropagation();
-                                            resetReferenceFromClientX(event.clientX);
-                                        }, children: jsxRuntime.jsxs("div", { ref: trackRef, className: "absolute inset-x-0 top-1/2 h-3 -translate-y-1/2 rounded-full bg-slate-400/30 dark:bg-slate-500/25", children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 top-1/2 grid h-8 -translate-y-1/2 items-center", style: { gridTemplateColumns: `repeat(${trackTickCount}, minmax(0, 1fr))` }, children: Array.from({ length: trackTickCount }, (_, index) => {
-                                                        return (jsxRuntime.jsx("span", { className: "flex justify-center", children: jsxRuntime.jsx("span", { className: utils.cn('rounded-full bg-slate-400/55 dark:bg-slate-500/55', 'h-3 w-px') }) }, index));
-                                                    }) }), jsxRuntime.jsx("div", { ref: selectionRef, className: "absolute top-1/2 z-10 h-4 touch-none -translate-y-1/2 overflow-visible rounded-md border border-sky-500 bg-white dark:border-sky-300 dark:bg-slate-950", style: { left: `${leftPercent}%`, width: `${widthPercent}%` }, onPointerDown: (event) => {
-                                                        event.stopPropagation();
-                                                        beginDrag('window', event.pointerId, event.clientX);
-                                                    }, children: jsxRuntime.jsx("div", { ref: selectionDaysRef, className: "pointer-events-none absolute inset-0 z-30 flex select-none items-center justify-center text-xs font-semibold text-sky-700 dark:text-sky-100", children: `${getInclusiveDayCount(draftRange)}D` }) }), jsxRuntime.jsx("button", { ref: startHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${startHandlePercent}%` }, onPointerDown: (event) => {
-                                                        event.stopPropagation();
-                                                        beginDrag('start', event.pointerId);
-                                                    }, "aria-label": "Adjust start date" }), jsxRuntime.jsx("button", { ref: endHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${endHandlePercent}%` }, onPointerDown: (event) => {
-                                                        event.stopPropagation();
-                                                        beginDrag('end', event.pointerId);
-                                                    }, "aria-label": "Adjust end date" })] }) })] })] })] }) }) }), document.body);
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "fixed inset-0 z-120 flex select-none items-center justify-center bg-slate-950/60 px-3 py-6 backdrop-blur-sm", children: jsxRuntime.jsx("div", { className: "w-full max-w-2xl overflow-hidden rounded-3xl border border-black/10 bg-white shadow-2xl dark:border-white/10 dark:bg-slate-950", children: jsxRuntime.jsxs("div", { className: "space-y-5 p-4", children: [jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center px-9 text-center sm:px-16", children: [jsxRuntime.jsx("div", { ref: resultLabelRef, className: "min-w-0 select-none truncate text-base font-semibold text-slate-900 dark:text-white", children: getRangeLabel(draftRange) }), jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 flex -translate-y-1/2 translate-x-1 items-center sm:translate-x-0", children: jsxRuntime.jsx("button", { type: "button", onClick: () => onOpenChange(false), className: DIALOG_ICON_BUTTON_CLASS_NAME, "aria-label": "Cancel", children: jsxRuntime.jsx(icons.XIcon, { className: "h-4 w-4" }) }) })] }), jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('prevYear');
+                                                            shiftReferenceDateByYears(-1);
+                                                        }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevYear'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevYear'), { "aria-label": "Previous year", title: "Previous year", children: jsxRuntime.jsx(icons.ChevronsLeftIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('prevMonth');
+                                                            shiftReferenceDateByMonths(-1);
+                                                        }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevMonth'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevMonth'), { "aria-label": "Previous month", title: "Previous month", children: jsxRuntime.jsx(icons.ChevronLeftIcon, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                                            const nextRange = {
+                                                                startDate: baseReferenceDate,
+                                                                endDate: addDays(baseReferenceDate, resolvedDefaultRangeDays - 1),
+                                                            };
+                                                            setReferenceDate(baseReferenceDate);
+                                                            commitTrackBounds(buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays));
+                                                            setWindowDays(resolvedDefaultRangeDays);
+                                                            setDraftRange(nextRange);
+                                                            onClear === null || onClear === void 0 ? void 0 : onClear(nextRange);
+                                                        }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "Today" }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                                            const nextRange = {
+                                                                startDate: getMonthStart(referenceDate),
+                                                                endDate: addDays(getMonthStart(referenceDate), MAX_RANGE_DAYS - 1),
+                                                            };
+                                                            const clampedEndDate = compareDateStrings(nextRange.endDate, getMonthEnd(referenceDate)) > 0
+                                                                ? getMonthEnd(referenceDate)
+                                                                : nextRange.endDate;
+                                                            const normalizedRange = {
+                                                                startDate: nextRange.startDate,
+                                                                endDate: clampedEndDate,
+                                                            };
+                                                            setDraftRange(normalizedRange);
+                                                            setWindowDays(getInclusiveDayCount(normalizedRange));
+                                                            setReferenceDate(normalizedRange.startDate);
+                                                            commitTrackBounds(buildTrackRange(normalizedRange.startDate, getInclusiveDayCount(normalizedRange)));
+                                                        }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "This Month" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('nextMonth');
+                                                            shiftReferenceDateByMonths(1);
+                                                        }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextMonth'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextMonth'), { "aria-label": "Next month", title: "Next month", children: jsxRuntime.jsx(icons.ChevronRightIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('nextYear');
+                                                            shiftReferenceDateByYears(1);
+                                                        }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextYear'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextYear'), { "aria-label": "Next year", title: "Next year", children: jsxRuntime.jsx(icons.ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsxRuntime.jsxs("div", { className: "relative h-21", children: [jsxRuntime.jsxs("div", { className: "absolute inset-x-0 top-0 grid grid-cols-[3.5rem_minmax(0,1fr)_3.5rem] items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400", children: [jsxRuntime.jsxs("span", { className: "relative block select-none text-center", children: [jsxRuntime.jsx(RollingMonthLabel, { value: leftMonthLabel }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-1/2 top-7 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-1/2 top-[1.95rem] h-9 w-0.5 -translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] }), jsxRuntime.jsx("div", { className: "flex min-w-0 items-center justify-center gap-1", children: [
+                                                            { label: '+7', days: 7 },
+                                                            { label: '+10', days: 10 },
+                                                            { label: '+15', days: 15 },
+                                                            { label: '+30', days: 30 },
+                                                        ].map((item) => (jsxRuntime.jsx("button", { type: "button", onClick: () => applyQuickRange(item.days), className: DIALOG_PILL_BUTTON_COMPACT_CLASS_NAME, children: item.label }, item.label))) }), jsxRuntime.jsxs("span", { className: "relative block select-none text-center", children: [jsxRuntime.jsx(RollingMonthLabel, { value: rightMonthLabel }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-1/2 top-7 h-2.5 w-2.5 translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-1/2 top-[1.95rem] h-9 w-0.5 translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] })] }), jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-[3.35rem] h-10 touch-none", onDoubleClick: (event) => {
+                                                    event.stopPropagation();
+                                                    resetReferenceFromClientX(event.clientX);
+                                                }, children: jsxRuntime.jsxs("div", { ref: trackRef, className: "absolute inset-x-0 top-1/2 h-3 -translate-y-1/2 rounded-full bg-slate-400/30 dark:bg-slate-500/25", children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 top-1/2 grid h-8 -translate-y-1/2 items-center", style: { gridTemplateColumns: `repeat(${trackTickCount}, minmax(0, 1fr))` }, children: Array.from({ length: trackTickCount }, (_, index) => {
+                                                                return (jsxRuntime.jsx("span", { className: "flex justify-center", children: jsxRuntime.jsx("span", { className: utils.cn('rounded-full bg-slate-400/55 dark:bg-slate-500/55', 'h-3 w-px') }) }, index));
+                                                            }) }), jsxRuntime.jsx("div", { ref: selectionRef, className: "absolute top-1/2 z-10 h-4 touch-none -translate-y-1/2 overflow-visible rounded-md border bg-white dark:bg-slate-950", style: { left: `${leftPercent}%`, width: `${widthPercent}%`, borderColor: lib.themeSvgIconColor }, onPointerDown: (event) => {
+                                                                event.stopPropagation();
+                                                                beginDrag('window', event.pointerId, event.clientX);
+                                                            }, children: jsxRuntime.jsx("div", { ref: selectionDaysRef, className: "pointer-events-none absolute inset-0 z-30 flex select-none items-center justify-center text-xs font-semibold text-sky-700 dark:text-sky-100", children: `${getInclusiveDayCount(draftRange)}D` }) }), jsxRuntime.jsx("button", { ref: startHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border bg-white shadow-sm dark:bg-slate-950", style: { left: `${startHandlePercent}%`, borderColor: lib.themeSvgIconColor }, onPointerDown: (event) => {
+                                                                event.stopPropagation();
+                                                                beginDrag('start', event.pointerId);
+                                                            }, "aria-label": "Adjust start date" }), jsxRuntime.jsx("button", { ref: endHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border bg-white shadow-sm dark:bg-slate-950", style: { left: `${endHandlePercent}%`, borderColor: lib.themeSvgIconColor }, onPointerDown: (event) => {
+                                                                event.stopPropagation();
+                                                                beginDrag('end', event.pointerId);
+                                                            }, "aria-label": "Adjust end date" })] }) })] }), jsxRuntime.jsx("div", { className: "flex justify-end", children: jsxRuntime.jsx(xButton.XButton, { type: "single", variant: "soft", minWidth: "min-w-[110px]", className: "w-auto", iconClassName: "h-4 w-4", button: {
+                                                icon: jsxRuntime.jsx(icons.CheckCheckIcon, {}),
+                                                text: 'Apply',
+                                                disabled: !draftRange.startDate || !draftRange.endDate,
+                                                onClick: () => {
+                                                    void runDialogAction('confirm', handleApply);
+                                                },
+                                            } }) })] })] }) }) }), jsxRuntime.jsx("style", { children: `
+          @keyframes rd-date-range-month-in {
+            from {
+              opacity: 0;
+              transform: translateY(-0.45rem);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+
+          @keyframes rd-date-range-month-out {
+            from {
+              opacity: 1;
+              transform: translateY(0);
+            }
+            to {
+              opacity: 0;
+              transform: translateY(0.45rem);
+            }
+          }
+
+          .rd-date-range-month-in {
+            animation: rd-date-range-month-in 180ms ease-out both;
+          }
+
+          .rd-date-range-month-out {
+            animation: rd-date-range-month-out 180ms ease-out both;
+          }
+        ` }), dialogLoading] }), document.body);
 }
 
 exports.RandomDateRangeDialog = RandomDateRangeDialog;