@pos-360/horizon 0.30.0 → 0.30.2

package/dist/{chunk-OWU2ABN4.mjs → chunk-HFDHLY24.mjs}

@@ -1,11 +1,11 @@
-import { cn, Label, Tooltip, Text, mergeRefs } from './chunk-EZDGMHS7.mjs';
+import { cn, Label, Tooltip, Text, TextButton, mergeRefs } from './chunk-EZL7UCWW.mjs';
 import * as React10 from 'react';
 import { useState, useEffect, useCallback } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check, X, ChevronRight, Circle, ChevronDown, ChevronUp, Search, Minus, PenLine, SlidersHorizontal, CalendarIcon, ChevronLeft, Clock } from 'lucide-react';
+import { Check, X, ChevronRight, Circle, ChevronDown, ChevronUp, Search, Minus, PenLine, SlidersHorizontal, CalendarIcon, Clock, ChevronLeft } from 'lucide-react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -15,7 +15,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { endOfDay, startOfDay, endOfWeek, startOfWeek, endOfMonth, startOfMonth, subDays, subMonths, addMonths, subYears, isBefore, isSameDay, format, isSameMonth, eachDayOfInterval, isWithinInterval } from 'date-fns';
+import { endOfDay, startOfDay, min, startOfWeek, startOfMonth, subDays, endOfWeek, endOfMonth, subMonths, addMonths, subYears, isBefore, isSameDay, format, isSameMonth, isAfter, eachDayOfInterval, isWithinInterval } from 'date-fns';
 
 var buttonVariants = cva(
   "group inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-hz-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -2099,15 +2099,16 @@ function to24Hour(hour12, period) {
 function pad(n) {
   return n.toString().padStart(2, "0");
 }
-function clamp(val, min, max) {
-  return Math.max(min, Math.min(max, val));
+function clamp(val, min2, max) {
+  return Math.max(min2, Math.min(max, val));
 }
 function TimeInput({
   value,
-  min,
+  min: min2,
   max,
   onChange,
   onComplete,
+  onDirty,
   inputRef,
   disabled = false,
   "aria-label": ariaLabel
@@ -2115,39 +2116,59 @@ function TimeInput({
   const [editValue, setEditValue] = React10.useState(null);
   const internalRef = React10.useRef(null);
   const committedRef = React10.useRef(false);
+  const pendingDigitRef = React10.useRef(null);
   const setRefs = React10.useCallback(mergeRefs(internalRef, inputRef), [inputRef]);
-  const handleChange = (e) => {
-    const raw = e.target.value.replace(/\D/g, "").slice(0, 2);
-    if (raw === "") {
-      setEditValue(raw);
-      return;
-    }
-    if (raw.length === 1) {
-      setEditValue(raw);
-      return;
-    }
+  const commitTwoDigits = (raw) => {
     const parsed = parseInt(raw, 10);
-    const clamped = clamp(parsed, min, max);
+    const clamped = clamp(parsed, min2, max);
+    pendingDigitRef.current = null;
     committedRef.current = true;
     onChange(clamped);
     setEditValue(null);
     onComplete?.();
   };
+  const handleChange = (e) => {
+    const allDigits = e.target.value.replace(/\D/g, "");
+    if (allDigits === "") {
+      setEditValue("");
+      pendingDigitRef.current = null;
+      return;
+    }
+    if (pendingDigitRef.current !== null) {
+      if (allDigits.length > 2) {
+        commitTwoDigits(pendingDigitRef.current + allDigits[allDigits.length - 1]);
+        return;
+      }
+      pendingDigitRef.current = null;
+      setEditValue("");
+      return;
+    }
+    if (allDigits.length === 1) {
+      pendingDigitRef.current = allDigits;
+      setEditValue("0" + allDigits);
+      onDirty?.();
+      return;
+    }
+    commitTwoDigits(allDigits.slice(0, 2));
+  };
   const commit = () => {
     if (committedRef.current) {
       committedRef.current = false;
+      pendingDigitRef.current = null;
       setEditValue(null);
       return;
     }
     if (editValue === null) return;
     if (editValue === "") {
+      pendingDigitRef.current = null;
       setEditValue(null);
       return;
     }
     const parsed = parseInt(editValue, 10);
     if (!isNaN(parsed)) {
-      onChange(clamp(parsed, min, max));
+      onChange(clamp(parsed, min2, max));
     }
+    pendingDigitRef.current = null;
     setEditValue(null);
   };
   const handleKeyDown = (e) => {
@@ -2155,18 +2176,21 @@ function TimeInput({
       commit();
       internalRef.current?.blur();
     } else if (e.key === "Escape") {
+      pendingDigitRef.current = null;
       setEditValue(null);
       internalRef.current?.blur();
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      const curr = value ?? min;
-      const next = curr >= max ? min : curr + 1;
+      pendingDigitRef.current = null;
+      const curr = value ?? min2;
+      const next = curr >= max ? min2 : curr + 1;
       onChange(next);
       setEditValue(pad(next));
     } else if (e.key === "ArrowDown") {
       e.preventDefault();
+      pendingDigitRef.current = null;
       const curr = value ?? max;
-      const next = curr <= min ? max : curr - 1;
+      const next = curr <= min2 ? max : curr - 1;
       onChange(next);
       setEditValue(pad(next));
     }
@@ -2182,6 +2206,7 @@ function TimeInput({
       value: editValue ?? (value === null ? "--" : pad(value)),
       onChange: handleChange,
       onFocus: (e) => {
+        pendingDigitRef.current = null;
         setEditValue("");
         requestAnimationFrame(() => e.target.select());
       },
@@ -2232,6 +2257,7 @@ function TimeField({
   hourRef,
   minuteRef,
   onMinuteComplete,
+  onDirty,
   disabled = false
 }) {
   const { hour12, period } = to12Hour(value.hour);
@@ -2270,6 +2296,7 @@ function TimeField({
           max: 12,
           onChange: handleHourChange,
           onComplete: focusMinute,
+          onDirty,
           inputRef: hourRef,
           disabled,
           "aria-label": `${label} hour`
@@ -2293,6 +2320,7 @@ function TimeField({
           max: 59,
           onChange: handleMinuteChange,
           onComplete: onMinuteComplete,
+          onDirty,
           inputRef: mergedMinuteRef,
           disabled,
           "aria-label": `${label} minute`
@@ -2309,11 +2337,14 @@ function TimeField({
     ] })
   ] });
 }
-function TimePickerColumn({ value, onChange, disabled = false }) {
-  const toHourRef = React10.useRef(null);
+function useTimeFieldState(value) {
   const fromSet = isTimeSet(value.from);
   const toSet = isTimeSet(value.to);
   const bothSet = fromSet && toSet;
+  const orphanMinutes = value.from.hour === null && value.from.minute !== null || value.to.hour === null && value.to.minute !== null;
+  const fromPartial = !fromSet && (value.from.hour !== null || value.from.minute !== null);
+  const toPartial = !toSet && (value.to.hour !== null || value.to.minute !== null);
+  const oneSideMissing = fromSet && !toSet && !toPartial || toSet && !fromSet && !fromPartial;
   const fromMinutes = (value.from.hour ?? 0) * 60 + (value.from.minute ?? 0);
   const toMinutes = (value.to.hour ?? 0) * 60 + (value.to.minute ?? 0);
   const bothEqual = fromMinutes === toMinutes;
@@ -2323,140 +2354,142 @@ function TimePickerColumn({ value, onChange, disabled = false }) {
   const durationRemaining = durationMinutes % 60;
   const showDuration = bothSet && !bothEqual;
   const durationLabel = durationRemaining > 0 ? `${durationHours}h ${durationRemaining}m window${isOvernight ? " (overnight)" : ""}` : `${durationHours}h window${isOvernight ? " (overnight)" : ""}`;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex flex-col px-2 pt-2 pb-2 gap-1",
-        "border-t border-gray-100 dark:border-neutral-700"
+  const incompleteHint = orphanMinutes ? "Please set hours for the time to take effect" : fromPartial || toPartial ? "Please complete both hour and minute fields" : oneSideMissing ? `Please set the ${fromSet ? "to" : "from"} time` : null;
+  return { showDuration, durationLabel, isOvernight, incompleteHint };
+}
+function TimePickerColumn({ value, onChange, disabled = false, onRemove, showRemove = false, onDirty }) {
+  const toHourRef = React10.useRef(null);
+  const { showDuration, durationLabel, isOvernight, incompleteHint } = useTimeFieldState(value);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-2 pt-2 pb-2 gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Clock,
+        {
+          className: cn(
+            "w-4 h-4 shrink-0",
+            disabled ? "text-gray-300 dark:text-gray-600" : "text-gray-400 dark:text-gray-500"
+          )
+        }
       ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            Clock,
-            {
-              className: cn(
-                "w-4 h-4 shrink-0",
-                disabled ? "text-gray-300 dark:text-gray-600" : "text-gray-400 dark:text-gray-500"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "text-xs font-semibold uppercase tracking-wider",
-                disabled ? "text-gray-300 dark:text-gray-600" : "text-gray-400 dark:text-gray-500"
-              ),
-              children: "Time"
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-gray-400 dark:text-gray-600 tracking-wide", children: "(Optional)" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pl-6", children: [
-          /* @__PURE__ */ jsx(
-            TimeField,
-            {
-              label: "From",
-              value: value.from,
-              onChange: (from) => onChange({ ...value, from }),
-              onMinuteComplete: () => toHourRef.current?.focus(),
-              disabled
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TimeField,
-            {
-              label: "To",
-              value: value.to,
-              onChange: (to) => onChange({ ...value, to }),
-              hourRef: toHourRef,
-              disabled
-            }
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-xs font-semibold uppercase tracking-wider",
+            disabled ? "text-gray-300 dark:text-gray-600" : "text-gray-400 dark:text-gray-500"
           ),
-          showDuration && /* @__PURE__ */ jsx("span", { className: cn(
-            "text-[10px] font-medium",
-            isOvernight ? "text-amber-500 dark:text-amber-400" : "text-gray-400 dark:text-gray-500"
-          ), children: durationLabel })
-        ] })
-      ]
-    }
-  );
+          children: "Time"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-gray-400 dark:text-gray-600 tracking-wide", children: "(Optional)" }),
+      showRemove && onRemove && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(
+        TextButton,
+        {
+          variant: "danger",
+          onClick: onRemove,
+          size: "sm",
+          className: "!text-[0.625rem]",
+          children: "Remove"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pl-6", children: [
+      /* @__PURE__ */ jsx(
+        TimeField,
+        {
+          label: "From",
+          value: value.from,
+          onChange: (from) => onChange({ ...value, from }),
+          onMinuteComplete: () => toHourRef.current?.focus(),
+          onDirty,
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TimeField,
+        {
+          label: "To",
+          value: value.to,
+          onChange: (to) => onChange({ ...value, to }),
+          hourRef: toHourRef,
+          onDirty,
+          disabled
+        }
+      ),
+      showDuration && /* @__PURE__ */ jsx("span", { className: cn(
+        "text-[10px] font-medium",
+        isOvernight ? "text-amber-500 dark:text-amber-400" : "text-gray-400 dark:text-gray-500"
+      ), children: durationLabel }),
+      incompleteHint && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-amber-500 dark:text-amber-400", children: incompleteHint })
+    ] })
+  ] });
 }
-function TimePickerRow({ value, onChange, disabled = false }) {
+function TimePickerRow({ value, onChange, disabled = false, onRemove, showRemove = false, onDirty }) {
   const toHourRef = React10.useRef(null);
-  const fromSet = isTimeSet(value.from);
-  const toSet = isTimeSet(value.to);
-  const bothSet = fromSet && toSet;
-  const fromMinutes = (value.from.hour ?? 0) * 60 + (value.from.minute ?? 0);
-  const toMinutes = (value.to.hour ?? 0) * 60 + (value.to.minute ?? 0);
-  const bothEqual = fromMinutes === toMinutes;
-  const isOvernight = bothSet && toMinutes < fromMinutes;
-  const durationMinutes = bothSet && !bothEqual ? isOvernight ? 24 * 60 - fromMinutes + toMinutes : toMinutes - fromMinutes : 0;
-  const durationHours = Math.floor(durationMinutes / 60);
-  const durationRemaining = durationMinutes % 60;
-  const showDuration = bothSet && !bothEqual;
-  const durationLabel = durationRemaining > 0 ? `${durationHours}h ${durationRemaining}m window${isOvernight ? " (overnight)" : ""}` : `${durationHours}h window${isOvernight ? " (overnight)" : ""}`;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-col px-4 pt-2 pb-3 gap-1",
-        "border-t border-gray-100 dark:border-neutral-700"
+  const { showDuration, durationLabel, isOvernight, incompleteHint } = useTimeFieldState(value);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col px-4 pt-2 pb-3 gap-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        Clock,
+        {
+          className: cn(
+            "w-4 h-4 shrink-0",
+            disabled ? "text-gray-300 dark:text-gray-600" : "text-gray-400 dark:text-gray-500"
+          )
+        }
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ jsx(
-            Clock,
-            {
-              className: cn(
-                "w-4 h-4 shrink-0",
-                disabled ? "text-gray-300 dark:text-gray-600" : "text-gray-400 dark:text-gray-500"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-gray-300 dark:text-gray-600 tracking-wide", children: "OPT" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5", children: [
-            /* @__PURE__ */ jsx(
-              TimeField,
-              {
-                label: "From",
-                value: value.from,
-                onChange: (from) => onChange({ ...value, from }),
-                onMinuteComplete: () => toHourRef.current?.focus(),
-                disabled
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "w-4 h-px",
-                  disabled ? "bg-gray-200 dark:bg-neutral-700" : "bg-gray-300 dark:bg-neutral-600"
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TimeField,
-              {
-                label: "To",
-                value: value.to,
-                onChange: (to) => onChange({ ...value, to }),
-                hourRef: toHourRef,
-                disabled
-              }
+      /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-gray-300 dark:text-gray-600 tracking-wide", children: "OPT" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          TimeField,
+          {
+            label: "From",
+            value: value.from,
+            onChange: (from) => onChange({ ...value, from }),
+            onMinuteComplete: () => toHourRef.current?.focus(),
+            onDirty,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-4 h-px",
+              disabled ? "bg-gray-200 dark:bg-neutral-700" : "bg-gray-300 dark:bg-neutral-600"
             )
-          ] }),
-          showDuration && /* @__PURE__ */ jsx("span", { className: cn(
-            "text-[10px] font-medium pl-0.5",
-            isOvernight ? "text-amber-500 dark:text-amber-400" : "text-gray-400 dark:text-gray-500"
-          ), children: durationLabel })
-        ] })
-      ] })
-    }
-  );
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimeField,
+          {
+            label: "To",
+            value: value.to,
+            onChange: (to) => onChange({ ...value, to }),
+            hourRef: toHourRef,
+            onDirty,
+            disabled
+          }
+        ),
+        showRemove && onRemove && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: onRemove,
+            className: "text-[0.625rem] border border-red-100 dark:border-red-700 rounded-md px-2 py-1 h-8 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300 transition-colors",
+            children: "Remove"
+          }
+        )
+      ] }),
+      showDuration && /* @__PURE__ */ jsx("span", { className: cn(
+        "text-[10px] font-medium pl-0.5",
+        isOvernight ? "text-amber-500 dark:text-amber-400" : "text-gray-400 dark:text-gray-500"
+      ), children: durationLabel }),
+      incompleteHint && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium pl-0.5 text-amber-500 dark:text-amber-400", children: incompleteHint })
+    ] })
+  ] }) });
 }
 var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 function getCalendarDays(month) {
@@ -2539,9 +2572,14 @@ function CalendarMonth({
         onMouseLeave: () => onDayHover(void 0),
         children: days.map((day, idx) => {
           const outside = !isSameMonth(day, month);
-          const inRange = !outside && isInRange(day);
-          const rangeStart = !outside && isRangeStart(day);
-          const rangeEnd = !outside && isRangeEnd(day);
+          if (outside) {
+            return /* @__PURE__ */ jsx("div", { className: "h-9" }, idx);
+          }
+          const isFuture = isAfter(startOfDay(day), startOfDay(today));
+          const disabled = isFuture;
+          const inRange = !disabled && isInRange(day);
+          const rangeStart = !disabled && isRangeStart(day);
+          const rangeEnd = !disabled && isRangeEnd(day);
           const isToday = isSameDay(day, today);
           return /* @__PURE__ */ jsx(
             "div",
@@ -2556,16 +2594,17 @@ function CalendarMonth({
               children: /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: () => !outside && onDayClick(day),
-                  onMouseEnter: () => !outside && onDayHover(day),
-                  tabIndex: outside ? -1 : 0,
+                  onClick: () => !disabled && onDayClick(day),
+                  onMouseEnter: () => !disabled && onDayHover(day),
+                  tabIndex: disabled ? -1 : 0,
+                  disabled,
                   className: cn(
                     "w-8 h-8 rounded-full text-sm flex items-center justify-center transition-colors",
-                    outside && "text-gray-300 dark:text-gray-600 pointer-events-none",
-                    !outside && !rangeStart && !rangeEnd && "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-neutral-700",
-                    !outside && inRange && !rangeStart && !rangeEnd && "text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50",
+                    isFuture && "text-gray-300 dark:text-gray-600 pointer-events-none cursor-not-allowed",
+                    !disabled && !rangeStart && !rangeEnd && "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-neutral-700",
+                    !disabled && inRange && !rangeStart && !rangeEnd && "text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50",
                     (rangeStart || rangeEnd) && "bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-500",
-                    isToday && !rangeStart && !rangeEnd && !outside && "font-bold"
+                    isToday && !rangeStart && !rangeEnd && !disabled && "font-bold"
                   ),
                   children: format(day, "d")
                 }
@@ -2578,6 +2617,167 @@ function CalendarMonth({
     )
   ] });
 }
+function useDateRangePicker({
+  value,
+  onChange,
+  showTimePicker = false,
+  timeValue,
+  onTimeChange
+}) {
+  const [open, setOpen] = React10.useState(false);
+  const [internalRange, setInternalRange] = React10.useState({
+    from: void 0,
+    to: void 0
+  });
+  const [draft, setDraft] = React10.useState({
+    from: void 0,
+    to: void 0
+  });
+  const [hoverDate, setHoverDate] = React10.useState();
+  const [viewMonth, setViewMonth] = React10.useState(
+    () => startOfMonth(value?.from ?? /* @__PURE__ */ new Date())
+  );
+  const [activePreset, setActivePreset] = React10.useState();
+  const [committedInternalTime, setCommittedInternalTime] = React10.useState(DEFAULT_TIME_RANGE);
+  const [draftTime, setDraftTime] = React10.useState(DEFAULT_TIME_RANGE);
+  const [timeExpanded, setTimeExpanded] = React10.useState(false);
+  const [timeDirty, setTimeDirty] = React10.useState(false);
+  const committedRange = value ?? internalRange;
+  const committedTime = timeValue ?? committedInternalTime;
+  const timeVisible = !!(draft.from && draft.to);
+  const hasAnyTimeInput = timeDirty || draftTime.from.hour !== null || draftTime.from.minute !== null || draftTime.to.hour !== null || draftTime.to.minute !== null;
+  const isTimeComplete2 = draftTime.from.hour !== null && draftTime.from.minute !== null && draftTime.to.hour !== null && draftTime.to.minute !== null;
+  const hasPartialTime = showTimePicker && timeExpanded && !isTimeComplete2;
+  const canClear = !!(draft.from || committedRange.from);
+  const canApply = !(draft.from && !draft.to) && !!(draft.from || committedRange.from) && !hasPartialTime;
+  const resetTime = React10.useCallback(() => {
+    setDraftTime(DEFAULT_TIME_RANGE);
+    setTimeExpanded(false);
+    setTimeDirty(false);
+  }, []);
+  const handleTimeChange = React10.useCallback((newTime) => {
+    setDraftTime(newTime);
+  }, []);
+  const handleOpenChange = React10.useCallback(
+    (newOpen) => {
+      if (newOpen) {
+        setDraft(committedRange);
+        if (committedRange.from)
+          setViewMonth(startOfMonth(committedRange.from));
+        setDraftTime(committedTime);
+        const hasExistingTime = committedTime.from.hour !== null || committedTime.from.minute !== null || committedTime.to.hour !== null || committedTime.to.minute !== null;
+        setTimeExpanded(hasExistingTime);
+        setTimeDirty(false);
+      }
+      setOpen(newOpen);
+    },
+    [committedRange, committedTime]
+  );
+  const handleDayClick = React10.useCallback(
+    (date) => {
+      const { from, to } = draft;
+      if (!from || from && to) {
+        setDraft({ from: date, to: void 0 });
+        setActivePreset(void 0);
+        if (showTimePicker && timeExpanded) {
+          resetTime();
+        }
+        return;
+      }
+      const [start, end] = isBefore(from, date) ? [from, date] : [date, from];
+      setDraft({ from: start, to: end });
+      setHoverDate(void 0);
+    },
+    [draft, showTimePicker, timeExpanded, resetTime]
+  );
+  const handlePreset = React10.useCallback(
+    (preset) => {
+      const newRange = preset.getRange();
+      setDraft(newRange);
+      setActivePreset(preset.label);
+      if (newRange.from) setViewMonth(startOfMonth(newRange.from));
+      if (showTimePicker) resetTime();
+    },
+    [showTimePicker, resetTime]
+  );
+  const handleApply = React10.useCallback(() => {
+    if (draft.from && !draft.to) return;
+    const newRange = draft.from && draft.to ? draft : void 0;
+    const rangeChanged = newRange?.from?.getTime() !== committedRange.from?.getTime() || newRange?.to?.getTime() !== committedRange.to?.getTime();
+    const timeChanged = draftTime.from.hour !== committedTime.from.hour || draftTime.from.minute !== committedTime.from.minute || draftTime.to.hour !== committedTime.to.hour || draftTime.to.minute !== committedTime.to.minute;
+    if (rangeChanged) {
+      if (onChange) onChange(newRange);
+      else setInternalRange(newRange ?? { from: void 0, to: void 0 });
+    }
+    if (timeChanged) {
+      if (onTimeChange) onTimeChange(draftTime);
+      else setCommittedInternalTime(draftTime);
+    }
+    setOpen(false);
+  }, [draft, onChange, committedRange, draftTime, committedTime, onTimeChange]);
+  const handleClear = React10.useCallback(() => {
+    setDraft({ from: void 0, to: void 0 });
+    setActivePreset(void 0);
+    if (showTimePicker) resetTime();
+  }, [showTimePicker, resetTime]);
+  const expandTime = React10.useCallback(() => {
+    setTimeExpanded(true);
+  }, []);
+  const markTimeDirty = React10.useCallback(() => {
+    setTimeDirty(true);
+  }, []);
+  return {
+    open,
+    draft,
+    hoverDate,
+    viewMonth,
+    activePreset,
+    committedRange,
+    committedTime,
+    draftTime,
+    timeExpanded,
+    timeVisible,
+    hasAnyTimeInput,
+    canClear,
+    canApply,
+    showTimePicker,
+    setHoverDate,
+    setViewMonth,
+    handleTimeChange,
+    handleOpenChange,
+    handleDayClick,
+    handlePreset,
+    handleApply,
+    handleClear,
+    resetTime,
+    expandTime,
+    markTimeDirty
+  };
+}
+function formatTime(hour, minute) {
+  const period = hour >= 12 ? "PM" : "AM";
+  const h = hour % 12 || 12;
+  const m = minute.toString().padStart(2, "0");
+  return `${h}:${m} ${period}`;
+}
+function isTimeComplete(time) {
+  return time.from.hour !== null && time.from.minute !== null && time.to.hour !== null && time.to.minute !== null;
+}
+function formatDateRange(range, placeholder, time) {
+  if (!range?.from) return placeholder;
+  const hasTime = time && isTimeComplete(time);
+  if (!range.to || isSameDay(range.from, range.to)) {
+    const dateStr = format(range.from, "MMM d, yyyy");
+    return hasTime ? `${dateStr} ${formatTime(time.from.hour, time.from.minute)} \u2013 ${formatTime(time.to.hour, time.to.minute)}` : dateStr;
+  }
+  const sameYear = range.from.getFullYear() === range.to.getFullYear();
+  const fromDate = format(range.from, sameYear ? "MMM d" : "MMM d, yyyy");
+  const toDate = format(range.to, "MMM d, yyyy");
+  if (hasTime) {
+    return `${fromDate} ${formatTime(time.from.hour, time.from.minute)} \u2013 ${toDate} ${formatTime(time.to.hour, time.to.minute)}`;
+  }
+  return `${fromDate} \u2013 ${toDate}`;
+}
 var DEFAULT_PRESETS = [
   {
     label: "Today",
@@ -2597,7 +2797,7 @@ var DEFAULT_PRESETS = [
     label: "This Week",
     getRange: () => ({
       from: startOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 0 }),
-      to: endOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 0 })
+      to: min([endOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 0 }), endOfDay(/* @__PURE__ */ new Date())])
     })
   },
   {
@@ -2614,7 +2814,7 @@ var DEFAULT_PRESETS = [
     label: "This Month",
     getRange: () => ({
       from: startOfMonth(/* @__PURE__ */ new Date()),
-      to: endOfMonth(/* @__PURE__ */ new Date())
+      to: min([endOfMonth(/* @__PURE__ */ new Date()), endOfDay(/* @__PURE__ */ new Date())])
     })
   },
   {
@@ -2625,26 +2825,6 @@ var DEFAULT_PRESETS = [
     }
   }
 ];
-function formatTime(tv) {
-  if (tv.hour === null || tv.minute === null) return "--:--";
-  const period = tv.hour >= 12 ? "PM" : "AM";
-  const h = tv.hour % 12 || 12;
-  const m = tv.minute.toString().padStart(2, "0");
-  return `${h}:${m} ${period}`;
-}
-function formatDateRange(range, placeholder, time) {
-  if (!range?.from) return placeholder;
-  const timeActive = time && time.from.hour !== null && time.to.hour !== null;
-  const timeSuffix = timeActive ? ` ${formatTime(time.from)} \u2013 ${formatTime(time.to)}` : "";
-  if (!range.to || isSameDay(range.from, range.to)) {
-    return format(range.from, "MMM d, yyyy") + timeSuffix;
-  }
-  const sameYear = range.from.getFullYear() === range.to.getFullYear();
-  if (sameYear) {
-    return `${format(range.from, "MMM d")} \u2013 ${format(range.to, "MMM d, yyyy")}${timeSuffix}`;
-  }
-  return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}${timeSuffix}`;
-}
 function DateRangePicker({
   value,
   onChange,
@@ -2658,77 +2838,15 @@ function DateRangePicker({
   timeValue,
   onTimeChange
 }) {
-  const [open, setOpen] = React10.useState(false);
-  const [internalRange, setInternalRange] = React10.useState({
-    from: void 0,
-    to: void 0
+  const picker = useDateRangePicker({
+    value,
+    onChange,
+    showTimePicker,
+    timeValue,
+    onTimeChange
   });
-  const [draft, setDraft] = React10.useState({
-    from: void 0,
-    to: void 0
-  });
-  const [hoverDate, setHoverDate] = React10.useState();
-  const [leftMonth, setLeftMonth] = React10.useState(
-    () => startOfMonth(value?.from ?? /* @__PURE__ */ new Date())
-  );
-  const [activePreset, setActivePreset] = React10.useState();
-  const [internalTime, setInternalTime] = React10.useState(DEFAULT_TIME_RANGE);
-  const committedRange = value ?? internalRange;
-  const currentTime = timeValue ?? internalTime;
-  const handleTimeChange = (newTime) => {
-    if (onTimeChange) onTimeChange(newTime);
-    else setInternalTime(newTime);
-  };
-  const timeVisible = !!(draft.from && draft.to);
-  const handleOpenChange = (newOpen) => {
-    if (newOpen) {
-      setDraft(committedRange);
-      if (committedRange.from) setLeftMonth(startOfMonth(committedRange.from));
-      if (!onTimeChange) setInternalTime(currentTime);
-    }
-    setOpen(newOpen);
-  };
-  const handleDayClick = (date) => {
-    const { from, to } = draft;
-    if (!from || from && to) {
-      setDraft({ from: date, to: void 0 });
-      setActivePreset(void 0);
-      return;
-    }
-    const [start, end] = isBefore(from, date) ? [from, date] : [date, from];
-    setDraft({ from: start, to: end });
-    setHoverDate(void 0);
-  };
-  const handlePreset = (preset) => {
-    const newRange = preset.getRange();
-    if (showTimePicker) {
-      setDraft(newRange);
-      setActivePreset(preset.label);
-      if (newRange.from) setLeftMonth(startOfMonth(newRange.from));
-    } else {
-      if (onChange) onChange(newRange);
-      else setInternalRange(newRange);
-      setActivePreset(preset.label);
-      if (newRange.from) setLeftMonth(startOfMonth(newRange.from));
-      setOpen(false);
-    }
-  };
-  const handleApply = () => {
-    if (draft.from && !draft.to) return;
-    const newRange = draft.from && draft.to ? draft : void 0;
-    if (onChange) onChange(newRange);
-    else setInternalRange(newRange ?? { from: void 0, to: void 0 });
-    setOpen(false);
-  };
-  const handleClear = () => {
-    setDraft({ from: void 0, to: void 0 });
-    setActivePreset(void 0);
-    if (showTimePicker) handleTimeChange(DEFAULT_TIME_RANGE);
-  };
-  const canClear = !!(draft.from || committedRange.from);
-  const canApply = !(draft.from && !draft.to) && !!(draft.from || committedRange.from);
-  const rightMonth = addMonths(leftMonth, 1);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+  const rightMonth = addMonths(picker.viewMonth, 1);
+  return /* @__PURE__ */ jsxs(Popover, { open: picker.open, onOpenChange: picker.handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -2738,15 +2856,15 @@ function DateRangePicker({
           "hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
           "dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700",
           "disabled:pointer-events-none disabled:opacity-50",
-          committedRange.from ? "text-gray-900 dark:text-gray-100" : "text-gray-400 dark:text-gray-500",
+          picker.committedRange.from ? "text-gray-900 dark:text-gray-100" : "text-gray-400 dark:text-gray-500",
           className
         ),
         children: [
           /* @__PURE__ */ jsx(CalendarIcon, { className: "w-4 h-4 shrink-0 text-gray-400 dark:text-gray-500" }),
           /* @__PURE__ */ jsx("span", { children: formatDateRange(
-            committedRange,
+            picker.committedRange,
             placeholder,
-            showTimePicker ? currentTime : void 0
+            showTimePicker ? picker.committedTime : void 0
           ) })
         ]
       }
@@ -2758,10 +2876,10 @@ function DateRangePicker({
         section.options.map((preset) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => handlePreset(preset),
+            onClick: () => picker.handlePreset(preset),
             className: cn(
               "w-full text-left px-2 py-1.5 rounded-md text-sm transition-colors",
-              activePreset === preset.label ? "bg-blue-50 text-blue-600 font-medium dark:bg-blue-950/50 dark:text-blue-400" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700"
+              picker.activePreset === preset.label ? "bg-blue-50 text-blue-600 font-medium dark:bg-blue-950/50 dark:text-blue-400" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700"
             ),
             children: preset.label
           },
@@ -2773,12 +2891,12 @@ function DateRangePicker({
           /* @__PURE__ */ jsx(
             CalendarMonth,
             {
-              month: leftMonth,
-              range: draft,
-              hoverDate,
-              onDayClick: handleDayClick,
-              onDayHover: setHoverDate,
-              onPrevMonth: () => setLeftMonth(subMonths(leftMonth, 1)),
+              month: picker.viewMonth,
+              range: picker.draft,
+              hoverDate: picker.hoverDate,
+              onDayClick: picker.handleDayClick,
+              onDayHover: picker.setHoverDate,
+              onPrevMonth: () => picker.setViewMonth(subMonths(picker.viewMonth, 1)),
               showPrevNav: true,
               showNextNav: false
             }
@@ -2788,46 +2906,72 @@ function DateRangePicker({
             CalendarMonth,
             {
               month: rightMonth,
-              range: draft,
-              hoverDate,
-              onDayClick: handleDayClick,
-              onDayHover: setHoverDate,
-              onNextMonth: () => setLeftMonth(addMonths(leftMonth, 1)),
+              range: picker.draft,
+              hoverDate: picker.hoverDate,
+              onDayClick: picker.handleDayClick,
+              onDayHover: picker.setHoverDate,
+              onNextMonth: () => picker.setViewMonth(addMonths(picker.viewMonth, 1)),
               showPrevNav: false,
               showNextNav: true
             }
           )
         ] }),
-        showTimePicker && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: timeVisible && /* @__PURE__ */ jsx(
+        showTimePicker && /* @__PURE__ */ jsx(
           motion.div,
           {
-            initial: { height: 0, opacity: 0 },
-            animate: { height: "auto", opacity: 1 },
-            exit: { height: 0, opacity: 0 },
-            transition: {
-              height: { type: "spring", stiffness: 400, damping: 30, mass: 0.8 },
-              opacity: { duration: 0.2 }
-            },
-            className: "overflow-hidden",
-            children: /* @__PURE__ */ jsx(
-              TimePickerRow,
+            layout: true,
+            transition: { layout: { duration: 0.2, ease: "easeInOut" } },
+            className: "border-t border-gray-100 dark:border-neutral-700",
+            children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: picker.timeVisible && !picker.timeExpanded ? /* @__PURE__ */ jsx(
+              motion.div,
               {
-                value: currentTime,
-                onChange: handleTimeChange
-              }
-            )
-          },
-          "time-picker"
-        ) }),
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: { duration: 0.12 },
+                children: /* @__PURE__ */ jsx("div", { className: "px-4 py-2 ", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    onClick: picker.expandTime,
+                    leadingDecorator: /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5" }),
+                    className: "w-full rounded-md h-9",
+                    children: "Add time range"
+                  }
+                ) })
+              },
+              "add-time-btn"
+            ) : picker.timeVisible && picker.timeExpanded ? /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: { duration: 0.12 },
+                children: /* @__PURE__ */ jsx(
+                  TimePickerRow,
+                  {
+                    value: picker.draftTime,
+                    onChange: picker.handleTimeChange,
+                    onRemove: picker.resetTime,
+                    showRemove: picker.timeExpanded,
+                    onDirty: picker.markTimeDirty
+                  }
+                )
+              },
+              "time-picker"
+            ) : null })
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3 border-t border-gray-100 dark:border-neutral-700", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: handleClear,
-              disabled: !canClear,
+              onClick: picker.handleClear,
+              disabled: !picker.canClear,
               className: cn(
                 "px-3 py-1.5 rounded-md text-sm transition-colors",
-                canClear ? "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700" : "text-gray-300 dark:text-gray-600 cursor-not-allowed"
+                picker.canClear ? "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700" : "text-gray-300 dark:text-gray-600 cursor-not-allowed"
               ),
               children: "Clear"
             }
@@ -2835,11 +2979,11 @@ function DateRangePicker({
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: handleApply,
-              disabled: !canApply,
+              onClick: picker.handleApply,
+              disabled: !picker.canApply,
               className: cn(
                 "px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
-                canApply ? "bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-500" : "bg-blue-100 text-blue-300 cursor-not-allowed dark:bg-blue-950/30 dark:text-blue-800"
+                picker.canApply ? "bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-500" : "bg-blue-100 text-blue-300 cursor-not-allowed dark:bg-blue-950/30 dark:text-blue-800"
               ),
               children: "Apply"
             }
@@ -2849,30 +2993,6 @@ function DateRangePicker({
     ] }) })
   ] });
 }
-function formatTime2(tv) {
-  if (tv.hour === null || tv.minute === null) return "";
-  const period = tv.hour >= 12 ? "PM" : "AM";
-  const h = tv.hour % 12 || 12;
-  const m = tv.minute.toString().padStart(2, "0");
-  return `${h}:${m} ${period}`;
-}
-function formatDateWithTime(date, dateFmt, time) {
-  const dateStr = format(date, dateFmt);
-  const timeStr = time ? formatTime2(time) : "";
-  return timeStr ? `${dateStr}, ${timeStr}` : dateStr;
-}
-function formatDateRange2(range, placeholder, time) {
-  if (!range?.from) return placeholder;
-  const hasTime = time && time.from.hour !== null && time.to.hour !== null;
-  if (!range.to || isSameDay(range.from, range.to)) {
-    return formatDateWithTime(range.from, "MMMM d, yyyy", hasTime ? time.from : void 0);
-  }
-  const sameYear = range.from.getFullYear() === range.to.getFullYear();
-  const fromFmt = sameYear ? "MMMM d" : "MMMM d, yyyy";
-  const fromStr = formatDateWithTime(range.from, fromFmt, hasTime ? time.from : void 0);
-  const toStr = formatDateWithTime(range.to, "MMMM d, yyyy", hasTime ? time.to : void 0);
-  return `${fromStr} \u2013 ${toStr}`;
-}
 function DateRangePickerMobile({
   label,
   value,
@@ -2886,78 +3006,16 @@ function DateRangePickerMobile({
   timeValue,
   onTimeChange
 }) {
-  const [open, setOpen] = React10.useState(false);
-  const [internalRange, setInternalRange] = React10.useState({
-    from: void 0,
-    to: void 0
-  });
-  const [draft, setDraft] = React10.useState({
-    from: void 0,
-    to: void 0
+  const picker = useDateRangePicker({
+    value,
+    onChange,
+    showTimePicker,
+    timeValue,
+    onTimeChange
   });
-  const [hoverDate, setHoverDate] = React10.useState();
-  const [viewMonth, setViewMonth] = React10.useState(
-    () => startOfMonth(value?.from ?? /* @__PURE__ */ new Date())
-  );
-  const [activePreset, setActivePreset] = React10.useState();
-  const [internalTime, setInternalTime] = React10.useState(DEFAULT_TIME_RANGE);
-  const committedRange = value ?? internalRange;
-  const currentTime = timeValue ?? internalTime;
-  const handleTimeChange = (newTime) => {
-    if (onTimeChange) onTimeChange(newTime);
-    else setInternalTime(newTime);
-  };
-  const timeVisible = !!(draft.from && draft.to);
-  const handleOpenChange = (newOpen) => {
-    if (newOpen) {
-      setDraft(committedRange);
-      if (committedRange.from) setViewMonth(startOfMonth(committedRange.from));
-      if (!onTimeChange) setInternalTime(currentTime);
-    }
-    setOpen(newOpen);
-  };
-  const handleDayClick = (date) => {
-    const { from, to } = draft;
-    if (!from || from && to) {
-      setDraft({ from: date, to: void 0 });
-      setActivePreset(void 0);
-      return;
-    }
-    const [start, end] = isBefore(from, date) ? [from, date] : [date, from];
-    setDraft({ from: start, to: end });
-    setHoverDate(void 0);
-  };
-  const handlePreset = (preset) => {
-    const newRange = preset.getRange();
-    if (showTimePicker) {
-      setDraft(newRange);
-      setActivePreset(preset.label);
-      if (newRange.from) setViewMonth(startOfMonth(newRange.from));
-    } else {
-      if (onChange) onChange(newRange);
-      else setInternalRange(newRange);
-      setActivePreset(preset.label);
-      if (newRange.from) setViewMonth(startOfMonth(newRange.from));
-      setOpen(false);
-    }
-  };
-  const handleApply = () => {
-    if (draft.from && !draft.to) return;
-    const newRange = draft.from && draft.to ? draft : void 0;
-    if (onChange) onChange(newRange);
-    else setInternalRange(newRange ?? { from: void 0, to: void 0 });
-    setOpen(false);
-  };
-  const handleClear = () => {
-    setDraft({ from: void 0, to: void 0 });
-    setActivePreset(void 0);
-    if (showTimePicker) handleTimeChange(DEFAULT_TIME_RANGE);
-  };
-  const canClear = !!(draft.from || committedRange.from);
-  const canApply = !(draft.from && !draft.to) && !!(draft.from || committedRange.from);
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), children: [
     label && /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: label }),
-    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxs(Popover, { open: picker.open, onOpenChange: picker.handleOpenChange, children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
         {
@@ -2967,14 +3025,14 @@ function DateRangePickerMobile({
             "hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
             "dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700",
             "disabled:pointer-events-none disabled:opacity-50",
-            committedRange.from ? "text-gray-900 dark:text-gray-100" : "text-gray-400 dark:text-gray-500"
+            picker.committedRange.from ? "text-gray-900 dark:text-gray-100" : "text-gray-400 dark:text-gray-500"
           ),
           children: [
             /* @__PURE__ */ jsx(CalendarIcon, { className: "w-4 h-4 shrink-0 text-gray-400 dark:text-gray-500" }),
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: formatDateRange2(
-              committedRange,
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: formatDateRange(
+              picker.committedRange,
               placeholder,
-              showTimePicker ? currentTime : void 0
+              showTimePicker ? picker.committedTime : void 0
             ) })
           ]
         }
@@ -2987,10 +3045,10 @@ function DateRangePickerMobile({
             section.options.map((preset) => /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: () => handlePreset(preset),
+                onClick: () => picker.handlePreset(preset),
                 className: cn(
                   "w-full text-left px-2 py-1.5 rounded-md text-sm transition-colors",
-                  activePreset === preset.label ? "bg-blue-50 text-blue-600 font-medium dark:bg-blue-950/50 dark:text-blue-400" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700"
+                  picker.activePreset === preset.label ? "bg-blue-50 text-blue-600 font-medium dark:bg-blue-950/50 dark:text-blue-400" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700"
                 ),
                 children: preset.label
               },
@@ -3002,52 +3060,73 @@ function DateRangePickerMobile({
           /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
             CalendarMonth,
             {
-              month: viewMonth,
-              range: draft,
-              hoverDate,
-              onDayClick: handleDayClick,
-              onDayHover: setHoverDate,
-              onPrevMonth: () => setViewMonth(subMonths(viewMonth, 1)),
-              onNextMonth: () => setViewMonth(addMonths(viewMonth, 1)),
+              month: picker.viewMonth,
+              range: picker.draft,
+              hoverDate: picker.hoverDate,
+              onDayClick: picker.handleDayClick,
+              onDayHover: picker.setHoverDate,
+              onPrevMonth: () => picker.setViewMonth(subMonths(picker.viewMonth, 1)),
+              onNextMonth: () => picker.setViewMonth(addMonths(picker.viewMonth, 1)),
               showPrevNav: true,
               showNextNav: true
             }
           ) }),
-          showTimePicker && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: timeVisible && /* @__PURE__ */ jsx(
+          showTimePicker && /* @__PURE__ */ jsx(
             motion.div,
             {
-              initial: { height: 0, opacity: 0 },
-              animate: { height: "auto", opacity: 1 },
-              exit: { height: 0, opacity: 0 },
-              transition: {
-                height: {
-                  type: "spring",
-                  stiffness: 400,
-                  damping: 30,
-                  mass: 0.8
+              layout: true,
+              transition: { layout: { duration: 0.2, ease: "easeInOut" } },
+              className: "border-t border-gray-100 dark:border-neutral-700",
+              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: picker.timeVisible && !picker.timeExpanded ? /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.12 },
+                  children: /* @__PURE__ */ jsx("div", { className: "px-2 py-2", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      onClick: picker.expandTime,
+                      leadingDecorator: /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5" }),
+                      className: "w-full rounded-md h-9",
+                      children: "Add time range"
+                    }
+                  ) })
                 },
-                opacity: { duration: 0.2 }
-              },
-              className: "overflow-hidden",
-              children: /* @__PURE__ */ jsx(
-                TimePickerColumn,
+                "add-time-btn"
+              ) : picker.timeVisible && picker.timeExpanded ? /* @__PURE__ */ jsx(
+                motion.div,
                 {
-                  value: currentTime,
-                  onChange: handleTimeChange
-                }
-              )
-            },
-            "time-picker"
-          ) }),
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.12 },
+                  children: /* @__PURE__ */ jsx(
+                    TimePickerColumn,
+                    {
+                      value: picker.draftTime,
+                      onChange: picker.handleTimeChange,
+                      onRemove: picker.resetTime,
+                      showRemove: picker.timeExpanded,
+                      onDirty: picker.markTimeDirty
+                    }
+                  )
+                },
+                "time-picker"
+              ) : null })
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-2 py-3 border-t border-gray-100 dark:border-neutral-700", children: [
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: handleClear,
-                disabled: !canClear,
+                onClick: picker.handleClear,
+                disabled: !picker.canClear,
                 className: cn(
                   "px-3 py-1.5 rounded-md text-sm transition-colors",
-                  canClear ? "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700" : "text-gray-300 dark:text-gray-600 cursor-not-allowed"
+                  picker.canClear ? "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700" : "text-gray-300 dark:text-gray-600 cursor-not-allowed"
                 ),
                 children: "Clear"
               }
@@ -3055,11 +3134,11 @@ function DateRangePickerMobile({
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: handleApply,
-                disabled: !canApply,
+                onClick: picker.handleApply,
+                disabled: !picker.canApply,
                 className: cn(
                   "px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
-                  canApply ? "bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-500" : "bg-blue-100 text-blue-300 cursor-not-allowed dark:bg-blue-950/30 dark:text-blue-800"
+                  picker.canApply ? "bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-500" : "bg-blue-100 text-blue-300 cursor-not-allowed dark:bg-blue-950/30 dark:text-blue-800"
                 ),
                 children: "Apply"
               }
@@ -3319,5 +3398,5 @@ function PeriodComparisonSelector({
 }
 
 export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColumnSelection, DEFAULT_COMPARISON_PERIODS, DEFAULT_PRESETS, DEFAULT_TIME_RANGE, DateRangePicker, DateRangePickerMobile, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormLabel, FormMessage, MobileDataCard, PeriodComparisonSelector, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Skeleton, SkeletonAvatar, SkeletonBadge, SkeletonButton, SkeletonCard, SkeletonIcon, SkeletonInput, SkeletonSubtitle, SkeletonTableRow, SkeletonTableRows, SkeletonText, SkeletonTitle, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableRowCheckbox, TableSelectAll, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, buttonVariants, segmentedControlItemVariants, segmentedControlVariants, separatorVariants, switchLabelVariants, switchThumbVariants, switchTrackVariants, toggleGroupVariants, toggleItemVariants, useColumnVisibility, useFormContext, useFormFieldContext, useTableSelection };
-//# sourceMappingURL=chunk-OWU2ABN4.mjs.map
-//# sourceMappingURL=chunk-OWU2ABN4.mjs.map
+//# sourceMappingURL=chunk-HFDHLY24.mjs.map
+//# sourceMappingURL=chunk-HFDHLY24.mjs.map