nearpay-datepicker-react 0.4.0 → 0.5.0

package/dist/components/TimePicker.d.ts

@@ -0,0 +1,2 @@
+declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;
+export default TimePicker;

package/dist/contexts/DatepickerContext.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from "react";
-import { Configs, Period, DateValueType, DateType, DateRangeType, ClassNamesTypeProp, PopoverDirectionType, ColorKeys, WeekStringType, DateLookingType } from "../types";
+import { Configs, Period, DateValueType, DateType, DateRangeType, ClassNamesTypeProp, PopoverDirectionType, ColorKeys, WeekStringType, DateLookingType, TimeType, TimeFormatType } from "../types";
 interface DatepickerStore {
     arrowContainer: RefObject<HTMLDivElement> | null;
     asSingle?: boolean;
@@ -38,6 +38,14 @@ interface DatepickerStore {
     toggleIcon?: (open: boolean) => ReactNode;
     updateFirstDate: (date: Date) => void;
     value: DateValueType;
+    useRange?: boolean;
+    showTimePicker?: boolean;
+    timeOnly?: boolean;
+    timeFormat?: TimeFormatType;
+    startTime: TimeType;
+    endTime: TimeType;
+    changeStartTime: (time: TimeType) => void;
+    changeEndTime: (time: TimeType) => void;
 }
 declare const DatepickerContext: import("react").Context<DatepickerStore>;
 export default DatepickerContext;

package/dist/index.cjs.js

@@ -1662,7 +1662,15 @@ const DatepickerContext = require$$0.createContext({
     toggleClassName: "",
     toggleIcon: undefined,
     updateFirstDate: () => { },
-    value: null
+    value: null,
+    useRange: true,
+    showTimePicker: false,
+    timeOnly: false,
+    timeFormat: "24",
+    startTime: { hour: 0, minute: 0 },
+    endTime: { hour: 0, minute: 0 },
+    changeStartTime: () => { },
+    changeEndTime: () => { }
 });
 
 var isBetween$1 = {exports: {}};
@@ -2794,7 +2802,7 @@ const SecondaryButton = (props) => {
 
 const Footer = () => {
     // Contexts
-    const { hideDatepicker, period, changeDatepickerValue, configs, classNames } = require$$0.useContext(DatepickerContext);
+    const { hideDatepicker, period, changeDatepickerValue, configs, classNames, showTimePicker, timeOnly, startTime, endTime } = require$$0.useContext(DatepickerContext);
     // Functions
     const getClassName = require$$0.useCallback(() => {
         if (typeof classNames !== "undefined" && typeof classNames?.footer === "function") {
@@ -2805,14 +2813,32 @@ const Footer = () => {
     return (jsxRuntimeExports.jsx("div", { className: getClassName(), children: jsxRuntimeExports.jsxs("div", { className: "w-full md:w-auto flex items-center justify-center gap-3", children: [jsxRuntimeExports.jsx(SecondaryButton, { onClick: () => {
                         hideDatepicker();
                     }, children: jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: configs?.footer?.cancel ? configs.footer.cancel : "Cancel" }) }), jsxRuntimeExports.jsx(PrimaryButton, { onClick: () => {
-                        if (period.start && period.end) {
+                        if (timeOnly) {
+                            const now = new Date();
+                            const startDate = new Date(now);
+                            startDate.setHours(startTime.hour, startTime.minute, 0, 0);
+                            const endDate = new Date(now);
+                            endDate.setHours(endTime.hour, endTime.minute, 0, 0);
                             changeDatepickerValue({
-                                startDate: period.start,
-                                endDate: period.end
+                                startDate,
+                                endDate
                             });
                             hideDatepicker();
                         }
-                    }, disabled: !(period.start && period.end), children: jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: configs?.footer?.apply ? configs.footer.apply : "Apply" }) })] }) }));
+                        else if (period.start && period.end) {
+                            const startDate = new Date(period.start);
+                            const endDate = new Date(period.end);
+                            if (showTimePicker) {
+                                startDate.setHours(startTime.hour, startTime.minute, 0, 0);
+                                endDate.setHours(endTime.hour, endTime.minute, 0, 0);
+                            }
+                            changeDatepickerValue({
+                                startDate,
+                                endDate
+                            });
+                            hideDatepicker();
+                        }
+                    }, disabled: !timeOnly && !(period.start && period.end), children: jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: configs?.footer?.apply ? configs.footer.apply : "Apply" }) })] }) }));
 };
 
 const CloseIcon = (props) => {
@@ -2831,7 +2857,7 @@ const ToggleButton = (e) => {
 
 const Input = (e) => {
     // Context
-    const { primaryColor, period, dayHover, changeDayHover, calendarContainer, arrowContainer, inputText, changeInputText, hideDatepicker, changeDatepickerValue, asSingle, placeholder, separator, disabled, inputClassName, toggleClassName, toggleIcon, readOnly, displayFormat, inputId, inputName, classNames, popoverDirection, required } = require$$0.useContext(DatepickerContext);
+    const { primaryColor, period, dayHover, changeDayHover, calendarContainer, arrowContainer, inputText, changeInputText, hideDatepicker, changeDatepickerValue, asSingle, placeholder, separator, disabled, inputClassName, toggleClassName, toggleIcon, readOnly, displayFormat, inputId, inputName, classNames, popoverDirection, required, showTimePicker, timeOnly, timeFormat } = require$$0.useContext(DatepickerContext);
     // UseRefs
     const buttonRef = require$$0.useRef(null);
     const inputRef = require$$0.useRef(null);
@@ -2987,9 +3013,9 @@ const Input = (e) => {
                     div.classList.add("mb-2.5");
                     div.classList.remove("mt-2.5");
                     arrow.classList.add("-bottom-2");
-                    arrow.classList.add("border-e");
+                    arrow.classList.add("border-r");
                     arrow.classList.add("border-b");
-                    arrow.classList.remove("border-s");
+                    arrow.classList.remove("border-l");
                     arrow.classList.remove("border-t");
                 }
                 setTimeout(() => {
@@ -3011,7 +3037,9 @@ const Input = (e) => {
     }, [calendarContainer, arrowContainer, popoverDirection]);
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("input", { ref: inputRef, type: "text", className: getClassName(), disabled: disabled, readOnly: readOnly, required: required, placeholder: placeholder
                     ? placeholder
-                    : `${displayFormat}${asSingle ? "" : ` ${separator} ${displayFormat}`}`, value: inputText, id: inputId, name: inputName, autoComplete: "off", role: "presentation", onChange: handleInputChange, onKeyDown: handleInputKeyDown }), jsxRuntimeExports.jsx("button", { type: "button", ref: buttonRef, disabled: disabled, className: getToggleClassName(), children: renderToggleIcon(inputText == null || !inputText?.length) })] }));
+                    : timeOnly
+                        ? `${timeFormat === "12" ? "hh:mm AM" : "HH:mm"}${asSingle ? "" : ` ${separator} ${timeFormat === "12" ? "hh:mm AM" : "HH:mm"}`}`
+                        : `${displayFormat}${showTimePicker ? ` ${timeFormat === "12" ? "hh:mm AM" : "HH:mm"}` : ""}${asSingle ? "" : ` ${separator} ${displayFormat}${showTimePicker ? ` ${timeFormat === "12" ? "hh:mm AM" : "HH:mm"}` : ""}`}`, value: inputText, id: inputId, name: inputName, autoComplete: "off", role: "presentation", onChange: handleInputChange, onKeyDown: handleInputKeyDown }), jsxRuntimeExports.jsx("button", { type: "button", ref: buttonRef, disabled: disabled, className: getToggleClassName(), children: renderToggleIcon(inputText == null || !inputText?.length) })] }));
 };
 
 const CURRENT_DATE = new Date();
@@ -3159,6 +3187,77 @@ const Shortcuts = () => {
                         : printItemText(item) }) }, index))) }) })) : null;
 };
 
+const TimeColumn = ({ value, max, onChange, label, pad = 2 }) => {
+    const { primaryColor } = require$$0.useContext(DatepickerContext);
+    const prev = (value - 1 + max) % max;
+    const next = (value + 1) % max;
+    const format = (n) => String(n).padStart(pad, "0");
+    const bgActive = BG_COLOR["500"][primaryColor];
+    const bgHover = BG_COLOR.hover[primaryColor];
+    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [jsxRuntimeExports.jsx("span", { className: "text-[10px] text-gray-400 dark:text-white/40 uppercase tracking-wider", children: label }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-full hover:bg-gray-100 dark:hover:bg-white/10 transition-colors duration-200 cursor-pointer", onClick: () => onChange(prev), children: jsxRuntimeExports.jsx("svg", { className: "w-4 h-4 text-gray-500 dark:text-white/60", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" }) }) }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-300 dark:text-white/20 h-6 flex items-center tabular-nums", children: format(prev) }), jsxRuntimeExports.jsx("span", { className: classNames("text-base font-semibold text-white h-8 w-10 flex items-center justify-center rounded-lg tabular-nums", bgActive, bgHover), children: format(value) }), jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-300 dark:text-white/20 h-6 flex items-center tabular-nums", children: format(next) })] }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-full hover:bg-gray-100 dark:hover:bg-white/10 transition-colors duration-200 cursor-pointer", onClick: () => onChange(next), children: jsxRuntimeExports.jsx("svg", { className: "w-4 h-4 text-gray-500 dark:text-white/60", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) }) })] }));
+};
+const AmPmToggle = ({ isAm, onChange }) => {
+    const { primaryColor } = require$$0.useContext(DatepickerContext);
+    const bgActive = BG_COLOR["500"][primaryColor];
+    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-0.5 ms-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[10px] text-gray-400 dark:text-white/40 uppercase tracking-wider", children: "\u00A0" }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1 mt-[26px]", children: [jsxRuntimeExports.jsx("button", { type: "button", className: classNames("text-xs font-medium px-2 py-1 rounded-md transition-all duration-200 cursor-pointer", isAm
+                            ? bgActive + " text-white"
+                            : "text-gray-400 hover:bg-gray-100 dark:hover:bg-white/10 dark:text-white/50"), onClick: () => onChange(true), children: "AM" }), jsxRuntimeExports.jsx("button", { type: "button", className: classNames("text-xs font-medium px-2 py-1 rounded-md transition-all duration-200 cursor-pointer", !isAm
+                            ? bgActive + " text-white"
+                            : "text-gray-400 hover:bg-gray-100 dark:hover:bg-white/10 dark:text-white/50"), onClick: () => onChange(false), children: "PM" })] })] }));
+};
+const SingleTimePicker = ({ time, onChange, label }) => {
+    const { timeFormat, primaryColor } = require$$0.useContext(DatepickerContext);
+    const is12h = timeFormat === "12";
+    const displayHour = require$$0.useMemo(() => {
+        if (!is12h)
+            return time.hour;
+        if (time.hour === 0)
+            return 12;
+        if (time.hour > 12)
+            return time.hour - 12;
+        return time.hour;
+    }, [is12h, time.hour]);
+    const isAm = time.hour < 12;
+    const handleHourChange = require$$0.useCallback((newDisplayHour) => {
+        let hour24;
+        if (is12h) {
+            if (isAm) {
+                hour24 = newDisplayHour === 12 ? 0 : newDisplayHour;
+            }
+            else {
+                hour24 = newDisplayHour === 12 ? 12 : newDisplayHour + 12;
+            }
+        }
+        else {
+            hour24 = newDisplayHour;
+        }
+        onChange({ ...time, hour: hour24 });
+    }, [is12h, isAm, onChange, time]);
+    const handleMinuteChange = require$$0.useCallback((minute) => {
+        onChange({ ...time, minute });
+    }, [onChange, time]);
+    const handleAmPmChange = require$$0.useCallback((newIsAm) => {
+        let newHour;
+        if (newIsAm && !isAm) {
+            newHour = time.hour - 12;
+        }
+        else if (!newIsAm && isAm) {
+            newHour = time.hour + 12;
+        }
+        else {
+            return;
+        }
+        onChange({ ...time, hour: newHour });
+    }, [isAm, onChange, time]);
+    const textColor = TEXT_COLOR["600"][primaryColor];
+    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [jsxRuntimeExports.jsx("span", { className: classNames("text-xs font-medium mb-1", textColor), children: label }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntimeExports.jsx(TimeColumn, { value: is12h ? displayHour : time.hour, max: is12h ? 13 : 24, onChange: handleHourChange, label: "Hr", pad: 2 }), jsxRuntimeExports.jsx("span", { className: "text-lg font-bold text-gray-400 dark:text-white/40 mt-5", children: ":" }), jsxRuntimeExports.jsx(TimeColumn, { value: time.minute, max: 60, onChange: handleMinuteChange, label: "Min", pad: 2 }), is12h && jsxRuntimeExports.jsx(AmPmToggle, { isAm: isAm, onChange: handleAmPmChange })] })] }));
+};
+const TimePicker = () => {
+    const { asSingle, startTime, endTime, changeStartTime, changeEndTime, useRange } = require$$0.useContext(DatepickerContext);
+    const showSingle = asSingle || !useRange;
+    return (jsxRuntimeExports.jsxs("div", { className: classNames("flex py-3 px-2 border-t border-gray-200 dark:border-zinc-700", showSingle ? "justify-center" : "justify-around"), children: [jsxRuntimeExports.jsx(SingleTimePicker, { time: startTime, onChange: changeStartTime, label: showSingle ? "Time" : "Start Time" }), !showSingle && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "w-px bg-gray-200 dark:bg-zinc-700 mx-2" }), jsxRuntimeExports.jsx(SingleTimePicker, { time: endTime, onChange: changeEndTime, label: "End Time" })] }))] }));
+};
+
 function useOnClickOutside(ref, handler) {
     require$$0.useEffect(() => {
         const listener = (event) => {
@@ -3177,7 +3276,7 @@ function useOnClickOutside(ref, handler) {
 }
 
 const Arrow = require$$0.forwardRef((props, ref) => {
-    return (jsxRuntimeExports.jsx("div", { ...props, ref: ref, className: "absolute z-20 h-4 w-4 rotate-45 mt-0.5 ms-[1.2rem] border-s border-t border-gray-300 bg-white dark:bg-zinc-800 dark:border-zinc-700" }));
+    return (jsxRuntimeExports.jsx("div", { ...props, ref: ref, className: "absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l rtl:ml-0 rtl:mr-[1.2rem] border-t border-gray-300 bg-white dark:bg-zinc-800 dark:border-zinc-700" }));
 });
 Arrow.displayName = "Arrow";
 
@@ -3190,7 +3289,7 @@ const VerticalDash = () => {
 
 const Datepicker = (props) => {
     // Props
-    const { asSingle = false, classNames = undefined, configs = undefined, containerClassName = null, dateLooking = DEFAULT_DATE_LOOKING, disabledDates = null, disabled = false, displayFormat = DATE_FORMAT, i18n = LANGUAGE, inputClassName = null, inputId, inputName, minDate = undefined, maxDate = undefined, onChange, placeholder = null, popupClassName = null, popoverDirection = undefined, primaryColor = DEFAULT_COLOR, separator = DEFAULT_SEPARATOR, showFooter = false, showShortcuts = false, startFrom = null, startWeekOn = START_WEEK, readOnly = false, required = false, toggleClassName = null, toggleIcon = undefined, useRange = true, value = null } = props;
+    const { asSingle = false, classNames = undefined, configs = undefined, containerClassName = null, dateLooking = DEFAULT_DATE_LOOKING, disabledDates = null, disabled = false, displayFormat = DATE_FORMAT, i18n = LANGUAGE, inputClassName = null, inputId, inputName, minDate = undefined, maxDate = undefined, onChange, placeholder = null, popupClassName = null, popoverDirection = undefined, primaryColor = DEFAULT_COLOR, separator = DEFAULT_SEPARATOR, showFooter = false, showShortcuts = false, startFrom = null, startWeekOn = START_WEEK, readOnly = false, required = false, showTimePicker = false, timeOnly = false, timeFormat = "24", defaultTime = undefined, toggleClassName = null, toggleIcon = undefined, useRange = true, value = null } = props;
     // Refs
     const containerRef = require$$0.useRef(null);
     const calendarContainerRef = require$$0.useRef(null);
@@ -3205,6 +3304,8 @@ const Datepicker = (props) => {
     const [dayHover, setDayHover] = require$$0.useState(null);
     const [inputText, setInputText] = require$$0.useState("");
     const [inputRef, setInputRef] = require$$0.useState(require$$0.createRef());
+    const [startTime, setStartTime] = require$$0.useState(defaultTime?.start ?? { hour: 0, minute: 0 });
+    const [endTime, setEndTime] = require$$0.useState(defaultTime?.end ?? { hour: 0, minute: 0 });
     // Custom Hooks use
     useOnClickOutside(containerRef, () => {
         const container = containerRef.current;
@@ -3228,9 +3329,9 @@ const Datepicker = (props) => {
                 div.classList.add("mb-2.5");
                 div.classList.add("mt-2.5");
                 arrow.classList.remove("-bottom-2");
-                arrow.classList.remove("border-e");
+                arrow.classList.remove("border-r");
                 arrow.classList.remove("border-b");
-                arrow.classList.add("border-s");
+                arrow.classList.add("border-l");
                 arrow.classList.add("border-t");
             }, 300);
         }
@@ -3287,16 +3388,16 @@ const Datepicker = (props) => {
             const containerCenter = (detail.right - detail.x) / 2 + detail.x;
             const isRTL = i18n === "ar";
             const alignRight = () => {
-                arrow.classList.remove("ms-[1.2rem]");
-                arrow.classList.add("end-0");
-                arrow.classList.add("me-3.5");
-                calendarContainer.classList.add("end-0");
+                arrow.classList.remove("ml-[1.2rem]");
+                arrow.classList.add("right-0");
+                arrow.classList.add("mr-3.5");
+                calendarContainer.classList.add("right-0");
             };
             const alignLeft = () => {
-                arrow.classList.add("ms-[1.2rem]");
-                arrow.classList.remove("end-0");
-                arrow.classList.remove("me-3.5");
-                calendarContainer.classList.remove("end-0");
+                arrow.classList.add("ml-[1.2rem]");
+                arrow.classList.remove("right-0");
+                arrow.classList.remove("mr-3.5");
+                calendarContainer.classList.remove("right-0");
             };
             if (popoverDirection === "down-left" || popoverDirection === "up-left") {
                 if (isRTL) {
@@ -3324,16 +3425,33 @@ const Datepicker = (props) => {
             }
         }
     }, [popoverDirection, i18n]);
+    const formatTimeValue = require$$0.useCallback((time) => {
+        if (timeFormat === "12") {
+            const h = time.hour % 12 || 12;
+            const ampm = time.hour < 12 ? "AM" : "PM";
+            return `${String(h).padStart(2, "0")}:${String(time.minute).padStart(2, "0")} ${ampm}`;
+        }
+        return `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`;
+    }, [timeFormat]);
     require$$0.useEffect(() => {
+        if (timeOnly) {
+            const timeStr = asSingle
+                ? formatTimeValue(startTime)
+                : `${formatTimeValue(startTime)} ${separator} ${formatTimeValue(endTime)}`;
+            setInputText(timeStr);
+            return;
+        }
         if (value && value.startDate && value.endDate) {
             if (dateIsSameOrBefore(value.startDate, value.endDate, "date")) {
                 setPeriod({
                     start: value.startDate,
                     end: value.endDate
                 });
-                setInputText(`${dateFormat(value.startDate, displayFormat, i18n)}${asSingle
+                const timeSuffix = showTimePicker ? ` ${formatTimeValue(startTime)}` : "";
+                const endTimeSuffix = showTimePicker ? ` ${formatTimeValue(endTime)}` : "";
+                setInputText(`${dateFormat(value.startDate, displayFormat, i18n)}${timeSuffix}${asSingle
                     ? ""
-                    : ` ${separator} ${dateFormat(value.endDate, displayFormat, i18n)}`}`);
+                    : ` ${separator} ${dateFormat(value.endDate, displayFormat, i18n)}${endTimeSuffix}`}`);
             }
         }
         if (value && value.startDate === null && value.endDate === null) {
@@ -3343,7 +3461,18 @@ const Datepicker = (props) => {
             });
             setInputText("");
         }
-    }, [asSingle, value, displayFormat, separator, i18n]);
+    }, [
+        asSingle,
+        value,
+        displayFormat,
+        separator,
+        i18n,
+        showTimePicker,
+        timeOnly,
+        startTime,
+        endTime,
+        formatTimeValue
+    ]);
     require$$0.useEffect(() => {
         if (startFrom && dateIsValid(startFrom)) {
             const startDate = value?.startDate;
@@ -3428,7 +3557,15 @@ const Datepicker = (props) => {
             toggleClassName,
             toggleIcon,
             updateFirstDate: (newDate) => firstGotoDate(newDate),
-            value
+            value,
+            showTimePicker,
+            timeOnly,
+            timeFormat,
+            startTime,
+            endTime,
+            changeStartTime: (time) => setStartTime(time),
+            changeEndTime: (time) => setEndTime(time),
+            useRange
         };
     }, [
         asSingle,
@@ -3462,7 +3599,13 @@ const Datepicker = (props) => {
         inputRef,
         popoverDirection,
         required,
-        firstGotoDate
+        firstGotoDate,
+        showTimePicker,
+        timeOnly,
+        timeFormat,
+        startTime,
+        endTime,
+        useRange
     ]);
     const containerClassNameOverload = require$$0.useMemo(() => {
         const defaultContainerClassName = "relative w-full text-gray-700";
@@ -3480,7 +3623,7 @@ const Datepicker = (props) => {
                 ? popupClassName
                 : defaultPopupClassName;
     }, [popupClassName]);
-    return (jsxRuntimeExports.jsx(DatepickerContext.Provider, { value: contextValues, children: jsxRuntimeExports.jsxs("div", { className: containerClassNameOverload, ref: containerRef, children: [jsxRuntimeExports.jsx(Input, { setContextRef: setInputRef }), jsxRuntimeExports.jsxs("div", { className: popupClassNameOverload, ref: calendarContainerRef, children: [jsxRuntimeExports.jsx(Arrow, { ref: arrowRef }), jsxRuntimeExports.jsxs("div", { className: "mt-2.5 shadow-xs border border-gray-300 px-1 py-0.5 bg-white dark:bg-zinc-800 dark:text-white dark:border-zinc-700 rounded-lg", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row py-2", children: [showShortcuts && jsxRuntimeExports.jsx(Shortcuts, {}), jsxRuntimeExports.jsxs("div", { className: `flex items-stretch flex-col md:flex-row space-y-4 md:space-y-0 md:gap-x-1.5 ${showShortcuts ? "md:ps-2" : "md:ps-1"} pe-2 lg:pe-1`, children: [jsxRuntimeExports.jsx(Calendar, { date: firstDate, onClickPrevious: previousMonthFirst, onClickNext: nextMonthFirst, changeMonth: changeFirstMonth, changeYear: changeFirstYear, minDate: minDate, maxDate: maxDate }), useRange && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "flex items-center", children: jsxRuntimeExports.jsx(VerticalDash, {}) }), jsxRuntimeExports.jsx(Calendar, { date: secondDate, onClickPrevious: previousMonthSecond, onClickNext: nextMonthSecond, changeMonth: changeSecondMonth, changeYear: changeSecondYear, minDate: minDate, maxDate: maxDate })] }))] })] }), showFooter && jsxRuntimeExports.jsx(Footer, {})] })] })] }) }));
+    return (jsxRuntimeExports.jsx(DatepickerContext.Provider, { value: contextValues, children: jsxRuntimeExports.jsxs("div", { className: containerClassNameOverload, ref: containerRef, children: [jsxRuntimeExports.jsx(Input, { setContextRef: setInputRef }), jsxRuntimeExports.jsxs("div", { className: popupClassNameOverload, ref: calendarContainerRef, children: [jsxRuntimeExports.jsx(Arrow, { ref: arrowRef }), jsxRuntimeExports.jsxs("div", { className: "mt-2.5 shadow-xs border border-gray-300 px-1 py-0.5 bg-white dark:bg-zinc-800 dark:text-white dark:border-zinc-700 rounded-lg", children: [!timeOnly && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col lg:flex-row py-2", children: [showShortcuts && jsxRuntimeExports.jsx(Shortcuts, {}), jsxRuntimeExports.jsxs("div", { className: `flex items-stretch flex-col md:flex-row space-y-4 md:space-y-0 md:gap-x-1.5 ${showShortcuts ? "md:ps-2" : "md:ps-1"} pe-2 lg:pe-1`, children: [jsxRuntimeExports.jsx(Calendar, { date: firstDate, onClickPrevious: previousMonthFirst, onClickNext: nextMonthFirst, changeMonth: changeFirstMonth, changeYear: changeFirstYear, minDate: minDate, maxDate: maxDate }), useRange && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "flex items-center", children: jsxRuntimeExports.jsx(VerticalDash, {}) }), jsxRuntimeExports.jsx(Calendar, { date: secondDate, onClickPrevious: previousMonthSecond, onClickNext: nextMonthSecond, changeMonth: changeSecondMonth, changeYear: changeSecondYear, minDate: minDate, maxDate: maxDate })] }))] })] })), (showTimePicker || timeOnly) && jsxRuntimeExports.jsx(TimePicker, {}), showFooter && jsxRuntimeExports.jsx(Footer, {})] })] })] }) }));
 };
 
 var af$1 = {exports: {}};