pixelize-design-library 2.4.2-beta.56 → 2.4.2-beta.57

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -20,13 +53,14 @@ const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 const TimePickerInput_1 = require("./TimePickerInput");
+const PickerPortal_1 = __importStar(require("./PickerPortal"));
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 // helper to set time on date while preserving date part
 const setTimeFrom = (base, time) => {
     const b = base ? new Date(base) : new Date();
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
-/** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
+/** Two-endpoint range field; `onChange` fires on Apply, outside click or Escape in the calendar — never on a bare day click. */
 const RangeDatePicker = (props) => {
     var _a, _b, _c, _d;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, dayStates, renderDayContent, } = props;
@@ -38,6 +72,7 @@ const RangeDatePicker = (props) => {
     const calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const pickerPortal = (0, PickerPortal_1.usePickerPortal)(isOpen);
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date range";
     const inputRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
@@ -185,7 +220,7 @@ const RangeDatePicker = (props) => {
             return `${(0, date_fns_1.format)(tempRangeStart, dateFormat)} -`;
         return "";
     }, [inputValue, tempRangeStart, tempRangeEnd, dateFormat]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: requestClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
                                             if (!isOpen)
                                                 handleOpen();
                                         }, onClick: () => {
@@ -199,36 +234,36 @@ const RangeDatePicker = (props) => {
                                                 else {
                                                     onClose();
                                                 }
-                                            }, icon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
-                                            const [from, to] = p.getRange();
-                                            applyPreset(from, to);
-                                        }, children: p.label }, p.label))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => 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, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: startTimeBaseDate, onChange: (updated) => {
-                                                        if (!tempRangeStart) {
-                                                            setTempRangeStart(updated);
-                                                            return;
-                                                        }
-                                                        const withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
-                                                        setTempRangeStart(withStartDate);
-                                                    }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeStart })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeStart, onChange: (t) => {
-                                                        if (!t) {
-                                                            setTempRangeStart(null);
-                                                            return;
-                                                        }
-                                                        setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeStart, size: sizeKey }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: endTimeBaseDate, onChange: (updated) => {
-                                                        if (!tempRangeEnd) {
-                                                            setTempRangeEnd(updated);
-                                                            return;
-                                                        }
-                                                        const withEndDate = new Date(tempRangeEnd.getFullYear(), tempRangeEnd.getMonth(), tempRangeEnd.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
-                                                        setTempRangeEnd(withEndDate);
-                                                    }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeEnd })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
-                                                        if (!t) {
-                                                            setTempRangeEnd(null);
-                                                            return;
-                                                        }
-                                                        setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                            }, icon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(PickerPortal_1.default, { isMounted: pickerPortal.isMounted, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
+                                                const [from, to] = p.getRange();
+                                                applyPreset(from, to);
+                                            }, children: p.label }, p.label))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => 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, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: startTimeBaseDate, onChange: (updated) => {
+                                                            if (!tempRangeStart) {
+                                                                setTempRangeStart(updated);
+                                                                return;
+                                                            }
+                                                            const withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
+                                                            setTempRangeStart(withStartDate);
+                                                        }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeStart })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeStart, onChange: (t) => {
+                                                            if (!t) {
+                                                                setTempRangeStart(null);
+                                                                return;
+                                                            }
+                                                            setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeStart, size: sizeKey }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: endTimeBaseDate, onChange: (updated) => {
+                                                            if (!tempRangeEnd) {
+                                                                setTempRangeEnd(updated);
+                                                                return;
+                                                            }
+                                                            const withEndDate = new Date(tempRangeEnd.getFullYear(), tempRangeEnd.getMonth(), tempRangeEnd.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
+                                                            setTempRangeEnd(withEndDate);
+                                                        }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeEnd })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
+                                                            if (!t) {
+                                                                setTempRangeEnd(null);
+                                                                return;
+                                                            }
+                                                            setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 exports.RangeDatePicker = RangeDatePicker;
 exports.default = exports.RangeDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -22,6 +55,7 @@ const pickerField_1 = require("./pickerField");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 const TimePickerInput_1 = require("./TimePickerInput");
 const CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
+const PickerPortal_1 = __importStar(require("./PickerPortal"));
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const TOKEN_CHARS = /[dMyHhmsaAm]/;
 const getPlaceholderForToken = (token, length) => {
@@ -230,6 +264,7 @@ function SingleDatePicker(props) {
     const calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const pickerPortal = (0, PickerPortal_1.usePickerPortal)(isOpen);
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
     const inputRef = (0, react_1.useRef)(null);
     const popoverRef = (0, react_1.useRef)(null);
@@ -967,12 +1002,13 @@ function SingleDatePicker(props) {
         : tempDate
             ? (0, date_fns_1.format)(tempDate, resolvedDateFormat)
             : "";
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: () => {
                     if (suppressOnCloseFinalizeRef.current) {
                         suppressOnCloseFinalizeRef.current = false;
                         return;
                     }
                     finalize();
+                    onClose();
                 }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, cursor: "text" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
                                                 e.stopPropagation();
                                                 if (!isOpen) {
@@ -981,17 +1017,17 @@ function SingleDatePicker(props) {
                                                 else {
                                                     onClose();
                                                 }
-                                            }, icon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => 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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
-                                            setTempDate(updatedDate);
-                                            setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
-                                            setIsTyping(false);
-                                        }, dateFormat: resolvedDateFormat, isDisabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: (updatedDate) => {
-                                            setTempDate(updatedDate);
-                                            setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
-                                            setIsTyping(false);
-                                        }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
-                                                setTempDate(null);
-                                                requestClose(null);
-                                            }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                            }, icon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(PickerPortal_1.default, { isMounted: pickerPortal.isMounted, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => 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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
+                                                setIsTyping(false);
+                                            }, dateFormat: resolvedDateFormat, isDisabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
+                                                setIsTyping(false);
+                                            }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                                    setTempDate(null);
+                                                    requestClose(null);
+                                                }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }
 exports.default = SingleDatePicker;

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -16,6 +49,7 @@ const useFieldIds_1 = require("../Common/useFieldIds");
 const pickerField_1 = require("./pickerField");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 const TimePickerInput_1 = require("./TimePickerInput");
+const PickerPortal_1 = __importStar(require("./PickerPortal"));
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
@@ -28,6 +62,7 @@ function TimeOnlyPicker(props) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const pickerPortal = (0, PickerPortal_1.usePickerPortal)(isOpen);
     const openPicker = () => {
         requestExclusiveOpen();
         onOpen();
@@ -96,13 +131,13 @@ function TimeOnlyPicker(props) {
         };
     }, [isOpen, onClose]);
     const resolvedTempDate = tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0);
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: inputWrapperRef, children: (0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (date) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: inputWrapperRef, children: (0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (date) => {
                                         handleTimeInputChange(date);
                                     }, dateFormat: dateFormat, isDisabled: disabled, placeholder: placeholder, id: ids.inputId, name: name, isRequired: isRequired, describedBy: ids.describedBy, onFocus: () => {
                                         if (!disabled && !isOpen)
                                             openPicker();
-                                    }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [(0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
-                                        handleTimePickerChange(updatedDate);
-                                    } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                    }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(PickerPortal_1.default, { isMounted: pickerPortal.isMounted, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [(0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
+                                            handleTimePickerChange(updatedDate);
+                                        } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }
 exports.default = TimeOnlyPicker;

package/dist/Components/DetailSections/DetailSections.d.ts

@@ -0,0 +1,4 @@
+import type { DetailSectionsProps } from "./DetailSectionsProps";
+/** Long-form product information: description, highlights, specifications, care, shipping and returns, and legal-metrology info. */
+declare const DetailSections: ({ description, highlights, specs, care, shipping, legal, sections, layout, defaultOpenIds, specCollapsedCount, labels, "data-testid": testId, }: DetailSectionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DetailSections;

package/dist/Components/DetailSections/DetailSections.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Accordion_1 = __importDefault(require("../Accordion/Accordion"));
+const Tabs_1 = __importDefault(require("../Tabs/Tabs"));
+const SpecTable_1 = __importDefault(require("../SpecTable/SpecTable"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const DEFAULT_LABELS = {
+    description: "Description",
+    highlights: "Highlights",
+    specifications: "Specifications",
+    care: "Care",
+    shipping: "Shipping & returns",
+    legal: "Legal & manufacturer info",
+    netQuantity: "Net quantity",
+    manufacturer: "Manufactured / packed by",
+    originCountry: "Country of origin",
+    mrp: "MRP",
+    customerCare: "Customer care",
+    mrpIncludesTaxes: "Maximum retail price, inclusive of all taxes",
+};
+const hasContent = (node) => node !== undefined && node !== null && node !== false && node !== "";
+const legalRows = (legal, text) => {
+    const fields = [legal.netQuantity, legal.manufacturer, legal.originCountry, legal.mrpNote, legal.customerCare];
+    if (!fields.some(Boolean))
+        return [];
+    const rows = [
+        [text.netQuantity, legal.netQuantity],
+        [text.manufacturer, legal.manufacturer],
+        [text.originCountry, legal.originCountry],
+        [text.mrp, legal.mrpNote || text.mrpIncludesTaxes],
+        [text.customerCare, legal.customerCare],
+    ];
+    return rows.flatMap(([label, value]) => (value ? [{ label, value }] : []));
+};
+const BulletList = ({ items, icon }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: items.map((item, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", align: "flex-start", gap: 2, color: colors.text[800], children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, mt: "0.1875rem", color: colors.accentText, children: icon === "check" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, strokeWidth: 2.25 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Dot, { size: 16, strokeWidth: 6 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", minW: 0, overflowWrap: "anywhere", children: item })] }, `${item}-${i}`))) }));
+};
+/** Long-form product information: description, highlights, specifications, care, shipping and returns, and legal-metrology info. */
+const DetailSections = ({ description, highlights, specs, care, shipping, legal, sections, layout = "accordion", defaultOpenIds, specCollapsedCount, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const body = { fontSize: "sm", lineHeight: 1.7, color: colors.text[800] };
+    const careList = typeof care === "string" ? null : care;
+    const legalSpecs = legal ? legalRows(legal, text) : [];
+    const builtIn = [
+        description ? { id: "description", title: text.description, content: (0, jsx_runtime_1.jsx)(react_1.Text, { ...body, children: description }) } : null,
+        (highlights === null || highlights === void 0 ? void 0 : highlights.length) ? { id: "highlights", title: text.highlights, content: (0, jsx_runtime_1.jsx)(BulletList, { items: highlights, icon: "check" }) } : null,
+        (specs === null || specs === void 0 ? void 0 : specs.length)
+            ? { id: "specs", title: text.specifications, content: (0, jsx_runtime_1.jsx)(SpecTable_1.default, { items: specs, collapsedCount: specCollapsedCount }) }
+            : null,
+        (care === null || care === void 0 ? void 0 : care.length)
+            ? {
+                id: "care",
+                title: text.care,
+                content: careList ? (0, jsx_runtime_1.jsx)(BulletList, { items: careList, icon: "dot" }) : (0, jsx_runtime_1.jsx)(react_1.Text, { ...body, children: care }),
+            }
+            : null,
+        hasContent(shipping) ? { id: "shipping", title: text.shipping, content: (0, jsx_runtime_1.jsx)(react_1.Box, { ...body, children: shipping }) } : null,
+        legalSpecs.length ? { id: "legal", title: text.legal, content: (0, jsx_runtime_1.jsx)(SpecTable_1.default, { items: legalSpecs }) } : null,
+    ];
+    const BUILT_IN_IDS = ["description", "highlights", "specs", "care", "shipping", "legal"];
+    const overrides = new Map((sections !== null && sections !== void 0 ? sections : []).map((s) => [s.id, s]));
+    const merged = [
+        ...builtIn.flatMap((section, i) => {
+            const replacement = overrides.get(BUILT_IN_IDS[i]);
+            const picked = replacement !== null && replacement !== void 0 ? replacement : section;
+            return picked ? [picked] : [];
+        }),
+        ...(sections !== null && sections !== void 0 ? sections : []).filter((s) => !BUILT_IN_IDS.includes(s.id)),
+    ];
+    if (merged.length === 0)
+        return null;
+    if (layout === "tabs") {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-testid": testId, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { variant: "line", "aria-label": "Product details", items: merged.map((s) => ({
+                    id: s.id,
+                    label: s.title,
+                    content: ((0, jsx_runtime_1.jsx)(react_1.Box, { id: `detail-section-${s.id}`, "data-section-id": s.id, pt: 4, children: s.content })),
+                })) }) }));
+    }
+    const openIds = defaultOpenIds !== null && defaultOpenIds !== void 0 ? defaultOpenIds : [merged[0].id];
+    const defaultIndex = merged.flatMap((s, i) => (openIds.includes(s.id) ? [i] : []));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-testid": testId, children: (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: defaultIndex, items: merged.map((s) => ({
+                header: ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: colors.header[900], children: s.title })),
+                content: s.content,
+                itemProps: {
+                    id: `detail-section-${s.id}`,
+                    "data-section-id": s.id,
+                    border: "none",
+                    borderRadius: "xl",
+                    bg: colors.background[100],
+                    mb: 2,
+                },
+                buttonProps: {
+                    px: 4,
+                    py: 3.5,
+                    fontSize: "md",
+                    bg: "transparent",
+                    transition: (0, motion_1.transitionFor)(["background-color"]),
+                    _hover: { bg: colors.background[200] },
+                },
+                panelProps: { px: 4, pt: 1, pb: 5, color: colors.text[800] },
+            })) }) }));
+};
+exports.default = DetailSections;

package/dist/Components/DetailSections/DetailSectionsProps.d.ts

@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+import type { SpecItem } from "../SpecTable/SpecTableProps";
+/** One long-form section. */
+export interface DetailSection {
+    id: string;
+    title: string;
+    content: ReactNode;
+}
+/** Indian legal-metrology disclosures; every field is optional and an empty block is not rendered. */
+export interface LegalInfo {
+    /** e.g. "500 g" or "1 N". */
+    netQuantity?: string;
+    /** Name and address of the manufacturer, packer or importer. */
+    manufacturer?: string;
+    originCountry?: string;
+    /** Line printed beside "MRP"; defaults to "Maximum retail price, inclusive of all taxes". */
+    mrpNote?: string;
+    /** Customer care contact. */
+    customerCare?: string;
+}
+/** Every string the sections render; override all of them for another language. */
+export interface DetailSectionsLabels {
+    description: string;
+    highlights: string;
+    specifications: string;
+    care: string;
+    shipping: string;
+    legal: string;
+    netQuantity: string;
+    manufacturer: string;
+    originCountry: string;
+    mrp: string;
+    customerCare: string;
+    /** Default `mrpNote`. */
+    mrpIncludesTaxes: string;
+}
+/** `accordion` stacks collapsible rows (mobile); `tabs` lays the same sections out as a tab list (desktop). */
+export type DetailSectionsLayout = "accordion" | "tabs";
+/** Long-form product information: description, highlights, specifications, care, shipping and returns, and legal-metrology info. */
+export interface DetailSectionsProps {
+    description?: string;
+    highlights?: string[];
+    specs?: SpecItem[];
+    /** Care instructions; a list renders as bullets. */
+    care?: string | string[];
+    /** Shipping and returns copy. */
+    shipping?: ReactNode;
+    legal?: LegalInfo;
+    /** Extra sections appended after the built-in ones, or replacing a built-in one with the same id (`description`, `highlights`, `specs`, `care`, `shipping`, `legal`). */
+    sections?: DetailSection[];
+    layout?: DetailSectionsLayout;
+    /** Section ids open on mount in `accordion` layout; defaults to the first section. */
+    defaultOpenIds?: string[];
+    /** Rows of the specifications table shown before "Show all". */
+    specCollapsedCount?: number;
+    labels?: Partial<DetailSectionsLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/DetailSections/DetailSectionsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/MediaGallery/MediaFrame.d.ts

@@ -0,0 +1,31 @@
+import type { ProductMedia } from "../Commerce/commerceTypes";
+export type FrameZoom = {
+    scale: number;
+    x: number;
+    y: number;
+};
+type MediaFrameProps = {
+    media: ProductMedia;
+    alt: string;
+    fit?: "cover" | "contain";
+    /** False for frames the viewer is not looking at: lazy-loads images and stops any playing video. */
+    active?: boolean;
+    eager?: boolean;
+    autoPlay?: boolean;
+    zoom?: FrameZoom;
+    surface?: string;
+    playLabel: string;
+    unavailableLabel: string;
+};
+/** One frame: skeleton, then image fade-in with the ratio already reserved; broken images become a tile. */
+export declare const FrameImage: ({ src, alt, fit, eager, zoom, unavailableLabel, }: {
+    src: string;
+    alt: string;
+    fit: "cover" | "contain";
+    eager: boolean;
+    zoom?: FrameZoom;
+    unavailableLabel: string;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Image, or a video that shows its poster behind a play button until asked to play. */
+declare const MediaFrame: ({ media, alt, fit, active, eager, autoPlay, zoom, surface, playLabel, unavailableLabel, }: MediaFrameProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaFrame;

package/dist/Components/MediaGallery/MediaFrame.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FrameImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const glass_1 = require("./glass");
+const mediaGalleryModel_1 = require("./mediaGalleryModel");
+const CENTER = { position: "absolute", inset: 0 };
+/** One frame: skeleton, then image fade-in with the ratio already reserved; broken images become a tile. */
+const FrameImage = ({ src, alt, fit, eager, zoom, unavailableLabel, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [state, setState] = (0, react_1.useState)("loading");
+    const settle = (0, react_1.useCallback)((node) => {
+        if (node && node.complete && node.naturalWidth > 0)
+            setState("loaded");
+    }, []);
+    if (state === "failed") {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ...CENTER, direction: "column", align: "center", justify: "center", gap: 2, color: colors.textMuted, role: "img", "aria-label": `${unavailableLabel}: ${alt}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ImageOff, { size: 24, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", children: unavailableLabel })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state === "loading" && ((0, jsx_runtime_1.jsx)(react_2.Box, { ...CENTER, "data-testid": "media-skeleton", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "100%", width: "100%", borderRadius: "0" }) })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", ref: settle, src: src, alt: alt, loading: eager ? "eager" : "lazy", decoding: "async", draggable: false, onLoad: () => setState("loaded"), onError: () => setState("failed"), ...CENTER, w: "100%", h: "100%", objectFit: fit, opacity: state === "loaded" ? 1 : 0, transform: zoom ? `scale(${zoom.scale})` : undefined, transformOrigin: zoom ? `${zoom.x}% ${zoom.y}%` : undefined, transition: (0, motion_1.transitionFor)(["opacity", "transform"], "base"), sx: (0, motion_2.reducedMotionSx)() })] }));
+};
+exports.FrameImage = FrameImage;
+/** Image, or a video that shows its poster behind a play button until asked to play. */
+const MediaFrame = ({ media, alt, fit = "cover", active = true, eager = true, autoPlay = false, zoom, surface, playLabel, unavailableLabel, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const kind = (0, mediaGalleryModel_1.frameKind)(media);
+    const [playing, setPlaying] = (0, react_1.useState)(autoPlay);
+    (0, react_1.useEffect)(() => {
+        if (!active)
+            setPlaying(false);
+    }, [active]);
+    const poster = (0, mediaGalleryModel_1.framePoster)(media);
+    let content;
+    if (kind === "image") {
+        content = (0, jsx_runtime_1.jsx)(exports.FrameImage, { src: media.src, alt: alt, fit: fit, eager: eager, zoom: zoom, unavailableLabel: unavailableLabel }, media.src);
+    }
+    else if (playing) {
+        const embed = (0, mediaGalleryModel_1.parseEmbed)(media.src);
+        content = embed ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "iframe", ...CENTER, w: "100%", h: "100%", border: "0", src: embed.src, title: alt, allow: "autoplay; encrypted-media; picture-in-picture; fullscreen", allowFullScreen: true })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", ...CENTER, w: "100%", h: "100%", objectFit: "contain", src: media.src, poster: media.poster, controls: true, autoPlay: true, playsInline: true, "aria-label": alt }));
+    }
+    else {
+        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [poster ? ((0, jsx_runtime_1.jsx)(exports.FrameImage, { src: poster, alt: alt, fit: fit, eager: eager, unavailableLabel: unavailableLabel }, poster)) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { ...CENTER, align: "center", justify: "center", color: colors.textMuted, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Video, { size: 32 }) })), (0, jsx_runtime_1.jsx)(glass_1.GlassIconButton, { label: playLabel, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 20, "aria-hidden": true, fill: "currentColor" }), onClick: () => setPlaying(true), size: 56, left: "calc(50% - 28px)", top: "calc(50% - 28px)", tabIndex: active ? 0 : -1 })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", w: "100%", h: "100%", overflow: "hidden", bg: surface !== null && surface !== void 0 ? surface : colors.background[100], "data-frame-kind": kind, children: content }));
+};
+exports.default = MediaFrame;

package/dist/Components/MediaGallery/MediaGallery.d.ts

@@ -0,0 +1,4 @@
+import type { MediaGalleryProps } from "./MediaGalleryProps";
+/** Product media carousel: scroll-snap track, thumbnail rail or dots, lightbox, colour-linked frame sets. */
+declare const MediaGallery: ({ media, layout, aspectRatio, zoom, index, defaultIndex, onIndexChange, activeMediaIds, badges, actions, sticky, stickyTop, rounded, isLoading, labels: labelOverrides, lightboxLabels, "aria-label": ariaLabel, "data-testid": testId, }: MediaGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaGallery;