@windrun-huaiin/third-ui 29.0.4 → 29.2.0

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

@@ -0,0 +1,447 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var utils = require('@windrun-huaiin/lib/utils');
+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 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)]';
+const DIALOG_PILL_BUTTON_CLASS_NAME = 'rounded-full bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-sm transition-[transform,background-color,color,box-shadow] duration-100 ease-out active:scale-[0.94] active:bg-slate-300 active:text-slate-950 active:shadow-inner dark:bg-white/10 dark:text-slate-200 dark:active:scale-[0.94] dark:active:bg-white/22 dark:active:text-white sm:text-sm';
+const DIALOG_PILL_BUTTON_COMPACT_CLASS_NAME = 'rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700 shadow-sm transition-[transform,background-color,color,box-shadow] duration-100 ease-out active:scale-[0.94] active:bg-slate-300 active:text-slate-950 active:shadow-inner dark:bg-white/10 dark:text-slate-200 dark:active:scale-[0.94] dark:active:bg-white/22 dark:active:text-white';
+function parseDateString(value) {
+    return new Date(`${value}T00:00:00.000Z`);
+}
+function getTodayString() {
+    return new Date().toISOString().slice(0, 10);
+}
+function formatDateString(date) {
+    return date.toISOString().slice(0, 10);
+}
+function addDays(value, days) {
+    const date = parseDateString(value);
+    date.setUTCDate(date.getUTCDate() + days);
+    return formatDateString(date);
+}
+function compareDateStrings(left, right) {
+    return left.localeCompare(right);
+}
+function getInclusiveDayCount(range) {
+    if (!range.startDate || !range.endDate) {
+        return 0;
+    }
+    const startTime = parseDateString(range.startDate).getTime();
+    const endTime = parseDateString(range.endDate).getTime();
+    return Math.max(0, Math.floor((endTime - startTime) / 86400000) + 1);
+}
+function getRangeLabel(range) {
+    if (!range.startDate || !range.endDate) {
+        return 'No range selected';
+    }
+    return `${range.startDate} ~ ${range.endDate}`;
+}
+function clampWindowDays(days) {
+    return Math.max(1, Math.min(MAX_RANGE_DAYS, Math.floor(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 startDate = addDays(referenceDate, -daysBefore);
+    const endDate = addDays(startDate, resolvedTotalDays - 1);
+    return { startDate, endDate };
+}
+function clampDateToRange(date, bounds) {
+    if (!bounds.startDate || !bounds.endDate) {
+        return date;
+    }
+    if (compareDateStrings(date, bounds.startDate) < 0) {
+        return bounds.startDate;
+    }
+    if (compareDateStrings(date, bounds.endDate) > 0) {
+        return bounds.endDate;
+    }
+    return date;
+}
+function getDaysBetween(startDate, endDate) {
+    const start = parseDateString(startDate).getTime();
+    const end = parseDateString(endDate).getTime();
+    return Math.max(0, Math.floor((end - start) / 86400000));
+}
+function getDateByRatio(bounds, ratio) {
+    if (!bounds.startDate || !bounds.endDate) {
+        return getTodayString();
+    }
+    const totalDays = Math.max(1, getDaysBetween(bounds.startDate, bounds.endDate));
+    return addDays(bounds.startDate, Math.round(totalDays * ratio));
+}
+function getRatioByDate(date, bounds) {
+    if (!bounds.startDate || !bounds.endDate) {
+        return 0;
+    }
+    const totalDays = Math.max(1, getDaysBetween(bounds.startDate, bounds.endDate));
+    const distance = getDaysBetween(bounds.startDate, clampDateToRange(date, bounds));
+    return distance / totalDays;
+}
+function formatMonthShort(value) {
+    return parseDateString(value).toLocaleDateString('en-US', {
+        month: 'short',
+        timeZone: 'UTC',
+    });
+}
+function addMonthsClamped(value, months) {
+    const source = parseDateString(value);
+    const sourceYear = source.getUTCFullYear();
+    const sourceMonth = source.getUTCMonth();
+    const sourceDay = source.getUTCDate();
+    const targetMonthIndex = sourceMonth + months;
+    const targetYear = sourceYear + Math.floor(targetMonthIndex / 12);
+    const normalizedMonth = ((targetMonthIndex % 12) + 12) % 12;
+    const targetMonthLastDay = new Date(Date.UTC(targetYear, normalizedMonth + 1, 0)).getUTCDate();
+    const targetDay = Math.min(sourceDay, targetMonthLastDay);
+    return formatDateString(new Date(Date.UTC(targetYear, normalizedMonth, targetDay)));
+}
+function getMonthStart(value) {
+    const date = parseDateString(value);
+    return formatDateString(new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1)));
+}
+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;
+    const resolvedDefaultRangeDays = clampWindowDays(defaultRangeDays);
+    const [draftRange, setDraftRange] = React.useState(value);
+    const [referenceDate, setReferenceDate] = React.useState(anchorDate);
+    const [trackBounds, setTrackBounds] = React.useState(() => buildTrackRange(anchorDate || getTodayString(), resolvedDefaultRangeDays));
+    const [windowDays, setWindowDays] = React.useState(resolvedDefaultRangeDays);
+    const { pressedKey: pressedNavButton, flash: flashNavButtonPress, getPressProps: getNavButtonPressProps, } = usePressFeedback.usePressFeedback();
+    const dragStartRangeRef = React.useRef(null);
+    const dragModeRef = React.useRef(null);
+    const pointerIdRef = React.useRef(null);
+    const windowDragOffsetDaysRef = React.useRef(0);
+    const trackRef = React.useRef(null);
+    const selectionRef = React.useRef(null);
+    const startHandleRef = React.useRef(null);
+    const endHandleRef = React.useRef(null);
+    const resultLabelRef = React.useRef(null);
+    const selectionDaysRef = React.useRef(null);
+    const dragPreviewRef = 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 baseReferenceDate = anchorDate || today;
+    const previousOpenRef = React.useRef(false);
+    const startRatio = getRatioByDate((_a = draftRange.startDate) !== null && _a !== void 0 ? _a : baseReferenceDate, trackBounds);
+    const endRatio = getRatioByDate((_b = draftRange.endDate) !== null && _b !== void 0 ? _b : baseReferenceDate, trackBounds);
+    const leftPercent = Math.min(startRatio, endRatio) * 100;
+    const rightPercent = Math.max(startRatio, endRatio) * 100;
+    const widthPercent = Math.max(rightPercent - leftPercent, 0.5);
+    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]);
+    React.useEffect(() => {
+        if (open && !previousOpenRef.current) {
+            const nextRange = {
+                startDate: baseReferenceDate,
+                endDate: addDays(baseReferenceDate, resolvedDefaultRangeDays - 1),
+            };
+            setDraftRange(nextRange);
+            setReferenceDate(baseReferenceDate);
+            setTrackBounds(buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays));
+            setWindowDays(resolvedDefaultRangeDays);
+            dragStartRangeRef.current = null;
+            dragModeRef.current = null;
+            pointerIdRef.current = null;
+            dragPreviewRef.current = nextRange;
+        }
+        previousOpenRef.current = open;
+    }, [baseReferenceDate, open, resolvedDefaultRangeDays]);
+    function updateRangeByReference(nextReferenceDate, nextWindowDays, options) {
+        const clampedWindowDays = clampWindowDays(nextWindowDays);
+        const nextRange = {
+            startDate: nextReferenceDate,
+            endDate: addDays(nextReferenceDate, Math.max(clampedWindowDays - 1, 0)),
+        };
+        setReferenceDate(nextReferenceDate);
+        setWindowDays(clampedWindowDays);
+        setDraftRange(nextRange);
+        if (!(options === null || options === void 0 ? void 0 : options.preserveTrack)) {
+            setTrackBounds(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 left = Math.min(startR, endR) * 100;
+        const right = Math.max(startR, endR) * 100;
+        const width = Math.max(right - left, 0.5);
+        const single = start === end;
+        return {
+            left,
+            right,
+            width,
+            startHandle: single ? Math.max(left - 0.8, 0) : left,
+            endHandle: single ? Math.min(right + 0.8, 100) : right,
+        };
+    }, [baseReferenceDate, trackBounds]);
+    const syncPreviewDom = React.useCallback((range) => {
+        const percents = getPreviewPercents(range);
+        if (selectionRef.current) {
+            selectionRef.current.style.left = `${percents.left}%`;
+            selectionRef.current.style.width = `${percents.width}%`;
+        }
+        if (startHandleRef.current) {
+            startHandleRef.current.style.left = `${percents.startHandle}%`;
+        }
+        if (endHandleRef.current) {
+            endHandleRef.current.style.left = `${percents.endHandle}%`;
+        }
+        if (resultLabelRef.current) {
+            resultLabelRef.current.textContent = getRangeLabel(range);
+        }
+        if (selectionDaysRef.current) {
+            selectionDaysRef.current.textContent = `${getInclusiveDayCount(range)}D`;
+        }
+    }, [getPreviewPercents]);
+    React.useEffect(() => {
+        dragPreviewRef.current = draftRange;
+        syncPreviewDom(draftRange);
+    }, [draftRange, syncPreviewDom]);
+    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 nextReferenceDate = getDateByRatio(trackBounds, ratio);
+        updateRangeByReference(nextReferenceDate, resolvedDefaultRangeDays, { preserveTrack: true });
+    }
+    function applyQuickRange(dayCount) {
+        updateRangeByReference(referenceDate, dayCount);
+    }
+    function shiftReferenceDateByMonths(monthOffset) {
+        updateRangeByReference(addMonthsClamped(referenceDate, monthOffset), windowDays);
+    }
+    function shiftReferenceDateByYears(yearOffset) {
+        updateRangeByReference(addMonthsClamped(referenceDate, yearOffset * 12), windowDays);
+    }
+    function beginDrag(mode, pointerId, clientX) {
+        document.body.style.userSelect = 'none';
+        dragModeRef.current = mode;
+        pointerIdRef.current = pointerId;
+        dragStartRangeRef.current = Object.assign({}, draftRange);
+        dragPreviewRef.current = Object.assign({}, draftRange);
+        if (mode === 'window' &&
+            clientX !== undefined &&
+            trackRef.current &&
+            draftRange.startDate &&
+            draftRange.endDate &&
+            trackBounds.startDate &&
+            trackBounds.endDate) {
+            const rect = trackRef.current.getBoundingClientRect();
+            const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+            const pointerDate = getDateByRatio(trackBounds, ratio);
+            windowDragOffsetDaysRef.current = getDaysBetween(draftRange.startDate, pointerDate);
+        }
+        else {
+            windowDragOffsetDaysRef.current = 0;
+        }
+    }
+    const buildDraggedRange = React.useCallback((clientX) => {
+        if (!dragModeRef.current || !dragStartRangeRef.current || !trackBounds.startDate || !trackBounds.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 currentRange = dragStartRangeRef.current;
+        if (!currentRange.startDate || !currentRange.endDate) {
+            return null;
+        }
+        if (dragModeRef.current === 'start') {
+            const earliestStart = addDays(currentRange.endDate, -29);
+            const boundedPointerDate = compareDateStrings(pointerDate, earliestStart) < 0 ? earliestStart : pointerDate;
+            const nextStart = compareDateStrings(boundedPointerDate, currentRange.endDate) > 0 ? currentRange.endDate : boundedPointerDate;
+            return { startDate: nextStart, endDate: currentRange.endDate };
+        }
+        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 spanDays = getDaysBetween(currentRange.startDate, currentRange.endDate);
+        const nextStart = clampDateToRange(addDays(pointerDate, -windowDragOffsetDaysRef.current), {
+            startDate: trackBounds.startDate,
+            endDate: addDays(trackBounds.endDate, -spanDays),
+        });
+        const nextEnd = addDays(nextStart, spanDays);
+        return { startDate: nextStart, endDate: nextEnd };
+    }, [trackBounds]);
+    React.useEffect(() => {
+        syncPreviewDomRef.current = syncPreviewDom;
+        buildDraggedRangeRef.current = buildDraggedRange;
+    }, [syncPreviewDom, buildDraggedRange]);
+    function endDrag() {
+        if (frameRef.current !== null) {
+            window.cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        pendingClientXRef.current = null;
+        document.body.style.userSelect = '';
+        const nextRange = dragPreviewRef.current;
+        dragStartRangeRef.current = null;
+        dragModeRef.current = null;
+        pointerIdRef.current = null;
+        windowDragOffsetDaysRef.current = 0;
+        if ((nextRange === null || nextRange === void 0 ? void 0 : nextRange.startDate) && nextRange.endDate) {
+            setDraftRange(nextRange);
+            setReferenceDate(nextRange.startDate);
+            setWindowDays(getInclusiveDayCount(nextRange));
+        }
+    }
+    React.useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        previousBodyOverflowRef.current = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        function handleWindowPointerMove(event) {
+            if (dragModeRef.current === null) {
+                return;
+            }
+            pendingClientXRef.current = event.clientX;
+            if (frameRef.current !== null) {
+                return;
+            }
+            frameRef.current = window.requestAnimationFrame(() => {
+                frameRef.current = null;
+                if (pendingClientXRef.current === null) {
+                    return;
+                }
+                const nextRange = buildDraggedRangeRef.current(pendingClientXRef.current);
+                if (nextRange) {
+                    dragPreviewRef.current = nextRange;
+                    syncPreviewDomRef.current(nextRange);
+                }
+            });
+        }
+        function handleWindowPointerUp(event) {
+            if (pointerIdRef.current !== null && event.pointerId !== pointerIdRef.current) {
+                return;
+            }
+            if (dragModeRef.current !== null) {
+                endDrag();
+            }
+        }
+        window.addEventListener('pointermove', handleWindowPointerMove, { passive: true });
+        window.addEventListener('pointerup', handleWindowPointerUp);
+        window.addEventListener('pointercancel', handleWindowPointerUp);
+        return () => {
+            var _a;
+            document.body.style.overflow = (_a = previousBodyOverflowRef.current) !== null && _a !== void 0 ? _a : '';
+            previousBodyOverflowRef.current = null;
+            document.body.style.userSelect = '';
+            window.removeEventListener('pointermove', handleWindowPointerMove);
+            window.removeEventListener('pointerup', handleWindowPointerUp);
+            window.removeEventListener('pointercancel', handleWindowPointerUp);
+        };
+    }, [open]);
+    if (!open) {
+        return null;
+    }
+    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);
+}
+
+exports.RandomDateRangeDialog = RandomDateRangeDialog;