@acusti/date-picker 0.11.1 → 0.13.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Style } from "@acusti/styling";
 import clsx from "clsx";
-import * as React from "react";
+import { Fragment, useState, useRef, useEffect } from "react";
 const ROOT_CLASS_NAME$1 = "uktmonthcalendar";
 const STYLES$1 = `
 .${ROOT_CLASS_NAME$1} {
@@ -87,6 +87,13 @@ h3.${ROOT_CLASS_NAME$1}-month-title-text {
     cursor: auto;
 }
 
+.${ROOT_CLASS_NAME$1}-month-day-item.is-today:after {
+    background-color: rgba(0,0,0,0.05);
+    border-color: transparent;
+    opacity: 1;
+    visibility: visible;
+}
+
 .${ROOT_CLASS_NAME$1}-month-day-item.is-selected {
     background-color: #f8f8f8;
 }
@@ -121,7 +128,9 @@ h3.${ROOT_CLASS_NAME$1}-month-title-text {
     color: #fff;
 }
 
-.${ROOT_CLASS_NAME$1}-month-day-item:hover:after {
+.${ROOT_CLASS_NAME$1}-month-day-item:hover:after,
+.${ROOT_CLASS_NAME$1}-month-day-item.is-today:hover:after {
+    border-color: #000;
     opacity: 1;
     visibility: visible;
 }
@@ -183,283 +192,258 @@ const getDateFromMonthAndDay = (month, day, asUTC) => {
 const getLastDateFromMonth = (month, asUTC) => {
   return getDateFromMonthAndDay(month + 1, 0, asUTC);
 };
-const {
-  Fragment: Fragment$1
-} = React;
 const DAYS = Array(7).fill(null);
 function MonthCalendar(t0) {
-  const $ = c(56);
+  const $ = c(46);
   let {
     className,
     dateEnd,
     dateEndPreview,
     dateStart,
     isRange,
-    month,
+    month: _month,
     onChange,
     onChangeEndPreview,
     title
   } = t0;
-  const year = getYearFromMonth(month);
-  title = title ?? `${getMonthNameFromMonth(month)} ${year}`;
-  let firstDay;
+  let T0;
   let t1;
   let t2;
-  let totalDays;
-  if ($[0] !== month) {
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  if ($[0] !== _month || $[1] !== className || $[2] !== dateEnd || $[3] !== dateEndPreview || $[4] !== dateStart || $[5] !== isRange || $[6] !== onChange || $[7] !== onChangeEndPreview || $[8] !== title) {
+    const today = /* @__PURE__ */ new Date();
+    const month = Number.isFinite(_month) ? Math.max(Number.MIN_SAFE_INTEGER, Math.min(Number.MAX_SAFE_INTEGER, _month)) : getMonthFromDate(today);
+    const year = getYearFromMonth(month);
+    title = title ?? `${getMonthNameFromMonth(month)} ${year}`;
     const firstDate = getDateFromMonthAndDay(month, 1);
     const lastDate = getLastDateFromMonth(month);
-    totalDays = lastDate.getDate();
-    firstDay = firstDate.getDay();
-    t2 = 7;
-    t1 = lastDate.getDay();
-    $[0] = month;
-    $[1] = firstDay;
-    $[2] = t1;
-    $[3] = t2;
-    $[4] = totalDays;
-  } else {
-    firstDay = $[1];
-    t1 = $[2];
-    t2 = $[3];
-    totalDays = $[4];
-  }
-  const spacesAfterLastDay = t2 - t1 % 7;
-  const daySpaces = totalDays + firstDay + spacesAfterLastDay;
-  let t3;
-  if ($[5] !== dateEnd || $[6] !== dateEndPreview || $[7] !== dateStart || $[8] !== month || $[9] !== totalDays) {
-    let t42;
-    if ($[11] !== month || $[12] !== totalDays) {
-      t42 = (acc, date, index) => {
-        if (date != null && !(date instanceof Date)) {
-          date = new Date(date);
+    const totalDays = lastDate.getDate();
+    const firstDay = firstDate.getDay();
+    const spacesAfterLastDay = 7 - lastDate.getDay() % 7;
+    const daySpaces = totalDays + firstDay + spacesAfterLastDay;
+    const [dateRangeStartDay, dateRangeEndDay, dateRangeEndPreviewDay] = [dateStart, dateEnd, dateEndPreview].reduce((acc, date, index) => {
+      if (date != null && !(date instanceof Date)) {
+        date = new Date(date);
+      }
+      if (date == null || Number.isNaN(date.getTime())) {
+        return acc;
+      }
+      const dateMonth = getMonthFromDate(date);
+      if (dateMonth < month) {
+        acc[index] = -1;
+      } else {
+        if (dateMonth > month) {
+          acc[index] = totalDays + 1;
+        } else {
+          acc[index] = date.getDate();
         }
-        if (date == null || Number.isNaN(date.getTime())) {
-          return acc;
+      }
+      if (index === 1) {
+        const startDay = acc[index - 1];
+        const endDay = acc[index];
+        if (startDay != null && endDay != null && startDay > endDay) {
+          acc[index - 1] = endDay;
+          acc[index] = startDay;
         }
-        const dateMonth = getMonthFromDate(date);
-        if (dateMonth < month) {
-          acc[index] = -1;
-        } else {
-          if (dateMonth > month) {
-            acc[index] = totalDays + 1;
-          } else {
-            acc[index] = date.getDate();
-          }
+      }
+      return acc;
+    }, [null, null, null]);
+    let t72;
+    if ($[17] !== onChange) {
+      t72 = (event) => {
+        const {
+          date: date_0
+        } = event.currentTarget.dataset;
+        if (date_0 && onChange) {
+          onChange(date_0);
         }
-        if (index === 1) {
-          const startDay = acc[index - 1];
-          const endDay = acc[index];
-          if (startDay != null && endDay != null && startDay > endDay) {
-            acc[index - 1] = endDay;
-            acc[index] = startDay;
+      };
+      $[17] = onChange;
+      $[18] = t72;
+    } else {
+      t72 = $[18];
+    }
+    const handleClickDay = t72;
+    let t82;
+    if ($[19] !== isRange || $[20] !== onChangeEndPreview) {
+      t82 = (event_0) => {
+        if (isRange && onChangeEndPreview) {
+          const {
+            date: date_1
+          } = event_0.currentTarget.dataset;
+          if (date_1) {
+            onChangeEndPreview(date_1);
           }
         }
-        return acc;
       };
-      $[11] = month;
-      $[12] = totalDays;
-      $[13] = t42;
+      $[19] = isRange;
+      $[20] = onChangeEndPreview;
+      $[21] = t82;
     } else {
-      t42 = $[13];
+      t82 = $[21];
     }
-    t3 = [dateStart, dateEnd, dateEndPreview].reduce(t42, [null, null, null]);
-    $[5] = dateEnd;
-    $[6] = dateEndPreview;
-    $[7] = dateStart;
-    $[8] = month;
-    $[9] = totalDays;
-    $[10] = t3;
-  } else {
-    t3 = $[10];
-  }
-  const [dateRangeStartDay, dateRangeEndDay, dateRangeEndPreviewDay] = t3;
-  let t4;
-  if ($[14] !== onChange) {
-    t4 = (event) => {
-      const {
-        date: date_0
-      } = event.currentTarget.dataset;
-      if (date_0 && onChange) {
-        onChange(date_0);
-      }
-    };
-    $[14] = onChange;
-    $[15] = t4;
-  } else {
-    t4 = $[15];
-  }
-  const handleClickDay = t4;
-  let t5;
-  if ($[16] !== isRange || $[17] !== onChangeEndPreview) {
-    t5 = (event_0) => {
-      if (isRange && onChangeEndPreview) {
-        const {
-          date: date_1
-        } = event_0.currentTarget.dataset;
-        if (date_1) {
-          onChangeEndPreview(date_1);
-        }
-      }
-    };
-    $[16] = isRange;
-    $[17] = onChangeEndPreview;
-    $[18] = t5;
-  } else {
-    t5 = $[18];
-  }
-  const handleMouseEnterDay = t5;
-  let t6;
-  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = /* @__PURE__ */ jsx(Style, { href: "@acusti/date-picker/MonthCalendar", children: STYLES$1 });
-    $[19] = t6;
-  } else {
-    t6 = $[19];
+    const handleMouseEnterDay = t82;
+    T0 = Fragment;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = /* @__PURE__ */ jsx(Style, { href: "@acusti/date-picker/MonthCalendar", children: STYLES$1 });
+      $[22] = t6;
+    } else {
+      t6 = $[22];
+    }
+    if ($[23] !== className) {
+      t3 = clsx(ROOT_CLASS_NAME$1, className);
+      $[23] = className;
+      $[24] = t3;
+    } else {
+      t3 = $[24];
+    }
+    if ($[25] !== title) {
+      t4 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-title`, children: /* @__PURE__ */ jsx("h3", { className: `${ROOT_CLASS_NAME$1}-month-title-text`, children: title }) });
+      $[25] = title;
+      $[26] = t4;
+    } else {
+      t4 = $[26];
+    }
+    let t92;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+      t92 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Su" }) });
+      $[27] = t92;
+    } else {
+      t92 = $[27];
+    }
+    let t10;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Mo" }) });
+      $[28] = t10;
+    } else {
+      t10 = $[28];
+    }
+    let t11;
+    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Tu" }) });
+      $[29] = t11;
+    } else {
+      t11 = $[29];
+    }
+    let t12;
+    if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "We" }) });
+      $[30] = t12;
+    } else {
+      t12 = $[30];
+    }
+    let t13;
+    if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+      t13 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Th" }) });
+      $[31] = t13;
+    } else {
+      t13 = $[31];
+    }
+    let t14;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+      t14 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Fr" }) });
+      $[32] = t14;
+    } else {
+      t14 = $[32];
+    }
+    if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+      t5 = /* @__PURE__ */ jsxs("div", { className: `${ROOT_CLASS_NAME$1}-month-week`, children: [
+        t92,
+        t10,
+        t11,
+        t12,
+        t13,
+        t14,
+        /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Sa" }) })
+      ] });
+      $[33] = t5;
+    } else {
+      t5 = $[33];
+    }
+    t1 = `${ROOT_CLASS_NAME$1}-month-days`;
+    t2 = Array(Math.floor(daySpaces / 7)).fill(null).map((_, weekIndex) => /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-row`, children: DAYS.map((__, dayIndex) => {
+      dayIndex = dayIndex + weekIndex * 7;
+      const dayNumber = dayIndex - firstDay + 1;
+      const isEmpty = dayNumber < 1 || dayNumber > totalDays;
+      const date_2 = isEmpty ? null : getDateFromMonthAndDay(month, dayNumber);
+      const isAfterDateRangeStart = dateRangeStartDay != null && dayNumber > dateRangeStartDay;
+      const isBeforeDateRangeEnd = dateRangeEndDay == null && dateRangeEndPreviewDay != null && dayNumber < dateRangeEndPreviewDay || dateRangeEndDay != null && dayNumber < dateRangeEndDay;
+      return /* @__PURE__ */ jsx("button", { className: clsx(`${ROOT_CLASS_NAME$1}-month-day-item`, {
+        "end-date": !isEmpty && dayNumber === dateRangeEndDay,
+        "is-empty": isEmpty,
+        "is-selected": !isEmpty && isAfterDateRangeStart && isBeforeDateRangeEnd,
+        "is-today": !isEmpty && month === getMonthFromDate(today) && dayNumber === today.getDate(),
+        "start-date": !isEmpty && dayNumber === dateRangeStartDay
+      }), "data-date": date_2?.toISOString(), disabled: isEmpty, onClick: handleClickDay, onMouseEnter: handleMouseEnterDay, type: "button", children: isEmpty ? null : /* @__PURE__ */ jsx("span", { className: "month-day-item-text", children: dayNumber }) }, `MonthDayItem-${dayNumber}`);
+    }) }, `MonthRow-${weekIndex}`));
+    $[0] = _month;
+    $[1] = className;
+    $[2] = dateEnd;
+    $[3] = dateEndPreview;
+    $[4] = dateStart;
+    $[5] = isRange;
+    $[6] = onChange;
+    $[7] = onChangeEndPreview;
+    $[8] = title;
+    $[9] = T0;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+    $[16] = title;
+  } else {
+    T0 = $[9];
+    t1 = $[10];
+    t2 = $[11];
+    t3 = $[12];
+    t4 = $[13];
+    t5 = $[14];
+    t6 = $[15];
+    title = $[16];
   }
   let t7;
-  if ($[20] !== className) {
-    t7 = clsx(ROOT_CLASS_NAME$1, className);
-    $[20] = className;
-    $[21] = t7;
+  if ($[34] !== t1 || $[35] !== t2) {
+    t7 = /* @__PURE__ */ jsx("div", { className: t1, children: t2 });
+    $[34] = t1;
+    $[35] = t2;
+    $[36] = t7;
   } else {
-    t7 = $[21];
+    t7 = $[36];
   }
   let t8;
-  if ($[22] !== title) {
-    t8 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-title`, children: /* @__PURE__ */ jsx("h3", { className: `${ROOT_CLASS_NAME$1}-month-title-text`, children: title }) });
-    $[22] = title;
-    $[23] = t8;
-  } else {
-    t8 = $[23];
-  }
-  let t9;
-  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Su" }) });
-    $[24] = t9;
-  } else {
-    t9 = $[24];
-  }
-  let t10;
-  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Mo" }) });
-    $[25] = t10;
-  } else {
-    t10 = $[25];
-  }
-  let t11;
-  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Tu" }) });
-    $[26] = t11;
-  } else {
-    t11 = $[26];
-  }
-  let t12;
-  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "We" }) });
-    $[27] = t12;
-  } else {
-    t12 = $[27];
-  }
-  let t13;
-  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Th" }) });
-    $[28] = t13;
-  } else {
-    t13 = $[28];
-  }
-  let t14;
-  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-    t14 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Fr" }) });
-    $[29] = t14;
-  } else {
-    t14 = $[29];
-  }
-  let t15;
-  if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-    t15 = /* @__PURE__ */ jsxs("div", { className: `${ROOT_CLASS_NAME$1}-month-week`, children: [
-      t9,
-      t10,
-      t11,
-      t12,
-      t13,
-      t14,
-      /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Sa" }) })
+  if ($[37] !== t3 || $[38] !== t4 || $[39] !== t5 || $[40] !== t7) {
+    t8 = /* @__PURE__ */ jsxs("div", { className: t3, children: [
+      t4,
+      t5,
+      t7
     ] });
-    $[30] = t15;
+    $[37] = t3;
+    $[38] = t4;
+    $[39] = t5;
+    $[40] = t7;
+    $[41] = t8;
   } else {
-    t15 = $[30];
+    t8 = $[41];
   }
-  const t16 = Math.floor(daySpaces / 7);
-  let t17;
-  if ($[31] !== dateRangeEndDay || $[32] !== dateRangeEndPreviewDay || $[33] !== dateRangeStartDay || $[34] !== firstDay || $[35] !== handleClickDay || $[36] !== handleMouseEnterDay || $[37] !== month || $[38] !== t16 || $[39] !== totalDays) {
-    let t182;
-    if ($[41] !== dateRangeEndDay || $[42] !== dateRangeEndPreviewDay || $[43] !== dateRangeStartDay || $[44] !== firstDay || $[45] !== handleClickDay || $[46] !== handleMouseEnterDay || $[47] !== month || $[48] !== totalDays) {
-      t182 = (_, weekIndex) => /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-row`, children: DAYS.map((__, dayIndex) => {
-        dayIndex = dayIndex + weekIndex * 7;
-        const dayNumber = dayIndex - firstDay + 1;
-        const isEmpty = dayNumber < 1 || dayNumber > totalDays;
-        const date_2 = isEmpty ? null : getDateFromMonthAndDay(month, dayNumber);
-        const isAfterDateRangeStart = dateRangeStartDay != null && dayNumber > dateRangeStartDay;
-        const isBeforeDateRangeEnd = dateRangeEndDay == null && dateRangeEndPreviewDay != null && dayNumber < dateRangeEndPreviewDay || dateRangeEndDay != null && dayNumber < dateRangeEndDay;
-        return /* @__PURE__ */ jsx("button", { className: clsx(`${ROOT_CLASS_NAME$1}-month-day-item`, {
-          "end-date": !isEmpty && dayNumber === dateRangeEndDay,
-          "is-empty": isEmpty,
-          "is-selected": !isEmpty && isAfterDateRangeStart && isBeforeDateRangeEnd,
-          "start-date": !isEmpty && dayNumber === dateRangeStartDay
-        }), "data-date": date_2 == null ? void 0 : date_2.toISOString(), disabled: isEmpty, onClick: handleClickDay, onMouseEnter: handleMouseEnterDay, type: "button", children: isEmpty ? null : /* @__PURE__ */ jsx("span", { className: "month-day-item-text", children: dayNumber }) }, `MonthDayItem-${dayNumber}`);
-      }) }, `MonthRow-${weekIndex}`);
-      $[41] = dateRangeEndDay;
-      $[42] = dateRangeEndPreviewDay;
-      $[43] = dateRangeStartDay;
-      $[44] = firstDay;
-      $[45] = handleClickDay;
-      $[46] = handleMouseEnterDay;
-      $[47] = month;
-      $[48] = totalDays;
-      $[49] = t182;
-    } else {
-      t182 = $[49];
-    }
-    t17 = Array(t16).fill(null).map(t182);
-    $[31] = dateRangeEndDay;
-    $[32] = dateRangeEndPreviewDay;
-    $[33] = dateRangeStartDay;
-    $[34] = firstDay;
-    $[35] = handleClickDay;
-    $[36] = handleMouseEnterDay;
-    $[37] = month;
-    $[38] = t16;
-    $[39] = totalDays;
-    $[40] = t17;
-  } else {
-    t17 = $[40];
-  }
-  let t18;
-  if ($[50] !== t17) {
-    t18 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-days`, children: t17 });
-    $[50] = t17;
-    $[51] = t18;
-  } else {
-    t18 = $[51];
-  }
-  let t19;
-  if ($[52] !== t18 || $[53] !== t7 || $[54] !== t8) {
-    t19 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  let t9;
+  if ($[42] !== T0 || $[43] !== t6 || $[44] !== t8) {
+    t9 = /* @__PURE__ */ jsxs(T0, { children: [
       t6,
-      /* @__PURE__ */ jsxs("div", { className: t7, children: [
-        t8,
-        t15,
-        t18
-      ] })
+      t8
     ] });
-    $[52] = t18;
-    $[53] = t7;
-    $[54] = t8;
-    $[55] = t19;
+    $[42] = T0;
+    $[43] = t6;
+    $[44] = t8;
+    $[45] = t9;
   } else {
-    t19 = $[55];
+    t9 = $[45];
   }
-  return t19;
+  return t9;
 }
 const ROOT_CLASS_NAME = "uktdatepicker";
 const STYLES = `
@@ -489,6 +473,8 @@ const STYLES = `
 }
 
 .${ROOT_CLASS_NAME}-range-arrow {
+    background-color: transparent;
+    border: 0;
     width: 35px;
     height: 35px;
     text-align: center;
@@ -509,7 +495,6 @@ const STYLES = `
     content: "‹";
     font-size: 24px;
     line-height: 35px;
-    font-weight: bold;
 }
 
 .${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
@@ -522,15 +507,13 @@ const STYLES = `
     justify-content: space-between;
 }
 `;
-const {
-  Fragment,
-  useEffect,
-  useRef,
-  useState
-} = React;
 const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
+const normalizeDate = (date) => {
+  if (date == null || date === "") return null;
+  return typeof date === "string" ? date : new Date(date).toISOString();
+};
 function DatePicker(t0) {
-  const $ = c(79);
+  const $ = c(68);
   let {
     className,
     dateEnd: _dateEnd,
@@ -548,7 +531,7 @@ function DatePicker(t0) {
   const monthLimitLast = isTwoUp && _monthLimitLast != null ? _monthLimitLast - 1 : _monthLimitLast;
   let t1;
   if ($[0] !== _dateEnd) {
-    t1 = _dateEnd != null && typeof _dateEnd !== "string" ? new Date(_dateEnd).toISOString() : _dateEnd;
+    t1 = normalizeDate(_dateEnd);
     $[0] = _dateEnd;
     $[1] = t1;
   } else {
@@ -557,109 +540,99 @@ function DatePicker(t0) {
   const dateEndFromProps = t1;
   let t2;
   if ($[2] !== _dateStart) {
-    t2 = _dateStart != null && typeof _dateStart !== "string" ? new Date(_dateStart).toISOString() : _dateStart;
+    t2 = normalizeDate(_dateStart);
     $[2] = _dateStart;
     $[3] = t2;
   } else {
     t2 = $[3];
   }
   const dateStartFromProps = t2;
-  const [dateEnd, setDateEnd] = useState(dateEndFromProps ?? null);
-  const [dateStart, setDateStart] = useState(dateStartFromProps ?? null);
+  const [dateEnd, setDateEnd] = useState(dateEndFromProps);
+  const [dateStart, setDateStart] = useState(dateStartFromProps);
   const updatingDateEndRef = useRef(false);
   let t3;
-  if ($[4] !== dateEndFromProps || $[5] !== setDateEnd) {
+  let t4;
+  if ($[4] !== dateEndFromProps) {
     t3 = () => {
       if (dateEndFromProps == null) {
         return;
       }
       setDateEnd(dateEndFromProps);
     };
-    $[4] = dateEndFromProps;
-    $[5] = setDateEnd;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  let t4;
-  if ($[7] !== dateEndFromProps) {
     t4 = [dateEndFromProps];
-    $[7] = dateEndFromProps;
-    $[8] = t4;
+    $[4] = dateEndFromProps;
+    $[5] = t3;
+    $[6] = t4;
   } else {
-    t4 = $[8];
+    t3 = $[5];
+    t4 = $[6];
   }
   useEffect(t3, t4);
   let t5;
-  if ($[9] !== dateStartFromProps || $[10] !== setDateStart) {
+  let t6;
+  if ($[7] !== dateStartFromProps) {
     t5 = () => {
       if (dateStartFromProps == null) {
         return;
       }
       setDateStart(dateStartFromProps);
     };
-    $[9] = dateStartFromProps;
-    $[10] = setDateStart;
-    $[11] = t5;
-  } else {
-    t5 = $[11];
-  }
-  let t6;
-  if ($[12] !== dateStartFromProps) {
     t6 = [dateStartFromProps];
-    $[12] = dateStartFromProps;
-    $[13] = t6;
+    $[7] = dateStartFromProps;
+    $[8] = t5;
+    $[9] = t6;
   } else {
-    t6 = $[13];
+    t5 = $[8];
+    t6 = $[9];
   }
   useEffect(t5, t6);
   if (initialMonth == null) {
     const useDateEnd = dateStart == null || Boolean(showEndInitially && dateEnd);
     const initialDate = useDateEnd ? dateEnd : dateStart;
     let t72;
-    if ($[14] !== initialDate) {
+    if ($[10] !== initialDate) {
       t72 = getMonthFromDate(initialDate == null ? /* @__PURE__ */ new Date() : new Date(initialDate));
-      $[14] = initialDate;
-      $[15] = t72;
+      $[10] = initialDate;
+      $[11] = t72;
     } else {
-      t72 = $[15];
+      t72 = $[11];
     }
     initialMonth = t72;
     if (useDateEnd && isTwoUp) {
       initialMonth = initialMonth - 1;
     }
   }
-  const [dateEndPreview, setDateEndPreview] = useState(null);
+  const maxInitialMonth = (monthLimitLast == null ? Number.MAX_SAFE_INTEGER : monthLimitLast) + (isTwoUp ? -1 : 0);
+  initialMonth = Math.max(Math.min(initialMonth, maxInitialMonth), monthLimitFirst ?? Number.MIN_SAFE_INTEGER);
   const [month, setMonth] = useState(initialMonth);
+  const [dateEndPreview, setDateEndPreview] = useState(null);
   const delta = isTwoUp ? 2 : 1;
   let t7;
-  if ($[16] !== delta || $[17] !== monthLimitFirst || $[18] !== setMonth) {
+  if ($[12] !== delta || $[13] !== monthLimitFirst) {
     t7 = () => {
       setMonth((existingMonth) => Math.max(existingMonth - delta, monthLimitFirst ?? -Infinity));
     };
-    $[16] = delta;
-    $[17] = monthLimitFirst;
-    $[18] = setMonth;
-    $[19] = t7;
+    $[12] = delta;
+    $[13] = monthLimitFirst;
+    $[14] = t7;
   } else {
-    t7 = $[19];
+    t7 = $[14];
   }
   const handleClickLeftArrow = t7;
   let t8;
-  if ($[20] !== delta || $[21] !== monthLimitLast || $[22] !== setMonth) {
+  if ($[15] !== delta || $[16] !== monthLimitLast) {
     t8 = () => {
       setMonth((existingMonth_0) => Math.min(existingMonth_0 + delta, monthLimitLast ?? Infinity));
     };
-    $[20] = delta;
-    $[21] = monthLimitLast;
-    $[22] = setMonth;
-    $[23] = t8;
+    $[15] = delta;
+    $[16] = monthLimitLast;
+    $[17] = t8;
   } else {
-    t8 = $[23];
+    t8 = $[17];
   }
   const handleClickRightArrow = t8;
   let t9;
-  if ($[24] !== dateEnd || $[25] !== dateStart || $[26] !== isRange || $[27] !== onChange || $[28] !== setDateEnd || $[29] !== setDateStart) {
+  if ($[18] !== dateEnd || $[19] !== dateStart || $[20] !== isRange || $[21] !== onChange) {
     t9 = (date) => {
       if (isRange && dateStart != null && (updatingDateEndRef.current || dateEnd == null)) {
         if (date < dateStart) {
@@ -693,152 +666,147 @@ function DatePicker(t0) {
         }
       }
     };
-    $[24] = dateEnd;
-    $[25] = dateStart;
-    $[26] = isRange;
-    $[27] = onChange;
-    $[28] = setDateEnd;
-    $[29] = setDateStart;
-    $[30] = t9;
+    $[18] = dateEnd;
+    $[19] = dateStart;
+    $[20] = isRange;
+    $[21] = onChange;
+    $[22] = t9;
   } else {
-    t9 = $[30];
+    t9 = $[22];
   }
   const handleChange = t9;
   let t10;
-  if ($[31] !== setDateEndPreview) {
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
     t10 = (date_0) => {
       setDateEndPreview(date_0);
     };
-    $[31] = setDateEndPreview;
-    $[32] = t10;
+    $[23] = t10;
   } else {
-    t10 = $[32];
+    t10 = $[23];
   }
   const handleChangeEndPreview = t10;
   let t11;
-  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
     t11 = /* @__PURE__ */ jsx(Style, { href: "@acusti/date-picker/DatePicker", children: STYLES });
-    $[33] = t11;
+    $[24] = t11;
   } else {
-    t11 = $[33];
+    t11 = $[24];
   }
   let t12;
-  if ($[34] !== className || $[35] !== isTwoUp) {
+  if ($[25] !== className || $[26] !== isTwoUp) {
     t12 = clsx(ROOT_CLASS_NAME, className, {
       "two-up": isTwoUp
     });
-    $[34] = className;
-    $[35] = isTwoUp;
-    $[36] = t12;
+    $[25] = className;
+    $[26] = isTwoUp;
+    $[27] = t12;
   } else {
-    t12 = $[36];
+    t12 = $[27];
   }
   const t13 = monthLimitFirst != null && month <= monthLimitFirst;
   let t14;
-  if ($[37] !== t13) {
+  if ($[28] !== t13) {
     t14 = clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
       disabled: t13
     });
-    $[37] = t13;
-    $[38] = t14;
+    $[28] = t13;
+    $[29] = t14;
   } else {
-    t14 = $[38];
+    t14 = $[29];
   }
   let t15;
-  if ($[39] !== handleClickLeftArrow || $[40] !== t14) {
-    t15 = /* @__PURE__ */ jsx("div", { className: t14, onClick: handleClickLeftArrow });
-    $[39] = handleClickLeftArrow;
-    $[40] = t14;
-    $[41] = t15;
+  if ($[30] !== handleClickLeftArrow || $[31] !== t14) {
+    t15 = /* @__PURE__ */ jsx("button", { "aria-label": "Previous Month", className: t14, onClick: handleClickLeftArrow, type: "button" });
+    $[30] = handleClickLeftArrow;
+    $[31] = t14;
+    $[32] = t15;
   } else {
-    t15 = $[41];
+    t15 = $[32];
   }
   const t16 = monthLimitLast != null && month >= monthLimitLast;
   let t17;
-  if ($[42] !== t16) {
+  if ($[33] !== t16) {
     t17 = clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
       disabled: t16
     });
-    $[42] = t16;
-    $[43] = t17;
+    $[33] = t16;
+    $[34] = t17;
   } else {
-    t17 = $[43];
+    t17 = $[34];
   }
   let t18;
-  if ($[44] !== handleClickRightArrow || $[45] !== t17) {
-    t18 = /* @__PURE__ */ jsx("div", { className: t17, onClick: handleClickRightArrow });
-    $[44] = handleClickRightArrow;
-    $[45] = t17;
-    $[46] = t18;
+  if ($[35] !== handleClickRightArrow || $[36] !== t17) {
+    t18 = /* @__PURE__ */ jsx("button", { "aria-label": "Next Month", className: t17, onClick: handleClickRightArrow, type: "button" });
+    $[35] = handleClickRightArrow;
+    $[36] = t17;
+    $[37] = t18;
   } else {
-    t18 = $[46];
+    t18 = $[37];
   }
   let t19;
-  if ($[47] !== t15 || $[48] !== t18) {
+  if ($[38] !== t15 || $[39] !== t18) {
     t19 = /* @__PURE__ */ jsxs("div", { className: `${ROOT_CLASS_NAME}-range-arrow-wrap`, children: [
       t15,
       t18
     ] });
-    $[47] = t15;
-    $[48] = t18;
-    $[49] = t19;
+    $[38] = t15;
+    $[39] = t18;
+    $[40] = t19;
   } else {
-    t19 = $[49];
+    t19 = $[40];
   }
   let t20;
-  if ($[50] !== month || $[51] !== useMonthAbbreviations) {
+  if ($[41] !== month || $[42] !== useMonthAbbreviations) {
     t20 = useMonthAbbreviations ? getAbbreviatedMonthTitle(month) : void 0;
-    $[50] = month;
-    $[51] = useMonthAbbreviations;
-    $[52] = t20;
+    $[41] = month;
+    $[42] = useMonthAbbreviations;
+    $[43] = t20;
   } else {
-    t20 = $[52];
+    t20 = $[43];
   }
   let t21;
-  if ($[53] !== dateEnd || $[54] !== dateEndPreview || $[55] !== dateStart || $[56] !== handleChange || $[57] !== handleChangeEndPreview || $[58] !== isRange || $[59] !== month || $[60] !== t20) {
+  if ($[44] !== dateEnd || $[45] !== dateEndPreview || $[46] !== dateStart || $[47] !== handleChange || $[48] !== isRange || $[49] !== month || $[50] !== t20) {
     t21 = /* @__PURE__ */ jsx(MonthCalendar, { dateEnd, dateEndPreview, dateStart, isRange, month, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: t20 });
-    $[53] = dateEnd;
-    $[54] = dateEndPreview;
-    $[55] = dateStart;
-    $[56] = handleChange;
-    $[57] = handleChangeEndPreview;
-    $[58] = isRange;
-    $[59] = month;
-    $[60] = t20;
-    $[61] = t21;
+    $[44] = dateEnd;
+    $[45] = dateEndPreview;
+    $[46] = dateStart;
+    $[47] = handleChange;
+    $[48] = isRange;
+    $[49] = month;
+    $[50] = t20;
+    $[51] = t21;
   } else {
-    t21 = $[61];
+    t21 = $[51];
   }
   let t22;
-  if ($[62] !== dateEnd || $[63] !== dateEndPreview || $[64] !== dateStart || $[65] !== handleChange || $[66] !== handleChangeEndPreview || $[67] !== isRange || $[68] !== isTwoUp || $[69] !== month || $[70] !== useMonthAbbreviations) {
+  if ($[52] !== dateEnd || $[53] !== dateEndPreview || $[54] !== dateStart || $[55] !== handleChange || $[56] !== isRange || $[57] !== isTwoUp || $[58] !== month || $[59] !== useMonthAbbreviations) {
     t22 = isTwoUp ? /* @__PURE__ */ jsx(MonthCalendar, { dateEnd, dateEndPreview, dateStart, isRange, month: month + 1, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: useMonthAbbreviations ? getAbbreviatedMonthTitle(month + 1) : void 0 }) : null;
-    $[62] = dateEnd;
-    $[63] = dateEndPreview;
-    $[64] = dateStart;
-    $[65] = handleChange;
-    $[66] = handleChangeEndPreview;
-    $[67] = isRange;
-    $[68] = isTwoUp;
-    $[69] = month;
-    $[70] = useMonthAbbreviations;
-    $[71] = t22;
-  } else {
-    t22 = $[71];
+    $[52] = dateEnd;
+    $[53] = dateEndPreview;
+    $[54] = dateStart;
+    $[55] = handleChange;
+    $[56] = isRange;
+    $[57] = isTwoUp;
+    $[58] = month;
+    $[59] = useMonthAbbreviations;
+    $[60] = t22;
+  } else {
+    t22 = $[60];
   }
   let t23;
-  if ($[72] !== t21 || $[73] !== t22) {
+  if ($[61] !== t21 || $[62] !== t22) {
     t23 = /* @__PURE__ */ jsxs("div", { className: `${ROOT_CLASS_NAME}-month-container`, children: [
       t21,
       t22
     ] });
-    $[72] = t21;
-    $[73] = t22;
-    $[74] = t23;
+    $[61] = t21;
+    $[62] = t22;
+    $[63] = t23;
   } else {
-    t23 = $[74];
+    t23 = $[63];
   }
   let t24;
-  if ($[75] !== t12 || $[76] !== t19 || $[77] !== t23) {
+  if ($[64] !== t12 || $[65] !== t19 || $[66] !== t23) {
     t24 = /* @__PURE__ */ jsxs(Fragment, { children: [
       t11,
       /* @__PURE__ */ jsxs("div", { className: t12, children: [
@@ -846,12 +814,12 @@ function DatePicker(t0) {
         t23
       ] })
     ] });
-    $[75] = t12;
-    $[76] = t19;
-    $[77] = t23;
-    $[78] = t24;
+    $[64] = t12;
+    $[65] = t19;
+    $[66] = t23;
+    $[67] = t24;
   } else {
-    t24 = $[78];
+    t24 = $[67];
   }
   return t24;
 }