@expcat/tigercat-react 1.3.4 → 1.4.0

package/dist/{chunk-5OHVTGHS.mjs → chunk-BN4ZKCAI.mjs}

@@ -1,55 +1,40 @@
+import {
+  useControlledState
+} from "./chunk-WHYHLUXG.mjs";
+
 // src/components/DatePicker.tsx
+import {
+  datePickerInputWrapperClasses,
+  datePickerClearButtonClasses,
+  CalendarIconPath,
+  CloseIconPath
+} from "@expcat/tigercat-core";
+
+// src/components/DatePicker/state.ts
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import {
   classNames,
-  icon20ViewBox,
   parseDate,
   formatDate,
-  formatMonthYear,
-  isSameDay,
+  addDays,
+  addMonths,
   isDateInRange,
   getCalendarDays,
   getShortDayNames,
-  isToday as isTodayUtil,
   normalizeDate,
   datePickerBaseClasses,
-  datePickerInputWrapperClasses,
   getDatePickerInputClasses,
   getDatePickerIconButtonClasses,
-  datePickerCalendarClasses,
-  datePickerMobileWheelClasses,
-  datePickerMobileWheelGridClasses,
-  datePickerMobileWheelSelectClasses,
-  datePickerCalendarHeaderClasses,
-  datePickerNavButtonClasses,
-  datePickerMonthYearClasses,
-  datePickerCalendarGridClasses,
-  datePickerDayNameClasses,
-  getDatePickerDayCellClasses,
-  datePickerClearButtonClasses,
-  datePickerFooterClasses,
-  datePickerFooterButtonClasses,
-  CalendarIconPath,
-  CloseIconPath,
-  ChevronLeftIconPath,
-  ChevronRightIconPath,
   getDatePickerLocaleCode,
   getDatePickerLabels,
   getLocaleDirection
 } from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Icon = ({ path, className }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className,
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: icon20ViewBox,
-    fill: "currentColor",
-    children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
-  }
-);
+
+// src/components/DatePicker/types.ts
 var isRangeDatePicker = (props) => props.range === true;
-var DatePicker = (props) => {
+
+// src/components/DatePicker/state.ts
+function useDatePickerState(props) {
   const {
     size = "md",
     disabled = false,
@@ -86,38 +71,33 @@ var DatePicker = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [activeDateIso, setActiveDateIso] = useState(null);
   const [activeRangePart, setActiveRangePart] = useState("start");
-  const [internalValue, setInternalValue] = useState(() => {
-    if (isRangeMode) return null;
-    return parseDate(props.defaultValue ?? null);
-  });
-  const [internalRangeValue, setInternalRangeValue] = useState(() => {
-    if (!isRangeMode) return [null, null];
-    const tuple = props.defaultValue ?? null;
-    if (!tuple) return [null, null];
-    const start = Array.isArray(tuple) ? parseDate(tuple[0]) : null;
-    const end = Array.isArray(tuple) ? parseDate(tuple[1]) : null;
-    return [start, end];
-  });
+  const singleProps = props;
+  const rangeProps = props;
+  const parseRangeTuple = (tuple) => {
+    if (!tuple || !Array.isArray(tuple)) return [null, null];
+    return [parseDate(tuple[0]), parseDate(tuple[1])];
+  };
+  const [singleValue, setSingleValue] = useControlledState(
+    !isRangeMode && singleProps.value !== void 0 ? parseDate(singleProps.value ?? null) : void 0,
+    parseDate(singleProps.defaultValue ?? null),
+    singleProps.onChange
+  );
+  const [rangeValue, setRangeValue] = useControlledState(
+    isRangeMode && rangeProps.value !== void 0 ? parseRangeTuple(rangeProps.value) : void 0,
+    parseRangeTuple(rangeProps.defaultValue),
+    rangeProps.onChange
+  );
   const calendarRef = useRef(null);
   const mobileCalendarRef = useRef(null);
   const inputWrapperRef = useRef(null);
   const inputRef = useRef(null);
   const pendingFocusIsoRef = useRef(null);
   const restoreFocusRef = useRef(null);
-  const isControlled = props.value !== void 0;
-  const selectedDate = (() => {
-    if (isRangeMode) return null;
-    const current = isControlled ? props.value : internalValue;
-    return parseDate(current ?? null);
-  })();
-  const selectedRange = (() => {
-    if (!isRangeMode) return [null, null];
-    const tuple = isControlled ? props.value : internalRangeValue;
-    if (!tuple) return [null, null];
-    const start = Array.isArray(tuple) ? parseDate(tuple[0]) : null;
-    const end = Array.isArray(tuple) ? parseDate(tuple[1]) : null;
-    return [start, end];
-  })();
+  const selectedDate = isRangeMode ? null : singleValue;
+  const selectedRange = useMemo(
+    () => isRangeMode ? rangeValue : [null, null],
+    [isRangeMode, rangeValue]
+  );
   const minDateParsed = useMemo(() => parseDate(props.minDate ?? null), [props.minDate]);
   const maxDateParsed = useMemo(() => parseDate(props.maxDate ?? null), [props.maxDate]);
   const localeCode = useMemo(() => getDatePickerLocaleCode(props.locale), [props.locale]);
@@ -233,11 +213,6 @@ var DatePicker = (props) => {
       target.focus();
     }
   }, []);
-  const addDays = (date, days) => {
-    const next = new Date(date);
-    next.setDate(next.getDate() + days);
-    return next;
-  };
   const moveFocus = (deltaDays) => {
     const activeEl = document.activeElement;
     const currentIso = activeEl?.getAttribute("data-date") ?? activeDateIso ?? null;
@@ -305,13 +280,6 @@ var DatePicker = (props) => {
       }
     }
   };
-  const setRangeValue = (next) => {
-    if (!isControlled) {
-      setInternalRangeValue(next);
-    }
-    ;
-    props.onChange?.(next);
-  };
   const selectDate = (date) => {
     if (!date) return;
     const normalizedDate = normalizeDate(date);
@@ -319,11 +287,7 @@ var DatePicker = (props) => {
       return;
     }
     if (!isRangeMode) {
-      if (!isControlled) {
-        setInternalValue(normalizedDate);
-      }
-      ;
-      props.onChange?.(normalizedDate);
+      setSingleValue(normalizedDate);
       closeCalendar();
       return;
     }
@@ -343,11 +307,7 @@ var DatePicker = (props) => {
     setViewingYear(normalized.getFullYear());
     setViewingMonth(normalized.getMonth());
     if (!isRangeMode) {
-      if (!isControlled) {
-        setInternalValue(normalized);
-      }
-      ;
-      props.onChange?.(normalized);
+      setSingleValue(normalized);
       return;
     }
     const [start, end] = selectedRange;
@@ -370,8 +330,7 @@ var DatePicker = (props) => {
     const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
     if (!isRangeMode) {
       const date = val instanceof Date ? normalizeDate(val) : val ? normalizeDate(parseDate(val)) : null;
-      if (!isControlled) setInternalValue(date);
-      props.onChange?.(date);
+      setSingleValue(date);
     } else {
       const range = val;
       if (range && Array.isArray(range)) {
@@ -387,32 +346,19 @@ var DatePicker = (props) => {
   const clearDate = (event) => {
     event.stopPropagation();
     if (!isRangeMode) {
-      if (!isControlled) {
-        setInternalValue(null);
-      }
-      ;
-      props.onChange?.(null);
+      setSingleValue(null);
     } else {
       setRangeValue([null, null]);
     }
     props.onClear?.();
   };
-  const previousMonth = () => {
-    if (viewingMonth === 0) {
-      setViewingMonth(11);
-      setViewingYear(viewingYear - 1);
-    } else {
-      setViewingMonth(viewingMonth - 1);
-    }
-  };
-  const nextMonth = () => {
-    if (viewingMonth === 11) {
-      setViewingMonth(0);
-      setViewingYear(viewingYear + 1);
-    } else {
-      setViewingMonth(viewingMonth + 1);
-    }
+  const stepViewingMonth = (delta) => {
+    const next = addMonths(new Date(viewingYear, viewingMonth, 1), delta);
+    setViewingYear(next.getFullYear());
+    setViewingMonth(next.getMonth());
   };
+  const previousMonth = () => stepViewingMonth(-1);
+  const nextMonth = () => stepViewingMonth(1);
   const isCurrentMonth = (date) => {
     if (!date) return false;
     return date.getMonth() === viewingMonth;
@@ -459,235 +405,342 @@ var DatePicker = (props) => {
     [size, disabled, readonly]
   );
   const iconButtonClasses = useMemo(() => getDatePickerIconButtonClasses(size), [size]);
-  return /* @__PURE__ */ jsxs("div", { className: classNames(datePickerBaseClasses, props.className), ...divProps, children: [
-    /* @__PURE__ */ jsxs("div", { ref: inputWrapperRef, className: datePickerInputWrapperClasses, children: [
-      /* @__PURE__ */ jsx(
+  return {
+    inputWrapperRef,
+    inputRef,
+    calendarRef,
+    mobileCalendarRef,
+    isOpen,
+    activeRangePart,
+    setActiveRangePart,
+    activeDateIso,
+    setActiveDateIso,
+    isRangeMode,
+    placeholder,
+    disabled,
+    readonly,
+    required,
+    name: props.name,
+    id: props.id,
+    shortcuts: props.shortcuts,
+    containerClasses: classNames(datePickerBaseClasses, props.className),
+    divProps,
+    displayValue,
+    showClearButton,
+    inputClasses,
+    iconButtonClasses,
+    labels,
+    localeCode,
+    isRtl,
+    dayNames,
+    calendarDays,
+    selectedDate,
+    selectedRange,
+    viewingMonth,
+    viewingYear,
+    mobileDate,
+    mobileYears,
+    mobileDays,
+    toggleCalendar,
+    closeCalendar,
+    clearDate,
+    selectDate,
+    setToday,
+    handleShortcut,
+    handleCalendarKeyDown,
+    previousMonth,
+    nextMonth,
+    updateMobileDate,
+    isCurrentMonth,
+    isDateDisabled
+  };
+}
+
+// src/components/DatePicker/render-mobile.tsx
+import {
+  datePickerMobileWheelClasses,
+  datePickerMobileWheelGridClasses,
+  datePickerMobileWheelSelectClasses,
+  datePickerFooterButtonClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function renderDatePickerMobile(ctx) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: ctx.mobileCalendarRef,
+      className: datePickerMobileWheelClasses,
+      role: "group",
+      "aria-label": ctx.labels.calendar,
+      children: [
+        ctx.isRangeMode && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: datePickerFooterButtonClasses,
+              "aria-selected": ctx.activeRangePart === "start",
+              onClick: () => ctx.setActiveRangePart("start"),
+              children: "Start"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: datePickerFooterButtonClasses,
+              "aria-selected": ctx.activeRangePart === "end",
+              onClick: () => ctx.setActiveRangePart("end"),
+              children: "End"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: datePickerMobileWheelGridClasses, children: [
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: datePickerMobileWheelSelectClasses,
+              value: ctx.mobileDate.getFullYear(),
+              "aria-label": "Year",
+              onChange: (event) => ctx.updateMobileDate("year", Number(event.target.value)),
+              children: ctx.mobileYears.map((year) => /* @__PURE__ */ jsx("option", { value: year, children: year }, year))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: datePickerMobileWheelSelectClasses,
+              value: ctx.mobileDate.getMonth(),
+              "aria-label": "Month",
+              onChange: (event) => ctx.updateMobileDate("month", Number(event.target.value)),
+              children: Array.from({ length: 12 }, (_, month) => /* @__PURE__ */ jsx("option", { value: month, children: month + 1 }, month))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: datePickerMobileWheelSelectClasses,
+              value: ctx.mobileDate.getDate(),
+              "aria-label": "Day",
+              onChange: (event) => ctx.updateMobileDate("day", Number(event.target.value)),
+              children: ctx.mobileDays.map((day) => /* @__PURE__ */ jsx("option", { value: day, children: day }, day))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end gap-2", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: datePickerFooterButtonClasses,
+            "aria-label": `Mobile ${ctx.labels.ok}`,
+            onClick: ctx.closeCalendar,
+            children: ctx.labels.ok
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/DatePicker/render-calendar.tsx
+import {
+  formatDate as formatDate2,
+  formatMonthYear,
+  isSameDay,
+  isToday as isTodayUtil,
+  normalizeDate as normalizeDate2,
+  datePickerCalendarClasses,
+  datePickerCalendarHeaderClasses,
+  datePickerNavButtonClasses,
+  datePickerMonthYearClasses,
+  datePickerCalendarGridClasses,
+  datePickerDayNameClasses,
+  getDatePickerDayCellClasses,
+  datePickerFooterClasses,
+  datePickerFooterButtonClasses as datePickerFooterButtonClasses2,
+  ChevronLeftIconPath,
+  ChevronRightIconPath
+} from "@expcat/tigercat-core";
+
+// src/components/DatePicker/icons.tsx
+import { icon20ViewBox } from "@expcat/tigercat-core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Icon = ({ path, className }) => /* @__PURE__ */ jsx2(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+  }
+);
+
+// src/components/DatePicker/render-calendar.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function renderDatePickerCalendar(ctx) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: ctx.calendarRef,
+      className: datePickerCalendarClasses,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ctx.labels.calendar,
+      onKeyDown: ctx.handleCalendarKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: datePickerCalendarHeaderClasses, children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: datePickerNavButtonClasses,
+              onClick: ctx.previousMonth,
+              "aria-label": ctx.labels.previousMonth,
+              children: /* @__PURE__ */ jsx3(Icon, { path: ctx.isRtl ? ChevronRightIconPath : ChevronLeftIconPath, className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: datePickerMonthYearClasses, children: formatMonthYear(ctx.viewingYear, ctx.viewingMonth, ctx.localeCode) }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: datePickerNavButtonClasses,
+              onClick: ctx.nextMonth,
+              "aria-label": ctx.labels.nextMonth,
+              children: /* @__PURE__ */ jsx3(Icon, { path: ctx.isRtl ? ChevronLeftIconPath : ChevronRightIconPath, className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: datePickerCalendarGridClasses, role: "row", children: ctx.dayNames.map((day) => /* @__PURE__ */ jsx3("div", { className: datePickerDayNameClasses, role: "columnheader", children: day }, day)) }),
+        (() => {
+          const [rangeStart, rangeEnd] = ctx.selectedRange;
+          const normStart = rangeStart ? normalizeDate2(rangeStart) : null;
+          const normEnd = rangeEnd ? normalizeDate2(rangeEnd) : null;
+          const isSelectingEnd = ctx.isRangeMode && Boolean(rangeStart) && !rangeEnd;
+          return /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: datePickerCalendarGridClasses,
+              role: "grid",
+              "aria-rowcount": 6,
+              "aria-colcount": 7,
+              children: ctx.calendarDays.map((date, index) => {
+                if (!date) return null;
+                const normDate = normalizeDate2(date);
+                const isRangeStart = ctx.isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
+                const isRangeEnd = ctx.isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
+                const isInRange = ctx.isRangeMode && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
+                const isSelected = !ctx.isRangeMode ? ctx.selectedDate ? isSameDay(date, ctx.selectedDate) : false : isRangeStart || isRangeEnd;
+                const isCurrentMonthDay = ctx.isCurrentMonth(date);
+                const isTodayDay = isTodayUtil(date);
+                const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
+                const isDisabled = ctx.isDateDisabled(date) || Boolean(isBeforeRangeStart);
+                const iso = formatDate2(date, "yyyy-MM-dd");
+                return /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: getDatePickerDayCellClasses(
+                      isCurrentMonthDay,
+                      isSelected,
+                      isTodayDay,
+                      isDisabled,
+                      Boolean(isInRange),
+                      Boolean(isRangeStart),
+                      Boolean(isRangeEnd)
+                    ),
+                    disabled: isDisabled,
+                    onClick: () => ctx.selectDate(date),
+                    role: "gridcell",
+                    "data-date": iso,
+                    onFocus: () => ctx.setActiveDateIso(iso),
+                    tabIndex: ctx.activeDateIso === iso && !isDisabled ? 0 : -1,
+                    "aria-label": iso,
+                    "aria-selected": isSelected,
+                    "aria-current": isTodayDay ? "date" : void 0,
+                    children: date.getDate()
+                  },
+                  index
+                );
+              })
+            }
+          );
+        })(),
+        ctx.shortcuts && ctx.shortcuts.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]", children: ctx.shortcuts.map((sc, i) => /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: datePickerFooterButtonClasses2,
+            onClick: () => ctx.handleShortcut(sc),
+            children: sc.label
+          },
+          i
+        )) }),
+        ctx.isRangeMode && /* @__PURE__ */ jsxs2("div", { className: datePickerFooterClasses, children: [
+          /* @__PURE__ */ jsx3("button", { type: "button", className: datePickerFooterButtonClasses2, onClick: ctx.setToday, children: ctx.labels.today }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: datePickerFooterButtonClasses2,
+              onClick: ctx.closeCalendar,
+              children: ctx.labels.ok
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/DatePicker.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DatePicker = (props) => {
+  const ctx = useDatePickerState(props);
+  return /* @__PURE__ */ jsxs3("div", { className: ctx.containerClasses, ...ctx.divProps, children: [
+    /* @__PURE__ */ jsxs3("div", { ref: ctx.inputWrapperRef, className: datePickerInputWrapperClasses, children: [
+      /* @__PURE__ */ jsx4(
         "input",
         {
-          ref: inputRef,
+          ref: ctx.inputRef,
           type: "text",
-          className: inputClasses,
-          value: displayValue,
-          placeholder,
-          disabled,
+          className: ctx.inputClasses,
+          value: ctx.displayValue,
+          placeholder: ctx.placeholder,
+          disabled: ctx.disabled,
           readOnly: true,
-          required,
-          name: props.name,
-          id: props.id,
-          onClick: toggleCalendar,
-          "aria-label": placeholder || "Select date"
+          required: ctx.required,
+          name: ctx.name,
+          id: ctx.id,
+          onClick: ctx.toggleCalendar,
+          "aria-label": ctx.placeholder || "Select date"
         }
       ),
-      showClearButton && /* @__PURE__ */ jsx(
+      ctx.showClearButton && /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
           className: datePickerClearButtonClasses,
-          onClick: clearDate,
-          "aria-label": labels.clearDate,
-          children: /* @__PURE__ */ jsx(Icon, { path: CloseIconPath, className: "w-4 h-4" })
+          onClick: ctx.clearDate,
+          "aria-label": ctx.labels.clearDate,
+          children: /* @__PURE__ */ jsx4(Icon, { path: CloseIconPath, className: "w-4 h-4" })
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
-          className: iconButtonClasses,
-          disabled: disabled || readonly,
-          onClick: toggleCalendar,
-          "aria-label": labels.toggleCalendar,
-          children: /* @__PURE__ */ jsx(Icon, { path: CalendarIconPath, className: "w-5 h-5" })
+          className: ctx.iconButtonClasses,
+          disabled: ctx.disabled || ctx.readonly,
+          onClick: ctx.toggleCalendar,
+          "aria-label": ctx.labels.toggleCalendar,
+          children: /* @__PURE__ */ jsx4(Icon, { path: CalendarIconPath, className: "w-5 h-5" })
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: mobileCalendarRef,
-        className: datePickerMobileWheelClasses,
-        role: "group",
-        "aria-label": labels.calendar,
-        children: [
-          isRangeMode && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: datePickerFooterButtonClasses,
-                "aria-selected": activeRangePart === "start",
-                onClick: () => setActiveRangePart("start"),
-                children: "Start"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: datePickerFooterButtonClasses,
-                "aria-selected": activeRangePart === "end",
-                onClick: () => setActiveRangePart("end"),
-                children: "End"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: datePickerMobileWheelGridClasses, children: [
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                className: datePickerMobileWheelSelectClasses,
-                value: mobileDate.getFullYear(),
-                "aria-label": "Year",
-                onChange: (event) => updateMobileDate("year", Number(event.target.value)),
-                children: mobileYears.map((year) => /* @__PURE__ */ jsx("option", { value: year, children: year }, year))
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                className: datePickerMobileWheelSelectClasses,
-                value: mobileDate.getMonth(),
-                "aria-label": "Month",
-                onChange: (event) => updateMobileDate("month", Number(event.target.value)),
-                children: Array.from({ length: 12 }, (_, month) => /* @__PURE__ */ jsx("option", { value: month, children: month + 1 }, month))
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                className: datePickerMobileWheelSelectClasses,
-                value: mobileDate.getDate(),
-                "aria-label": "Day",
-                onChange: (event) => updateMobileDate("day", Number(event.target.value)),
-                children: mobileDays.map((day) => /* @__PURE__ */ jsx("option", { value: day, children: day }, day))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end gap-2", children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: datePickerFooterButtonClasses,
-              "aria-label": `Mobile ${labels.ok}`,
-              onClick: closeCalendar,
-              children: labels.ok
-            }
-          ) })
-        ]
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: calendarRef,
-        className: datePickerCalendarClasses,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": labels.calendar,
-        onKeyDown: handleCalendarKeyDown,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: datePickerCalendarHeaderClasses, children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: datePickerNavButtonClasses,
-                onClick: previousMonth,
-                "aria-label": labels.previousMonth,
-                children: /* @__PURE__ */ jsx(Icon, { path: isRtl ? ChevronRightIconPath : ChevronLeftIconPath, className: "w-5 h-5" })
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: datePickerMonthYearClasses, children: formatMonthYear(viewingYear, viewingMonth, localeCode) }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: datePickerNavButtonClasses,
-                onClick: nextMonth,
-                "aria-label": labels.nextMonth,
-                children: /* @__PURE__ */ jsx(Icon, { path: isRtl ? ChevronLeftIconPath : ChevronRightIconPath, className: "w-5 h-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: datePickerCalendarGridClasses, role: "row", children: dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: datePickerDayNameClasses, role: "columnheader", children: day }, day)) }),
-          (() => {
-            const [rangeStart, rangeEnd] = selectedRange;
-            const normStart = rangeStart ? normalizeDate(rangeStart) : null;
-            const normEnd = rangeEnd ? normalizeDate(rangeEnd) : null;
-            const isSelectingEnd = isRangeMode && Boolean(rangeStart) && !rangeEnd;
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: datePickerCalendarGridClasses,
-                role: "grid",
-                "aria-rowcount": 6,
-                "aria-colcount": 7,
-                children: calendarDays.map((date, index) => {
-                  if (!date) return null;
-                  const normDate = normalizeDate(date);
-                  const isRangeStart = isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
-                  const isRangeEnd = isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
-                  const isInRange = isRangeMode && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
-                  const isSelected = !isRangeMode ? selectedDate ? isSameDay(date, selectedDate) : false : isRangeStart || isRangeEnd;
-                  const isCurrentMonthDay = isCurrentMonth(date);
-                  const isTodayDay = isTodayUtil(date);
-                  const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
-                  const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                  const iso = formatDate(date, "yyyy-MM-dd");
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: getDatePickerDayCellClasses(
-                        isCurrentMonthDay,
-                        isSelected,
-                        isTodayDay,
-                        isDisabled,
-                        Boolean(isInRange),
-                        Boolean(isRangeStart),
-                        Boolean(isRangeEnd)
-                      ),
-                      disabled: isDisabled,
-                      onClick: () => selectDate(date),
-                      role: "gridcell",
-                      "data-date": iso,
-                      onFocus: () => setActiveDateIso(iso),
-                      tabIndex: activeDateIso === iso && !isDisabled ? 0 : -1,
-                      "aria-label": iso,
-                      "aria-selected": isSelected,
-                      "aria-current": isTodayDay ? "date" : void 0,
-                      children: date.getDate()
-                    },
-                    index
-                  );
-                })
-              }
-            );
-          })(),
-          props.shortcuts && props.shortcuts.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]", children: props.shortcuts.map((sc, i) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: datePickerFooterButtonClasses,
-              onClick: () => handleShortcut(sc),
-              children: sc.label
-            },
-            i
-          )) }),
-          isRangeMode && /* @__PURE__ */ jsxs("div", { className: datePickerFooterClasses, children: [
-            /* @__PURE__ */ jsx("button", { type: "button", className: datePickerFooterButtonClasses, onClick: setToday, children: labels.today }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: datePickerFooterButtonClasses,
-                onClick: closeCalendar,
-                children: labels.ok
-              }
-            )
-          ] })
-        ]
-      }
-    )
+    ctx.isOpen && renderDatePickerMobile(ctx),
+    ctx.isOpen && renderDatePickerCalendar(ctx)
   ] });
 };