@bigbinary/neeto-atoms 1.0.60 → 1.0.61

package/dist/cjs/{DatePicker-BZd4rM2R.js → DatePicker-DpyYPJfR.js}

@@ -4,17 +4,17 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var primitives_Calendar = require('./primitives/Calendar.js');
 var primitives_Popover = require('./primitives/Popover.js');
-var primitives_Field = require('./primitives/Field.js');
 var utils$1 = require('./utils-BhM0B89p.js');
 var TimePickerPanel = require('./TimePickerPanel-DX6cjrSN.js');
 var pureDayjs = require('dayjs');
 var customParseFormat = require('dayjs/plugin/customParseFormat');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var primitives_Button = require('./primitives/Button.js');
-var chevronLeft = require('./chevron-left-BldoOh5p.js');
-var chevronRight = require('./chevron-right-0jNdwX2Q.js');
+var primitives_Field = require('./primitives/Field.js');
 var createLucideIcon = require('./createLucideIcon-D0tRgV6l.js');
 var x = require('./x-Brw3FJst.js');
+var chevronLeft = require('./chevron-left-BldoOh5p.js');
+var chevronRight = require('./chevron-right-0jNdwX2Q.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -93,6 +93,12 @@ const coerceDateValue = (value, type) => {
   }
   return toNativeDate(value);
 };
+const getInitialCalendarMonth = (value, defaultValue, type) => {
+  const initial = coerceDateValue(value ?? defaultValue, type);
+  if (initial instanceof Date) return initial;
+  if (Array.isArray(initial) && initial[0] instanceof Date) return initial[0];
+  return /* @__PURE__ */ new Date();
+};
 const normalizeToDayjsFormat = (fmt) => fmt.replace(/\byyyy\b/g, "YYYY").replace(/\byy\b/g, "YY").replace(/\bdd\b/g, "DD").replace(/\bd\b/g, "D");
 const normalizeToDateFnsFormat = (fmt) => fmt.replace(/YYYY/g, "yyyy").replace(/YY/g, "yy").replace(/DD/g, "dd").replace(/\bD\b/g, "d");
 const formatDate = (date, formatStr) => {
@@ -128,11 +134,7 @@ const applyTimeToDate = (date, time) => {
   result.setHours(time.hours, time.minutes, time.seconds ?? 0, 0);
   return result;
 };
-const applyTimezone = (date) => {
-  const dateStr = pureDayjs__default.default(date).format("YYYY-MM-DD HH:mm:ss");
-  return utils.dayjs(dateStr).toDate();
-};
-const toDayjs = (date) => utils.dayjs(date);
+const toUserTzDayjs = (date) => utils.dayjs(pureDayjs__default.default(date).format("YYYY-MM-DD HH:mm:ss"));
 const getDisplayFormat = (dateFormat, timeFormat, showTime) => {
   const fmt = showTime ? `${dateFormat} ${timeFormat}` : dateFormat;
   return normalizeToDateFnsFormat(fmt);
@@ -187,6 +189,34 @@ const isYearDisabled = (yearDate, minDate, maxDate) => {
 };
 const buildMonth = (year, month) => new Date(year, month, 1);
 const isSameMonth = (a, b) => !!a && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+const isSameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const orderRange = (from, to) => {
+  if (from && to && from.getTime() > to.getTime()) return [to, from];
+  return [from, to];
+};
+const parseGridcellDay = (target) => {
+  const el = target;
+  const cell = el?.closest('[role="gridcell"][data-day]');
+  const dayAttr = cell?.getAttribute("data-day");
+  if (!dayAttr) return null;
+  const parsed = new Date(dayAttr);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+};
+const computeRangePreview = ({
+  pendingRange,
+  committed,
+  hoveredDate,
+  rangeStep
+}) => {
+  let from = pendingRange ? pendingRange[0] : committed?.[0] ?? null;
+  let to = pendingRange ? pendingRange[1] : committed?.[1] ?? null;
+  if (hoveredDate) {
+    if (rangeStep === "from") from = hoveredDate;
+    else if (!isSameDay(from, hoveredDate)) to = hoveredDate;
+  }
+  [from, to] = orderRange(from, to);
+  return { from, to };
+};
 const decadeStartFor = (year) => Math.floor(year / 10) * 10;
 
 const TIMEZONE_OPTIONS = [
@@ -250,6 +280,136 @@ const DatePickerFooter = ({
 };
 DatePickerFooter.displayName = "DatePickerFooter";
 
+const DatePickerField = React.forwardRef(
+  ({
+    disabled,
+    error,
+    className,
+    label,
+    required,
+    helpText,
+    labelProps,
+    errorId,
+    helpTextId,
+    children
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    primitives_Field.Field,
+    {
+      ref,
+      "data-disabled": disabled || void 0,
+      "data-invalid": !!error || void 0,
+      className,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(
+          primitives_Field.FieldLabel,
+          {
+            ...labelProps,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(primitives_Field.FieldContent, { children: [
+          children,
+          !!error && /* @__PURE__ */ jsxRuntime.jsx(primitives_Field.FieldError, { id: errorId, children: error }),
+          helpText && /* @__PURE__ */ jsxRuntime.jsx(primitives_Field.FieldDescription, { id: helpTextId, children: helpText })
+        ] })
+      ]
+    }
+  )
+);
+DatePickerField.displayName = "DatePickerField";
+
+const DatePickerTrigger = React.forwardRef(
+  ({
+    containerRef,
+    inputRef,
+    disabled,
+    error,
+    hasField,
+    className,
+    triggerSizeClass,
+    inputSizeClass,
+    iconSizeClass,
+    label,
+    ariaDescribedBy,
+    placeholder,
+    inputText,
+    allowClear,
+    timezone,
+    onInputChange,
+    onInputKeyDown,
+    onInputFocus,
+    onInputBlur,
+    onClear
+  }, _ref) => /* @__PURE__ */ jsxRuntime.jsx(primitives_Popover.PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: utils$1.cn(
+        "relative flex w-full cursor-text items-center gap-2 rounded-md border border-input bg-background pe-8 ps-3",
+        "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        disabled && "cursor-not-allowed opacity-50",
+        !!error && "border-destructive ring-destructive/20 ring-3",
+        triggerSizeClass,
+        !hasField && className
+      ),
+      onClick: () => {
+        if (disabled) return;
+        inputRef.current?.focus();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar,
+          {
+            className: utils$1.cn("shrink-0 text-muted-foreground", iconSizeClass)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            disabled,
+            "aria-label": label || "Pick a date",
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": !!error || void 0,
+            placeholder,
+            value: inputText,
+            onChange: onInputChange,
+            onKeyDown: onInputKeyDown,
+            onFocus: onInputFocus,
+            onBlur: onInputBlur,
+            className: utils$1.cn(
+              "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+              "disabled:cursor-not-allowed",
+              inputSizeClass
+            )
+          }
+        ),
+        timezone && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground", children: timezone.toUpperCase() }),
+        allowClear && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onPointerDown: (e) => e.preventDefault(),
+            onClick: onClear,
+            className: utils$1.cn(
+              "absolute inset-y-0 end-2 flex items-center text-muted-foreground hover:text-foreground focus:outline-none",
+              !(inputText && !disabled) && "invisible"
+            ),
+            "aria-label": "Clear date",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsxRuntime.jsx(x.X, { className: iconSizeClass })
+          }
+        )
+      ]
+    }
+  ) })
+);
+DatePickerTrigger.displayName = "DatePickerTrigger";
+
 const MonthPicker = ({
   value,
   displayedYear,
@@ -310,6 +470,129 @@ const MonthPicker = ({
   ] });
 };
 
+const RangeCalendar = ({
+  todayDate,
+  weekStartsOn,
+  month,
+  onMonthChange,
+  selected,
+  onSelect,
+  disabled,
+  fromDate,
+  toDate,
+  onHoverIn,
+  onHoverOut
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { onMouseOver: onHoverIn, onMouseLeave: onHoverOut, children: /* @__PURE__ */ jsxRuntime.jsx(
+  primitives_Calendar.Calendar,
+  {
+    mode: "range",
+    numberOfMonths: 2,
+    captionLayout: "dropdown",
+    today: todayDate,
+    weekStartsOn,
+    className: "[&_[data-outside][data-selected=true]]:!bg-transparent [&_[data-outside][data-selected=true]]:after:!bg-transparent [&_[data-outside]_button]:!bg-transparent [&_[data-outside]_button]:!text-muted-foreground",
+    month,
+    onMonthChange,
+    selected,
+    onSelect,
+    disabled,
+    ...fromDate && { fromDate },
+    ...toDate && { toDate }
+  }
+) });
+
+const useRangePicker = ({
+  currentValue,
+  showTime,
+  needConfirm,
+  commitValue,
+  setPendingDate,
+  setOpen
+}) => {
+  const [pendingRange, setPendingRange] = React.useState(null);
+  const [rangeSelectionStep, setRangeSelectionStep] = React.useState(
+    "from"
+  );
+  const [hoveredDate, setHoveredDate] = React.useState(null);
+  const committed = currentValue ?? null;
+  const resetTransientState = React.useCallback(() => {
+    setPendingRange(null);
+    setRangeSelectionStep("from");
+    setHoveredDate(null);
+  }, []);
+  const handleRangeSelect = React.useCallback(
+    (_range, triggerDate) => {
+      if (!triggerDate) return;
+      if (rangeSelectionStep === "from" || !pendingRange?.[0]) {
+        const existingTo = pendingRange?.[1] ?? committed?.[1] ?? null;
+        const nextTo = existingTo && triggerDate <= existingTo ? existingTo : null;
+        setPendingRange([triggerDate, nextTo]);
+        setRangeSelectionStep("to");
+        return;
+      }
+      const [from, to] = orderRange(pendingRange[0], triggerDate);
+      setRangeSelectionStep("from");
+      setPendingRange(null);
+      if (showTime || needConfirm) {
+        setPendingDate(from);
+        return;
+      }
+      commitValue([from, to]);
+      setOpen(false);
+    },
+    [
+      rangeSelectionStep,
+      pendingRange,
+      committed,
+      showTime,
+      needConfirm,
+      commitValue,
+      setPendingDate,
+      setOpen
+    ]
+  );
+  const handleHoverIn = React.useCallback(
+    (e) => {
+      const parsed = parseGridcellDay(e.target);
+      if (!parsed) return;
+      if (hoveredDate && hoveredDate.getTime() === parsed.getTime()) return;
+      setHoveredDate(parsed);
+    },
+    [hoveredDate]
+  );
+  const handleHoverOut = React.useCallback(() => setHoveredDate(null), []);
+  const memoizedRangeSelected = React.useMemo(() => {
+    const { from, to } = computeRangePreview({
+      pendingRange,
+      committed,
+      hoveredDate,
+      rangeStep: rangeSelectionStep
+    });
+    if (!from && !to) return void 0;
+    return { from: from ?? void 0, to: to ?? void 0 };
+  }, [pendingRange, committed, hoveredDate, rangeSelectionStep]);
+  const getPreviewParts = React.useCallback(
+    () => computeRangePreview({
+      pendingRange,
+      committed,
+      hoveredDate,
+      rangeStep: rangeSelectionStep
+    }),
+    [pendingRange, committed, hoveredDate, rangeSelectionStep]
+  );
+  return {
+    pendingRange,
+    rangeSelectionStep,
+    hoveredDate,
+    handleRangeSelect,
+    handleHoverIn,
+    handleHoverOut,
+    memoizedRangeSelected,
+    getPreviewParts,
+    resetTransientState
+  };
+};
+
 const YearPicker = ({
   value,
   displayedYear,
@@ -425,14 +708,22 @@ const DatePicker = React.forwardRef(
       coerceDateValue(defaultValue, type) ?? null
     );
     const [calendarMonth, setCalendarMonth] = React.useState(
-      (type === "date" ? value ?? defaultValue : null) ?? /* @__PURE__ */ new Date()
-    );
-    const [rangeSelectionStep, setRangeSelectionStep] = React.useState(
-      "from"
+      () => getInitialCalendarMonth(value, defaultValue, type)
     );
     const [pendingDate, setPendingDate] = React.useState(null);
     const [pendingTime, setPendingTime] = React.useState(INITIAL_TIME_VALUE);
-    const currentValue = value !== void 0 ? coerceDateValue(value, type) : internalValue;
+    const currentValue = React.useMemo(
+      () => value !== void 0 ? coerceDateValue(value, type) : internalValue,
+      [value, type, internalValue]
+    );
+    const normalizedMinDate = React.useMemo(
+      () => toNativeDate(minDate) ?? void 0,
+      [minDate]
+    );
+    const normalizedMaxDate = React.useMemo(
+      () => toNativeDate(maxDate) ?? void 0,
+      [maxDate]
+    );
     const displayFormat = getDisplayFormat(dateFormat, timeFormat, showTime);
     const sizeConfig = SIZE_CONFIG[size];
     const maskEnabled = TimePickerPanel.isFixedWidthFormat(displayFormat);
@@ -453,13 +744,13 @@ const DatePicker = React.forwardRef(
     const calendarDisabled = React.useCallback(
       (date) => {
         if (disabledDate?.(date)) return true;
-        if (minDate && date < new Date(new Date(minDate).setHours(0, 0, 0, 0)))
+        if (normalizedMinDate && date < new Date(new Date(normalizedMinDate).setHours(0, 0, 0, 0)))
           return true;
-        if (maxDate && date > new Date(new Date(maxDate).setHours(23, 59, 59, 999)))
+        if (normalizedMaxDate && date > new Date(new Date(normalizedMaxDate).setHours(23, 59, 59, 999)))
           return true;
         return false;
       },
-      [minDate, maxDate, disabledDate]
+      [normalizedMinDate, normalizedMaxDate, disabledDate]
     );
     const getDisplayText = React.useCallback(() => {
       if (type !== "range") {
@@ -475,36 +766,73 @@ const DatePicker = React.forwardRef(
     const commitValue = (date) => {
       if (date === null) {
         setInternalValue(null);
-        onChange?.(null, "");
+        if (type === "range") {
+          onChange?.([null, null], ["", ""]);
+        } else {
+          onChange?.(null, "");
+        }
         setInputText("");
         return;
       }
+      const toSerializableDayjs = (d) => {
+        const userTzDayjs = toUserTzDayjs(d);
+        if (showTime) return userTzDayjs;
+        return userTzDayjs.hour(12).minute(0).second(0).millisecond(0);
+      };
       if (Array.isArray(date)) {
         setInternalValue(date);
-        const converted2 = [
-          applyTimezone(date[0]),
-          applyTimezone(date[1])
-        ];
         const formatted2 = [
           formatDate(date[0], displayFormat),
           formatDate(date[1], displayFormat)
         ];
-        onChange?.([toDayjs(converted2[0]), toDayjs(converted2[1])], formatted2);
+        onChange?.(
+          [toSerializableDayjs(date[0]), toSerializableDayjs(date[1])],
+          formatted2
+        );
         setInputText(`${formatted2[0]} - ${formatted2[1]}`);
         return;
       }
       setInternalValue(date);
-      const converted = applyTimezone(date);
       const formatted = formatDate(date, displayFormat);
-      onChange?.(toDayjs(converted), formatted);
+      onChange?.(toSerializableDayjs(date), formatted);
       setInputText(formatted);
     };
-    const parseAndApplyRange = (text) => {
+    const {
+      pendingRange,
+      handleRangeSelect,
+      handleHoverIn,
+      handleHoverOut,
+      memoizedRangeSelected,
+      getPreviewParts,
+      resetTransientState
+    } = useRangePicker({
+      currentValue,
+      showTime,
+      needConfirm,
+      commitValue,
+      setPendingDate,
+      setOpen
+    });
+    React.useEffect(() => {
+      if (type !== "range" || !open) return;
+      const { from, to } = getPreviewParts();
+      const fromText = from ? formatDate(from, displayFormat) : "";
+      const toText = to ? formatDate(to, displayFormat) : "";
+      setInputText(fromText || toText ? `${fromText} - ${toText}` : "");
+    }, [type, open, getPreviewParts, displayFormat]);
+    const parseAndApplyRange = (text, cursorPos) => {
       const parts = text.split(" - ");
-      if (!isDatePartComplete(parts[0] ?? "", maskEnabled, singleDateLen))
-        return;
-      const from = parseDate(parts[0], displayFormat);
-      if (from) setCalendarMonth(from);
+      const separatorIdx = text.indexOf(" - ");
+      const editingTo = separatorIdx >= 0 && cursorPos !== null && cursorPos > separatorIdx + 2;
+      if (editingTo) {
+        const to = parseDate(parts[1] ?? "", displayFormat);
+        if (to) setCalendarMonth(to);
+      } else {
+        if (!isDatePartComplete(parts[0] ?? "", maskEnabled, singleDateLen))
+          return;
+        const from = parseDate(parts[0] ?? "", displayFormat);
+        if (from) setCalendarMonth(from);
+      }
       const range = parseRangeText(
         text,
         displayFormat,
@@ -538,9 +866,20 @@ const DatePicker = React.forwardRef(
       onChange
     ]);
     const closePopover = React.useCallback(() => {
-      commitPendingOnClose();
+      if (type === "range" && pendingRange?.[0] && pendingRange?.[1]) {
+        commitValue([pendingRange[0], pendingRange[1]]);
+      } else {
+        commitPendingOnClose();
+      }
+      resetTransientState();
       setOpen(false);
-    }, [commitPendingOnClose, setOpen]);
+    }, [
+      commitPendingOnClose,
+      setOpen,
+      type,
+      pendingRange,
+      resetTransientState
+    ]);
     TimePickerPanel.useOutsideClickClose({
       enabled: open,
       containerRef,
@@ -549,7 +888,7 @@ const DatePicker = React.forwardRef(
     });
     const openPopover = () => {
       setOpen(true);
-      setRangeSelectionStep("from");
+      resetTransientState();
       const dateVal = type === "date" ? currentValue : null;
       if (!dateVal) {
         setPendingDate(null);
@@ -570,27 +909,6 @@ const DatePicker = React.forwardRef(
       commitValue(selected);
       setOpen(false);
     };
-    const handleRangeSelect = (range) => {
-      if (!range) return;
-      const from = range.from ?? null;
-      const to = range.to ?? null;
-      if (rangeSelectionStep === "from") {
-        setInternalValue([from, null]);
-        setRangeSelectionStep("to");
-        return;
-      }
-      setRangeSelectionStep("from");
-      if (from && to) {
-        if (showTime || needConfirm) {
-          setPendingDate(from);
-          return;
-        }
-        commitValue([from, to]);
-        setOpen(false);
-        return;
-      }
-      if (from) setInternalValue([from, null]);
-    };
     const handleNow = () => {
       const now = toBrowserLocalDate(/* @__PURE__ */ new Date());
       if (showTime || needConfirm) {
@@ -628,7 +946,7 @@ const DatePicker = React.forwardRef(
       }
       setInputText(text);
       if (type === "range") {
-        parseAndApplyRange(text);
+        parseAndApplyRange(text, e.target.selectionStart);
         return;
       }
       const isComplete = maskTemplate ? text.length >= maskTemplate.pattern.length : true;
@@ -719,71 +1037,33 @@ const DatePicker = React.forwardRef(
       return currentValue ?? void 0;
     };
     const triggerContent = /* @__PURE__ */ jsxRuntime.jsxs(primitives_Popover.Popover, { open, onOpenChange: trigger ? setOpen : void 0, children: [
-      trigger ? /* @__PURE__ */ jsxRuntime.jsx(primitives_Popover.PopoverTrigger, { asChild: true, children: trigger }) : /* @__PURE__ */ jsxRuntime.jsx(primitives_Popover.PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+      trigger ? /* @__PURE__ */ jsxRuntime.jsx(primitives_Popover.PopoverTrigger, { asChild: true, children: trigger }) : /* @__PURE__ */ jsxRuntime.jsx(
+        DatePickerTrigger,
         {
-          ref: containerRef,
-          className: utils$1.cn(
-            "relative flex w-full items-center gap-2 rounded-md border border-input bg-background pe-8 ps-3",
-            "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-            disabled && "cursor-not-allowed opacity-50",
-            !!error && "border-destructive ring-destructive/20 ring-3",
-            sizeConfig.trigger,
-            !hasField && className
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Calendar,
-              {
-                className: utils$1.cn(
-                  "shrink-0 text-muted-foreground",
-                  sizeConfig.icon
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "text",
-                disabled,
-                "aria-label": label || "Pick a date",
-                "aria-describedby": ariaDescribedBy,
-                "aria-invalid": !!error || void 0,
-                placeholder: placeholder ?? defaultPlaceholder,
-                value: inputText,
-                onChange: handleInputChange,
-                onKeyDown: handleInputKeyDown,
-                onFocus: () => {
-                  if (!open) openPopover();
-                },
-                onBlur: handleInputBlur,
-                className: utils$1.cn(
-                  "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
-                  "disabled:cursor-not-allowed",
-                  sizeConfig.input
-                )
-              }
-            ),
-            timezone && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground", children: timezone.toUpperCase() }),
-            allowClear && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onPointerDown: (e) => e.preventDefault(),
-                onClick: handleClear,
-                className: utils$1.cn(
-                  "absolute inset-y-0 end-2 flex items-center text-muted-foreground hover:text-foreground focus:outline-none",
-                  !(inputText && !disabled) && "invisible"
-                ),
-                "aria-label": "Clear date",
-                tabIndex: -1,
-                children: /* @__PURE__ */ jsxRuntime.jsx(x.X, { className: sizeConfig.icon })
-              }
-            )
-          ]
+          containerRef,
+          inputRef,
+          disabled,
+          error,
+          hasField,
+          className,
+          triggerSizeClass: sizeConfig.trigger,
+          inputSizeClass: sizeConfig.input,
+          iconSizeClass: sizeConfig.icon,
+          label,
+          ariaDescribedBy,
+          placeholder: placeholder ?? defaultPlaceholder,
+          inputText,
+          allowClear,
+          timezone,
+          onInputChange: handleInputChange,
+          onInputKeyDown: handleInputKeyDown,
+          onInputFocus: () => {
+            if (!open) openPopover();
+          },
+          onInputBlur: handleInputBlur,
+          onClear: handleClear
         }
-      ) }),
+      ),
       open && /* @__PURE__ */ jsxRuntime.jsxs(
         primitives_Popover.PopoverContent,
         {
@@ -806,7 +1086,7 @@ const DatePicker = React.forwardRef(
                     new Date(year, calendarMonth.getMonth(), 1)
                   ),
                   onSelect: handleGridPickerSelect,
-                  isDisabled: (date) => isMonthDisabled(date, minDate, maxDate)
+                  isDisabled: (date) => isMonthDisabled(date, normalizedMinDate, normalizedMaxDate)
                 }
               ) : type === "date" && picker === "year" ? /* @__PURE__ */ jsxRuntime.jsx(
                 YearPicker,
@@ -815,7 +1095,7 @@ const DatePicker = React.forwardRef(
                   displayedYear: calendarMonth.getFullYear(),
                   onYearChange: (year) => setCalendarMonth(new Date(year, 0, 1)),
                   onSelect: handleGridPickerSelect,
-                  isDisabled: (date) => isYearDisabled(date, minDate, maxDate)
+                  isDisabled: (date) => isYearDisabled(date, normalizedMinDate, normalizedMaxDate)
                 }
               ) : type === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
                 primitives_Calendar.Calendar,
@@ -831,28 +1111,23 @@ const DatePicker = React.forwardRef(
                   weekStartsOn,
                   classNames: weekRowHoverClassName ? { week: utils$1.cn("mt-2 flex w-full", weekRowHoverClassName) } : void 0,
                   ...weekHighlightProps,
-                  ...minDate && { fromDate: minDate },
-                  ...maxDate && { toDate: maxDate }
+                  ...normalizedMinDate && { fromDate: normalizedMinDate },
+                  ...normalizedMaxDate && { toDate: normalizedMaxDate }
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx(
-                primitives_Calendar.Calendar,
+                RangeCalendar,
                 {
-                  mode: "range",
-                  numberOfMonths: 2,
-                  captionLayout: "dropdown",
-                  today: todayDate,
+                  todayDate,
                   weekStartsOn,
-                  className: "[&_[data-outside][data-selected=true]]:!bg-transparent [&_[data-outside][data-selected=true]]:after:!bg-transparent [&_[data-outside]_button]:!bg-transparent [&_[data-outside]_button]:!text-muted-foreground",
                   month: calendarMonth,
                   onMonthChange: setCalendarMonth,
-                  selected: currentValue ? {
-                    from: currentValue[0] ?? void 0,
-                    to: currentValue[1] ?? void 0
-                  } : void 0,
+                  selected: memoizedRangeSelected,
                   onSelect: handleRangeSelect,
                   disabled: calendarDisabled,
-                  ...minDate && { fromDate: minDate },
-                  ...maxDate && { toDate: maxDate }
+                  fromDate: normalizedMinDate,
+                  toDate: normalizedMaxDate,
+                  onHoverIn: handleHoverIn,
+                  onHoverOut: handleHoverOut
                 }
               ),
               showTime && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-inline-start border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -884,30 +1159,20 @@ const DatePicker = React.forwardRef(
     if (!hasField) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, children: triggerContent });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      primitives_Field.Field,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DatePickerField,
       {
         ref,
-        "data-disabled": disabled || void 0,
-        "data-invalid": !!error || void 0,
+        disabled,
+        error,
         className,
-        children: [
-          label && /* @__PURE__ */ jsxRuntime.jsxs(
-            primitives_Field.FieldLabel,
-            {
-              ...labelProps,
-              children: [
-                label,
-                required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(primitives_Field.FieldContent, { children: [
-            triggerContent,
-            !!error && /* @__PURE__ */ jsxRuntime.jsx(primitives_Field.FieldError, { id: errorId, children: error }),
-            helpText && /* @__PURE__ */ jsxRuntime.jsx(primitives_Field.FieldDescription, { id: helpTextId, children: helpText })
-          ] })
-        ]
+        label,
+        required,
+        helpText,
+        labelProps,
+        errorId,
+        helpTextId,
+        children: triggerContent
       }
     );
   }
@@ -915,4 +1180,4 @@ const DatePicker = React.forwardRef(
 DatePicker.displayName = "DatePicker";
 
 exports.DatePicker = DatePicker;
-//# sourceMappingURL=DatePicker-BZd4rM2R.js.map
+//# sourceMappingURL=DatePicker-DpyYPJfR.js.map