nearpay-datepicker-react 0.3.1 → 0.4.0

package/dist/index.cjs.js

@@ -2370,10 +2370,10 @@ const Days = (props) => {
             className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium rounded-full`;
         }
         else if (dayIsSameStart) {
-            className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${dayIsSameHoverDay && !period.end ? "rounded-full" : "rounded-l-full"}`;
+            className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${dayIsSameHoverDay && !period.end ? "rounded-full" : "rounded-s-full"}`;
         }
         else if (dayIsSameEnd) {
-            className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${dayIsSameHoverDay && !period.start ? "rounded-full" : "rounded-r-full"}`;
+            className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${dayIsSameHoverDay && !period.start ? "rounded-full" : "rounded-e-full"}`;
         }
         return {
             active: dayIsSameStart || dayIsSameEnd,
@@ -2400,7 +2400,7 @@ const Days = (props) => {
         }
         if (dateIsSame(dayHover, day, "date")) {
             const bgColor = BG_COLOR["500"][primaryColor];
-            className = ` transition-all duration-500 text-white font-medium ${bgColor} ${period.start ? "rounded-r-full" : "rounded-l-full"}`;
+            className = ` transition-all duration-500 text-white font-medium ${bgColor} ${period.start ? "rounded-e-full" : "rounded-s-full"}`;
         }
         return className;
     }, [currentDateClass, dayHover, period.end, period.start, primaryColor]);
@@ -2752,9 +2752,9 @@ const Calendar = (props) => {
             max: maxDate && dateIsValid(maxDate) ? maxDate.getFullYear() : null
         };
     }, [maxDate, minDate]);
-    return (jsxRuntimeExports.jsxs("div", { className: "w-full md:w-[296px] md:min-w-[296px]", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-1.5 border border-gray-300 dark:border-zinc-700 rounded-md px-2 py-1.5", children: [!showMonths && !showYears && (jsxRuntimeExports.jsx("div", { className: "flex-none", children: jsxRuntimeExports.jsx(RoundedButton, { roundedFull: true, onClick: onClickPrevious, children: jsxRuntimeExports.jsx(ChevronLeftIcon, { className: "h-5 w-5" }) }) })), showYears && (jsxRuntimeExports.jsx("div", { className: "flex-none", children: jsxRuntimeExports.jsx(RoundedButton, { roundedFull: true, onClick: () => {
+    return (jsxRuntimeExports.jsxs("div", { className: "w-full md:w-[296px] md:min-w-[296px]", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 border border-gray-300 dark:border-zinc-700 rounded-md px-2 py-1.5", children: [!showMonths && !showYears && (jsxRuntimeExports.jsx("div", { className: "flex-none", children: jsxRuntimeExports.jsx(RoundedButton, { roundedFull: true, onClick: onClickPrevious, children: jsxRuntimeExports.jsx(ChevronLeftIcon, { className: "h-5 w-5 rtl:rotate-180" }) }) })), showYears && (jsxRuntimeExports.jsx("div", { className: "flex-none", children: jsxRuntimeExports.jsx(RoundedButton, { roundedFull: true, onClick: () => {
                                 setYear(year - NUMBER_YEARS_SHOW);
-                            }, children: jsxRuntimeExports.jsx(DoubleChevronLeftIcon, { className: "h-5 w-5" }) }) })), jsxRuntimeExports.jsxs("div", { className: "flex flex-1 items-center space-x-1.5", children: [jsxRuntimeExports.jsx("div", { className: "w-1/2", children: jsxRuntimeExports.jsx(RoundedButton, { onClick: () => {
+                            }, children: jsxRuntimeExports.jsx(DoubleChevronLeftIcon, { className: "h-5 w-5 rtl:rotate-180" }) }) })), jsxRuntimeExports.jsxs("div", { className: "flex flex-1 items-center gap-1.5", children: [jsxRuntimeExports.jsx("div", { className: "w-1/2", children: jsxRuntimeExports.jsx(RoundedButton, { onClick: () => {
                                         setShowMonths(!showMonths);
                                         hideYears();
                                     }, children: dateFormat(date, "MMM", i18n) }) }), jsxRuntimeExports.jsx("div", { className: "w-1/2", children: jsxRuntimeExports.jsx(RoundedButton, { onClick: () => {
@@ -2762,7 +2762,7 @@ const Calendar = (props) => {
                                         hideMonths();
                                     }, children: jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: date.getFullYear() }) }) })] }), showYears && (jsxRuntimeExports.jsx("div", { className: "flex-none", children: jsxRuntimeExports.jsx(RoundedButton, { roundedFull: true, onClick: () => {
                                 setYear(year + NUMBER_YEARS_SHOW);
-                            }, children: jsxRuntimeExports.jsx(DoubleChevronRightIcon, { className: "h-5 w-5" }) }) })), !showMonths && !showYears && (jsxRuntimeExports.jsx("div", { className: "flex-none", children: jsxRuntimeExports.jsx(RoundedButton, { roundedFull: true, onClick: onClickNext, children: jsxRuntimeExports.jsx(ChevronRightIcon, { className: "h-5 w-5" }) }) }))] }), jsxRuntimeExports.jsxs("div", { className: "px-0.5 sm:px-2 mt-0.5 min-h-[285px]", children: [showMonths && (jsxRuntimeExports.jsx(Months, { currentMonth: date.getMonth() + 1, clickMonth: clickMonth })), showYears && (jsxRuntimeExports.jsx(Years, { year: year, minYear: years.min, maxYear: years.max, currentYear: date.getFullYear(), clickYear: clickYear })), !showMonths && !showYears && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Week, {}), jsxRuntimeExports.jsx(Days, { days: calendarData, onClickPreviousDays: clickPreviousDays, onClickDay: clickDay, onClickNextDays: clickNextDays })] }))] })] }));
+                            }, children: jsxRuntimeExports.jsx(DoubleChevronRightIcon, { className: "h-5 w-5 rtl:rotate-180" }) }) })), !showMonths && !showYears && (jsxRuntimeExports.jsx("div", { className: "flex-none", children: jsxRuntimeExports.jsx(RoundedButton, { roundedFull: true, onClick: onClickNext, children: jsxRuntimeExports.jsx(ChevronRightIcon, { className: "h-5 w-5 rtl:rotate-180" }) }) }))] }), jsxRuntimeExports.jsxs("div", { className: "px-0.5 sm:px-2 mt-0.5 min-h-[285px]", children: [showMonths && (jsxRuntimeExports.jsx(Months, { currentMonth: date.getMonth() + 1, clickMonth: clickMonth })), showYears && (jsxRuntimeExports.jsx(Years, { year: year, minYear: years.min, maxYear: years.max, currentYear: date.getFullYear(), clickYear: clickYear })), !showMonths && !showYears && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Week, {}), jsxRuntimeExports.jsx(Days, { days: calendarData, onClickPreviousDays: clickPreviousDays, onClickDay: clickDay, onClickNextDays: clickNextDays })] }))] })] }));
 };
 
 const PrimaryButton = (props) => {
@@ -2802,7 +2802,7 @@ const Footer = () => {
         }
         return "flex items-center justify-end pb-2.5 pt-3 border-t border-gray-300 dark:border-zinc-700";
     }, [classNames]);
-    return (jsxRuntimeExports.jsx("div", { className: getClassName(), children: jsxRuntimeExports.jsxs("div", { className: "w-full md:w-auto flex items-center justify-center space-x-3", children: [jsxRuntimeExports.jsx(SecondaryButton, { onClick: () => {
+    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) {
@@ -2843,7 +2843,7 @@ const Input = (e) => {
         }
         const border = BORDER_COLOR.focus[primaryColor];
         const ring = RING_COLOR["second-focus"][primaryColor];
-        const defaultInputClassName = `relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-zinc-800 dark:text-white/80 dark:border-zinc-700 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring-3 disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring}`;
+        const defaultInputClassName = `relative transition-all duration-300 py-2.5 ps-4 pe-14 w-full border-gray-300 dark:bg-zinc-800 dark:text-white/80 dark:border-zinc-700 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring-3 disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring}`;
         return typeof inputClassName === "function"
             ? inputClassName(defaultInputClassName)
             : typeof inputClassName === "string" && inputClassName !== ""
@@ -2912,7 +2912,7 @@ const Input = (e) => {
             typeof classNames?.toggleButton === "function") {
             return classNames.toggleButton(button);
         }
-        const defaultToggleClassName = "absolute right-0 h-full px-3 text-gray-400 focus:outline-hidden disabled:opacity-40 disabled:cursor-not-allowed";
+        const defaultToggleClassName = "absolute end-0 h-full px-3 text-gray-400 focus:outline-hidden disabled:opacity-40 disabled:cursor-not-allowed";
         return typeof toggleClassName === "function"
             ? toggleClassName(defaultToggleClassName)
             : typeof toggleClassName === "string" && toggleClassName !== ""
@@ -2987,9 +2987,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-r");
+                    arrow.classList.add("border-e");
                     arrow.classList.add("border-b");
-                    arrow.classList.remove("border-l");
+                    arrow.classList.remove("border-s");
                     arrow.classList.remove("border-t");
                 }
                 setTimeout(() => {
@@ -3147,7 +3147,7 @@ const Shortcuts = () => {
     const printItemText = require$$0.useCallback((item) => {
         return item?.text ?? null;
     }, []);
-    return shortcutOptions?.length ? (jsxRuntimeExports.jsx("div", { className: "md:border-b mb-3 lg:mb-0 lg:border-r lg:border-b-0 border-gray-300 dark:border-zinc-700 pr-1", children: jsxRuntimeExports.jsx("ul", { className: "w-full tracking-wide flex flex-wrap lg:flex-col pb-1 lg:pb-0", children: shortcutOptions.map(([key, item], index) => Array.isArray(item) ? (item.map((item, index) => (jsxRuntimeExports.jsx(ItemTemplate, { item: item, children: jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: key === "past" &&
+    return shortcutOptions?.length ? (jsxRuntimeExports.jsx("div", { className: "md:border-b mb-3 lg:mb-0 lg:border-e lg:border-b-0 border-gray-300 dark:border-zinc-700 pe-1", children: jsxRuntimeExports.jsx("ul", { className: "w-full tracking-wide flex flex-wrap lg:flex-col pb-1 lg:pb-0", children: shortcutOptions.map(([key, item], index) => Array.isArray(item) ? (item.map((item, index) => (jsxRuntimeExports.jsx(ItemTemplate, { item: item, children: jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: key === "past" &&
                         configs?.shortcuts &&
                         key in configs.shortcuts &&
                         item.daysNumber
@@ -3177,7 +3177,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 ml-[1.2rem] border-l 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 ms-[1.2rem] border-s border-t border-gray-300 bg-white dark:bg-zinc-800 dark:border-zinc-700" }));
 });
 Arrow.displayName = "Arrow";
 
@@ -3228,9 +3228,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-r");
+                arrow.classList.remove("border-e");
                 arrow.classList.remove("border-b");
-                arrow.classList.add("border-l");
+                arrow.classList.add("border-s");
                 arrow.classList.add("border-t");
             }, 300);
         }
@@ -3287,14 +3287,16 @@ const Datepicker = (props) => {
             const containerCenter = (detail.right - detail.x) / 2 + detail.x;
             const isRTL = i18n === "ar";
             const alignRight = () => {
-                arrow.classList.add("right-0");
-                arrow.classList.add("mr-3.5");
-                calendarContainer.classList.add("right-0");
+                arrow.classList.remove("ms-[1.2rem]");
+                arrow.classList.add("end-0");
+                arrow.classList.add("me-3.5");
+                calendarContainer.classList.add("end-0");
             };
             const alignLeft = () => {
-                arrow.classList.remove("right-0");
-                arrow.classList.remove("mr-3.5");
-                calendarContainer.classList.remove("right-0");
+                arrow.classList.add("ms-[1.2rem]");
+                arrow.classList.remove("end-0");
+                arrow.classList.remove("me-3.5");
+                calendarContainer.classList.remove("end-0");
             };
             if (popoverDirection === "down-left" || popoverDirection === "up-left") {
                 if (isRTL) {
@@ -3321,7 +3323,7 @@ const Datepicker = (props) => {
                 }
             }
         }
-    }, [popoverDirection]);
+    }, [popoverDirection, i18n]);
     require$$0.useEffect(() => {
         if (value && value.startDate && value.endDate) {
             if (dateIsSameOrBefore(value.startDate, value.endDate, "date")) {
@@ -3478,7 +3480,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:space-x-1.5 ${showShortcuts ? "md:pl-2" : "md:pl-1"} pr-2 lg:pr-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: [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, {})] })] })] }) }));
 };
 
 var af$1 = {exports: {}};