@windrun-huaiin/third-ui 29.2.1 → 30.0.0

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

@@ -2,16 +2,18 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { XIcon, CheckCheckIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon } from '@windrun-huaiin/base-ui/icons';
+import { XIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, CheckCheckIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useDialogLoadingAction } from '../alert-dialog/dialog-loading-action.mjs';
+import { XButton } from '../buttons/x-button.mjs';
 import { usePressFeedback } from '../buttons/use-press-feedback.mjs';
 
 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)]';
@@ -53,12 +55,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;
@@ -81,6 +102,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) {
@@ -117,8 +151,24 @@ function getMonthEnd(value) {
     const date = parseDateString(value);
     return formatDateString(new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)));
 }
+function RollingMonthLabel({ value }) {
+    const [displayValue, setDisplayValue] = useState(value);
+    const [previousValue, setPreviousValue] = useState(null);
+    useEffect(() => {
+        if (value === displayValue) {
+            return undefined;
+        }
+        setPreviousValue(displayValue);
+        setDisplayValue(value);
+        const timeout = window.setTimeout(() => {
+            setPreviousValue(null);
+        }, 180);
+        return () => window.clearTimeout(timeout);
+    }, [displayValue, value]);
+    return (jsxs("span", { className: "relative inline-block h-5 min-w-10 overflow-hidden align-bottom", children: [previousValue ? (jsx("span", { className: "rd-date-range-month-out absolute inset-x-0 top-0 text-center", children: previousValue })) : null, jsx("span", { className: 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, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f;
     const resolvedDefaultRangeDays = clampWindowDays(defaultRangeDays);
     const [draftRange, setDraftRange] = useState(value);
     const [referenceDate, setReferenceDate] = useState(anchorDate);
@@ -136,6 +186,8 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
     const resultLabelRef = useRef(null);
     const selectionDaysRef = useRef(null);
     const dragPreviewRef = useRef(null);
+    const trackBoundsRef = useRef(trackBounds);
+    const dragStartTrackBoundsRef = useRef(null);
     const frameRef = useRef(null);
     const pendingClientXRef = useRef(null);
     const syncPreviewDomRef = useRef(() => { });
@@ -153,25 +205,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 = 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 = useCallback(() => {
         return onApply(draftRange);
     }, [draftRange, onApply]);
+    function commitTrackBounds(nextTrackBounds) {
+        trackBoundsRef.current = nextTrackBounds;
+        setTrackBounds(nextTrackBounds);
+    }
     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;
@@ -189,16 +243,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 = 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);
@@ -210,7 +268,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 = useCallback((range) => {
         const percents = getPreviewPercents(range);
         if (selectionRef.current) {
@@ -234,17 +292,20 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         dragPreviewRef.current = draftRange;
         syncPreviewDom(draftRange);
     }, [draftRange, syncPreviewDom]);
+    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);
@@ -258,16 +319,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 {
@@ -275,36 +337,62 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         }
     }
     const buildDraggedRange = 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;
+    }, []);
     useEffect(() => {
         syncPreviewDomRef.current = syncPreviewDom;
         buildDraggedRangeRef.current = buildDraggedRange;
@@ -318,6 +406,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;
@@ -325,6 +414,7 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
             setDraftRange(nextRange);
             setReferenceDate(nextRange.startDate);
             setWindowDays(getInclusiveDayCount(nextRange));
+            commitTrackBounds(ensureRangeVisibleOnTrack(nextRange, trackBoundsRef.current));
         }
     }
     useEffect(() => {
@@ -377,9 +467,7 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
     if (!open) {
         return jsx(Fragment, { children: dialogLoading });
     }
-    return createPortal(jsxs(Fragment, { children: [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: 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: jsxs("div", { className: "space-y-5 p-4", children: [jsxs("div", { className: "relative flex items-center justify-center px-16 text-center", children: [jsx("div", { ref: resultLabelRef, className: "select-none text-base font-semibold text-slate-900 dark:text-white", children: getRangeLabel(draftRange) }), jsxs("div", { className: "absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-2", children: [jsx("button", { type: "button", onClick: () => onOpenChange(false), className: DIALOG_ICON_BUTTON_CLASS_NAME, "aria-label": "Cancel", children: jsx(XIcon, { className: "h-4 w-4" }) }), jsx("button", { type: "button", onClick: () => {
-                                                    void runDialogAction('confirm', handleApply);
-                                                }, disabled: !draftRange.startDate || !draftRange.endDate, className: 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: jsx(CheckCheckIcon, { className: "h-4 w-4" }) })] })] }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", Object.assign({ type: "button", onClick: () => {
+    return createPortal(jsxs(Fragment, { children: [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: 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: jsxs("div", { className: "space-y-5 p-4", children: [jsxs("div", { className: "relative flex items-center justify-center px-9 text-center sm:px-16", children: [jsx("div", { ref: resultLabelRef, className: "min-w-0 select-none truncate text-base font-semibold text-slate-900 dark:text-white", children: getRangeLabel(draftRange) }), jsx("div", { className: "absolute right-0 top-1/2 flex -translate-y-1/2 translate-x-1 items-center sm:translate-x-0", children: jsx("button", { type: "button", onClick: () => onOpenChange(false), className: DIALOG_ICON_BUTTON_CLASS_NAME, "aria-label": "Cancel", children: jsx(XIcon, { className: "h-4 w-4" }) }) })] }), jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", Object.assign({ type: "button", onClick: () => {
                                                             flashNavButtonPress('prevYear');
                                                             shiftReferenceDateByYears(-1);
                                                         }, className: cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevYear'
@@ -395,11 +483,11 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
                                                                 endDate: addDays(baseReferenceDate, resolvedDefaultRangeDays - 1),
                                                             };
                                                             setReferenceDate(baseReferenceDate);
-                                                            setTrackBounds(buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays));
+                                                            commitTrackBounds(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" }), jsx("button", { type: "button", onClick: () => {
+                                                        }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "Today" }), jsx("button", { type: "button", onClick: () => {
                                                             const nextRange = {
                                                                 startDate: getMonthStart(referenceDate),
                                                                 endDate: addDays(getMonthStart(referenceDate), MAX_RANGE_DAYS - 1),
@@ -413,7 +501,8 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
                                                             };
                                                             setDraftRange(normalizedRange);
                                                             setWindowDays(getInclusiveDayCount(normalizedRange));
-                                                            setTrackBounds(buildTrackRange(normalizedRange.startDate, getInclusiveDayCount(normalizedRange)));
+                                                            setReferenceDate(normalizedRange.startDate);
+                                                            commitTrackBounds(buildTrackRange(normalizedRange.startDate, getInclusiveDayCount(normalizedRange)));
                                                         }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "This Month" })] }), jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", Object.assign({ type: "button", onClick: () => {
                                                             flashNavButtonPress('nextMonth');
                                                             shiftReferenceDateByMonths(1);
@@ -424,26 +513,63 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
                                                             shiftReferenceDateByYears(1);
                                                         }, className: 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: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsxs("div", { className: "relative h-24", children: [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: [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), 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" }), 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" })] }), jsx("div", { className: "flex min-w-0 items-center justify-center gap-1", children: [
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextYear'), { "aria-label": "Next year", title: "Next year", children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsxs("div", { className: "relative h-21", children: [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: [jsxs("span", { className: "relative block select-none text-center", children: [jsx(RollingMonthLabel, { value: leftMonthLabel }), 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" }), 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" })] }), 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) => (jsx("button", { type: "button", onClick: () => applyQuickRange(item.days), className: DIALOG_PILL_BUTTON_COMPACT_CLASS_NAME, children: item.label }, item.label))) }), 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), 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" }), 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" })] })] }), jsx("div", { className: "absolute inset-x-0 top-[3.35rem] h-10 touch-none", onDoubleClick: (event) => {
+                                                        ].map((item) => (jsx("button", { type: "button", onClick: () => applyQuickRange(item.days), className: DIALOG_PILL_BUTTON_COMPACT_CLASS_NAME, children: item.label }, item.label))) }), jsxs("span", { className: "relative block select-none text-center", children: [jsx(RollingMonthLabel, { value: rightMonthLabel }), 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" }), 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" })] })] }), jsx("div", { className: "absolute inset-x-0 top-[3.35rem] h-10 touch-none", onDoubleClick: (event) => {
                                                     event.stopPropagation();
                                                     resetReferenceFromClientX(event.clientX);
                                                 }, children: 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: [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 (jsx("span", { className: "flex justify-center", children: jsx("span", { className: cn('rounded-full bg-slate-400/55 dark:bg-slate-500/55', 'h-3 w-px') }) }, index));
-                                                            }) }), 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) => {
+                                                            }) }), 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: themeSvgIconColor }, onPointerDown: (event) => {
                                                                 event.stopPropagation();
                                                                 beginDrag('window', event.pointerId, event.clientX);
-                                                            }, children: 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` }) }), 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) => {
+                                                            }, children: 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` }) }), 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: themeSvgIconColor }, onPointerDown: (event) => {
                                                                 event.stopPropagation();
                                                                 beginDrag('start', event.pointerId);
-                                                            }, "aria-label": "Adjust start date" }), 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) => {
+                                                            }, "aria-label": "Adjust start date" }), 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: themeSvgIconColor }, onPointerDown: (event) => {
                                                                 event.stopPropagation();
                                                                 beginDrag('end', event.pointerId);
-                                                            }, "aria-label": "Adjust end date" })] }) })] })] })] }) }) }), dialogLoading] }), document.body);
+                                                            }, "aria-label": "Adjust end date" })] }) })] }), jsx("div", { className: "flex justify-end", children: jsx(XButton, { type: "single", variant: "soft", minWidth: "min-w-[110px]", className: "w-auto", iconClassName: "h-4 w-4", button: {
+                                                icon: jsx(CheckCheckIcon, {}),
+                                                text: 'Apply',
+                                                disabled: !draftRange.startDate || !draftRange.endDate,
+                                                onClick: () => {
+                                                    void runDialogAction('confirm', handleApply);
+                                                },
+                                            } }) })] })] }) }) }), 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);
 }
 
 export { RandomDateRangeDialog };

package/dist/main/cta.js

@@ -11,6 +11,22 @@ var utils = require('@windrun-huaiin/lib/utils');
 var richTextExpert = require('./rich-text-expert.js');
 var sectionLayout = require('./section-layout.js');
 
+const CTA_THEME_PALETTES = {
+    purple: { b: '#EC4899', c: '#6366F1' },
+    orange: { b: '#F59E0B', c: '#EF4444' },
+    indigo: { b: '#3B82F6', c: '#06B6D4' },
+    emerald: { b: '#14B8A6', c: '#22C55E' },
+    rose: { b: '#EC4899', c: '#FB7185' },
+};
+function createCTAStyle() {
+    var _a;
+    const palette = (_a = CTA_THEME_PALETTES[lib.themeName]) !== null && _a !== void 0 ? _a : CTA_THEME_PALETTES.purple;
+    return {
+        '--cta-color-a': lib.themeSvgIconColor,
+        '--cta-color-b': palette.b,
+        '--cta-color-c': palette.c,
+    };
+}
 function CTA(_a) {
     return tslib.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
         const t = yield server.getTranslations({ locale, namespace: 'cta' });
@@ -22,7 +38,7 @@ function CTA(_a) {
             button: t('button'),
             url: t('url')
         };
-        return (jsxRuntime.jsx("section", { id: "cta", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: jsxRuntime.jsxs("div", { className: "\n        py-3 sm:py-6 md:8\n        bg-linear-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-linear-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl text-center\n        bg-size[200%_auto] animate-cta-gradient-wave\n        ", children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [data.title, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn }), "?"] }), jsxRuntime.jsxs("p", { className: "text-base sm:text-xl mx-auto mb-8 max-w-3xl", children: [data.description1, jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: utils.cn(lib.themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsxRuntime.jsx(gradientButton.GradientButton, { title: data.button, href: data.url, align: "center" })] }) }));
+        return (jsxRuntime.jsx("section", { id: "cta", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: jsxRuntime.jsx("div", { className: "\n          third-ui-cta-surface\n          relative overflow-hidden rounded-2xl border border-black/5 py-3 text-center shadow-sm\n          animate-cta-gradient-wave\n          sm:py-6 md:py-8\n          dark:border-white/10 dark:shadow-none\n        ", style: createCTAStyle(), children: jsxRuntime.jsxs("div", { className: "relative z-10 px-4 sm:px-6", children: [jsxRuntime.jsxs("h2", { className: "mb-6 text-3xl font-bold text-neutral-950 md:text-4xl dark:text-neutral-50", children: [data.title, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn }), "?"] }), jsxRuntime.jsxs("p", { className: "mx-auto mb-8 max-w-3xl text-base text-neutral-700 sm:text-xl dark:text-neutral-300", children: [data.description1, jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: utils.cn(lib.themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsxRuntime.jsx(gradientButton.GradientButton, { title: data.button, href: data.url, align: "center" })] }) }) }));
     });
 }
 

package/dist/main/cta.mjs

@@ -4,11 +4,27 @@ import { getTranslations } from 'next-intl/server';
 import { GradientButton } from './buttons/gradient-button.mjs';
 import 'react';
 import '@windrun-huaiin/base-ui/icons';
-import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { themeIconColor, themeSvgIconColor, themeName } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from './rich-text-expert.mjs';
 import { responsiveSection } from './section-layout.mjs';
 
+const CTA_THEME_PALETTES = {
+    purple: { b: '#EC4899', c: '#6366F1' },
+    orange: { b: '#F59E0B', c: '#EF4444' },
+    indigo: { b: '#3B82F6', c: '#06B6D4' },
+    emerald: { b: '#14B8A6', c: '#22C55E' },
+    rose: { b: '#EC4899', c: '#FB7185' },
+};
+function createCTAStyle() {
+    var _a;
+    const palette = (_a = CTA_THEME_PALETTES[themeName]) !== null && _a !== void 0 ? _a : CTA_THEME_PALETTES.purple;
+    return {
+        '--cta-color-a': themeSvgIconColor,
+        '--cta-color-b': palette.b,
+        '--cta-color-c': palette.c,
+    };
+}
 function CTA(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
         const t = yield getTranslations({ locale, namespace: 'cta' });
@@ -20,7 +36,7 @@ function CTA(_a) {
             button: t('button'),
             url: t('url')
         };
-        return (jsx("section", { id: "cta", className: cn(responsiveSection, sectionClassName), children: jsxs("div", { className: "\n        py-3 sm:py-6 md:8\n        bg-linear-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-linear-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl text-center\n        bg-size[200%_auto] animate-cta-gradient-wave\n        ", children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [data.title, " ", jsx("span", { className: themeIconColor, children: data.eyesOn }), "?"] }), jsxs("p", { className: "text-base sm:text-xl mx-auto mb-8 max-w-3xl", children: [data.description1, jsx("br", {}), jsx("span", { className: cn(themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsx(GradientButton, { title: data.button, href: data.url, align: "center" })] }) }));
+        return (jsx("section", { id: "cta", className: cn(responsiveSection, sectionClassName), children: jsx("div", { className: "\n          third-ui-cta-surface\n          relative overflow-hidden rounded-2xl border border-black/5 py-3 text-center shadow-sm\n          animate-cta-gradient-wave\n          sm:py-6 md:py-8\n          dark:border-white/10 dark:shadow-none\n        ", style: createCTAStyle(), children: jsxs("div", { className: "relative z-10 px-4 sm:px-6", children: [jsxs("h2", { className: "mb-6 text-3xl font-bold text-neutral-950 md:text-4xl dark:text-neutral-50", children: [data.title, " ", jsx("span", { className: themeIconColor, children: data.eyesOn }), "?"] }), jsxs("p", { className: "mx-auto mb-8 max-w-3xl text-base text-neutral-700 sm:text-xl dark:text-neutral-300", children: [data.description1, jsx("br", {}), jsx("span", { className: cn(themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsx(GradientButton, { title: data.button, href: data.url, align: "center" })] }) }) }));
     });
 }
 

package/dist/main/delayed-img.d.ts

@@ -3,5 +3,5 @@ interface DelayedImgProps extends ImageProps {
     wrapperClassName?: string;
     placeholderClassName?: string;
 }
-export declare function DelayedImg({ alt, wrapperClassName, placeholderClassName, className, onLoad, ...imageProps }: DelayedImgProps): import("react/jsx-runtime").JSX.Element;
+export declare function DelayedImg({ alt, wrapperClassName, placeholderClassName, className, onError, onLoad, ...imageProps }: DelayedImgProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/delayed-img.js

@@ -17,10 +17,10 @@ const ENV_DELAY_MS = Number.isFinite(parsedDelaySeconds) && parsedDelaySeconds >
     ? parsedDelaySeconds * 1000
     : 0;
 function DelayedImg(_a) {
-    var { alt, wrapperClassName, placeholderClassName, className, onLoad } = _a, imageProps = tslib.__rest(_a, ["alt", "wrapperClassName", "placeholderClassName", "className", "onLoad"]);
+    var { alt, wrapperClassName, placeholderClassName, className, onError, onLoad } = _a, imageProps = tslib.__rest(_a, ["alt", "wrapperClassName", "placeholderClassName", "className", "onError", "onLoad"]);
     const shouldDelay = ENV_DELAY_ENABLED && ENV_DELAY_MS > 0;
     const [isMounted, setIsMounted] = React.useState(!shouldDelay);
-    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [isSettled, setIsSettled] = React.useState(false);
     React.useEffect(() => {
         if (!shouldDelay || isMounted) {
             return;
@@ -30,10 +30,13 @@ function DelayedImg(_a) {
         }, ENV_DELAY_MS);
         return () => window.clearTimeout(timer);
     }, [isMounted, shouldDelay]);
-    return (jsxRuntime.jsxs("div", { className: utils.cn("relative", wrapperClassName), children: [(!isMounted || !isLoaded) && (jsxRuntime.jsx(snakeLoadingFrame.SnakeLoadingFrame, { shape: "rounded-rect", loading: true, themeColor: lib.themeSvgIconColor, className: utils.cn("absolute inset-0 rounded-[inherit] border shadow-sm bg-white/70 dark:bg-white/5", lib.themeBgColor, placeholderClassName), contentClassName: "h-full w-full", children: jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" }) })), isMounted && (jsxRuntime.jsx(Image, Object.assign({}, imageProps, { alt: alt, onLoad: (event) => {
-                    setIsLoaded(true);
+    return (jsxRuntime.jsxs("div", { className: utils.cn("relative", wrapperClassName), children: [(!isMounted || !isSettled) && (jsxRuntime.jsx(snakeLoadingFrame.SnakeLoadingFrame, { shape: "rounded-rect", loading: true, themeColor: lib.themeSvgIconColor, className: utils.cn("absolute inset-0 rounded-[inherit] border shadow-sm bg-white/70 dark:bg-white/5", lib.themeBgColor, placeholderClassName), contentClassName: "h-full w-full", children: jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" }) })), isMounted && (jsxRuntime.jsx(Image, Object.assign({}, imageProps, { alt: alt, onError: (event) => {
+                    setIsSettled(true);
+                    onError === null || onError === void 0 ? void 0 : onError(event);
+                }, onLoad: (event) => {
+                    setIsSettled(true);
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
-                }, className: utils.cn("transition duration-300", isLoaded ? "opacity-100" : "opacity-0", className) })))] }));
+                }, className: utils.cn("transition duration-300", isSettled ? "opacity-100" : "opacity-0", className) })))] }));
 }
 
 exports.DelayedImg = DelayedImg;

package/dist/main/delayed-img.mjs

@@ -15,10 +15,10 @@ const ENV_DELAY_MS = Number.isFinite(parsedDelaySeconds) && parsedDelaySeconds >
     ? parsedDelaySeconds * 1000
     : 0;
 function DelayedImg(_a) {
-    var { alt, wrapperClassName, placeholderClassName, className, onLoad } = _a, imageProps = __rest(_a, ["alt", "wrapperClassName", "placeholderClassName", "className", "onLoad"]);
+    var { alt, wrapperClassName, placeholderClassName, className, onError, onLoad } = _a, imageProps = __rest(_a, ["alt", "wrapperClassName", "placeholderClassName", "className", "onError", "onLoad"]);
     const shouldDelay = ENV_DELAY_ENABLED && ENV_DELAY_MS > 0;
     const [isMounted, setIsMounted] = useState(!shouldDelay);
-    const [isLoaded, setIsLoaded] = useState(false);
+    const [isSettled, setIsSettled] = useState(false);
     useEffect(() => {
         if (!shouldDelay || isMounted) {
             return;
@@ -28,10 +28,13 @@ function DelayedImg(_a) {
         }, ENV_DELAY_MS);
         return () => window.clearTimeout(timer);
     }, [isMounted, shouldDelay]);
-    return (jsxs("div", { className: cn("relative", wrapperClassName), children: [(!isMounted || !isLoaded) && (jsx(SnakeLoadingFrame, { shape: "rounded-rect", loading: true, themeColor: themeSvgIconColor, className: cn("absolute inset-0 rounded-[inherit] border shadow-sm bg-white/70 dark:bg-white/5", themeBgColor, placeholderClassName), contentClassName: "h-full w-full", children: jsx("div", { "aria-hidden": "true", className: "absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" }) })), isMounted && (jsx(Image, Object.assign({}, imageProps, { alt: alt, onLoad: (event) => {
-                    setIsLoaded(true);
+    return (jsxs("div", { className: cn("relative", wrapperClassName), children: [(!isMounted || !isSettled) && (jsx(SnakeLoadingFrame, { shape: "rounded-rect", loading: true, themeColor: themeSvgIconColor, className: cn("absolute inset-0 rounded-[inherit] border shadow-sm bg-white/70 dark:bg-white/5", themeBgColor, placeholderClassName), contentClassName: "h-full w-full", children: jsx("div", { "aria-hidden": "true", className: "absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" }) })), isMounted && (jsx(Image, Object.assign({}, imageProps, { alt: alt, onError: (event) => {
+                    setIsSettled(true);
+                    onError === null || onError === void 0 ? void 0 : onError(event);
+                }, onLoad: (event) => {
+                    setIsSettled(true);
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
-                }, className: cn("transition duration-300", isLoaded ? "opacity-100" : "opacity-0", className) })))] }));
+                }, className: cn("transition duration-300", isSettled ? "opacity-100" : "opacity-0", className) })))] }));
 }
 
 export { DelayedImg };