@pos-360/horizon 0.30.1 → 0.31.0

package/dist/{chunk-RA7KTV62.mjs → chunk-3CXBEGTO.mjs}

@@ -1,11 +1,11 @@
-import { cn, Label, Tooltip, Text, mergeRefs } from './chunk-EZDGMHS7.mjs';
-import * as React10 from 'react';
+import { cn, Label, Tooltip, Text, TextButton, mergeRefs } from './chunk-2GMOVXHC.mjs';
+import * as React11 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';
@@ -42,7 +42,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React10.forwardRef(
+var Button = React11.forwardRef(
   ({
     className,
     variant,
@@ -82,7 +82,7 @@ var Button = React10.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Card = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -94,7 +94,7 @@ var Card = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -103,7 +103,7 @@ var CardHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -112,7 +112,7 @@ var CardTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -121,7 +121,7 @@ var CardDescription = React10.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -130,7 +130,7 @@ var CardContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CardContent.displayName = "CardContent";
-var CardFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -139,7 +139,7 @@ var CardFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardFooter.displayName = "CardFooter";
-var Checkbox = React10.forwardRef(({ className, indicatorIcon, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React11.forwardRef(({ className, indicatorIcon, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -162,7 +162,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -174,7 +174,7 @@ var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -224,7 +224,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -236,7 +236,7 @@ var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -251,7 +251,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -268,7 +268,7 @@ var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -280,7 +280,7 @@ var DropdownMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -294,7 +294,7 @@ var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -307,7 +307,7 @@ var DropdownMenuItem = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -324,7 +324,7 @@ var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -340,7 +340,7 @@ var DropdownMenuRadioItem = React10.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -353,7 +353,7 @@ var DropdownMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -375,19 +375,19 @@ var DropdownMenuShortcut = ({
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var FormContext = React10.createContext(null);
+var FormContext = React11.createContext(null);
 function useFormContext() {
-  const context = React10.useContext(FormContext);
+  const context = React11.useContext(FormContext);
   if (!context) {
     throw new Error("useFormContext must be used within a Form component");
   }
   return context;
 }
-var FormFieldContext = React10.createContext(
+var FormFieldContext = React11.createContext(
   null
 );
 function useFormFieldContext() {
-  const context = React10.useContext(FormFieldContext);
+  const context = React11.useContext(FormFieldContext);
   if (!context) {
     throw new Error(
       "useFormFieldContext must be used within a FormField component"
@@ -395,24 +395,24 @@ function useFormFieldContext() {
   }
   return context;
 }
-var Form = React10.forwardRef(
+var Form = React11.forwardRef(
   ({ className, children, onFormSubmit, ...props }, ref) => {
-    const [errors, setErrors] = React10.useState({});
-    const [isSubmitting, setIsSubmitting] = React10.useState(false);
-    const setError = React10.useCallback(
+    const [errors, setErrors] = React11.useState({});
+    const [isSubmitting, setIsSubmitting] = React11.useState(false);
+    const setError = React11.useCallback(
       (name, message) => {
         setErrors((prev) => ({ ...prev, [name]: message }));
       },
       []
     );
-    const clearError = React10.useCallback((name) => {
+    const clearError = React11.useCallback((name) => {
       setErrors((prev) => {
         const next = { ...prev };
         delete next[name];
         return next;
       });
     }, []);
-    const clearAllErrors = React10.useCallback(() => {
+    const clearAllErrors = React11.useCallback(() => {
       setErrors({});
     }, []);
     const isValid = Object.keys(errors).length === 0;
@@ -431,7 +431,7 @@ var Form = React10.forwardRef(
         }
       }
     };
-    const contextValue = React10.useMemo(
+    const contextValue = React11.useMemo(
       () => ({
         errors,
         setError,
@@ -455,12 +455,12 @@ var Form = React10.forwardRef(
   }
 );
 Form.displayName = "Form";
-var FormField = React10.forwardRef(
+var FormField = React11.forwardRef(
   ({ className, name, children, ...props }, ref) => {
     const { errors } = useFormContext();
-    const id = React10.useId();
+    const id = React11.useId();
     const error = errors[name];
-    const contextValue = React10.useMemo(
+    const contextValue = React11.useMemo(
       () => ({ name, error, id }),
       [name, error, id]
     );
@@ -468,7 +468,7 @@ var FormField = React10.forwardRef(
   }
 );
 FormField.displayName = "FormField";
-var FormLabel = React10.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React11.forwardRef(({ className, ...props }, ref) => {
   const { id, error } = useFormFieldContext();
   return /* @__PURE__ */ jsx(
     Label,
@@ -481,10 +481,10 @@ var FormLabel = React10.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React10.forwardRef(
+var FormControl = React11.forwardRef(
   ({ children, ...props }, ref) => {
     const { id, error, name } = useFormFieldContext();
-    const child = React10.cloneElement(children, {
+    const child = React11.cloneElement(children, {
       id,
       name,
       "aria-invalid": !!error,
@@ -495,7 +495,7 @@ var FormControl = React10.forwardRef(
   }
 );
 FormControl.displayName = "FormControl";
-var FormDescription = React10.forwardRef(
+var FormDescription = React11.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
@@ -511,9 +511,9 @@ var FormDescription = React10.forwardRef(
   }
 );
 FormDescription.displayName = "FormDescription";
-var FormMessage = React10.forwardRef(
+var FormMessage = React11.forwardRef(
   ({ className, children, error: errorProp, ...props }, ref) => {
-    const fieldContext = React10.useContext(FormFieldContext);
+    const fieldContext = React11.useContext(FormFieldContext);
     const error = errorProp ?? fieldContext?.error;
     const id = fieldContext?.id;
     if (!error && !children) {
@@ -537,14 +537,14 @@ var FormMessage = React10.forwardRef(
   }
 );
 FormMessage.displayName = "FormMessage";
-var PopoverContext = React10.createContext({ open: false });
+var PopoverContext = React11.createContext({ open: false });
 var Popover = ({
   children,
   open: controlledOpen,
   onOpenChange,
   ...props
 }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React10.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React11.useState(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
   const handleOpenChange = (newOpen) => {
@@ -565,8 +565,8 @@ var Popover = ({
 };
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, children, ...props }, ref) => {
-  const { open } = React10.useContext(PopoverContext);
+var PopoverContent = React11.forwardRef(({ className, align = "center", sideOffset = 4, children, ...props }, ref) => {
+  const { open } = React11.useContext(PopoverContext);
   const {
     onOpenAutoFocus,
     onCloseAutoFocus,
@@ -626,15 +626,15 @@ var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffs
   ) }) });
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var SelectContext = React10.createContext({ open: false });
-var SelectSearchContext = React10.createContext("");
+var SelectContext = React11.createContext({ open: false });
+var SelectSearchContext = React11.createContext("");
 var Select = ({
   children,
   open: controlledOpen,
   onOpenChange,
   ...props
 }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React10.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React11.useState(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
   const handleOpenChange = (newOpen) => {
@@ -654,9 +654,9 @@ var Select = ({
   ) });
 };
 var SelectGroup = SelectPrimitive.Group;
-var SelectValue = React10.forwardRef(({ children, placeholder, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Value, { ref, placeholder, ...props, children }));
+var SelectValue = React11.forwardRef(({ children, placeholder, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Value, { ref, placeholder, ...props, children }));
 SelectValue.displayName = SelectPrimitive.Value.displayName;
-var SelectTrigger = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -672,7 +672,7 @@ var SelectTrigger = React10.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -685,7 +685,7 @@ var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -698,11 +698,11 @@ var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React10.forwardRef(({ className, children, position = "popper", searchable = false, searchPlaceholder = "Search...", ...props }, ref) => {
-  const { open } = React10.useContext(SelectContext);
-  const [search, setSearch] = React10.useState("");
-  const searchInputRef = React10.useRef(null);
-  React10.useEffect(() => {
+var SelectContent = React11.forwardRef(({ className, children, position = "popper", searchable = false, searchPlaceholder = "Search...", ...props }, ref) => {
+  const { open } = React11.useContext(SelectContext);
+  const [search, setSearch] = React11.useState("");
+  const searchInputRef = React11.useRef(null);
+  React11.useEffect(() => {
     if (open && searchable) {
       const frame = requestAnimationFrame(() => {
         searchInputRef.current?.focus();
@@ -728,7 +728,7 @@ var SelectContent = React10.forwardRef(({ className, children, position = "poppe
   } = props;
   const ForceMountPortal = SelectPrimitive.Portal;
   const ForceMountContent = SelectPrimitive.Content;
-  const AnimatedContent = React10.useMemo(() => React10.forwardRef(({ forceMount: _, ...props2 }, ref2) => /* @__PURE__ */ jsx(motion.div, { ref: ref2, ...props2 })), []);
+  const AnimatedContent = React11.useMemo(() => React11.forwardRef(({ forceMount: _, ...props2 }, ref2) => /* @__PURE__ */ jsx(motion.div, { ref: ref2, ...props2 })), []);
   return /* @__PURE__ */ jsx(ForceMountPortal, { forceMount: true, children: /* @__PURE__ */ jsx(
     ForceMountContent,
     {
@@ -801,7 +801,7 @@ var SelectContent = React10.forwardRef(({ className, children, position = "poppe
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -810,8 +810,8 @@ var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React10.forwardRef(({ className, children, textValue, ...props }, ref) => {
-  const search = React10.useContext(SelectSearchContext);
+var SelectItem = React11.forwardRef(({ className, children, textValue, ...props }, ref) => {
+  const search = React11.useContext(SelectSearchContext);
   const itemText = textValue ?? (typeof children === "string" ? children : "");
   if (search && itemText && !itemText.toLowerCase().includes(search.toLowerCase())) {
     return null;
@@ -834,7 +834,7 @@ var SelectItem = React10.forwardRef(({ className, children, textValue, ...props
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -843,6 +843,307 @@ var SelectSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var SelectBar = React11.forwardRef(({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  multiValue,
+  onMultiChange,
+  manualApply = false,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  placeholder = "Select\u2026",
+  label,
+  disabled = false,
+  className,
+  maxVisibleChips = 2
+}, ref) => {
+  const [open, setOpen] = React11.useState(false);
+  const [search, setSearch] = React11.useState("");
+  const searchRef = React11.useRef(null);
+  const [internalValue, setInternalValue] = React11.useState(
+    void 0
+  );
+  const [internalMultiValue, setInternalMultiValue] = React11.useState(
+    []
+  );
+  const [draftValue, setDraftValue] = React11.useState(
+    void 0
+  );
+  const [draftMultiValue, setDraftMultiValue] = React11.useState([]);
+  const committedSingle = value !== void 0 ? value : internalValue;
+  const committedMulti = multiValue !== void 0 ? multiValue : internalMultiValue;
+  const activeSingle = manualApply ? draftValue : committedSingle;
+  const activeMulti = manualApply ? draftMultiValue : committedMulti;
+  const commitSingle = React11.useCallback(
+    (v) => {
+      if (value === void 0) setInternalValue(v);
+      onChange?.(v);
+    },
+    [value, onChange]
+  );
+  const commitMulti = React11.useCallback(
+    (v) => {
+      if (multiValue === void 0) setInternalMultiValue(v);
+      onMultiChange?.(v);
+    },
+    [multiValue, onMultiChange]
+  );
+  const handleOpenChange = (newOpen) => {
+    if (newOpen) {
+      setDraftValue(committedSingle);
+      setDraftMultiValue(committedMulti);
+      setSearch("");
+      if (searchable) {
+        requestAnimationFrame(() => searchRef.current?.focus());
+      }
+    }
+    setOpen(newOpen);
+  };
+  const filtered = React11.useMemo(
+    () => search ? options.filter(
+      (o) => o.label.toLowerCase().includes(search.toLowerCase())
+    ) : options,
+    [options, search]
+  );
+  const handleSingleSelect = (optionValue) => {
+    if (manualApply) {
+      setDraftValue(optionValue);
+    } else {
+      commitSingle(optionValue);
+      setOpen(false);
+    }
+  };
+  const handleMultiToggle = (optionValue) => {
+    const current = manualApply ? draftMultiValue : committedMulti;
+    const next = current.includes(optionValue) ? current.filter((v) => v !== optionValue) : [...current, optionValue];
+    if (manualApply) {
+      setDraftMultiValue(next);
+    } else {
+      commitMulti(next);
+    }
+  };
+  const handleApply = () => {
+    if (multiple) {
+      commitMulti(draftMultiValue);
+    } else {
+      commitSingle(draftValue);
+    }
+    setOpen(false);
+  };
+  const handleClear = () => {
+    if (manualApply) {
+      if (multiple) {
+        setDraftMultiValue([]);
+      } else {
+        setDraftValue(void 0);
+      }
+    } else {
+      if (multiple) {
+        commitMulti([]);
+      } else {
+        commitSingle(void 0);
+      }
+      setOpen(false);
+    }
+  };
+  const handleChipRemove = (e, chipValue) => {
+    e.stopPropagation();
+    const next = committedMulti.filter((v) => v !== chipValue);
+    commitMulti(next);
+  };
+  const canApply = (() => {
+    if (!manualApply) return false;
+    if (multiple) {
+      const a = [...draftMultiValue].sort();
+      const b = [...committedMulti].sort();
+      return JSON.stringify(a) !== JSON.stringify(b);
+    }
+    return draftValue !== committedSingle;
+  })();
+  const canClear = (() => {
+    if (manualApply) {
+      return multiple ? draftMultiValue.length > 0 : draftValue !== void 0;
+    }
+    return multiple ? committedMulti.length > 0 : committedSingle !== void 0;
+  })();
+  const labelFor = (v) => options.find((o) => o.value === v)?.label ?? v;
+  const renderTriggerContent = () => {
+    if (multiple) {
+      if (committedMulti.length === 0) {
+        return /* @__PURE__ */ jsx("span", { className: "text-gray-400 dark:text-gray-500 truncate", children: placeholder });
+      }
+      const visible = committedMulti.slice(0, maxVisibleChips);
+      const overflow = committedMulti.length - maxVisibleChips;
+      return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 min-w-0 flex-wrap", children: [
+        visible.map((v) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex items-center gap-1 bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-800/50 rounded-md px-2 py-0.5 text-xs font-medium max-w-[120px]",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: labelFor(v) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "shrink-0 hover:text-blue-900 dark:hover:text-blue-200",
+                  onClick: (e) => handleChipRemove(e, v),
+                  "aria-label": `Remove ${labelFor(v)}`,
+                  children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                }
+              )
+            ]
+          },
+          v
+        )),
+        overflow > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-800/50 rounded-md px-2 py-0.5 text-xs font-medium", children: [
+          "+",
+          overflow,
+          " more"
+        ] })
+      ] });
+    }
+    if (committedSingle !== void 0) {
+      return /* @__PURE__ */ jsx("span", { className: "truncate text-gray-900 dark:text-gray-100", children: labelFor(committedSingle) });
+    }
+    return /* @__PURE__ */ jsx("span", { className: "text-gray-400 dark:text-gray-500 truncate", children: placeholder });
+  };
+  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__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          disabled,
+          className: cn(
+            "flex h-[42px] min-h-[42px] w-full items-center justify-between gap-2 rounded-hz-md border border-gray-300 bg-white px-3 text-sm shadow-sm transition-colors",
+            "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"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 flex items-center", children: renderTriggerContent() }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-[var(--radix-popover-trigger-width)] min-w-[200px] p-0 overflow-hidden",
+          children: [
+            searchable && /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-neutral-200/50 dark:border-neutral-700/50", children: [
+              /* @__PURE__ */ jsx(Search, { className: "mr-2 h-6 w-6 shrink-0 opacity-50 pl-2" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: searchRef,
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  placeholder: searchPlaceholder,
+                  onKeyDown: (e) => e.stopPropagation(),
+                  className: "flex h-10 w-full py-2 bg-transparent text-sm placeholder:text-neutral-400 dark:placeholder:text-neutral-500 px-2 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-1 max-h-[240px] overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-4 text-center text-sm text-gray-400 dark:text-gray-500", children: "No results found." }) : filtered.map((option) => {
+              if (multiple) {
+                const checked = activeMulti.includes(option.value);
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: option.disabled,
+                    onClick: () => handleMultiToggle(option.value),
+                    className: cn(
+                      "relative flex w-full cursor-default select-none items-center gap-2 rounded-hz-md py-1.5 px-2 text-sm outline-none transition-colors",
+                      "hover:bg-black/5 dark:hover:bg-white/10",
+                      option.disabled && "pointer-events-none opacity-50"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        CheckboxPrimitive.Root,
+                        {
+                          checked,
+                          tabIndex: -1,
+                          className: cn(
+                            "peer h-4 w-4 shrink-0 rounded-hz-sm border border-gray-300 bg-transparent shadow focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600 data-[state=checked]:text-white dark:border-neutral-600 dark:data-[state=checked]:bg-blue-600"
+                          ),
+                          style: { pointerEvents: "none" },
+                          children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx(
+                            Check,
+                            {
+                              className: "h-3.5 w-3.5",
+                              strokeWidth: 3
+                            }
+                          ) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                    ]
+                  },
+                  option.value
+                );
+              }
+              const selected = activeSingle === option.value;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  disabled: option.disabled,
+                  onClick: () => handleSingleSelect(option.value),
+                  className: cn(
+                    "relative flex w-full cursor-default select-none items-center rounded-hz-md py-1.5 pl-2 pr-8 text-sm outline-none transition-colors",
+                    "hover:bg-black/5 dark:hover:bg-white/10",
+                    option.disabled && "pointer-events-none opacity-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+                    selected && /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+                  ]
+                },
+                option.value
+              );
+            }) }),
+            manualApply && /* @__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",
+                {
+                  type: "button",
+                  onClick: handleClear,
+                  disabled: !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"
+                  ),
+                  children: "Clear"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleApply,
+                  disabled: !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"
+                  ),
+                  children: "Apply"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+});
+SelectBar.displayName = "SelectBar";
 var separatorVariants = cva("shrink-0 bg-gray-200 dark:bg-neutral-700", {
   variants: {
     orientation: {
@@ -1023,8 +1324,8 @@ function SegmentedControl({
   );
 }
 function BulkEditPopover({ column, onApply }) {
-  const [value, setValue] = React10.useState("");
-  const [open, setOpen] = React10.useState(false);
+  const [value, setValue] = React11.useState("");
+  const [open, setOpen] = React11.useState(false);
   const { bulkEdit } = column;
   if (!bulkEdit) return null;
   const isValid = bulkEdit.kind === "input" ? !!value.trim() : !!value;
@@ -1098,12 +1399,12 @@ function BulkEditPopover({ column, onApply }) {
     ] })
   ] }) }) });
 }
-var TableContext = React10.createContext(null);
+var TableContext = React11.createContext(null);
 var useTableContext = () => {
-  const context = React10.useContext(TableContext);
+  const context = React11.useContext(TableContext);
   return context;
 };
-var TableInner = React10.forwardRef(
+var TableInner = React11.forwardRef(
   ({
     className,
     selectionMode = "multiple",
@@ -1129,23 +1430,23 @@ var TableInner = React10.forwardRef(
   }, ref) => {
     const effectiveActionColumns = actionColumns ?? [];
     const effectiveSelectable = effectiveActionColumns.includes("checkbox");
-    const [internalSelectedRows, setInternalSelectedRows] = React10.useState(/* @__PURE__ */ new Set());
-    const [registeredRowIds, setRegisteredRowIds] = React10.useState(/* @__PURE__ */ new Set());
-    const wrapperRef = React10.useRef(null);
+    const [internalSelectedRows, setInternalSelectedRows] = React11.useState(/* @__PURE__ */ new Set());
+    const [registeredRowIds, setRegisteredRowIds] = React11.useState(/* @__PURE__ */ new Set());
+    const wrapperRef = React11.useRef(null);
     const isControlled = controlledSelectedRows !== void 0;
     const selectedRowsSet = isControlled ? new Set(controlledSelectedRows) : internalSelectedRows;
-    const defaultGetRowId = React10.useCallback((row) => {
+    const defaultGetRowId = React11.useCallback((row) => {
       if (typeof row === "string") return row;
       if (typeof row === "object" && row?.id) return String(row.id);
       return String(row);
     }, []);
     const finalGetRowId = getRowId || defaultGetRowId;
-    const allRowIds = React10.useMemo(() => {
+    const allRowIds = React11.useMemo(() => {
       if (rows) return new Set(rows.map(finalGetRowId));
       if (data) return new Set(data.map(finalGetRowId));
       return registeredRowIds;
     }, [rows, data, finalGetRowId, registeredRowIds]);
-    const registerRowId = React10.useCallback((rowId) => {
+    const registerRowId = React11.useCallback((rowId) => {
       if (rowId) {
         setRegisteredRowIds((prev) => {
           if (prev.has(rowId)) return prev;
@@ -1153,7 +1454,7 @@ var TableInner = React10.forwardRef(
         });
       }
     }, []);
-    const unregisterRowId = React10.useCallback((rowId) => {
+    const unregisterRowId = React11.useCallback((rowId) => {
       if (rowId) {
         setRegisteredRowIds((prev) => {
           if (!prev.has(rowId)) return prev;
@@ -1163,7 +1464,7 @@ var TableInner = React10.forwardRef(
         });
       }
     }, []);
-    const toggleRow = React10.useCallback(
+    const toggleRow = React11.useCallback(
       (rowId) => {
         if (!effectiveSelectable) return;
         const next = new Set(selectedRowsSet);
@@ -1188,7 +1489,7 @@ var TableInner = React10.forwardRef(
       },
       [effectiveSelectable, selectionMode, selectedRowsSet, isControlled, onSelectionChange]
     );
-    const selectAll = React10.useCallback(() => {
+    const selectAll = React11.useCallback(() => {
       if (!effectiveSelectable || selectionMode !== "multiple" || allRowIds.size === 0) return;
       const next = new Set(allRowIds);
       if (isControlled) {
@@ -1198,7 +1499,7 @@ var TableInner = React10.forwardRef(
         onSelectionChange?.(Array.from(next));
       }
     }, [effectiveSelectable, selectionMode, allRowIds, isControlled, onSelectionChange]);
-    const deselectAll = React10.useCallback(() => {
+    const deselectAll = React11.useCallback(() => {
       if (!effectiveSelectable) return;
       const next = /* @__PURE__ */ new Set();
       if (isControlled) {
@@ -1208,19 +1509,19 @@ var TableInner = React10.forwardRef(
         onSelectionChange?.(Array.from(next));
       }
     }, [effectiveSelectable, isControlled, onSelectionChange]);
-    const isRowSelected = React10.useCallback(
+    const isRowSelected = React11.useCallback(
       (rowId) => selectedRowsSet.has(rowId),
       [selectedRowsSet]
     );
-    const isAllSelected = React10.useMemo(() => {
+    const isAllSelected = React11.useMemo(() => {
       if (!effectiveSelectable || allRowIds.size === 0) return false;
       return allRowIds.size > 0 && Array.from(allRowIds).every((id) => selectedRowsSet.has(id));
     }, [effectiveSelectable, allRowIds, selectedRowsSet]);
-    const isSomeSelected = React10.useMemo(() => {
+    const isSomeSelected = React11.useMemo(() => {
       if (!effectiveSelectable) return false;
       return selectedRowsSet.size > 0 && !isAllSelected;
     }, [effectiveSelectable, selectedRowsSet.size, isAllSelected]);
-    const contextValue = React10.useMemo(() => ({
+    const contextValue = React11.useMemo(() => ({
       selectable: effectiveSelectable,
       selectionMode,
       selectedRows: selectedRowsSet,
@@ -1249,7 +1550,7 @@ var TableInner = React10.forwardRef(
       unregisterRowId,
       stickyYHeader
     ]);
-    React10.useEffect(() => {
+    React11.useEffect(() => {
       const wrapper = wrapperRef.current;
       if (!wrapper || highlightMode === "none") return;
       let prevCell = null;
@@ -1436,7 +1737,7 @@ var TableInner = React10.forwardRef(
 );
 TableInner.displayName = "Table";
 var Table = TableInner;
-var TableHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHeader = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "thead",
   {
     ref,
@@ -1445,7 +1746,7 @@ var TableHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -1454,7 +1755,7 @@ var TableBody = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -1466,19 +1767,19 @@ var TableFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React10.forwardRef(
+var TableRow = React11.forwardRef(
   ({ className, rowId, rowData, onClick, ...props }, ref) => {
     const context = useTableContext();
     const getRowId = context?.getRowId;
     const selectable = context?.selectable;
     const registerRowId = context?.registerRowId;
     const unregisterRowId = context?.unregisterRowId;
-    const finalRowId = React10.useMemo(() => {
+    const finalRowId = React11.useMemo(() => {
       if (rowId) return rowId;
       if (rowData && getRowId) return getRowId(rowData);
       return props.id || void 0;
     }, [rowId, rowData, getRowId, props.id]);
-    React10.useEffect(() => {
+    React11.useEffect(() => {
       if (finalRowId && selectable) {
         registerRowId?.(finalRowId);
         return () => {
@@ -1487,7 +1788,7 @@ var TableRow = React10.forwardRef(
       }
     }, [finalRowId, selectable, registerRowId, unregisterRowId]);
     const isSelected = finalRowId ? context?.isRowSelected(finalRowId) : false;
-    const handleClick = React10.useCallback(
+    const handleClick = React11.useCallback(
       (e) => {
         onClick?.(e);
       },
@@ -1510,7 +1811,7 @@ var TableRow = React10.forwardRef(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = React10.forwardRef(({ className, style, ...props }, ref) => {
+var TableHead = React11.forwardRef(({ className, style, ...props }, ref) => {
   const context = useTableContext();
   const isDark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
   const yShadow = `inset 0 -1px 0 0 ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"}`;
@@ -1529,7 +1830,7 @@ var TableHead = React10.forwardRef(({ className, style, ...props }, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React10.forwardRef(
+var TableCell = React11.forwardRef(
   ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
     "td",
     {
@@ -1544,7 +1845,7 @@ var TableCell = React10.forwardRef(
   )
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -1553,7 +1854,7 @@ var TableCaption = React10.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TableCaption.displayName = "TableCaption";
-var TableSelectAll = React10.forwardRef(({ className, ...props }, ref) => {
+var TableSelectAll = React11.forwardRef(({ className, ...props }, ref) => {
   const context = useTableContext();
   if (!context?.selectable || context.selectionMode !== "multiple") {
     return null;
@@ -1577,13 +1878,13 @@ var TableSelectAll = React10.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 TableSelectAll.displayName = "TableSelectAll";
-var TableRowCheckbox = React10.forwardRef(({ rowId, rowData, className, ...props }, ref) => {
+var TableRowCheckbox = React11.forwardRef(({ rowId, rowData, className, ...props }, ref) => {
   const context = useTableContext();
   const getRowId = context?.getRowId;
   if (!context?.selectable) {
     return null;
   }
-  const finalRowId = React10.useMemo(() => {
+  const finalRowId = React11.useMemo(() => {
     if (rowId) return rowId;
     if (rowData && getRowId) return getRowId(rowData);
     return void 0;
@@ -1668,7 +1969,7 @@ function ColumnSelection({
   triggerLabel = "Manage Columns",
   trigger
 }) {
-  const handleToggle = React10.useCallback((key, checked) => {
+  const handleToggle = React11.useCallback((key, checked) => {
     if (checked) {
       if (!visibleColumns.includes(key)) {
         onVisibleColumnsChange([...visibleColumns, key]);
@@ -1715,33 +2016,33 @@ function ColumnSelection({
     ] })
   ] });
 }
-var TabsContext = React10.createContext(null);
+var TabsContext = React11.createContext(null);
 var useTabsContext = () => {
-  const context = React10.useContext(TabsContext);
+  const context = React11.useContext(TabsContext);
   if (!context) {
     throw new Error("Tabs components must be used within a Tabs provider");
   }
   return context;
 };
-var TabsListContext = React10.createContext({ variant: "pill" });
-var useTabsListContext = () => React10.useContext(TabsListContext);
-var Tabs = React10.forwardRef(({ defaultValue, value, onValueChange, children, ...props }, ref) => {
-  const [activeTab, setActiveTabState] = React10.useState(value ?? defaultValue);
-  const tabRefs = React10.useRef(/* @__PURE__ */ new Map()).current;
-  const listRef = React10.useRef(null);
-  const setActiveTab = React10.useCallback(
+var TabsListContext = React11.createContext({ variant: "pill" });
+var useTabsListContext = () => React11.useContext(TabsListContext);
+var Tabs = React11.forwardRef(({ defaultValue, value, onValueChange, children, ...props }, ref) => {
+  const [activeTab, setActiveTabState] = React11.useState(value ?? defaultValue);
+  const tabRefs = React11.useRef(/* @__PURE__ */ new Map()).current;
+  const listRef = React11.useRef(null);
+  const setActiveTab = React11.useCallback(
     (newValue) => {
       setActiveTabState(newValue);
       onValueChange?.(newValue);
     },
     [onValueChange]
   );
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (value !== void 0) {
       setActiveTabState(value);
     }
   }, [value]);
-  const registerTab = React10.useCallback(
+  const registerTab = React11.useCallback(
     (tabValue, element) => {
       tabRefs.set(tabValue, element);
     },
@@ -1766,10 +2067,10 @@ var Tabs = React10.forwardRef(({ defaultValue, value, onValueChange, children, .
   );
 });
 Tabs.displayName = "Tabs";
-var TabsList = React10.forwardRef(({ className, children, variant = "pill", ...props }, ref) => {
+var TabsList = React11.forwardRef(({ className, children, variant = "pill", ...props }, ref) => {
   const { activeTab, tabRefs, listRef } = useTabsContext();
-  const [indicatorStyle, setIndicatorStyle] = React10.useState(null);
-  React10.useEffect(() => {
+  const [indicatorStyle, setIndicatorStyle] = React11.useState(null);
+  React11.useEffect(() => {
     if (variant !== "pill") return;
     const updateIndicator = () => {
       if (!activeTab || !listRef.current) return;
@@ -1822,11 +2123,11 @@ var TabsList = React10.forwardRef(({ className, children, variant = "pill", ...p
   ) });
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React10.forwardRef(({ className, value, icon, children, ...props }, ref) => {
+var TabsTrigger = React11.forwardRef(({ className, value, icon, children, ...props }, ref) => {
   const { registerTab, activeTab } = useTabsContext();
   const { variant } = useTabsListContext();
-  const triggerRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const triggerRef = React11.useRef(null);
+  React11.useEffect(() => {
     registerTab(value, triggerRef.current);
     return () => registerTab(value, null);
   }, [value, registerTab]);
@@ -1860,7 +2161,7 @@ var TabsTrigger = React10.forwardRef(({ className, value, icon, children, ...pro
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -1872,7 +2173,7 @@ var TabsContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
-var Textarea = React10.forwardRef(
+var Textarea = React11.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -2029,8 +2330,8 @@ var switchLabelVariants = cva("select-none", {
     size: "default"
   }
 });
-var Switch = React10.forwardRef(({ className, size, label, labelPosition = "right", ...props }, ref) => {
-  const generatedId = React10.useId();
+var Switch = React11.forwardRef(({ className, size, label, labelPosition = "right", ...props }, ref) => {
+  const generatedId = React11.useId();
   const switchId = props.id ?? generatedId;
   const switchEl = /* @__PURE__ */ jsx(
     SwitchPrimitive.Root,
@@ -2108,39 +2409,59 @@ function TimeInput({
   max,
   onChange,
   onComplete,
+  onDirty,
   inputRef,
   disabled = false,
   "aria-label": ariaLabel
 }) {
-  const [editValue, setEditValue] = React10.useState(null);
-  const internalRef = React10.useRef(null);
-  const committedRef = React10.useRef(false);
-  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 [editValue, setEditValue] = React11.useState(null);
+  const internalRef = React11.useRef(null);
+  const committedRef = React11.useRef(false);
+  const pendingDigitRef = React11.useRef(null);
+  const setRefs = React11.useCallback(mergeRefs(internalRef, inputRef), [inputRef]);
+  const commitTwoDigits = (raw) => {
     const parsed = parseInt(raw, 10);
     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;
     }
@@ -2148,6 +2469,7 @@ function TimeInput({
     if (!isNaN(parsed)) {
       onChange(clamp(parsed, min2, max));
     }
+    pendingDigitRef.current = null;
     setEditValue(null);
   };
   const handleKeyDown = (e) => {
@@ -2155,16 +2477,19 @@ 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();
+      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 <= min2 ? max : curr - 1;
       onChange(next);
@@ -2182,6 +2507,7 @@ function TimeInput({
       value: editValue ?? (value === null ? "--" : pad(value)),
       onChange: handleChange,
       onFocus: (e) => {
+        pendingDigitRef.current = null;
         setEditValue("");
         requestAnimationFrame(() => e.target.select());
       },
@@ -2232,11 +2558,12 @@ function TimeField({
   hourRef,
   minuteRef,
   onMinuteComplete,
+  onDirty,
   disabled = false
 }) {
   const { hour12, period } = to12Hour(value.hour);
-  const minuteInputRef = React10.useRef(null);
-  const mergedMinuteRef = React10.useCallback(mergeRefs(minuteInputRef, minuteRef), [minuteRef]);
+  const minuteInputRef = React11.useRef(null);
+  const mergedMinuteRef = React11.useCallback(mergeRefs(minuteInputRef, minuteRef), [minuteRef]);
   const handleHourChange = (newHour12) => {
     onChange({ ...value, hour: to24Hour(newHour12, period) });
   };
@@ -2270,6 +2597,7 @@ function TimeField({
           max: 12,
           onChange: handleHourChange,
           onComplete: focusMinute,
+          onDirty,
           inputRef: hourRef,
           disabled,
           "aria-label": `${label} hour`
@@ -2293,6 +2621,7 @@ function TimeField({
           max: 59,
           onChange: handleMinuteChange,
           onComplete: onMinuteComplete,
+          onDirty,
           inputRef: mergedMinuteRef,
           disabled,
           "aria-label": `${label} minute`
@@ -2309,11 +2638,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 +2655,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 = React11.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 }) {
-  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"
+function TimePickerRow({ value, onChange, disabled = false, onRemove, showRemove = false, onDirty }) {
+  const toHourRef = React11.useRef(null);
+  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) {
@@ -2584,6 +2918,167 @@ function CalendarMonth({
     )
   ] });
 }
+function useDateRangePicker({
+  value,
+  onChange,
+  showTimePicker = false,
+  timeValue,
+  onTimeChange
+}) {
+  const [open, setOpen] = React11.useState(false);
+  const [internalRange, setInternalRange] = React11.useState({
+    from: void 0,
+    to: void 0
+  });
+  const [draft, setDraft] = React11.useState({
+    from: void 0,
+    to: void 0
+  });
+  const [hoverDate, setHoverDate] = React11.useState();
+  const [viewMonth, setViewMonth] = React11.useState(
+    () => startOfMonth(value?.from ?? /* @__PURE__ */ new Date())
+  );
+  const [activePreset, setActivePreset] = React11.useState();
+  const [committedInternalTime, setCommittedInternalTime] = React11.useState(DEFAULT_TIME_RANGE);
+  const [draftTime, setDraftTime] = React11.useState(DEFAULT_TIME_RANGE);
+  const [timeExpanded, setTimeExpanded] = React11.useState(false);
+  const [timeDirty, setTimeDirty] = React11.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 = React11.useCallback(() => {
+    setDraftTime(DEFAULT_TIME_RANGE);
+    setTimeExpanded(false);
+    setTimeDirty(false);
+  }, []);
+  const handleTimeChange = React11.useCallback((newTime) => {
+    setDraftTime(newTime);
+  }, []);
+  const handleOpenChange = React11.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 = React11.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 = React11.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 = React11.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 = React11.useCallback(() => {
+    setDraft({ from: void 0, to: void 0 });
+    setActivePreset(void 0);
+    if (showTimePicker) resetTime();
+  }, [showTimePicker, resetTime]);
+  const expandTime = React11.useCallback(() => {
+    setTimeExpanded(true);
+  }, []);
+  const markTimeDirty = React11.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",
@@ -2631,26 +3126,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,
@@ -2664,69 +3139,15 @@ function DateRangePicker({
   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 [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();
-    setDraft(newRange);
-    setActivePreset(preset.label);
-    if (newRange.from) setLeftMonth(startOfMonth(newRange.from));
-  };
-  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",
       {
@@ -2736,30 +3157,30 @@ 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
           ) })
         ]
       }
     ) }),
     /* @__PURE__ */ jsx(PopoverContent, { align, className: "w-auto p-0 overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex divide-x divide-gray-100 dark:divide-neutral-700", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col p-3 gap-0.5 min-w-[130px]", children: (presetSections ?? [{ title: "Presets", options: presets }]).map((section, si) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col p-3 gap-0.5 min-w-[130px]", children: (presetSections ?? [{ title: "Presets", options: presets }]).map((section, si) => /* @__PURE__ */ jsxs(React11.Fragment, { children: [
         si > 0 && /* @__PURE__ */ jsx("div", { className: "my-2 border-t border-gray-100 dark:border-neutral-700" }),
         /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1 px-2", children: section.title }),
         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
           },
@@ -2771,12 +3192,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
             }
@@ -2786,46 +3207,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"
             }
@@ -2833,11 +3280,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"
             }
@@ -2847,30 +3294,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,
@@ -2884,70 +3307,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();
-    setDraft(newRange);
-    setActivePreset(preset.label);
-    if (newRange.from) setViewMonth(startOfMonth(newRange.from));
-  };
-  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",
         {
@@ -2957,30 +3326,30 @@ 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
             ) })
           ]
         }
       ) }),
       /* @__PURE__ */ jsx(PopoverContent, { align: "center", className: "w-auto p-0 overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex divide-x divide-gray-100 dark:divide-neutral-700", children: [
         /* @__PURE__ */ jsx("div", { className: "flex flex-col p-2 gap-0.5 min-w-[110px] max-h-[360px] overflow-y-auto", children: (presetSections ?? [{ title: "Presets", options: presets }]).map(
-          (section, si) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
+          (section, si) => /* @__PURE__ */ jsxs(React11.Fragment, { children: [
             si > 0 && /* @__PURE__ */ jsx("div", { className: "my-2 border-t border-gray-100 dark:border-neutral-700" }),
             /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1 px-2", children: section.title }),
             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
               },
@@ -2992,52 +3361,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"
               }
@@ -3045,11 +3435,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"
               }
@@ -3308,6 +3698,6 @@ 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-RA7KTV62.mjs.map
-//# sourceMappingURL=chunk-RA7KTV62.mjs.map
+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, SelectBar, 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-3CXBEGTO.mjs.map
+//# sourceMappingURL=chunk-3CXBEGTO.mjs.map