pixelize-design-library 2.2.197 → 2.3.1-beta.1

package/dist/Components/DatePicker/CalendarPanel.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -11,10 +22,44 @@ var lucide_react_1 = require("lucide-react");
 var Button_1 = __importDefault(require("../Button/Button"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var CalendarPanel = function (_a) {
-    var currentMonth = _a.currentMonth, setCurrentMonth = _a.setCurrentMonth, today = _a.today, isRange = _a.isRange, tempDate = _a.tempDate, tempRangeStart = _a.tempRangeStart, tempRangeEnd = _a.tempRangeEnd, isSameDay = _a.isSameDay, isBefore = _a.isBefore, isAfter = _a.isAfter, minDate = _a.minDate, maxDate = _a.maxDate, disablePastDates = _a.disablePastDates, disableFutureDates = _a.disableFutureDates, disableToday = _a.disableToday, onDaySelect = _a.onDaySelect, renderWeekdays = _a.renderWeekdays;
+    var _b;
+    var currentMonth = _a.currentMonth, setCurrentMonth = _a.setCurrentMonth, today = _a.today, isRange = _a.isRange, tempDate = _a.tempDate, tempRangeStart = _a.tempRangeStart, tempRangeEnd = _a.tempRangeEnd, isSameDay = _a.isSameDay, isBefore = _a.isBefore, isAfter = _a.isAfter, minDate = _a.minDate, maxDate = _a.maxDate, disablePastDates = _a.disablePastDates, disableFutureDates = _a.disableFutureDates, disableToday = _a.disableToday, onDaySelect = _a.onDaySelect, hoveredDate = _a.hoveredDate, onDayHover = _a.onDayHover, renderWeekdays = _a.renderWeekdays;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var rangeBg = theme.colors.primary.opacity[16];
     var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
         currentMonth.getMonth() === today.getMonth();
+    // Effective range end: the committed end, or a tentative end from hover.
+    var tentativeEnd = isRange && tempRangeStart && !tempRangeEnd && hoveredDate && isAfter(hoveredDate, tempRangeStart)
+        ? hoveredDate
+        : null;
+    var rangeStart = tempRangeStart;
+    var rangeEnd = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tentativeEnd;
+    var isTentative = !tempRangeEnd && !!tentativeEnd;
+    var hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
+    var selectStyles = {
+        border: "1px solid",
+        borderColor: (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[300],
+        borderRadius: "md",
+        px: 2,
+        py: 1,
+        fontSize: "xs",
+        fontWeight: 600,
+        color: theme.colors.text[700],
+        cursor: "pointer",
+        bg: theme.colors.white,
+        outline: "none",
+        _hover: { borderColor: theme.colors.primary[300] },
+        _focus: {
+            outline: "none",
+            borderColor: theme.colors.primary[500],
+            boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
+        },
+        style: {
+            WebkitAppearance: "menulist",
+            MozAppearance: "menulist",
+            appearance: "menulist",
+        },
+    };
     var renderDays = function () {
         var monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
         var monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
@@ -28,90 +73,84 @@ var CalendarPanel = function (_a) {
                 var thisDay = day;
                 var isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
                 var isToday = isSameDay(thisDay, today);
-                var isStart = isRange && tempRangeStart && isSameDay(thisDay, tempRangeStart);
-                var isEnd = isRange && tempRangeEnd && isSameDay(thisDay, tempRangeEnd);
-                var isInRange = isRange &&
-                    tempRangeStart &&
-                    tempRangeEnd &&
-                    isAfter(thisDay, tempRangeStart) &&
-                    isBefore(thisDay, tempRangeEnd);
-                var isSelected = !isRange && tempDate && isSameDay(thisDay, tempDate);
+                var isStart = !!(isRange && rangeStart && isSameDay(thisDay, rangeStart));
+                var isEnd = !!(isRange && rangeEnd && isSameDay(thisDay, rangeEnd));
+                var isInRange = !!(isRange && rangeStart && rangeEnd && isAfter(thisDay, rangeStart) && isBefore(thisDay, rangeEnd));
+                var isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
+                var isTentativeEnd = isEnd && isTentative;
+                var circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
                 var disabled = !isInCurrentMonth ||
-                    (minDate && isBefore(thisDay, minDate)) ||
-                    (maxDate && isAfter(thisDay, maxDate)) ||
-                    (disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
-                    (disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
-                    (disableToday && isToday);
-                days.push(react_1.default.createElement(Button_1.default, { key: thisDay.toString(), size: "xs", variant: isStart || isEnd || isSelected ? "solid" : isInRange ? "outline" : "ghost", colorScheme: isStart || isEnd || isInRange || isSelected ? "primary" : "gray", opacity: isInCurrentMonth ? 1 : 0.45, onClick: function () { return !disabled && onDaySelect(new Date(thisDay)); }, isDisabled: disabled, border: isToday ? "0.125rem solid ".concat(theme.colors.primary[500]) : undefined, borderRadius: "md" }, (0, date_fns_1.format)(thisDay, "d")));
+                    !!(minDate && isBefore(thisDay, minDate)) ||
+                    !!(maxDate && isAfter(thisDay, maxDate)) ||
+                    !!(disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    !!(disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    !!(disableToday && isToday);
+                // Connected range band painted on the cell background; start/end use a
+                // half gradient so the band meets the solid day circle cleanly.
+                var cellBg = void 0;
+                if (isRange && hasRange) {
+                    if (isInRange)
+                        cellBg = rangeBg;
+                    else if (isStart && isEnd)
+                        cellBg = undefined;
+                    else if (isStart)
+                        cellBg = "linear-gradient(to right, transparent 50%, ".concat(rangeBg, " 50%)");
+                    else if (isEnd)
+                        cellBg = "linear-gradient(to right, ".concat(rangeBg, " 50%, transparent 50%)");
+                }
+                var circleColor = circleSolid
+                    ? theme.colors.white
+                    : isInCurrentMonth
+                        ? theme.colors.text[700]
+                        : theme.colors.gray[400];
+                var circleBorder = circleSolid
+                    ? "1px solid transparent"
+                    : isTentativeEnd
+                        ? "1px solid ".concat(theme.colors.primary[400])
+                        : isToday
+                            ? "1px solid ".concat(theme.colors.primary[300])
+                            : "1px solid transparent";
+                days.push(react_1.default.createElement(react_2.Box, { key: thisDay.toString(), h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined },
+                    react_1.default.createElement(react_2.Box, { as: "button", type: "button", disabled: disabled, onClick: function () { return !disabled && onDaySelect(new Date(thisDay)); }, onMouseEnter: function () { return !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))); }, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? theme.colors.primary[500] : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                            ? {}
+                            : circleSolid
+                                ? { bg: theme.colors.primary[600] }
+                                : { bg: rangeBg } }, (0, date_fns_1.format)(thisDay, "d"))));
                 day = (0, date_fns_1.addDays)(day, 1);
             };
             for (var i = 0; i < 7; i++) {
                 _loop_1(i);
             }
-            rows.push(react_1.default.createElement(react_2.Grid, { key: day.toString(), templateColumns: "repeat(7, 1fr)", gap: 0.5 }, days));
+            rows.push(react_1.default.createElement(react_2.Grid, { key: day.toString(), templateColumns: "repeat(7, 1fr)", gap: 0 }, days));
         }
         return rows;
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3 },
-            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() - 1, 1); }); }, "aria-label": "Previous month" },
-                react_1.default.createElement(lucide_react_1.ChevronLeftIcon, { size: 18 })),
-            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                react_1.default.createElement(react_2.Box, { as: "select", value: currentMonth.getMonth(), onChange: function (e) {
+    return (react_1.default.createElement(react_2.Box, null,
+        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1 },
+            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() - 1, 1); }); }, "aria-label": "Previous month" },
+                react_1.default.createElement(lucide_react_1.ChevronLeftIcon, { size: 16 })),
+            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0 },
+                react_1.default.createElement(react_2.Box, __assign({ as: "select", value: currentMonth.getMonth(), onChange: function (e) {
                         var newMonth = parseInt(e.target.value, 10);
                         setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
-                    }, border: "1px solid", borderColor: "gray.300", borderRadius: "md", px: 1.5, py: 0.5, fontSize: "xs", fontWeight: "semibold", cursor: "pointer", bg: "white", outline: "none", _hover: {
-                        borderColor: "gray.400",
-                        borderWidth: "1px",
-                        borderStyle: "solid",
-                    }, _focus: {
-                        outline: "none",
-                        borderColor: theme.colors.primary[500],
-                        borderWidth: "1px",
-                        borderStyle: "solid",
-                        boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
-                    }, style: {
-                        border: "1px solid ".concat(theme.colors.gray[300]),
-                        fontSize: "12px",
-                        lineHeight: "1.25rem",
-                        WebkitAppearance: "menulist",
-                        MozAppearance: "menulist",
-                        appearance: "menulist",
-                    } }, Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
-                react_1.default.createElement(react_2.Box, { as: "select", value: currentMonth.getFullYear(), onChange: function (e) {
+                    } }, selectStyles), Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
+                react_1.default.createElement(react_2.Box, __assign({ as: "select", value: currentMonth.getFullYear(), onChange: function (e) {
                         var newYear = parseInt(e.target.value, 10);
                         setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
-                    }, border: "1px solid", borderColor: "gray.300", borderRadius: "md", px: 1.5, py: 0.5, fontSize: "xs", fontWeight: "semibold", cursor: "pointer", bg: "white", outline: "none", _hover: {
-                        borderColor: "gray.400",
-                        borderWidth: "1px",
-                        borderStyle: "solid",
-                    }, _focus: {
-                        outline: "none",
-                        borderColor: theme.colors.primary[500],
-                        borderWidth: "1px",
-                        borderStyle: "solid",
-                        boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
-                    }, style: {
-                        border: "1px solid ".concat(theme.colors.gray[300]),
-                        fontSize: "12px",
-                        lineHeight: "1.25rem",
-                        WebkitAppearance: "menulist",
-                        MozAppearance: "menulist",
-                        appearance: "menulist",
-                    } }, Array.from({ length: 100 }).map(function (_, i) {
+                    } }, selectStyles), Array.from({ length: 100 }).map(function (_, i) {
                     var year = new Date().getFullYear() - 50 + i;
                     return (react_1.default.createElement("option", { key: year, value: year }, year));
                 }))),
-            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
-                !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () {
+            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0 },
+                !isRange && !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () {
                         setCurrentMonth(function (_prev) { return new Date(today.getFullYear(), today.getMonth(), 1); });
                         if (!disableToday) {
                             onDaySelect(new Date(today));
                         }
-                    }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2 }, isDisabled: disableToday }, "Today")),
-                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
-                    react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 18 })))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0.5, fontWeight: "semibold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "xs", color: "gray.600", py: 1 }, day)); }))),
-        renderDays()));
+                    }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday }, "Today")),
+                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
+                    react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 16 })))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.gray[500], py: 1 }, day)); }))),
+        react_1.default.createElement(react_2.Box, { onMouseLeave: function () { return onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null); } }, renderDays())));
 };
 exports.CalendarPanel = CalendarPanel;
 exports.default = exports.CalendarPanel;

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -56,24 +56,25 @@ var setTimeFrom = function (base, time) {
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
 var RangeDatePicker = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _o = props.dateFormat, dateFormat = _o === void 0 ? "dd/MM/yyyy" : _o, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _p = props.autoComplete, autoComplete = _p === void 0 ? "off" : _p, disabled = props.disabled, _q = props.width, width = _q === void 0 ? "100%" : _q, _r = props.disableToday, disableToday = _r === void 0 ? false : _r, _s = props.size, size = _s === void 0 ? "md" : _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _q = props.dateFormat, dateFormat = _q === void 0 ? "dd/MM/yyyy" : _q, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _r = props.autoComplete, autoComplete = _r === void 0 ? "off" : _r, disabled = props.disabled, _s = props.width, width = _s === void 0 ? "100%" : _s, _t = props.disableToday, disableToday = _t === void 0 ? false : _t, _u = props.size, size = _u === void 0 ? "md" : _u;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var sizeKey = typeof size === "string" ? size : "md";
     var calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     var calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    var _t = (0, react_2.useDisclosure)(), isOpen = _t.isOpen, onOpen = _t.onOpen, onClose = _t.onClose;
+    var _v = (0, react_2.useDisclosure)(), isOpen = _v.isOpen, onOpen = _v.onOpen, onClose = _v.onClose;
     var inputRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
     var today = new Date();
     var placeholder = (0, react_1.useMemo)(function () { return placeholderText || "".concat(dateFormat, " - ").concat(dateFormat); }, [placeholderText, dateFormat]);
     var selectedRange = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null;
-    var _u = (0, react_1.useState)(new Date()), currentMonth = _u[0], setCurrentMonthState = _u[1];
-    var _v = (0, react_1.useState)((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null), tempRangeStart = _v[0], setTempRangeStart = _v[1];
-    var _w = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null), tempRangeEnd = _w[0], setTempRangeEnd = _w[1];
-    var _x = (0, react_1.useState)(true), selectingStart = _x[0], setSelectingStart = _x[1];
-    var _y = (0, react_1.useState)(""), inputValue = _y[0], setInputValue = _y[1];
+    var _w = (0, react_1.useState)(new Date()), currentMonth = _w[0], setCurrentMonthState = _w[1];
+    var _x = (0, react_1.useState)((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null), tempRangeStart = _x[0], setTempRangeStart = _x[1];
+    var _y = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null), tempRangeEnd = _y[0], setTempRangeEnd = _y[1];
+    var _z = (0, react_1.useState)(true), selectingStart = _z[0], setSelectingStart = _z[1];
+    var _0 = (0, react_1.useState)(""), inputValue = _0[0], setInputValue = _0[1];
+    var _1 = (0, react_1.useState)(null), hoveredDate = _1[0], setHoveredDate = _1[1];
     var formatHasTime = (0, react_1.useMemo)(function () { return /(h{1,2}|H{1,2})/.test(dateFormat); }, [dateFormat]);
     var formatHasSeconds = (0, react_1.useMemo)(function () { return /s{1,2}/i.test(dateFormat); }, [dateFormat]);
     var shouldUseSelectTimePicker = formatHasTime && !formatHasSeconds;
@@ -143,9 +144,25 @@ var RangeDatePicker = function (props) {
             setTempRangeStart(finalStart);
             setTempRangeEnd(finalEnd);
             setSelectingStart(true);
+            setHoveredDate(null);
             // no auto-close; wait for OK
         }
     };
+    var applyPreset = function (from, to) {
+        setTempRangeStart(from);
+        setTempRangeEnd(to);
+        setSelectingStart(true);
+        setHoveredDate(null);
+        setCurrentMonthState(from);
+        setInputValue("".concat((0, date_fns_1.format)(from, dateFormat), " - ").concat((0, date_fns_1.format)(to, dateFormat)));
+    };
+    var presets = [
+        { label: "Today", getRange: function () { return [today, today]; } },
+        { label: "Yesterday", getRange: function () { var d = (0, date_fns_1.subDays)(today, 1); return [d, d]; } },
+        { label: "Last 7 days", getRange: function () { return [(0, date_fns_1.subDays)(today, 6), today]; } },
+        { label: "Last 30 days", getRange: function () { return [(0, date_fns_1.subDays)(today, 29), today]; } },
+        { label: "This month", getRange: function () { return [(0, date_fns_1.startOfMonth)(today), (0, date_fns_1.endOfMonth)(today)]; } },
+    ];
     (0, react_1.useEffect)(function () {
         if (!isOpen)
             return;
@@ -200,13 +217,17 @@ var RangeDatePicker = function (props) {
                             }, _hover: {
                                 borderColor: error ? (_m = (_l = theme.colors.semantic) === null || _l === void 0 ? void 0 : _l.error) === null || _m === void 0 ? void 0 : _m[500] : undefined,
                             }, cursor: "pointer" }),
-                        react_1.default.createElement(react_2.InputRightElement, { pr: 3, height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: function () { return (isOpen ? onClose() : handleOpen()); } },
+                        react_1.default.createElement(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: function () { return (isOpen ? onClose() : handleOpen()); } },
                             react_1.default.createElement(react_2.Box, { as: "span", sx: calendarIconWrapperSx },
                                 react_1.default.createElement(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] })))))),
-            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
-                react_1.default.createElement(react_2.PopoverBody, null,
-                    react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonthState(function (prev) { return updater(prev); }); }, today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }),
-                    formatHasTime && (react_1.default.createElement(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 },
+            react_1.default.createElement(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "0.75rem", border: "1px solid", borderColor: (_o = theme.colors.boxborder) === null || _o === void 0 ? void 0 : _o[500] },
+                react_1.default.createElement(react_2.PopoverBody, { p: 0 },
+                    react_1.default.createElement(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3 }, presets.map(function (p) { return (react_1.default.createElement(Button_1.default, { key: p.label, size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: function () {
+                            var _a = p.getRange(), from = _a[0], to = _a[1];
+                            applyPreset(from, to);
+                        } }, p.label)); })),
+                    react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonthState(function (prev) { return updater(prev); }); }, today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }),
+                    formatHasTime && (react_1.default.createElement(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2 },
                         react_1.default.createElement(react_2.Box, null,
                             react_1.default.createElement(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1 }, "Start time"),
                             shouldUseSelectTimePicker ? (react_1.default.createElement(TimePicker_1.default, { date: startTimeBaseDate, onChange: function (updated) {
@@ -239,9 +260,9 @@ var RangeDatePicker = function (props) {
                                     }
                                     setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
                                 }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))))),
-                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: "gray.200" },
-                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: handleClear }, "Clear"),
-                        react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: requestClose }, "OK"))))),
+                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (_p = theme.colors.boxborder) === null || _p === void 0 ? void 0 : _p[300] },
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear }, "Clear"),
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose }, "Apply"))))),
         error && errorMessage && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 };

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -275,13 +275,13 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
     return { value: buf, completed: buf.length >= segmentLength };
 };
 var SingleDatePicker = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _l = props.dateFormat, dateFormat = _l === void 0 ? "dd/MM/yyyy" : _l, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _m = props.autoComplete, autoComplete = _m === void 0 ? "off" : _m, disabled = props.disabled, _o = props.width, width = _o === void 0 ? "100%" : _o, _p = props.disableToday, disableToday = _p === void 0 ? false : _p, _q = props.size, size = _q === void 0 ? "md" : _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _o = props.dateFormat, dateFormat = _o === void 0 ? "dd/MM/yyyy" : _o, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _p = props.autoComplete, autoComplete = _p === void 0 ? "off" : _p, disabled = props.disabled, _q = props.width, width = _q === void 0 ? "100%" : _q, _r = props.disableToday, disableToday = _r === void 0 ? false : _r, _s = props.size, size = _s === void 0 ? "md" : _s;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var sizeKey = typeof size === "string" ? size : "md";
     var calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     var calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    var _r = (0, react_2.useDisclosure)(), isOpen = _r.isOpen, onOpen = _r.onOpen, onClose = _r.onClose;
+    var _t = (0, react_2.useDisclosure)(), isOpen = _t.isOpen, onOpen = _t.onOpen, onClose = _t.onClose;
     var inputRef = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
@@ -339,18 +339,18 @@ var SingleDatePicker = function (props) {
         resolvedDateFormat.toLowerCase().includes("mm") ||
         resolvedDateFormat.toLowerCase().includes("ss");
     var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
-    var _s = (0, react_1.useState)(selectedDate
+    var _u = (0, react_1.useState)(selectedDate
         ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
             ? tomorrow
             : selectedDate
         : disableToday
             ? tomorrow
-            : today), currentMonth = _s[0], setCurrentMonth = _s[1];
-    var _t = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _t[0], setTempDate = _t[1];
-    var _u = (0, react_1.useState)(""), inputValue = _u[0], setInputValue = _u[1];
-    var _v = (0, react_1.useState)(false), isTyping = _v[0], setIsTyping = _v[1];
-    var _w = (0, react_1.useState)(false), isMaskActive = _w[0], setIsMaskActive = _w[1];
-    var _x = (0, react_1.useState)(0), setCurrentSegmentIndex = _x[1];
+            : today), currentMonth = _u[0], setCurrentMonth = _u[1];
+    var _v = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _v[0], setTempDate = _v[1];
+    var _w = (0, react_1.useState)(""), inputValue = _w[0], setInputValue = _w[1];
+    var _x = (0, react_1.useState)(false), isTyping = _x[0], setIsTyping = _x[1];
+    var _y = (0, react_1.useState)(false), isMaskActive = _y[0], setIsMaskActive = _y[1];
+    var _z = (0, react_1.useState)(0), setCurrentSegmentIndex = _z[1];
     var lastSegmentIndexRef = (0, react_1.useRef)(0);
     var resetCommitGuardAndOpen = function () {
         didCommitRef.current = false;
@@ -965,7 +965,7 @@ var SingleDatePicker = function (props) {
                             }, _hover: {
                                 borderColor: error ? (_j = (_h = theme.colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[500] : undefined,
                             }, cursor: "text", boxShadow: error ? "0 0 0 0.125rem ".concat((_k = theme.colors.boxShadow) === null || _k === void 0 ? void 0 : _k.error) : "" }),
-                        react_1.default.createElement(react_2.InputRightElement, { pr: 3, height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: function (e) {
+                        react_1.default.createElement(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: function (e) {
                                 e.stopPropagation();
                                 if (!isOpen) {
                                     handleOpen();
@@ -976,8 +976,8 @@ var SingleDatePicker = function (props) {
                             }, style: { cursor: "pointer" } },
                             react_1.default.createElement(react_2.Box, { as: "span", sx: calendarIconWrapperSx },
                                 react_1.default.createElement(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] })))))),
-            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
-                react_1.default.createElement(react_2.PopoverBody, null,
+            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "0.75rem", border: "1px solid", borderColor: (_l = theme.colors.boxborder) === null || _l === void 0 ? void 0 : _l[500] },
+                react_1.default.createElement(react_2.PopoverBody, { p: 0 },
                     showDate && (react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonth(function (prev) { return updater(prev); }); }, today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })),
                     showTime && (react_1.default.createElement(react_2.Box, { mt: showDate ? 3 : 0 }, resolvedPickerType === "time" ? (react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: function (updatedDate) {
                             setTempDate(updatedDate);
@@ -988,12 +988,12 @@ var SingleDatePicker = function (props) {
                             setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                             setIsTyping(false);
                         }, disabled: disabled })))),
-                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: "gray.200" },
-                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
+                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (_m = theme.colors.boxborder) === null || _m === void 0 ? void 0 : _m[300] },
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: function () {
                                 setTempDate(null);
                                 requestClose(null);
                             } }, "Clear"),
-                        react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () { return requestClose(); } }, "OK"))))),
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "gradient", onClick: function () { return requestClose(); } }, "Apply"))))),
         error && errorMessage && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 };

package/dist/Components/DatePicker/TimePicker.js

@@ -85,13 +85,13 @@ var TimePicker = function (_a) {
         updateTime(hour, minute, newMeridiem);
     };
     var displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return (react_1.default.createElement(react_2.HStack, { spacing: 1.5, mt: 3 },
-        react_1.default.createElement(react_2.Select, { value: displayHour, onChange: handleHourChange, w: "3.5rem", size: "sm", isDisabled: disabled }, Array.from({ length: is12HourFormat ? 12 : 24 }, function (_, i) {
+    return (react_1.default.createElement(react_2.HStack, { spacing: 1.5, w: "100%" },
+        react_1.default.createElement(react_2.Select, { value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled }, Array.from({ length: is12HourFormat ? 12 : 24 }, function (_, i) {
             var value = is12HourFormat ? i + 1 : i;
             return (react_1.default.createElement("option", { key: value, value: value }, value.toString().padStart(2, "0")));
         })),
-        react_1.default.createElement(react_2.Select, { value: minute, onChange: handleMinuteChange, w: "3.5rem", size: "sm", isDisabled: disabled }, Array.from({ length: 60 }, function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, i.toString().padStart(2, "0"))); })),
-        is12HourFormat && (react_1.default.createElement(react_2.Select, { value: ampm, onChange: handleAmpmChange, w: "3.8rem", size: "sm", isDisabled: disabled },
+        react_1.default.createElement(react_2.Select, { value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled }, Array.from({ length: 60 }, function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, i.toString().padStart(2, "0"))); })),
+        is12HourFormat && (react_1.default.createElement(react_2.Select, { value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled },
             react_1.default.createElement("option", { value: "AM" }, "AM"),
             react_1.default.createElement("option", { value: "PM" }, "PM")))));
 };

package/dist/Components/Input/Input/Input.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { InputProps } from "./InputProps";
-declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, }: InputProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }: InputProps) => React.JSX.Element>;
 export default _default;

package/dist/Components/Input/Input/Input.js

@@ -39,11 +39,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
-var Label_1 = __importDefault(require("../../Common/Label"));
+var FormLabel_1 = require("../../Common/FormLabel");
+var fieldStyles_1 = require("../../Common/fieldStyles");
 var ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
 var Input = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    var label = _a.label, type = _a.type, value = _a.value, onChange = _a.onChange, error = _a.error, placeholder = _a.placeholder, className = _a.className, inputBoxClassName = _a.inputBoxClassName, isRequired = _a.isRequired;
+    var label = _a.label, type = _a.type, value = _a.value, onChange = _a.onChange, error = _a.error, placeholder = _a.placeholder, className = _a.className, inputBoxClassName = _a.inputBoxClassName, isRequired = _a.isRequired, isInformation = _a.isInformation, informationMessage = _a.informationMessage;
     var theme = (0, react_2.useTheme)();
     var colors = theme.colors;
     var _s = (0, react_1.useState)(false), showPassword = _s[0], setShowPassword = _s[1];
@@ -57,9 +58,9 @@ var Input = function (_a) {
     var shadowPrimary = (_f = colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary;
     var shadowError = (_g = colors.boxShadow) === null || _g === void 0 ? void 0 : _g.error;
     return (react_1.default.createElement(react_2.Box, { className: inputBoxClassName, mb: 4 },
-        react_1.default.createElement(Label_1.default, { label: label, isRequired: isRequired }),
+        react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }),
         react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", overflow: "hidden" },
-            react_1.default.createElement(react_2.Input, { type: inputType, value: value, onChange: function (e) { return onChange(e.target.value); }, placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: "md", borderWidth: "1px", borderColor: borderColor, color: (_h = colors.secondary) === null || _h === void 0 ? void 0 : _h[500], pr: isPassword ? 10 : 4, _hover: {
+            react_1.default.createElement(react_2.Input, { type: inputType, value: value, onChange: function (e) { return onChange(e.target.value); }, placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: fieldStyles_1.FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: (_h = colors.secondary) === null || _h === void 0 ? void 0 : _h[500], pr: isPassword ? 10 : 4, _hover: {
                     borderColor: error
                         ? (_k = (_j = colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[600]
                         : value

package/dist/Components/Input/Input/InputProps.d.ts

@@ -14,4 +14,6 @@ export type InputProps = {
     autoComplete?: string;
     autoFocus?: boolean;
     isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
 };

package/dist/Components/Input/TextInput.styles.js

@@ -11,7 +11,8 @@ exports.Input = {
             pb: "0.813rem",
             display: "flex",
             alignItems: "center",
-            borderRadius: "0.25rem",
+            borderRadius: "0.5rem",
+            transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
                 fontStyle: "italic",
             },

package/dist/Components/InputTextArea/InputTextArea.style.js

@@ -8,7 +8,8 @@ exports.Textarea = {
         letterSpacing: "0.044rem",
         pt: "0.813rem",
         pb: "0.813rem",
-        borderRadius: "0.25rem",
+        borderRadius: "0.5rem",
+        transition: "border-color 0.2s, box-shadow 0.2s",
         _placeholder: {
             fontStyle: "italic",
         },

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -79,8 +79,8 @@ var KanbanRow = react_1.default.memo(function (_a) {
         return react_1.default.createElement("div", { style: style });
     }
     return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
-            react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP } },
+        react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP } },
+            react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
                 react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
                     var _a;
                     return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
@@ -248,8 +248,8 @@ var KanbanBoard = function (_a) {
             return changed ? pruned : prev;
         });
     }, [columns]);
-    // AccountCard floor (80px minHeight) + KANBAN_CARD_GAP — kept tight so unmeasured rows don't reserve excess space.
-    var DEFAULT_ITEM_HEIGHT = 80 + KANBAN_CARD_GAP;
+    // AccountCard's minHeight floor — kept tight so unmeasured rows don't reserve excess space; KANBAN_CARD_GAP is added below.
+    var DEFAULT_ITEM_HEIGHT = 80;
     // update height for an item
     var setSize = (0, react_1.useCallback)(function (index, size, colId) {
         var key = "".concat(colId, "-").concat(index);
@@ -265,7 +265,7 @@ var KanbanBoard = function (_a) {
     }, []);
     var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
         var key = "".concat(colId, "-").concat(index);
-        return sizes[key] || DEFAULT_ITEM_HEIGHT;
+        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP;
     }, [sizes]);
     // Calculate container height
     (0, react_1.useEffect)(function () {

package/dist/Components/KanbanBoard/MeasuredItem.js

@@ -38,19 +38,26 @@ var MeasuredItem = function (_a) {
     var index = _a.index, setSize = _a.setSize, children = _a.children;
     var ref = (0, react_1.useRef)(null);
     var prevHeight = (0, react_1.useRef)(null);
+    // Stable ref to the latest setSize so we don't tear down the ResizeObserver on every render.
+    var setSizeRef = (0, react_1.useRef)(setSize);
+    setSizeRef.current = setSize;
+    var indexRef = (0, react_1.useRef)(index);
+    indexRef.current = index;
     var measure = function () {
         if (ref.current) {
-            var height = Math.round(ref.current.getBoundingClientRect().height);
-            if (prevHeight.current !== height) {
+            // offsetHeight is the integer border-box layout height — more reliable than getBoundingClientRect for our purposes.
+            var height = ref.current.offsetHeight;
+            if (height > 0 && prevHeight.current !== height) {
                 prevHeight.current = height;
-                setSize(index, height);
+                setSizeRef.current(indexRef.current, height);
             }
         }
     };
     (0, react_1.useLayoutEffect)(function () {
-        var element = ref.current; // ✅ Capture the current ref value
-        // Initial measure
+        var element = ref.current;
         measure();
+        // A second measure after paint catches any layout that finishes after the synchronous tick (font loads, async CSS, etc).
+        var raf = requestAnimationFrame(measure);
         var ro;
         if (typeof ResizeObserver !== "undefined" && element) {
             ro = new ResizeObserver(function () {
@@ -59,18 +66,24 @@ var MeasuredItem = function (_a) {
             ro.observe(element);
         }
         else {
-            // Fallback for browsers without ResizeObserver
             window.addEventListener("resize", measure);
         }
         return function () {
-            // ✅ Use captured element instead of ref.current
+            cancelAnimationFrame(raf);
             if (ro && element)
                 ro.unobserve(element);
             if (!ro)
                 window.removeEventListener("resize", measure);
         };
+        // Intentionally empty deps — setSize/index are read through refs so the observer is set up exactly once per mount.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [index, setSize]);
+    }, []);
+    // If index changes for the same DOM node (item shuffled), re-report the cached size under the new index.
+    (0, react_1.useEffect)(function () {
+        if (prevHeight.current != null) {
+            setSizeRef.current(indexRef.current, prevHeight.current);
+        }
+    }, [index]);
     return react_1.default.createElement("div", { ref: ref }, children);
 };
 exports.default = MeasuredItem;