@heymantle/litho 0.0.1

package/dist/cjs/components/DatePicker.js

@@ -0,0 +1,547 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _tailwindvariants = require("tailwind-variants");
+var _dayjs = /*#__PURE__*/ _interop_require_default(require("dayjs"));
+var _reactdatepicker = /*#__PURE__*/ _interop_require_default(require("react-datepicker"));
+var _index = require("../index");
+var _polarisicons = require("@shopify/polaris-icons");
+var _locale = require("date-fns/locale");
+var _dates = require("../utilities/dates");
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var calendarStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-DatePicker__Calendar relative"
+});
+var dayStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-DatePicker__Calendar__Day inline-block w-10 @sm:w-8 h-8 flex items-center justify-center text-center select-none",
+    variants: {
+        disabled: {
+            false: "cursor-pointer",
+            true: "text-lowest"
+        },
+        isToday: {
+            true: "font-semibold",
+            false: ""
+        },
+        isBetween: {
+            true: "bg-tab-active-bg hover:bg-tab-active-bg active:bg-tab-active-bg",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            allowRange: true,
+            selected: false,
+            disabled: false,
+            isStartDate: false,
+            isEndDate: false,
+            isBetween: false,
+            class: "rounded-md"
+        },
+        {
+            allowRange: false,
+            class: "rounded-md"
+        },
+        {
+            allowRange: false,
+            selected: false,
+            disabled: false,
+            class: "hover"
+        },
+        {
+            allowRange: true,
+            selected: false,
+            disabled: false,
+            isBetween: false,
+            isStartDate: false,
+            isEndDate: false,
+            showHoverState: true,
+            class: "hover"
+        },
+        {
+            allowRange: false,
+            selected: true,
+            class: "font-semibold bg-form-accent hover:bg-form-accent dark:text-black"
+        },
+        {
+            allowRange: true,
+            selected: true,
+            isStartDate: true,
+            class: "font-semibold bg-form-accent hover:bg-form-accent rounded-l-md dark:text-black"
+        },
+        {
+            allowRange: true,
+            isEndDate: true,
+            class: "font-semibold bg-form-accent hover:bg-form-accent rounded-r-md dark:text-black"
+        }
+    ],
+    defaultVariants: {
+        isToday: false,
+        isStartDate: false,
+        isEndDate: false,
+        allowRange: false,
+        isBetween: false,
+        selected: false,
+        disabled: false
+    }
+});
+var buttonStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-DatePicker__Button",
+    variants: {
+        disabled: {
+            false: "opacity-70 cursor-pointer rounded-md p-1 hover",
+            true: "opacity-20 pointer-events-none"
+        }
+    }
+});
+var presetContainerStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-DatePicker__PresetContainer overflow-y-auto relative -left-2 max-w-full-plus-4 py-0.5 px-2 @sm:pl-0.5 @sm:pr-4 @sm:left-0 @sm:max-w-auto",
+    variants: {
+        rows: {
+            4: "max-h-51",
+            5: "max-h-59.5",
+            6: "max-h-68"
+        }
+    }
+});
+var getDateRange = function(param) {
+    var startDate = param.startDate, endDate = param.endDate, dateRange = param.dateRange;
+    var start = (0, _dayjs.default)(startDate);
+    var end = (0, _dayjs.default)(endDate);
+    return _to_consumable_array(_dates.RANGE_PRESETS).concat(_to_consumable_array(_dates.HOURLY_RANGE_PRESETS)).find(function(preset) {
+        var _preset_value = preset.value, presetStart = _preset_value.start, presetEnd = _preset_value.end;
+        return start.isSame(presetStart, "day") && end.isSame(presetEnd, "day") && dateRange === preset.id;
+    }) || {
+        id: "custom",
+        value: {
+            start: start,
+            end: end
+        }
+    };
+};
+/**
+ * DatePicker component for selecting dates and date ranges.
+ *
+ * @param {Object} props - Component properties.
+ * @param {string} [props.label] - Label for the DatePicker.
+ * @param {Object|null} [props.labelAction] - Action button for the label.
+ * @param {function} [props.onBlur] - Callback function for when the field loses focus.
+ * @param {string} [props.placeholder="Select date..."] - Placeholder text.
+ * @param {string} [props.displayFormat] - Date format for displaying the value.
+ * @param {string} [props.helpText] - Help text displayed under the field.
+ * @param {JSX.Element|null} [props.suffix=null] - Icon or text displayed at the end of the input.
+ * @param {boolean} [props.isClearable=false] - Whether the input can be cleared.
+ * @param {string|null} [props.tooltip] - Tooltip text for the field.
+ * @param {string} [props.locale="en-US"] - Locale used for formatting.
+ * @param {Object|string|Date|null} [props.value] - Current value of the DatePicker.
+ * @param {boolean} [props.allowRange=false] - Whether date range selection is enabled.
+ * @param {JSX.Element|null} [props.activator] - Custom activator for the popover.
+ * @param {Date|string|null} [props.disableDatesAfter] - Dates after this value are disabled.
+ * @param {Date|string|null} [props.disableDatesBefore] - Dates before this value are disabled.
+ * @param {function} [props.onChange] - Callback function called when the date changes.
+ * @param {boolean} [props.multiMonth=false] - Whether multiple months are shown.
+ * @param {boolean} [props.disabled=false] - Whether the DatePicker is disabled.
+ * @param {boolean} [props.showTimePicker=false] - Whether a time picker is displayed.
+ * @param {boolean} [props.autoFocus=false] - Whether the input is focused automatically.
+ * @param {Date|null} [props.maxDate] - Maximum selectable date.
+ * @param {Date|null} [props.minDate] - Minimum selectable date.
+ * @param {boolean} [props.inline=false] - Whether the calendar is displayed inline.
+ * @param {string} [props.preferredAlignment="left"] - Alignment of the popover.
+ * @param {string} [props.preferredPosition="below"] - Position of the popover.
+ * @param {boolean} [props.includeHourlyPresets=false] - Whether hourly (last 30 minutes, last hour) presets are included.
+ * @param {Array} [props.customPresets=[]] - Custom presets to include.
+ * @param {JSX.Element|null} [props.footer] - An optional footer component to display at the bottom of the DatePicker.
+ * @returns {JSX.Element} The rendered DatePicker component.
+ */ function DatePicker() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var label = props.label, _props_labelAction = props.labelAction, labelAction = _props_labelAction === void 0 ? null : _props_labelAction, onBlur = props.onBlur, _props_placeholder = props.placeholder, placeholder = _props_placeholder === void 0 ? "Select date..." : _props_placeholder, _props_displayFormat = props.displayFormat, displayFormat = _props_displayFormat === void 0 ? props.showTimePicker && !props.allowRange ? _dates.DAY_TIME_FORMAT : _dates.DAY_FORMAT : _props_displayFormat, helpText = props.helpText, _props_suffix = props.suffix, suffix = _props_suffix === void 0 ? null : _props_suffix, isClearable = props.isClearable, tooltip = props.tooltip, tmp = props.locale, _locale1 = tmp === void 0 ? "en-US" : tmp, _value = props.value, _props_allowRange = props.allowRange, allowRange = _props_allowRange === void 0 ? false : _props_allowRange, activator = props.activator, disableDatesAfter = props.disableDatesAfter, disableDatesBefore = props.disableDatesBefore, onChange = props.onChange, multiMonth = props.multiMonth, disabled = props.disabled, showTimePicker = props.showTimePicker, autoFocus = props.autoFocus, _maxDate = props.maxDate, _minDate = props.minDate, _props_inline = props.inline, inline = _props_inline === void 0 ? false : _props_inline, _props_closeAfterDateSelection = props.closeAfterDateSelection, closeAfterDateSelection = _props_closeAfterDateSelection === void 0 ? true : _props_closeAfterDateSelection, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "left" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_includeHourlyPresets = props.includeHourlyPresets, includeHourlyPresets = _props_includeHourlyPresets === void 0 ? false : _props_includeHourlyPresets, _props_customPresets = props.customPresets, customPresets = _props_customPresets === void 0 ? [] : _props_customPresets, footer = props.footer;
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), showPopover = _useState[0], setShowPopover = _useState[1];
+    var _useState1 = _sliced_to_array((0, _react.useState)(4), 2), rows = _useState1[0], setRows = _useState1[1];
+    var startDate = (0, _dates.isValidDate)(_value === null || _value === void 0 ? void 0 : _value.start) ? _value.start : (0, _dayjs.default)().toDate();
+    var endDate = (0, _dates.isValidDate)(_value === null || _value === void 0 ? void 0 : _value.end) ? _value.end : null;
+    var value = (typeof _value === "undefined" ? "undefined" : _type_of(_value)) === "object" && (_value === null || _value === void 0 ? void 0 : _value.start) ? _value.start : _value || null;
+    var maxDate = _maxDate || disableDatesAfter;
+    var minDate = _minDate || disableDatesBefore ? (0, _dayjs.default)(disableDatesBefore).subtract(1, "day").toDate() : null;
+    var maxDateFormatted = maxDate ? (0, _dayjs.default)(maxDate) : null;
+    var minDateFormatted = minDate ? (0, _dayjs.default)(minDate) : null;
+    var dateRange = getDateRange({
+        startDate: startDate,
+        endDate: endDate,
+        dateRange: _value === null || _value === void 0 ? void 0 : _value.dateRange
+    });
+    var selectedDate = (0, _dayjs.default)(value).format(_dates.DAY_FORMAT);
+    var formattedTime = (0, _dayjs.default)(value).format(_dates.TIME_FORMAT);
+    var openToDate = allowRange ? startDate || endDate || value || (0, _dayjs.default)().toDate() : value || (0, _dayjs.default)().toDate();
+    var locale = _dates.DATE_LOCALE_MAP[_locale1] || _locale.enUS;
+    (0, _react.useEffect)(function() {
+        var _rows = getCalendarRows((openToDate === null || openToDate === void 0 ? void 0 : openToDate.getMonth()) || new Date().getMonth(), (openToDate === null || openToDate === void 0 ? void 0 : openToDate.getFullYear()) || new Date().getFullYear());
+        if (_rows !== rows) {
+            setRows(_rows);
+        }
+    }, [
+        startDate,
+        endDate
+    ]);
+    var renderDayContents = function(day, date) {
+        var dayjsDate = (0, _dayjs.default)(date);
+        var formattedDate = dayjsDate.format(_dates.DAY_FORMAT);
+        var isToday = formattedDate === _dates.NOW_TODAY;
+        var isStartDate = allowRange ? formattedDate === (0, _dayjs.default)(startDate).format(_dates.DAY_FORMAT) : false;
+        var isEndDate = allowRange ? formattedDate === (0, _dayjs.default)(endDate).format(_dates.DAY_FORMAT) : false;
+        var isBetween = allowRange ? dayjsDate.isAfter((0, _dayjs.default)(startDate)) && dayjsDate.isBefore((0, _dayjs.default)(endDate)) : false;
+        var disabled = false;
+        if (maxDateFormatted && dayjsDate.isAfter(maxDateFormatted)) {
+            disabled = true;
+        }
+        if (minDateFormatted && dayjsDate.isBefore(minDateFormatted)) {
+            disabled = true;
+        }
+        var dayClasses = dayStyles({
+            selected: formattedDate === selectedDate,
+            isStartDate: isStartDate,
+            isEndDate: isEndDate,
+            isBetween: isBetween,
+            showHoverState: !allowRange || !startDate && !endDate || !!startDate && !!endDate,
+            disabled: disabled,
+            allowRange: allowRange,
+            isToday: isToday
+        });
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: dayClasses,
+            children: day
+        });
+    };
+    var getCalendarRows = function(month, year) {
+        var weekStartsOn = (locale === null || locale === void 0 ? void 0 : locale.options.weekStartsOn) || 0;
+        var firstDayOfMonth = new Date(year, month, 1);
+        var lastDayOfMonth = new Date(year, month + 1, 0);
+        var firstDayOfWeek = (firstDayOfMonth.getDay() - weekStartsOn + 7) % 7;
+        var lastDayOfWeek = (lastDayOfMonth.getDay() - weekStartsOn + 7) % 7;
+        var daysInMonth = lastDayOfMonth.getDate();
+        var totalSlots = firstDayOfWeek + daysInMonth + (6 - lastDayOfWeek);
+        return Math.ceil(totalSlots / 7);
+    };
+    var calendarClasses = calendarStyles({
+        inline: inline
+    });
+    var presets = includeHourlyPresets ? _to_consumable_array(_dates.HOURLY_RANGE_PRESETS).concat(_to_consumable_array(_dates.RANGE_PRESETS)) : _dates.RANGE_PRESETS;
+    if (customPresets.length > 0) {
+        presets = _to_consumable_array(customPresets).concat(_to_consumable_array(presets));
+    }
+    var datePicker = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "flex flex-col @sm:flex-row items-start justify-start",
+        children: [
+            allowRange && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: presetContainerStyles({
+                    rows: rows
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Listbox, {
+                    displayHorizontallyOnMobile: true,
+                    options: presets.map(function(preset) {
+                        return {
+                            label: preset.label,
+                            value: preset.id,
+                            selected: dateRange.id === preset.id,
+                            showIcon: false,
+                            onAction: function() {
+                                onChange(_object_spread_props(_object_spread({}, preset.value), {
+                                    dateRange: preset
+                                }));
+                            }
+                        };
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "flex flex-col gap-2 py-0.5 w-full @sm:w-auto",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactdatepicker.default, {
+                        className: "Litho-DatePicker",
+                        calendarClassName: calendarClasses,
+                        dayClassName: function() {
+                            return "Litho-DatePicker__Day";
+                        },
+                        timeClassName: "Litho-DatePicker__Time",
+                        monthClassName: "Litho-DatePicker__Month",
+                        selectsRange: allowRange,
+                        selected: allowRange ? startDate : value,
+                        startDate: allowRange ? startDate : undefined,
+                        endDate: allowRange ? endDate : undefined,
+                        onChange: function(value) {
+                            if (allowRange) {
+                                var _value = _sliced_to_array(value, 2), start = _value[0], end = _value[1];
+                                onChange({
+                                    start: start,
+                                    end: end,
+                                    dateRange: getDateRange(start, end)
+                                });
+                            } else {
+                                onChange({
+                                    date: value,
+                                    dateRange: null
+                                });
+                                if (closeAfterDateSelection && !showTimePicker) {
+                                    setShowPopover(false);
+                                }
+                            }
+                        },
+                        openToDate: openToDate,
+                        disabled: disabled,
+                        inline: true,
+                        monthsShown: multiMonth ? 2 : 1,
+                        locale: locale,
+                        renderDayContents: renderDayContents,
+                        maxDate: maxDate,
+                        minDate: minDate,
+                        renderCustomHeader: function(param) {
+                            var date = param.date, decreaseMonth = param.decreaseMonth, increaseMonth = param.increaseMonth, prevMonthButtonDisabled = param.prevMonthButtonDisabled, nextMonthButtonDisabled = param.nextMonthButtonDisabled;
+                            var _date = (0, _dayjs.default)(date);
+                            var monthLabel = _dates.MONTHS[_date.month()].name;
+                            var yearLabel = _date.year();
+                            var showYearLabel = true;
+                            var _rows = getCalendarRows(_date.month(), _date.year());
+                            if (_rows !== rows) {
+                                setRows(_rows);
+                            }
+                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "flex justify-between items-center min-h-8",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                                        onClick: decreaseMonth,
+                                        disabled: prevMonthButtonDisabled,
+                                        className: buttonStyles({
+                                            disabled: prevMonthButtonDisabled
+                                        }),
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                            source: _polarisicons.ChevronLeftMinor
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.Text, {
+                                            children: [
+                                                monthLabel,
+                                                " ",
+                                                showYearLabel ? yearLabel : null
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                                        onClick: increaseMonth,
+                                        disabled: nextMonthButtonDisabled,
+                                        className: buttonStyles({
+                                            disabled: nextMonthButtonDisabled
+                                        }),
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                            source: _polarisicons.ChevronRightMinor
+                                        })
+                                    })
+                                ]
+                            });
+                        }
+                    }),
+                    showTimePicker && !allowRange && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TimePicker, {
+                        value: formattedTime,
+                        onChange: function(time) {
+                            onChange({
+                                date: (0, _dayjs.default)("".concat((0, _dayjs.default)(value).format(_dates.DAY_FORMAT), " ").concat(time)).toDate(),
+                                dateRange: null
+                            });
+                        }
+                    })
+                ]
+            })
+        ]
+    });
+    if (inline) {
+        return datePicker;
+    }
+    var startDateFormatted = startDate ? (0, _dayjs.default)(startDate).format(displayFormat) : null;
+    var endDateFormatted = endDate ? (0, _dayjs.default)(endDate).format(displayFormat) : null;
+    var displayValue = allowRange ? "".concat(startDateFormatted).concat(endDateFormatted && endDateFormatted !== startDateFormatted ? " to ".concat(endDateFormatted) : "") : value ? (0, _dayjs.default)(value).format(displayFormat) : "";
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+        active: showPopover,
+        activatorDisplayType: "block",
+        maxWidth: "datePicker",
+        activator: activator ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            onClick: function() {
+                return setShowPopover(!showPopover);
+            },
+            children: activator
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            onClick: function() {
+                return setShowPopover(!showPopover);
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+                label: label,
+                labelAction: labelAction,
+                value: displayValue,
+                helpText: helpText,
+                autoComplete: "off",
+                placeholder: placeholder,
+                tooltip: tooltip,
+                icon: showTimePicker && !allowRange ? _polarisicons.CalendarTimeMinor : _polarisicons.CalendarMinor,
+                suffix: suffix,
+                onBlur: onBlur,
+                clearButton: isClearable,
+                onClearButtonClick: function() {
+                    if (allowRange) {
+                        onChange({
+                            start: null,
+                            end: null,
+                            dateRange: null
+                        });
+                    } else {
+                        onChange({
+                            date: null
+                        });
+                    }
+                },
+                autoFocus: autoFocus,
+                disabled: disabled
+            })
+        }),
+        onClose: function() {
+            return setShowPopover(false);
+        },
+        preferredAlignment: preferredAlignment,
+        preferredPosition: preferredPosition,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "flex flex-col p-2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    children: datePicker
+                }),
+                footer && footer
+            ]
+        })
+    });
+}
+var _default = DatePicker;

package/dist/cjs/components/Divider.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Divider h-px",
+    variants: {
+        color: {
+            default: "bg-edge-default",
+            subdued: "bg-edge-subdued"
+        }
+    },
+    defaultVariants: {
+        color: "default"
+    }
+});
+/**
+ * Renders a divider element with customizable color variants.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {'default' | 'subdued'} [props.color='default'] - The color variant to apply to the divider.
+ * @returns {JSX.Element} A styled `<div>` element serving as a divider.
+ *
+ * @example
+ * // Renders a default color divider
+ * <Divider />
+ *
+ * @example
+ * // Renders a subdued color divider
+ * <Divider color="subdued" />
+ */ function Divider() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var color = props.color;
+    var classes = styles({
+        color: color
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: classes
+    });
+}
+var _default = Divider;