@bigbinary/neeto-atoms 1.1.2 → 1.1.3

package/dist/{DatePicker-BiUWzq-V.js → DatePicker-CMlA-hNW.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { forwardRef, useRef, useState, useEffect, useId, useCallback, useMemo } from 'react';
+import React__default, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useId, useCallback, useMemo } from 'react';
 import { Calendar as Calendar$1 } from './primitives/Calendar.js';
 import { PopoverAnchor, Popover, PopoverTrigger, PopoverContent } from './primitives/Popover.js';
 import { c as cn } from './utils-BJnb9o5c.js';
@@ -200,6 +200,7 @@ const parseRangeText = (text, displayFormat, maskEnabled, singleDateLen) => {
   const to = parseDate(parts[1], displayFormat);
   return from && to ? [from, to] : null;
 };
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
 const startOfWeek = (date, weekStartsOn = 0) => {
   const d = new Date(date);
   const diff = (d.getDay() - weekStartsOn + 7) % 7;
@@ -260,10 +261,12 @@ const computeRangePreview = ({
   let from = pendingRange ? pendingRange[0] : committed?.[0] ?? null;
   let to = pendingRange ? pendingRange[1] : committed?.[1] ?? null;
   if (hoveredDate) {
-    if (rangeStep === "from" && !pendingRange?.[0]) {
-      from = hoveredDate;
-      if (to && hoveredDate.getTime() > to.getTime()) to = null;
-    } else if (rangeStep === "to" && !pendingRange?.[1] && !isSameDay(from, hoveredDate)) {
+    if (rangeStep === "from") {
+      if (!(from && to)) {
+        from = hoveredDate;
+        if (to && hoveredDate.getTime() > to.getTime()) to = null;
+      }
+    } else if (!isSameDay(from, hoveredDate)) {
       to = hoveredDate;
       if (from && hoveredDate.getTime() < from.getTime()) from = null;
     }
@@ -309,7 +312,7 @@ const DatePickerFooter = ({
   showNow = true,
   onNow,
   onOk,
-  okLabel = "OK",
+  okDisabled = false,
   className
 }) => {
   const showOkButton = showTime || needConfirm;
@@ -341,7 +344,16 @@ const DatePickerFooter = ({
             className: "me-2"
           }
         ),
-        showOkButton && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onOk, className: "text-xs", children: okLabel })
+        showOkButton && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            disabled: okDisabled,
+            onClick: onOk,
+            className: "text-xs",
+            children: "OK"
+          }
+        )
       ]
     }
   );
@@ -646,149 +658,160 @@ const parsePastedTime = (text, step = 1) => {
 };
 
 const PLACEHOLDERS = ["hh", "mm", "--"];
-const SegmentedTimeInput = ({
-  value,
-  minuteStep,
-  onChange,
-  onErrorChange,
-  invalid = false,
-  disabled = false,
-  autoFocus = false,
-  "aria-describedby": ariaDescribedBy
-}) => {
-  const { t } = useTranslation();
-  const fieldRef = useRef(null);
-  const step = minuteStep ?? 1;
-  const [time, setTime] = useState(
-    () => segmentedTimeFromValue(value, step)
-  );
-  const lastEmittedRef = useRef(value);
-  useEffect(() => {
-    if (timeValueEquals(value, lastEmittedRef.current)) return;
-    lastEmittedRef.current = value;
-    setTime(segmentedTimeFromValue(value, step));
-  }, [value]);
-  const error = getSegmentedTimeError(time);
-  useEffect(() => {
-    onErrorChange(error);
-  }, [error, onErrorChange]);
-  useEffect(() => {
-    const snapped = segmentedTimeToValue(time);
-    if (snapped && !timeValueEquals(snapped, value)) {
-      lastEmittedRef.current = snapped;
-      onChange(snapped);
-    }
-  }, []);
-  useEffect(() => {
-    if (autoFocus) fieldRef.current?.focus();
-  }, [autoFocus]);
-  const update = (next) => {
-    setTime(next);
-    const nextValue = segmentedTimeToValue(next);
-    if (!nextValue || timeValueEquals(nextValue, lastEmittedRef.current)) {
-      return;
-    }
-    lastEmittedRef.current = nextValue;
-    onChange(nextValue);
-  };
-  const consume = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  const handleKeyDown = (event) => {
-    const { key } = event;
-    if (key === "Tab") {
-      if (!event.shiftKey || time.active !== 2) return;
-      consume(event);
-      update(togglePeriod(time));
-      return;
-    }
-    if ((event.metaKey || event.ctrlKey) && key === "Backspace") {
-      consume(event);
-      update(emptySegmentedTime());
-      return;
-    }
-    if (event.metaKey || event.ctrlKey || event.altKey) return;
-    let next = null;
-    if (/^[0-9]$/.test(key)) next = typeDigit(time, key, step);
-    else if (/^[ap]$/i.test(key)) {
-      next = typePeriod(time, key.toLowerCase(), step);
-    } else if (/^m$/i.test(key))
-      next = time;
-    else if (key === ":" || key === " " || key === "ArrowRight") {
-      next = nextSegment(time, step);
-    } else if (key === "ArrowLeft") next = previousSegment(time);
-    else if (key === "ArrowUp") next = stepSegment(time, 1, step);
-    else if (key === "ArrowDown") next = stepSegment(time, -1, step);
-    else if (key === "Backspace" || key === "Delete") next = backspace(time);
-    if (!next) return;
-    consume(event);
-    update(next);
-  };
-  const handlePaste = (event) => {
-    event.preventDefault();
-    const pasted = parsePastedTime(event.clipboardData.getData("text"), step);
-    if (pasted) update({ ...segmentedTimeFromValue(pasted, step), active: 2 });
-  };
-  const handleMouseDown = (event) => {
-    if (disabled) return;
-    const segmentEl = event.target.closest(
-      "[data-segment]"
+const SegmentedTimeInput = forwardRef(
+  ({
+    value,
+    minuteStep,
+    onChange,
+    onErrorChange,
+    invalid = false,
+    disabled = false,
+    autoFocus = false,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "data-testid": dataTestId = "datepicker-time-input"
+  }, ref) => {
+    const { t } = useTranslation();
+    const fieldRef = useRef(null);
+    const step = minuteStep ?? 1;
+    const [time, setTime] = useState(
+      () => segmentedTimeFromValue(value, step)
     );
-    if (segmentEl) {
+    const lastEmittedRef = useRef(value);
+    useEffect(() => {
+      if (timeValueEquals(value, lastEmittedRef.current)) return;
+      lastEmittedRef.current = value;
+      setTime(segmentedTimeFromValue(value, step));
+    }, [value]);
+    const error = getSegmentedTimeError(time);
+    useEffect(() => {
+      onErrorChange(error);
+    }, [error, onErrorChange]);
+    useEffect(() => {
+      const snapped = segmentedTimeToValue(time);
+      if (snapped && !timeValueEquals(snapped, value)) {
+        lastEmittedRef.current = snapped;
+        onChange(snapped);
+      }
+    }, []);
+    useEffect(() => {
+      if (autoFocus) fieldRef.current?.focus();
+    }, [autoFocus]);
+    useImperativeHandle(ref, () => ({
+      focusHour: () => {
+        fieldRef.current?.focus();
+        setTime((current) => ({ ...current, active: 0 }));
+      }
+    }));
+    const update = (next) => {
+      setTime(next);
+      const nextValue = segmentedTimeToValue(next);
+      if (!nextValue || timeValueEquals(nextValue, lastEmittedRef.current)) {
+        return;
+      }
+      lastEmittedRef.current = nextValue;
+      onChange(nextValue);
+    };
+    const consume = (event) => {
       event.preventDefault();
-      fieldRef.current?.focus();
-      update(focusSegment(time, Number(segmentEl.dataset.segment), step));
-      return;
-    }
-    update(focusFirstEmptySegment(time));
-  };
-  const segmentText = (index) => {
-    const { text, done } = time[SEGMENT_KEYS[index]];
-    if (!text) return PLACEHOLDERS[index];
-    return index < 2 && !done ? `${text}_` : text;
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: fieldRef,
-      role: "group",
-      tabIndex: disabled ? -1 : 0,
-      "aria-label": t("neetoatoms.datePicker.timeField", "Time"),
-      "aria-describedby": ariaDescribedBy,
-      "aria-invalid": invalid || void 0,
-      "aria-disabled": disabled || void 0,
-      "data-testid": "datepicker-time-input",
-      className: cn(
-        "group/time flex h-9 w-full cursor-text items-center rounded-md border border-input bg-transparent px-3 text-sm tabular-nums outline-none select-none",
-        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-        invalid && "border-destructive",
-        disabled && "pointer-events-none cursor-not-allowed opacity-50"
-      ),
-      onBlur: () => update(finishActiveSegment(time, step)),
-      onKeyDown: handleKeyDown,
-      onMouseDown: handleMouseDown,
-      onPaste: handlePaste,
-      children: SEGMENT_KEYS.map((key, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-        index === 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-0.5 text-muted-foreground", children: ":" }),
-        index === 2 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-1" }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-segment": index,
-            "data-testid": `datepicker-time-${key}`,
-            className: cn(
-              "min-w-[2ch] px-0.5 text-center whitespace-pre",
-              !time[key].text && "text-muted-foreground",
-              index === time.active && "group-focus/time:shadow-[inset_0_-1.5px_0_var(--color-muted-foreground)]"
-            ),
-            children: segmentText(index)
-          }
-        )
-      ] }, key))
-    }
-  );
-};
+      event.stopPropagation();
+    };
+    const handleKeyDown = (event) => {
+      const { key } = event;
+      if (key === "Tab") {
+        if (!event.shiftKey || time.active !== 2) return;
+        consume(event);
+        update(togglePeriod(time));
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && key === "Backspace") {
+        consume(event);
+        update(emptySegmentedTime());
+        return;
+      }
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      let next = null;
+      if (/^[0-9]$/.test(key)) next = typeDigit(time, key, step);
+      else if (/^[ap]$/i.test(key)) {
+        next = typePeriod(time, key.toLowerCase(), step);
+      } else if (/^m$/i.test(key))
+        next = time;
+      else if (key === ":" || key === " " || key === "ArrowRight") {
+        next = nextSegment(time, step);
+      } else if (key === "ArrowLeft") next = previousSegment(time);
+      else if (key === "ArrowUp") next = stepSegment(time, 1, step);
+      else if (key === "ArrowDown") next = stepSegment(time, -1, step);
+      else if (key === "Backspace" || key === "Delete") next = backspace(time);
+      if (!next) return;
+      consume(event);
+      update(next);
+    };
+    const handlePaste = (event) => {
+      event.preventDefault();
+      const pasted = parsePastedTime(event.clipboardData.getData("text"), step);
+      if (pasted)
+        update({ ...segmentedTimeFromValue(pasted, step), active: 2 });
+    };
+    const handleMouseDown = (event) => {
+      if (disabled) return;
+      const segmentEl = event.target.closest(
+        "[data-segment]"
+      );
+      if (segmentEl) {
+        event.preventDefault();
+        fieldRef.current?.focus();
+        update(focusSegment(time, Number(segmentEl.dataset.segment), step));
+        return;
+      }
+      update(focusFirstEmptySegment(time));
+    };
+    const segmentText = (index) => {
+      const { text, done } = time[SEGMENT_KEYS[index]];
+      if (!text) return PLACEHOLDERS[index];
+      return index < 2 && !done ? `${text}_` : text;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: fieldRef,
+        role: "group",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": ariaLabel ?? t("neetoatoms.datePicker.timeField", "Time"),
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": invalid || void 0,
+        "aria-disabled": disabled || void 0,
+        "data-testid": dataTestId,
+        className: cn(
+          "group/time flex h-9 w-full cursor-text items-center rounded-md border border-input bg-transparent px-3 text-sm tabular-nums outline-none select-none",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          invalid && "border-destructive",
+          disabled && "pointer-events-none cursor-not-allowed opacity-50"
+        ),
+        onBlur: () => update(finishActiveSegment(time, step)),
+        onKeyDown: handleKeyDown,
+        onMouseDown: handleMouseDown,
+        onPaste: handlePaste,
+        children: SEGMENT_KEYS.map((key, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          index === 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-0.5 text-muted-foreground", children: ":" }),
+          index === 2 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-1" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-segment": index,
+              "data-testid": `datepicker-time-${key}`,
+              className: cn(
+                "min-w-[2ch] px-0.5 text-center whitespace-pre",
+                !time[key].text && "text-muted-foreground",
+                index === time.active && "group-focus/time:shadow-[inset_0_-1.5px_0_var(--color-muted-foreground)]"
+              ),
+              children: segmentText(index)
+            }
+          )
+        ] }, key))
+      }
+    );
+  }
+);
 SegmentedTimeInput.displayName = "SegmentedTimeInput";
 
 const ERROR_DEFAULTS = {
@@ -990,9 +1013,10 @@ const RangeCalendar = ({
   endMonth,
   onHoverIn,
   onHoverOut,
+  onKeyDown,
   numberOfMonths = 2,
   className
-}) => /* @__PURE__ */ jsx("div", { onMouseOver: onHoverIn, onMouseLeave: onHoverOut, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx("div", { onKeyDown, onMouseLeave: onHoverOut, onMouseOver: onHoverIn, children: /* @__PURE__ */ jsx(
   Calendar$1,
   {
     mode: "range",
@@ -1014,6 +1038,180 @@ const RangeCalendar = ({
   }
 ) });
 
+const ENDPOINT_LABELS = {
+  from: "Start",
+  to: "End"
+};
+const RangeTimeSection = ({
+  fromDateLabel,
+  toDateLabel,
+  isEndOnStartDay,
+  fromValue,
+  toValue,
+  onFromChange,
+  onToChange,
+  activeEndpoint,
+  onEndpointSelect,
+  minuteStep,
+  onErrorChange,
+  showError,
+  isOrderInvalid,
+  timezoneLabel,
+  fromTimeRef,
+  disabled = false,
+  className
+}) => {
+  const { t } = useTranslation();
+  const id = useId();
+  const hintId = `datepicker-time-hint-${id}`;
+  const orderErrorId = `datepicker-time-order-error-${id}`;
+  const [errors, setErrors] = useState({ from: null, to: null });
+  const hasError = !!(errors.from || errors.to);
+  useEffect(() => {
+    onErrorChange(hasError);
+  }, [hasError, onErrorChange]);
+  const handleErrorChange = useCallback(
+    (endpoint, error) => setErrors((previous) => ({ ...previous, [endpoint]: error })),
+    []
+  );
+  const handleFromErrorChange = useCallback(
+    (error) => handleErrorChange("from", error),
+    [handleErrorChange]
+  );
+  const handleToErrorChange = useCallback(
+    (error) => handleErrorChange("to", error),
+    [handleErrorChange]
+  );
+  const showHint = (minuteStep ?? 1) > 1;
+  const endpoints = [
+    {
+      endpoint: "from",
+      dateLabel: fromDateLabel,
+      value: fromValue,
+      onChange: onFromChange,
+      onFieldErrorChange: handleFromErrorChange
+    },
+    {
+      endpoint: "to",
+      dateLabel: isEndOnStartDay ? t("neetoatoms.datePicker.sameDay", "Same day") : toDateLabel,
+      value: toValue,
+      onChange: onToChange,
+      onFieldErrorChange: handleToErrorChange
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: endpoints.map(
+      ({ endpoint, dateLabel, value, onChange, onFieldErrorChange }) => {
+        const isActive = endpoint === activeEndpoint;
+        const endpointLabel = t(
+          `neetoatoms.datePicker.${endpoint === "from" ? "start" : "end"}`,
+          ENDPOINT_LABELS[endpoint]
+        );
+        const error = errors[endpoint];
+        const errorId = `datepicker-${endpoint}-time-error-${id}`;
+        const errorMessage = showError && error ? t(
+          `neetoatoms.datePicker.errors.${error}`,
+          ERROR_DEFAULTS[error]
+        ) : null;
+        const isInvalid = !!errorMessage || endpoint === "to" && isOrderInvalid;
+        return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": isActive,
+              tabIndex: -1,
+              "data-testid": `datepicker-${endpoint}-endpoint`,
+              disabled,
+              className: cn(
+                "flex min-w-0 items-baseline gap-1.5 rounded-sm text-start text-sm outline-none",
+                "focus-visible:ring-[3px] focus-visible:ring-ring/50",
+                isActive ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              onClick: () => onEndpointSelect(endpoint),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: endpointLabel }),
+                /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-normal text-muted-foreground", children: dateLabel || t("neetoatoms.datePicker.pickADay", "Pick a day") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SegmentedTimeInput,
+            {
+              "aria-describedby": [
+                showHint ? hintId : null,
+                errorMessage ? errorId : null,
+                endpoint === "to" && isOrderInvalid ? orderErrorId : null
+              ].filter(Boolean).join(" ") || void 0,
+              "aria-label": t(
+                `neetoatoms.datePicker.${endpoint === "from" ? "startTime" : "endTime"}`,
+                `${ENDPOINT_LABELS[endpoint]} time`
+              ),
+              "data-testid": `datepicker-${endpoint}-time-input`,
+              disabled,
+              invalid: isInvalid,
+              minuteStep,
+              ref: endpoint === "from" ? fromTimeRef : void 0,
+              value,
+              onChange,
+              onErrorChange: onFieldErrorChange
+            }
+          ),
+          errorMessage && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: errorId,
+              className: "text-xs text-destructive",
+              "data-testid": `datepicker-${endpoint}-time-error`,
+              role: "alert",
+              children: errorMessage
+            }
+          )
+        ] }, endpoint);
+      }
+    ) }),
+    showHint && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: hintId,
+        className: "text-xs text-muted-foreground",
+        "data-testid": "datepicker-time-hint",
+        children: t("neetoatoms.datePicker.timeHint", {
+          step: minuteStep,
+          first: stepExamples(minuteStep)[0],
+          second: stepExamples(minuteStep)[1],
+          defaultValue: "Only {{step}}-minute steps are allowed, like {{first}} or {{second}}."
+        })
+      }
+    ),
+    isOrderInvalid && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: orderErrorId,
+        className: "text-xs text-destructive",
+        "data-testid": "datepicker-time-order-error",
+        role: "alert",
+        children: t(
+          "neetoatoms.datePicker.errors.endBeforeStart",
+          "End time must be after the start time."
+        )
+      }
+    ),
+    timezoneLabel && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground",
+        "data-testid": "datepicker-timezone",
+        children: [
+          /* @__PURE__ */ jsx(Globe, { "aria-hidden": true, className: "size-3.5 shrink-0" }),
+          timezoneLabel
+        ]
+      }
+    )
+  ] });
+};
+RangeTimeSection.displayName = "RangeTimeSection";
+
 const useRangePicker = ({
   currentValue,
   showTime,
@@ -1022,52 +1220,49 @@ const useRangePicker = ({
   setOpen
 }) => {
   const [pendingRange, setPendingRange] = useState(null);
-  const [rangeSelectionStep, setRangeSelectionStep] = useState(
-    "from"
-  );
+  const [activeEndpoint, setActiveEndpoint] = useState("from");
   const [hoveredDate, setHoveredDate] = useState(null);
   const committed = currentValue ?? null;
   const resetTransientState = useCallback(() => {
     setPendingRange(null);
-    setRangeSelectionStep("from");
+    setActiveEndpoint("from");
     setHoveredDate(null);
   }, []);
   const handleRangeSelect = useCallback(
     (_range, triggerDate) => {
       if (!triggerDate) return;
-      if (showTime || needConfirm) {
-        if (rangeSelectionStep === "from") {
-          const existingTo = pendingRange?.[1] ?? committed?.[1] ?? null;
-          const nextTo = existingTo && triggerDate <= existingTo ? existingTo : null;
-          setPendingRange([triggerDate, nextTo]);
-        } else {
-          const existingFrom = pendingRange?.[0] ?? committed?.[0] ?? null;
-          const nextFrom = existingFrom && triggerDate >= existingFrom ? existingFrom : null;
-          setPendingRange([nextFrom, triggerDate]);
-        }
+      const from = pendingRange ? pendingRange[0] : committed?.[0] ?? null;
+      const to = pendingRange ? pendingRange[1] : committed?.[1] ?? null;
+      const isBeforeFrom = !!from && triggerDate < startOfDay(from);
+      if (activeEndpoint === "from" || !from) {
+        const nextTo = to && triggerDate <= to ? to : null;
+        setPendingRange([triggerDate, nextTo]);
+        setActiveEndpoint("to");
         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");
+      if (showTime || needConfirm) {
+        if (isBeforeFrom) {
+          setPendingRange([triggerDate, null]);
+          return;
+        }
+        setPendingRange([from, triggerDate]);
+        setActiveEndpoint("from");
         return;
       }
-      const [from, to] = orderRange(pendingRange[0], triggerDate);
-      setRangeSelectionStep("from");
-      setPendingRange(null);
-      commitValue([from, to]);
+      const [orderedFrom, orderedTo] = orderRange(from, triggerDate);
+      resetTransientState();
+      commitValue([orderedFrom, orderedTo]);
       setOpen(false);
     },
     [
-      rangeSelectionStep,
+      activeEndpoint,
       pendingRange,
       committed,
       showTime,
       needConfirm,
       commitValue,
-      setOpen
+      setOpen,
+      resetTransientState
     ]
   );
   const handleHoverIn = useCallback(
@@ -1080,29 +1275,25 @@ const useRangePicker = ({
     [hoveredDate]
   );
   const handleHoverOut = useCallback(() => setHoveredDate(null), []);
-  const memoizedRangeSelected = 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 = useCallback(
     () => computeRangePreview({
       pendingRange,
       committed,
       hoveredDate,
-      rangeStep: rangeSelectionStep
+      rangeStep: activeEndpoint
     }),
-    [pendingRange, committed, hoveredDate, rangeSelectionStep]
+    [pendingRange, committed, hoveredDate, activeEndpoint]
   );
+  const memoizedRangeSelected = useMemo(() => {
+    const { from, to } = getPreviewParts();
+    if (!from && !to) return void 0;
+    return { from: from ?? void 0, to: to ?? void 0 };
+  }, [getPreviewParts]);
   return {
     pendingRange,
-    rangeSelectionStep,
-    setRangeSelectionStep,
+    setPendingRange,
+    activeEndpoint,
+    setActiveEndpoint,
     hoveredDate,
     handleRangeSelect,
     handleHoverIn,
@@ -1180,8 +1371,12 @@ const YearPicker = ({
 const TIME_SECTION_CLASS_NAME = "w-0 min-w-full border-t border-border px-3 py-3";
 const SHOW_TIME_CALENDAR_CLASS_NAME = "[--cell-size:--spacing(8.125)]";
 const DEFAULT_ADDED_TIME = { hours: 12, minutes: 0, seconds: 0 };
-const noop = () => {
-};
+const getDefaultEndTime = (minuteStep = 1) => ({
+  hours: 23,
+  minutes: Math.floor(59 / minuteStep) * minuteStep,
+  seconds: 0
+});
+const isSameRange = (a, b) => a?.[0]?.getTime() === b?.[0]?.getTime() && a?.[1]?.getTime() === b?.[1]?.getTime();
 const DatePicker = forwardRef(
   ({
     value,
@@ -1230,6 +1425,7 @@ const DatePicker = forwardRef(
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     const cursorPosRef = useRef(null);
+    const fromTimeRef = useRef(null);
     const popoverContentId = useRef(
       `datepicker-popover-${generatedId}`
     ).current;
@@ -1346,8 +1542,9 @@ const DatePicker = forwardRef(
     };
     const {
       pendingRange,
-      rangeSelectionStep,
-      setRangeSelectionStep,
+      setPendingRange,
+      activeEndpoint,
+      setActiveEndpoint,
       handleRangeSelect,
       handleHoverIn,
       handleHoverOut,
@@ -1361,9 +1558,38 @@ const DatePicker = forwardRef(
       commitValue,
       setOpen
     });
+    const isRangeConfirm = type === "range" && (showTime || needConfirm);
+    const committedRange = type === "range" ? currentValue : null;
+    const [draftFrom, draftTo] = orderRange(
+      pendingRange ? pendingRange[0] : committedRange?.[0] ?? null,
+      pendingRange ? pendingRange[1] : committedRange?.[1] ?? null
+    );
+    const draftEnd = draftTo ?? (showTime ? draftFrom : null);
+    const isEndOnStartDay = showTime && !!draftFrom && isSameDay(draftFrom, draftEnd);
+    const draftRange = useMemo(() => {
+      if (!draftFrom || !draftEnd) return null;
+      return showTime ? [
+        applyTimeToDate(draftFrom, pendingTime),
+        applyTimeToDate(draftEnd, pendingTimeTo)
+      ] : [draftFrom, draftEnd];
+    }, [draftFrom, draftEnd, showTime, pendingTime, pendingTimeTo]);
+    const isRangeOrderInvalid = showTime && !!draftRange && draftRange[1].getTime() <= draftRange[0].getTime();
+    const applyTypedRange = (range) => {
+      const snapped = range.map(
+        (date) => showTime && minuteStep ? roundToMinuteStep(date, minuteStep) : date
+      );
+      const [from, to] = orderRange(snapped[0], snapped[1]);
+      setPendingRange([startOfDay(from), startOfDay(to)]);
+      setActiveEndpoint("from");
+      if (showTime) {
+        setPendingTime(dateToTimeValue(from));
+        setPendingTimeTo(dateToTimeValue(to));
+      }
+    };
     useEffect(() => {
       if (type !== "range" || !open) return;
-      const { from, to } = getPreviewParts();
+      const { from, to: previewTo } = getPreviewParts();
+      const to = previewTo ?? (showTime ? from : null);
       const fromWithTime = from && showTime ? applyTimeToDate(from, pendingTime) : from;
       const toWithTime = to && showTime ? applyTimeToDate(to, pendingTimeTo) : to;
       const fromText = fromWithTime ? formatDate(fromWithTime, displayFormat) : "";
@@ -1397,7 +1623,9 @@ const DatePicker = forwardRef(
         maskEnabled,
         singleDateLen
       );
-      if (range) commitValue(range);
+      if (!range) return;
+      if (isRangeConfirm) applyTypedRange(range);
+      else commitValue(range);
     };
     const commitPendingOnClose = useCallback(() => {
       const hasOkButton = showTime || needConfirm;
@@ -1427,14 +1655,9 @@ const DatePicker = forwardRef(
       hasTimeError
     ]);
     const closePopover = useCallback(() => {
-      if (type === "range" && pendingRange?.[0] && pendingRange?.[1] && !(showTime && hasTimeError)) {
-        const [fromBase, toBase] = orderRange(
-          pendingRange[0],
-          pendingRange[1]
-        );
-        const fromFinal = showTime ? applyTimeToDate(fromBase, pendingTime) : fromBase;
-        const toFinal = showTime ? applyTimeToDate(toBase, pendingTimeTo) : toBase;
-        commitValue([fromFinal, toFinal]);
+      if (type === "range") {
+        const canCommit = draftRange && !(showTime && (hasTimeError || isRangeOrderInvalid)) && !isSameRange(draftRange, committedRange);
+        if (canCommit) commitValue(draftRange);
       } else {
         commitPendingOnClose();
       }
@@ -1444,9 +1667,9 @@ const DatePicker = forwardRef(
       commitPendingOnClose,
       setOpen,
       type,
-      pendingRange,
-      pendingTime,
-      pendingTimeTo,
+      draftRange,
+      committedRange,
+      isRangeOrderInvalid,
       showTime,
       resetTransientState,
       hasTimeError
@@ -1469,7 +1692,10 @@ const DatePicker = forwardRef(
         setPendingTime(
           fromDate ? dateToTimeValue(fromDate) : INITIAL_TIME_VALUE
         );
-        setPendingTimeTo(toDate ? dateToTimeValue(toDate) : INITIAL_TIME_VALUE);
+        setPendingTimeTo(
+          toDate ? dateToTimeValue(toDate) : getDefaultEndTime(minuteStep)
+        );
+        if (fromDate) setCalendarMonth(fromDate);
         return;
       }
       const dateVal = currentValue;
@@ -1505,11 +1731,6 @@ const DatePicker = forwardRef(
       setCalendarMonth(now);
       if (type === "range") {
         handleRangeSelect(void 0, now);
-        if (showTime) {
-          const nowTime = dateToTimeValue(now);
-          if (rangeSelectionStep === "from") setPendingTime(nowTime);
-          else setPendingTimeTo(nowTime);
-        }
         return;
       }
       if (showTime || needConfirm) {
@@ -1526,30 +1747,12 @@ const DatePicker = forwardRef(
         setIsTimeErrorRequested(true);
         return;
       }
-      if (type === "range" && (showTime || needConfirm)) {
-        const committedRange = currentValue;
-        const fromValue = pendingRange?.[0] ?? committedRange?.[0] ?? null;
-        const toValue = pendingRange?.[1] ?? committedRange?.[1] ?? null;
-        if (rangeSelectionStep === "from" && fromValue) {
-          setRangeSelectionStep("to");
-          setCalendarMonth(
-            new Date(fromValue.getFullYear(), fromValue.getMonth(), 1)
-          );
-          if (showTime && pendingRange?.[0]) {
-            setPendingTimeTo(INITIAL_TIME_VALUE);
-          }
-          return;
-        }
-        if (rangeSelectionStep === "to" && fromValue && toValue) {
-          const [fromBase, toBase] = orderRange(fromValue, toValue);
-          const fromFinal = showTime ? applyTimeToDate(fromBase, pendingTime) : fromBase;
-          const toFinal = showTime ? applyTimeToDate(toBase, pendingTimeTo) : toBase;
-          commitValue([fromFinal, toFinal], showTime);
-          onOk?.([fromFinal, toFinal]);
-          resetTransientState();
-          setOpen(false);
-          return;
-        }
+      if (isRangeConfirm) {
+        if (!draftRange || isRangeOrderInvalid) return;
+        commitValue(draftRange, showTime);
+        onOk?.(draftRange);
+        resetTransientState();
+        setOpen(false);
         return;
       }
       if (pendingDate) {
@@ -1610,12 +1813,8 @@ const DatePicker = forwardRef(
           singleDateLen
         );
         if (range) {
-          commitValue(
-            showTime && minuteStep ? [
-              roundToMinuteStep(range[0], minuteStep),
-              roundToMinuteStep(range[1], minuteStep)
-            ] : range
-          );
+          const snapped = showTime && minuteStep ? range.map((date) => roundToMinuteStep(date, minuteStep)) : range;
+          commitValue(orderRange(snapped[0], snapped[1]));
         }
       } else {
         const parsed = parseDate(inputText, displayFormat);
@@ -1669,6 +1868,20 @@ const DatePicker = forwardRef(
     );
     const calendarStartMonth = normalizedMinDate ?? (calendarMonth < defaultStartMonth ? calendarMonth : defaultStartMonth);
     const calendarEndMonth = normalizedMaxDate ?? (calendarMonth > defaultEndMonth ? calendarMonth : defaultEndMonth);
+    const handleEndpointSelect = (endpoint) => {
+      setActiveEndpoint(endpoint);
+      const date = endpoint === "from" ? draftFrom : draftEnd;
+      if (!date) return;
+      const monthsAhead = (date.getFullYear() - calendarMonth.getFullYear()) * 12 + date.getMonth() - calendarMonth.getMonth();
+      if (monthsAhead < 0 || monthsAhead > 1) {
+        setCalendarMonth(new Date(date.getFullYear(), date.getMonth(), 1));
+      }
+    };
+    const handleRangeCalendarKeyDown = (e) => {
+      if (e.key !== "Tab" || e.shiftKey || !draftRange) return;
+      e.preventDefault();
+      fromTimeRef.current?.focusHour();
+    };
     const handleGridPickerSelect = (date) => {
       commitValue(date);
       setOpen(false);
@@ -1793,26 +2006,10 @@ const DatePicker = forwardRef(
                     startMonth: calendarStartMonth,
                     endMonth: calendarEndMonth
                   }
-                ) : showTime ? /* @__PURE__ */ jsx(
-                  RangeCalendar,
-                  {
-                    className: SHOW_TIME_CALENDAR_CLASS_NAME,
-                    todayDate,
-                    weekStartsOn,
-                    month: calendarMonth,
-                    onMonthChange: setCalendarMonth,
-                    selected: memoizedRangeSelected,
-                    onSelect: handleRangeSelect,
-                    disabled: calendarDisabled,
-                    startMonth: calendarStartMonth,
-                    endMonth: calendarEndMonth,
-                    onHoverIn: handleHoverIn,
-                    onHoverOut: handleHoverOut,
-                    numberOfMonths: 1
-                  }
                 ) : /* @__PURE__ */ jsx(
                   RangeCalendar,
                   {
+                    className: cn(showTime && SHOW_TIME_CALENDAR_CLASS_NAME),
                     todayDate,
                     weekStartsOn,
                     month: calendarMonth,
@@ -1823,25 +2020,31 @@ const DatePicker = forwardRef(
                     startMonth: calendarStartMonth,
                     endMonth: calendarEndMonth,
                     onHoverIn: handleHoverIn,
-                    onHoverOut: handleHoverOut
+                    onHoverOut: handleHoverOut,
+                    onKeyDown: showTime ? handleRangeCalendarKeyDown : void 0
                   }
                 ) }),
                 showTime && type === "range" && /* @__PURE__ */ jsx(
-                  TimeSection,
+                  RangeTimeSection,
                   {
+                    activeEndpoint,
                     className: TIME_SECTION_CLASS_NAME,
                     disabled,
-                    hasTime: true,
-                    optional: false,
+                    fromDateLabel: formatDate(draftFrom, dateFormat),
+                    fromTimeRef,
+                    fromValue: pendingTime,
+                    isOrderInvalid: isRangeOrderInvalid,
+                    minuteStep,
                     showError: isTimeErrorRequested,
                     timezoneLabel,
-                    value: rangeSelectionStep === "from" ? pendingTime : pendingTimeTo,
-                    onChange: rangeSelectionStep === "from" ? setPendingTime : setPendingTimeTo,
-                    minuteStep,
+                    isEndOnStartDay,
+                    toDateLabel: formatDate(draftTo, dateFormat),
+                    toValue: pendingTimeTo,
+                    onEndpointSelect: handleEndpointSelect,
                     onErrorChange: setHasTimeError,
-                    onHasTimeChange: noop
-                  },
-                  rangeSelectionStep
+                    onFromChange: setPendingTime,
+                    onToChange: setPendingTimeTo
+                  }
                 ),
                 showTime && type !== "range" && /* @__PURE__ */ jsx(
                   TimeSection,
@@ -1867,10 +2070,10 @@ const DatePicker = forwardRef(
                     timezone,
                     onTimezoneChange,
                     nowDisabled: calendarDisabled(todayDate),
-                    showNow,
+                    showNow: showNow && !(type === "range" && showTime),
                     onNow: handleNow,
-                    onOk: handleOk,
-                    okLabel: type === "range" && (showTime || needConfirm) && rangeSelectionStep === "from" ? "Next" : "OK"
+                    okDisabled: isRangeConfirm && (!draftRange || isRangeOrderInvalid),
+                    onOk: handleOk
                   }
                 )
               ]
@@ -1904,4 +2107,4 @@ const DatePicker = forwardRef(
 DatePicker.displayName = "DatePicker";
 
 export { DatePicker as D };
-//# sourceMappingURL=DatePicker-BiUWzq-V.js.map
+//# sourceMappingURL=DatePicker-CMlA-hNW.js.map