@duskmoon-dev/components 0.3.1 → 0.4.0

package/dist/components/date-picker/index.js

@@ -1,6 +1,9 @@
 "use client";
 
 // src/components/date-picker/DatePicker.tsx
+import { forwardRef as forwardRef2, useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/components/calendar/Calendar.tsx
 import { forwardRef, useMemo, useState } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -28,6 +31,420 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/calendar.ts
+var calendarBaseClass = "datepicker calendar";
+var calendarHeaderClass = "calendar-header";
+var calendarTitleClass = "calendar-title";
+var calendarControlsClass = "calendar-controls";
+var calendarNavClass = "calendar-nav";
+var calendarModeClass = "calendar-mode";
+var calendarWeekdaysClass = "calendar-weekdays";
+var calendarWeekdayClass = "calendar-weekday";
+var calendarBodyClass = "calendar-body";
+var calendarDateGridClass = "calendar-date-grid";
+var calendarMonthGridClass = "calendar-month-grid";
+var calendarCellContentClass = "calendar-cell-content";
+function getCalendarClasses({
+  fullscreen = true,
+  mode = "month",
+  className
+}) {
+  return cn(calendarBaseClass, fullscreen ? "calendar-fullscreen" : "calendar-card", mode === "year" && "calendar-year-mode", className);
+}
+function getCalendarCellClasses({
+  selected,
+  today,
+  outside,
+  disabled,
+  className
+}) {
+  return cn("calendar-cell", selected && "calendar-cell-selected", today && "calendar-cell-today", outside && "calendar-cell-outside", disabled && "calendar-cell-disabled", className);
+}
+
+// src/components/calendar/Calendar.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function formatDate(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function formatMonth(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-01`;
+}
+function parseDate(value) {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+  }
+  if (typeof value === "string" && value.length > 0) {
+    const [year, month = "1", day = "1"] = value.split("-");
+    const parsed = new Date(Number(year), Number(month) - 1, Number(day));
+    if (!Number.isNaN(parsed.getTime())) {
+      return parsed;
+    }
+  }
+  const today = new Date;
+  return new Date(today.getFullYear(), today.getMonth(), today.getDate());
+}
+function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function addYears(date, amount) {
+  return new Date(date.getFullYear() + amount, date.getMonth(), 1);
+}
+function startOfCalendarGrid(panelDate) {
+  const firstOfMonth = new Date(panelDate.getFullYear(), panelDate.getMonth(), 1);
+  const start = new Date(firstOfMonth);
+  start.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+  return start;
+}
+function buildDateGrid(panelDate) {
+  const start = startOfCalendarGrid(panelDate);
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(start);
+    date.setDate(start.getDate() + index);
+    return date;
+  });
+}
+function isSameMonth(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+}
+function isOutsideRange(date, validRange) {
+  if (!validRange) {
+    return false;
+  }
+  const current = formatDate(date);
+  const start = formatDate(parseDate(validRange[0]));
+  const end = formatDate(parseDate(validRange[1]));
+  return current < start || current > end;
+}
+function Header({
+  panelDate,
+  mode,
+  setPanelDate,
+  setMode
+}) {
+  const title = mode === "year" ? String(panelDate.getFullYear()) : `${MONTHS[panelDate.getMonth()]} ${panelDate.getFullYear()}`;
+  return /* @__PURE__ */ jsxs("div", {
+    className: calendarHeaderClass,
+    children: [
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Previous panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, -1) : addMonths(panelDate, -1), mode),
+        children: /* @__PURE__ */ jsx("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", {
+            d: "m15 18-6-6 6-6"
+          })
+        })
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: calendarControlsClass,
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: calendarTitleClass,
+            children: title
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: calendarModeClass,
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-pressed": mode === "month",
+                onClick: () => setMode("month"),
+                children: "Month"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-pressed": mode === "year",
+                onClick: () => setMode("year"),
+                children: "Year"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Next panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, 1) : addMonths(panelDate, 1), mode),
+        children: /* @__PURE__ */ jsx("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", {
+            d: "m9 18 6-6-6-6"
+          })
+        })
+      })
+    ]
+  });
+}
+var Calendar = forwardRef(({
+  className,
+  value,
+  defaultValue,
+  mode,
+  defaultMode = "month",
+  fullscreen = true,
+  validRange,
+  disabledDate,
+  dateCellRender,
+  dateFullCellRender,
+  monthCellRender,
+  monthFullCellRender,
+  cellRender,
+  fullCellRender,
+  headerRender,
+  onChange,
+  onSelect,
+  onPanelChange,
+  ...props
+}, ref) => {
+  const selectedDate = parseDate(value ?? defaultValue);
+  const [innerValue, setInnerValue] = useState(() => formatDate(selectedDate));
+  const [panelDate, setInnerPanelDate] = useState(selectedDate);
+  const [innerMode, setInnerMode] = useState(mode ?? defaultMode);
+  const currentMode = mode ?? innerMode;
+  const currentValue = value === undefined ? innerValue : formatDate(parseDate(value));
+  const today = useMemo(() => formatDate(new Date), []);
+  const dateGrid = useMemo(() => buildDateGrid(panelDate), [panelDate]);
+  function emitPanelChange(nextDate, nextMode = currentMode) {
+    setInnerPanelDate(nextDate);
+    onPanelChange?.(formatDate(nextDate), nextMode);
+  }
+  function setCalendarMode(nextMode) {
+    if (mode === undefined) {
+      setInnerMode(nextMode);
+    }
+    onPanelChange?.(formatDate(panelDate), nextMode);
+  }
+  function commitValue(nextDate, source) {
+    const nextValue = source === "month" ? formatMonth(nextDate) : formatDate(nextDate);
+    if (disabledDate?.(nextValue) || isOutsideRange(nextDate, validRange)) {
+      return;
+    }
+    if (value === undefined) {
+      setInnerValue(nextValue);
+    }
+    setInnerPanelDate(nextDate);
+    onSelect?.(nextValue, { source });
+    onChange?.(nextValue);
+  }
+  function renderDateCell(date) {
+    const dateValue = formatDate(date);
+    const originNode = /* @__PURE__ */ jsxs("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          children: date.getDate()
+        }),
+        dateCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "month"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? dateFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === currentValue,
+        today: dateValue === today,
+        outside: !isSameMonth(date, panelDate),
+        disabled
+      }),
+      onClick: () => commitValue(date, "date"),
+      children: content
+    }, dateValue);
+  }
+  function renderMonthCell(month) {
+    const date = new Date(panelDate.getFullYear(), month, 1);
+    const dateValue = formatMonth(date);
+    const originNode = /* @__PURE__ */ jsxs("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          children: MONTHS[month]
+        }),
+        monthCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "year"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? monthFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === formatMonth(parseDate(currentValue)),
+        today: dateValue === formatMonth(new Date),
+        disabled
+      }),
+      onClick: () => commitValue(date, "month"),
+      children: content
+    }, dateValue);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getCalendarClasses({
+      fullscreen,
+      mode: currentMode,
+      className
+    }),
+    children: [
+      headerRender ? headerRender({
+        value: formatDate(panelDate),
+        type: currentMode,
+        onChange: (nextValue) => emitPanelChange(parseDate(nextValue)),
+        onTypeChange: setCalendarMode
+      }) : /* @__PURE__ */ jsx(Header, {
+        panelDate,
+        mode: currentMode,
+        setPanelDate: emitPanelChange,
+        setMode: setCalendarMode
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: calendarBodyClass,
+        children: currentMode === "month" ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              className: calendarWeekdaysClass,
+              "aria-hidden": "true",
+              children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx("span", {
+                className: calendarWeekdayClass,
+                children: weekday
+              }, weekday))
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: calendarDateGridClass,
+              children: dateGrid.map(renderDateCell)
+            })
+          ]
+        }) : /* @__PURE__ */ jsx("div", {
+          className: calendarMonthGridClass,
+          children: MONTHS.map((_, month) => renderMonthCell(month))
+        })
+      })
+    ]
+  });
+});
+Calendar.displayName = "Calendar";
+// src/components/date-picker/usePickerDropdown.ts
+import { useEffect, useId, useImperativeHandle, useRef, useState as useState2 } from "react";
+function usePickerDropdown({
+  open,
+  defaultOpen,
+  disabled,
+  onOpenChange,
+  ref
+}) {
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const skipFocus = useRef(false);
+  const panelId = useId();
+  const [innerOpen, setInnerOpen] = useState2(Boolean(defaultOpen));
+  const visible = !disabled && (open ?? innerOpen);
+  useImperativeHandle(ref, () => rootRef.current, []);
+  function setVisible(next) {
+    if (disabled || next === visible)
+      return;
+    if (open === undefined)
+      setInnerOpen(next);
+    onOpenChange?.(next);
+  }
+  function closeAndFocus() {
+    skipFocus.current = true;
+    inputRef.current?.focus();
+    skipFocus.current = false;
+    setVisible(false);
+  }
+  useEffect(() => {
+    function handleOutside(event) {
+      if (visible && !rootRef.current?.contains(event.target))
+        setVisible(false);
+    }
+    function handleKeyDown(event) {
+      if (event.defaultPrevented || !rootRef.current?.contains(event.target))
+        return;
+      if (event.key === "Escape" && visible) {
+        event.preventDefault();
+        closeAndFocus();
+      } else if (event.key === "ArrowDown" && event.target === inputRef.current) {
+        event.preventDefault();
+        setVisible(true);
+      }
+    }
+    document.addEventListener("pointerdown", handleOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handleOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  return {
+    rootRef,
+    inputRef,
+    panelId,
+    visible,
+    setVisible,
+    closeAndFocus,
+    onInputFocus: () => {
+      if (!skipFocus.current)
+        setVisible(true);
+    },
+    onRootBlur: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget))
+        setVisible(false);
+    }
+  };
+}
+
 // src/classes/date-picker.ts
 var datePickerBaseClass = "datepicker";
 var datePickerInputClass = "datepicker-input";
@@ -75,7 +492,7 @@ function getDatePickerDropdownClasses({
 }
 
 // src/components/date-picker/DatePicker.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function todayValue(picker) {
   const today = new Date;
   const year = today.getFullYear();
@@ -114,9 +531,10 @@ function placeholderForPicker(picker) {
 function normalizeDateValue(value) {
   return typeof value === "string" && value.length > 0 ? value : undefined;
 }
-var DatePickerRoot = forwardRef(({
+var DatePickerRoot = forwardRef2(({
   allowClear,
   className,
+  inputProps,
   defaultOpen,
   defaultValue,
   disabled,
@@ -135,19 +553,19 @@ var DatePickerRoot = forwardRef(({
   value,
   ...props
 }, ref) => {
+  const [calendarMode, setCalendarMode] = useState3("month");
   const isValueControlled = value !== undefined;
-  const isOpenControlled = open !== undefined;
-  const [innerValue, setInnerValue] = useState(() => normalizeDateValue(defaultValue));
-  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
+  const [innerValue, setInnerValue] = useState3(() => normalizeDateValue(defaultValue));
+  const dropdown = usePickerDropdown({
+    open,
+    defaultOpen,
+    disabled,
+    onOpenChange,
+    ref
+  });
   const currentValue = isValueControlled ? normalizeDateValue(value) : innerValue;
-  const visible = isOpenControlled ? Boolean(open) : innerOpen;
+  const { visible, setVisible } = dropdown;
   const inputType = inputTypeForPicker(picker);
-  function setVisible(nextOpen) {
-    if (!isOpenControlled) {
-      setInnerOpen(nextOpen);
-    }
-    onOpenChange?.(nextOpen);
-  }
   function emitChange(nextValue) {
     if (nextValue && disabledDate?.(nextValue)) {
       return;
@@ -157,10 +575,17 @@ var DatePickerRoot = forwardRef(({
     }
     onChange?.(nextValue, nextValue ?? "");
   }
-  const presetItems = useMemo(() => presets ?? [], [presets]);
-  return /* @__PURE__ */ jsxs("div", {
+  function selectValue(nextValue) {
+    if (disabledDate?.(nextValue))
+      return;
+    emitChange(nextValue);
+    dropdown.closeAndFocus();
+  }
+  const presetItems = useMemo2(() => presets ?? [], [presets]);
+  return /* @__PURE__ */ jsxs2("div", {
     ...props,
-    ref,
+    ref: dropdown.rootRef,
+    onBlur: dropdown.onRootBlur,
     className: getDatePickerClasses({
       size,
       status,
@@ -170,7 +595,11 @@ var DatePickerRoot = forwardRef(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsx("input", {
+      /* @__PURE__ */ jsx2("input", {
+        ...inputProps,
+        ref: dropdown.inputRef,
+        "aria-haspopup": "dialog",
+        "aria-controls": visible ? dropdown.panelId : undefined,
         className: datePickerInputClass,
         disabled,
         type: inputType,
@@ -178,15 +607,15 @@ var DatePickerRoot = forwardRef(({
         placeholder: placeholder ?? placeholderForPicker(picker),
         onFocus: (event) => {
           onFocus?.(event);
-          setVisible(true);
+          dropdown.onInputFocus();
         },
         onBlur: (event) => {
           onBlur?.(event);
-          setVisible(false);
         },
+        onClick: () => setVisible(true),
         onChange: (event) => emitChange(event.currentTarget.value || undefined)
       }),
-      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx("button", {
+      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx2("button", {
         type: "button",
         className: datePickerClearClass,
         "aria-label": "Clear date",
@@ -194,26 +623,95 @@ var DatePickerRoot = forwardRef(({
         onClick: () => emitChange(undefined),
         children: "x"
       }) : null,
-      /* @__PURE__ */ jsx("span", {
+      /* @__PURE__ */ jsx2("button", {
+        type: "button",
         className: datePickerIconClass,
-        "aria-hidden": "true"
+        "aria-label": "Open date picker",
+        "aria-haspopup": "dialog",
+        "aria-expanded": visible,
+        "aria-controls": visible ? dropdown.panelId : undefined,
+        disabled,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => setVisible(!visible),
+        children: /* @__PURE__ */ jsxs2("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "18",
+          height: "18",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx2("rect", {
+              x: "3",
+              y: "5",
+              width: "18",
+              height: "16",
+              rx: "2"
+            }),
+            /* @__PURE__ */ jsx2("path", {
+              d: "M8 3v4M16 3v4M3 10h18"
+            })
+          ]
+        })
       }),
-      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs("div", {
+      visible ? /* @__PURE__ */ jsxs2("div", {
+        id: dropdown.panelId,
+        role: "dialog",
+        "aria-label": "Choose date",
         className: getDatePickerDropdownClasses({ open: visible }),
         children: [
-          presetItems.map((preset, index) => /* @__PURE__ */ jsx("button", {
+          picker === "date" || picker === "month" ? /* @__PURE__ */ jsx2(Calendar, {
+            fullscreen: false,
+            value: currentValue,
+            mode: picker === "month" ? "year" : calendarMode,
+            onPanelChange: (_, mode) => {
+              if (picker === "date")
+                setCalendarMode(mode);
+            },
+            disabledDate: (date) => {
+              if (!disabledDate)
+                return false;
+              if (picker === "month")
+                return disabledDate(date.slice(0, 7));
+              if (calendarMode === "year") {
+                const [year, month] = date.split("-").map(Number);
+                const days = new Date(year, month, 0).getDate();
+                return Array.from({ length: days }, (_, index) => `${date.slice(0, 7)}-${String(index + 1).padStart(2, "0")}`).every((day) => disabledDate(day));
+              }
+              return disabledDate(date);
+            },
+            onSelect: (date, info) => {
+              if (picker === "date" && info.source === "month") {
+                setCalendarMode("month");
+                return;
+              }
+              selectValue(picker === "month" ? date.slice(0, 7) : date);
+            }
+          }) : /* @__PURE__ */ jsx2("input", {
+            type: inputType,
+            "aria-label": placeholderForPicker(picker),
+            value: currentValue ?? "",
+            onChange: (event) => selectValue(event.currentTarget.value)
+          }),
+          presetItems.map((preset, index) => /* @__PURE__ */ jsx2("button", {
             type: "button",
             className: datePickerPresetClass,
             onMouseDown: (event) => event.preventDefault(),
-            onClick: () => emitChange(preset.value),
+            disabled: Boolean(disabledDate?.(preset.value)),
+            onClick: () => selectValue(preset.value),
             children: preset.label
           }, index)),
-          showNow ? /* @__PURE__ */ jsx("div", {
+          showNow ? /* @__PURE__ */ jsx2("div", {
             className: datePickerFooterClass,
-            children: /* @__PURE__ */ jsx("button", {
+            children: /* @__PURE__ */ jsx2("button", {
               type: "button",
               onMouseDown: (event) => event.preventDefault(),
-              onClick: () => emitChange(todayValue(picker)),
+              disabled: Boolean(disabledDate?.(todayValue(picker))),
+              onClick: () => selectValue(todayValue(picker)),
               children: "Now"
             })
           }) : null
@@ -223,9 +721,10 @@ var DatePickerRoot = forwardRef(({
   });
 });
 DatePickerRoot.displayName = "DatePicker";
-var RangePicker = forwardRef(({
+var RangePicker = forwardRef2(({
   allowClear,
   className,
+  inputProps,
   defaultValue,
   disabled,
   disabledDate,
@@ -239,7 +738,7 @@ var RangePicker = forwardRef(({
   ...props
 }, ref) => {
   const isControlled = value !== undefined;
-  const [innerValue, setInnerValue] = useState(defaultValue ?? [undefined, undefined]);
+  const [innerValue, setInnerValue] = useState3(defaultValue ?? [undefined, undefined]);
   const currentValue = isControlled ? value : innerValue;
   const inputType = inputTypeForPicker(picker);
   function emitChange(nextValue) {
@@ -254,7 +753,7 @@ var RangePicker = forwardRef(({
   function updateIndex(index, nextItem) {
     emitChange(index === 0 ? [nextItem, currentValue?.[1]] : [currentValue?.[0], nextItem]);
   }
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsxs2("div", {
     ...props,
     ref,
     className: getDatePickerClasses({
@@ -266,7 +765,8 @@ var RangePicker = forwardRef(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsx("input", {
+      /* @__PURE__ */ jsx2("input", {
+        ...inputProps,
         className: datePickerInputClass,
         disabled,
         type: inputType,
@@ -274,11 +774,13 @@ var RangePicker = forwardRef(({
         placeholder: Array.isArray(placeholder) ? placeholder[0] : "Start date",
         onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
       }),
-      /* @__PURE__ */ jsx("span", {
+      /* @__PURE__ */ jsx2("span", {
         className: datePickerSeparatorClass,
         children: separator
       }),
-      /* @__PURE__ */ jsx("input", {
+      /* @__PURE__ */ jsx2("input", {
+        ...inputProps,
+        id: inputProps?.id ? `${inputProps.id}-end` : undefined,
         className: datePickerInputClass,
         disabled,
         type: inputType,
@@ -286,7 +788,7 @@ var RangePicker = forwardRef(({
         placeholder: Array.isArray(placeholder) ? placeholder[1] : "End date",
         onChange: (event) => updateIndex(1, event.currentTarget.value || undefined)
       }),
-      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx("button", {
+      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx2("button", {
         type: "button",
         className: datePickerClearClass,
         "aria-label": "Clear date range",
@@ -298,7 +800,7 @@ var RangePicker = forwardRef(({
 });
 RangePicker.displayName = "DatePicker.RangePicker";
 function withPicker(picker, displayName) {
-  const Picker = forwardRef((props, ref) => /* @__PURE__ */ jsx(DatePickerRoot, {
+  const Picker = forwardRef2((props, ref) => /* @__PURE__ */ jsx2(DatePickerRoot, {
     ...props,
     ref,
     picker