@page-speed/forms 0.4.4 → 0.4.6

package/dist/inputs.js

@@ -1,4 +1,4 @@
-import * as React8 from 'react';
+import * as React9 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { useOnClickOutside } from '@opensite/hooks/useOnClickOutside';
@@ -40,7 +40,7 @@ function TextInput({
     error && "border-destructive ring-1 ring-destructive",
     className
   );
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     "input",
     {
       type,
@@ -94,7 +94,7 @@ function TextArea({
     error && "border-destructive ring-1 ring-destructive",
     className
   );
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     "textarea",
     {
       name,
@@ -133,11 +133,11 @@ var LabelGroup = ({
     variant === "legend" ? "mb-1.5" : "mb-1 block",
     primaryClassName
   );
-  const requiredIndicator = required ? /* @__PURE__ */ React8.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
+  const requiredIndicator = required ? /* @__PURE__ */ React9.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
   let primaryElement = null;
   if (primary) {
     if (variant === "label") {
-      primaryElement = /* @__PURE__ */ React8.createElement(
+      primaryElement = /* @__PURE__ */ React9.createElement(
         "label",
         {
           htmlFor: labelHtmlFor,
@@ -148,12 +148,12 @@ var LabelGroup = ({
         requiredIndicator
       );
     } else if (variant === "legend") {
-      primaryElement = /* @__PURE__ */ React8.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
+      primaryElement = /* @__PURE__ */ React9.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
     } else {
-      primaryElement = /* @__PURE__ */ React8.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
+      primaryElement = /* @__PURE__ */ React9.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
     }
   }
-  const secondaryElement = secondary ? /* @__PURE__ */ React8.createElement(
+  const secondaryElement = secondary ? /* @__PURE__ */ React9.createElement(
     "p",
     {
       "data-slot": "field-description",
@@ -163,7 +163,10 @@ var LabelGroup = ({
     secondary
   ) : null;
   if (!primaryElement && !secondaryElement) return null;
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, primaryElement, secondaryElement);
+  if (variant === "legend") {
+    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, primaryElement, secondaryElement);
+  }
+  return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
 };
 
 // src/inputs/Checkbox.tsx
@@ -182,9 +185,9 @@ function Checkbox({
   useChoiceCard = false,
   ...props
 }) {
-  const inputRef = React8.useRef(null);
+  const inputRef = React9.useRef(null);
   const checkboxId = props.id || `checkbox-${name}`;
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
@@ -196,7 +199,7 @@ function Checkbox({
     onBlur?.();
   };
   const isActive = value || indeterminate && !value;
-  const checkbox = /* @__PURE__ */ React8.createElement(
+  const checkbox = /* @__PURE__ */ React9.createElement(
     "div",
     {
       className: cn(
@@ -204,7 +207,7 @@ function Checkbox({
         !label && className
       )
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "input",
       {
         ref: inputRef,
@@ -223,7 +226,7 @@ function Checkbox({
         ...props
       }
     ),
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "div",
       {
         className: cn(
@@ -236,7 +239,7 @@ function Checkbox({
           "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
         )
       },
-      value && /* @__PURE__ */ React8.createElement(
+      value && /* @__PURE__ */ React9.createElement(
         "svg",
         {
           className: "size-3.5",
@@ -247,9 +250,9 @@ function Checkbox({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React8.createElement("polyline", { points: "20 6 9 17 4 12" })
+        /* @__PURE__ */ React9.createElement("polyline", { points: "20 6 9 17 4 12" })
       ),
-      indeterminate && !value && /* @__PURE__ */ React8.createElement(
+      indeterminate && !value && /* @__PURE__ */ React9.createElement(
         "svg",
         {
           className: "size-3.5",
@@ -260,12 +263,12 @@ function Checkbox({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React8.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+        /* @__PURE__ */ React9.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
       )
     )
   );
   if (label) {
-    return /* @__PURE__ */ React8.createElement(
+    return /* @__PURE__ */ React9.createElement(
       "label",
       {
         className: cn(
@@ -277,7 +280,7 @@ function Checkbox({
         ),
         htmlFor: checkboxId
       },
-      /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React9.createElement(
         "div",
         {
           className: cn(
@@ -286,7 +289,7 @@ function Checkbox({
           )
         },
         checkbox,
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(
           LabelGroup,
           {
             variant: "text",
@@ -331,11 +334,11 @@ function CheckboxGroup({
   ).length;
   const allSelected = selectedEnabledCount === enabledOptions.length;
   const someSelected = selectedEnabledCount > 0 && !allSelected;
-  const useChoiceCard = React8.useMemo(() => {
+  const useChoiceCard = React9.useMemo(() => {
     if (!options) return false;
     return options?.some((opt) => opt.description);
   }, [options]);
-  const countableValue = React8.useMemo(() => {
+  const countableValue = React9.useMemo(() => {
     if (value?.length > 0) {
       return value.length;
     }
@@ -360,7 +363,7 @@ function CheckboxGroup({
     onBlur?.();
   };
   const maxReached = Boolean(maxSelections && countableValue >= maxSelections);
-  const containerClass = React8.useMemo(() => {
+  const containerClass = React9.useMemo(() => {
     return cn(
       "w-full gap-3 grid grid-cols-1 border-0 m-0 p-0 min-w-0",
       (layout === "grid" || layout === "inline") && "md:grid-cols-2",
@@ -369,7 +372,7 @@ function CheckboxGroup({
   }, [layout, className]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
   const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     "fieldset",
     {
       className: containerClass,
@@ -379,7 +382,7 @@ function CheckboxGroup({
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       LabelGroup,
       {
         labelHtmlFor: name,
@@ -390,7 +393,7 @@ function CheckboxGroup({
         primary: label
       }
     ),
-    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React8.createElement(
+    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React9.createElement(
       Checkbox,
       {
         name: `${name}-select-all`,
@@ -408,7 +411,7 @@ function CheckboxGroup({
     options.map((option) => {
       const isChecked = value.includes(option.value);
       const isDisabled = disabled || option.disabled || maxReached && !isChecked;
-      return /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React9.createElement(
         Checkbox,
         {
           key: option.value,
@@ -426,7 +429,7 @@ function CheckboxGroup({
         }
       );
     }),
-    (minSelections || maxSelections) && /* @__PURE__ */ React8.createElement(
+    (minSelections || maxSelections) && /* @__PURE__ */ React9.createElement(
       "div",
       {
         className: cn(
@@ -435,8 +438,8 @@ function CheckboxGroup({
         ),
         "aria-live": "polite"
       },
-      minSelections && countableValue < minSelections && /* @__PURE__ */ React8.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
-      maxSelections && /* @__PURE__ */ React8.createElement("span", null, countableValue, "/", maxSelections, " selected")
+      minSelections && countableValue < minSelections && /* @__PURE__ */ React9.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
+      maxSelections && /* @__PURE__ */ React9.createElement("span", null, countableValue, "/", maxSelections, " selected")
     )
   );
 }
@@ -487,10 +490,10 @@ function Radio({
   const handleBlur = () => {
     onBlur?.();
   };
-  const useChoiceCard = React8.useMemo(() => {
+  const useChoiceCard = React9.useMemo(() => {
     return options.some((option) => option.description);
   }, [options]);
-  const containerClass = React8.useMemo(() => {
+  const containerClass = React9.useMemo(() => {
     return cn(
       "w-full gap-3 grid grid-cols-1 border-0 m-0 p-0 min-w-0",
       (layout === "grid" || layout === "inline") && "md:grid-cols-2",
@@ -499,7 +502,7 @@ function Radio({
   }, [layout, className]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
   const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     "fieldset",
     {
       className: containerClass,
@@ -509,7 +512,7 @@ function Radio({
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       LabelGroup,
       {
         variant: "legend",
@@ -523,7 +526,7 @@ function Radio({
       const isDisabled = disabled || option.disabled;
       const radioId = `${name}-${option.value}`;
       const hasDescription = option.description != null && option.description !== "";
-      const radioIndicator = /* @__PURE__ */ React8.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React8.createElement(
+      const radioIndicator = /* @__PURE__ */ React9.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React9.createElement(
         "input",
         {
           type: "radio",
@@ -538,7 +541,7 @@ function Radio({
           className: "peer sr-only",
           "aria-describedby": hasDescription ? `${radioId}-description` : props["aria-describedby"]
         }
-      ), /* @__PURE__ */ React8.createElement(
+      ), /* @__PURE__ */ React9.createElement(
         "div",
         {
           className: cn(
@@ -551,9 +554,9 @@ function Radio({
             "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
           )
         },
-        isChecked && /* @__PURE__ */ React8.createElement("div", { className: "size-3 rounded-full bg-primary" })
+        isChecked && /* @__PURE__ */ React9.createElement("div", { className: "size-3 rounded-full bg-primary" })
       ));
-      const labelContent = /* @__PURE__ */ React8.createElement(
+      const labelContent = /* @__PURE__ */ React9.createElement(
         LabelGroup,
         {
           variant: "text",
@@ -564,7 +567,7 @@ function Radio({
           secondaryClassName: "text-xs opacity-75"
         }
       );
-      return /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React9.createElement(
         "label",
         {
           key: option.value,
@@ -578,7 +581,7 @@ function Radio({
           onKeyDown: (e) => handleKeyDown(e, index),
           tabIndex: isDisabled ? -1 : 0
         },
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(
           "div",
           {
             className: cn(
@@ -587,7 +590,7 @@ function Radio({
             )
           },
           !useChoiceCard && radioIndicator,
-          /* @__PURE__ */ React8.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent),
+          labelContent,
           useChoiceCard && radioIndicator
         )
       );
@@ -614,19 +617,20 @@ function Select({
   renderOption,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React8.useState(false);
-  const [searchQuery, setSearchQuery] = React8.useState("");
-  const [focusedIndex, setFocusedIndex] = React8.useState(-1);
-  const selectRef = React8.useRef(null);
-  const searchInputRef = React8.useRef(null);
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [searchQuery, setSearchQuery] = React9.useState("");
+  const [focusedIndex, setFocusedIndex] = React9.useState(-1);
+  const triggerRef = React9.useRef(null);
+  const dropdownRef = React9.useRef(null);
+  const searchInputRef = React9.useRef(null);
   const dropdownId = `${name}-dropdown`;
-  const allOptions = React8.useMemo(() => {
+  const allOptions = React9.useMemo(() => {
     if (optionGroups.length > 0) {
       return optionGroups.flatMap((group) => group.options);
     }
     return options;
   }, [options, optionGroups]);
-  const filteredOptions = React8.useMemo(() => {
+  const filteredOptions = React9.useMemo(() => {
     if (!searchQuery.trim()) {
       return allOptions;
     }
@@ -636,7 +640,7 @@ function Select({
       return label.toLowerCase().includes(query);
     });
   }, [allOptions, searchQuery]);
-  const selectedOption = React8.useMemo(() => {
+  const selectedOption = React9.useMemo(() => {
     return allOptions.find((opt) => opt.value === value);
   }, [allOptions, value]);
   const hasValue = Boolean(value);
@@ -736,28 +740,29 @@ function Select({
   };
   const handleBlur = (event) => {
     const nextTarget = event?.relatedTarget;
-    if (!nextTarget || !selectRef.current?.contains(nextTarget)) {
+    const focusStayedInside = !!triggerRef.current && triggerRef.current.contains(nextTarget) || !!dropdownRef.current && dropdownRef.current.contains(nextTarget);
+    if (!nextTarget || !focusStayedInside) {
       onBlur?.();
     }
   };
-  const closeDropdown = React8.useCallback(() => {
-    if (!isOpen) return;
+  const closeDropdown = React9.useCallback(() => {
     setIsOpen(false);
     setSearchQuery("");
     setFocusedIndex(-1);
     onBlur?.();
-  }, [isOpen, onBlur]);
-  useOnClickOutside(selectRef, closeDropdown, "pointerdown", true);
+  }, [onBlur]);
+  useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
+    capture: true
+  });
   const combinedClassName = cn("relative w-full", className);
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     "div",
     {
-      ref: selectRef,
       className: combinedClassName,
       onKeyDown: handleKeyDown,
       onBlur: handleBlur
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "select",
       {
         name,
@@ -770,12 +775,13 @@ function Select({
         tabIndex: -1,
         style: { display: "none" }
       },
-      /* @__PURE__ */ React8.createElement("option", { value: "" }, "Select..."),
-      allOptions.map((option) => /* @__PURE__ */ React8.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+      /* @__PURE__ */ React9.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React9.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
     ),
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "div",
       {
+        ref: triggerRef,
         className: cn(
           "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm",
           "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
@@ -793,8 +799,8 @@ function Select({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : 0
       },
-      /* @__PURE__ */ React8.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React8.createElement("span", { className: "relative" }, placeholder)),
-      /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React8.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React9.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React9.createElement("span", { className: "relative" }, placeholder)),
+      /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React9.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React9.createElement(
         "button",
         {
           type: "button",
@@ -804,16 +810,17 @@ function Select({
           tabIndex: -1
         },
         "\u2715"
-      ), /* @__PURE__ */ React8.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+      ), /* @__PURE__ */ React9.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
     ),
-    isOpen && /* @__PURE__ */ React8.createElement(
+    isOpen && /* @__PURE__ */ React9.createElement(
       "div",
       {
+        ref: dropdownRef,
         id: dropdownId,
         className: "absolute z-50 top-full mt-1 min-w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
         role: "listbox"
       },
-      searchable && /* @__PURE__ */ React8.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React8.createElement(
+      searchable && /* @__PURE__ */ React9.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React9.createElement(
         "input",
         {
           ref: searchInputRef,
@@ -829,19 +836,19 @@ function Select({
           "aria-label": "Search options"
         }
       )),
-      /* @__PURE__ */ React8.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React8.createElement("div", { className: "py-2 px-3 text-center text-sm " }, "No options found") : optionGroups.length > 0 ? (
+      /* @__PURE__ */ React9.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React9.createElement("div", { className: "py-2 px-3 text-center text-sm " }, "No options found") : optionGroups.length > 0 ? (
         // Render grouped options
         optionGroups.map((group, groupIndex) => {
           const groupOptions = group.options.filter(
             (opt) => filteredOptions.includes(opt)
           );
           if (groupOptions.length === 0) return null;
-          return /* @__PURE__ */ React8.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React8.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
+          return /* @__PURE__ */ React9.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React9.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
             const globalIndex = filteredOptions.indexOf(option);
             const isSelected = value === option.value;
             const isFocused = globalIndex === focusedIndex;
             const isDisabled = option.disabled;
-            return /* @__PURE__ */ React8.createElement(
+            return /* @__PURE__ */ React9.createElement(
               "div",
               {
                 key: option.value,
@@ -861,7 +868,7 @@ function Select({
           const isSelected = value === option.value;
           const isFocused = index === focusedIndex;
           const isDisabled = option.disabled;
-          return /* @__PURE__ */ React8.createElement(
+          return /* @__PURE__ */ React9.createElement(
             "div",
             {
               key: option.value,
@@ -879,6 +886,360 @@ function Select({
   );
 }
 Select.displayName = "Select";
+function MultiSelect({
+  name,
+  value = [],
+  onChange,
+  onBlur,
+  onFocus,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select...",
+  searchable = true,
+  clearable = true,
+  loading = false,
+  maxSelections,
+  showSelectAll = false,
+  options = [],
+  optionGroups = [],
+  renderOption,
+  renderValue,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [searchQuery, setSearchQuery] = React9.useState("");
+  const [focusedIndex, setFocusedIndex] = React9.useState(-1);
+  const triggerRef = React9.useRef(null);
+  const dropdownRef = React9.useRef(null);
+  const searchInputRef = React9.useRef(null);
+  const dropdownId = `${name}-dropdown`;
+  const allOptions = React9.useMemo(() => {
+    if (optionGroups.length > 0) {
+      return optionGroups.flatMap((group) => group.options);
+    }
+    return options;
+  }, [options, optionGroups]);
+  const filteredOptions = React9.useMemo(() => {
+    if (!searchQuery.trim()) {
+      return allOptions;
+    }
+    const query = searchQuery.toLowerCase();
+    return allOptions.filter((option) => {
+      const label = typeof option.label === "string" ? option.label : String(option.label);
+      return label.toLowerCase().includes(query);
+    });
+  }, [allOptions, searchQuery]);
+  const selectedOptions = React9.useMemo(() => {
+    return allOptions.filter((opt) => value.includes(opt.value));
+  }, [allOptions, value]);
+  const hasValue = value.length > 0;
+  const isMaxReached = React9.useMemo(() => {
+    return maxSelections !== void 0 && value.length >= maxSelections;
+  }, [maxSelections, value.length]);
+  const handleToggleOption = (optionValue) => {
+    const isSelected = value.includes(optionValue);
+    if (isSelected) {
+      onChange(value.filter((v) => v !== optionValue));
+    } else {
+      if (!isMaxReached) {
+        onChange([...value, optionValue]);
+      }
+    }
+    setSearchQuery("");
+  };
+  const handleSelectAll = () => {
+    const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
+    const allValues = enabledOptions.map((opt) => opt.value);
+    onChange(allValues);
+    setSearchQuery("");
+  };
+  const handleClearAll = (e) => {
+    e.stopPropagation();
+    onChange([]);
+    setSearchQuery("");
+    setFocusedIndex(-1);
+  };
+  const handleRemoveValue = (optionValue, e) => {
+    e.stopPropagation();
+    onChange(value.filter((v) => v !== optionValue));
+  };
+  const handleToggle = () => {
+    if (disabled) return;
+    const newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+    if (newIsOpen && searchable && searchInputRef.current) {
+      setTimeout(() => searchInputRef.current?.focus(), 0);
+    }
+    if (newIsOpen) {
+      onFocus?.();
+    }
+  };
+  const handleSearchChange = (e) => {
+    setSearchQuery(e.target.value);
+    setFocusedIndex(0);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(0);
+        } else {
+          const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
+          if (enabledOptions.length > 0) {
+            const currentIndexInFiltered = focusedIndex;
+            const nextIndex = (currentIndexInFiltered + 1) % enabledOptions.length;
+            setFocusedIndex(filteredOptions.indexOf(enabledOptions[nextIndex]));
+          }
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (isOpen) {
+          const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
+          if (enabledOptions.length > 0) {
+            const currentIndexInFiltered = focusedIndex;
+            const prevIndex = (currentIndexInFiltered - 1 + enabledOptions.length) % enabledOptions.length;
+            setFocusedIndex(filteredOptions.indexOf(enabledOptions[prevIndex]));
+          }
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+          const focusedOption = filteredOptions[focusedIndex];
+          if (!focusedOption.disabled) {
+            handleToggleOption(focusedOption.value);
+          }
+        } else if (!isOpen) {
+          setIsOpen(true);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        if (isOpen) {
+          setIsOpen(false);
+          setSearchQuery("");
+          setFocusedIndex(-1);
+        }
+        break;
+      case " ":
+        if (isOpen && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+          e.preventDefault();
+          const focusedOption = filteredOptions[focusedIndex];
+          if (!focusedOption.disabled) {
+            handleToggleOption(focusedOption.value);
+          }
+        } else if (!isOpen && !searchable) {
+          e.preventDefault();
+          setIsOpen(true);
+        }
+        break;
+    }
+  };
+  const handleBlur = (event) => {
+    const nextTarget = event?.relatedTarget;
+    const focusStayedInside = !!triggerRef.current && triggerRef.current.contains(nextTarget) || !!dropdownRef.current && dropdownRef.current.contains(nextTarget);
+    if (!nextTarget || !focusStayedInside) {
+      onBlur?.();
+    }
+  };
+  const closeDropdown = React9.useCallback(() => {
+    setIsOpen(false);
+    setSearchQuery("");
+    setFocusedIndex(-1);
+    onBlur?.();
+  }, [onBlur]);
+  useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
+    capture: true
+  });
+  const combinedClassName = cn("relative w-full", className);
+  return /* @__PURE__ */ React9.createElement(
+    "div",
+    {
+      className: combinedClassName,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur
+    },
+    /* @__PURE__ */ React9.createElement(
+      "select",
+      {
+        name,
+        value,
+        onChange: () => {
+        },
+        disabled,
+        required,
+        "aria-hidden": "true",
+        tabIndex: -1,
+        style: { display: "none" },
+        multiple: true
+      },
+      /* @__PURE__ */ React9.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React9.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+    ),
+    /* @__PURE__ */ React9.createElement(
+      "div",
+      {
+        ref: triggerRef,
+        className: cn(
+          "flex min-h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm",
+          "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          !error && hasValue && "ring-2 ring-ring",
+          disabled && "cursor-not-allowed opacity-50 pointer-events-none",
+          error && "border-destructive ring-1 ring-destructive"
+        ),
+        onClick: handleToggle,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-controls": dropdownId,
+        "aria-invalid": error || props["aria-invalid"],
+        "aria-describedby": props["aria-describedby"],
+        "aria-required": required || props["aria-required"],
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : 0
+      },
+      /* @__PURE__ */ React9.createElement("div", { className: "flex items-center flex-1 overflow-hidden" }, selectedOptions.length > 0 ? /* @__PURE__ */ React9.createElement("div", { className: "flex flex-wrap gap-1" }, selectedOptions.map((option) => /* @__PURE__ */ React9.createElement(
+        "span",
+        {
+          key: option.value,
+          className: "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium"
+        },
+        renderValue ? renderValue(option) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", { className: "max-w-40 overflow-hidden text-ellipsis whitespace-nowrap" }, option.label), !disabled && /* @__PURE__ */ React9.createElement(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center justify-center h-3.5 w-3.5 rounded-sm border-none bg-transparent cursor-pointer text-[0.625rem] p-0 transition-opacity hover:opacity-70",
+            onClick: (e) => handleRemoveValue(option.value, e),
+            "aria-label": `Remove ${option.label}`,
+            tabIndex: -1
+          },
+          "\u2715"
+        ))
+      ))) : /* @__PURE__ */ React9.createElement("span", { className: "relative" }, placeholder)),
+      /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React9.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value.length > 0 && !disabled && !loading && /* @__PURE__ */ React9.createElement(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center justify-center h-4 w-4 rounded-sm border-none bg-transparent cursor-pointer text-xs p-0 transition-opacity hover:opacity-70",
+          onClick: handleClearAll,
+          "aria-label": "Clear all selections",
+          tabIndex: -1
+        },
+        "\u2715"
+      ), /* @__PURE__ */ React9.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+    ),
+    isOpen && /* @__PURE__ */ React9.createElement(
+      "div",
+      {
+        ref: dropdownRef,
+        id: dropdownId,
+        className: "absolute z-50 top-full mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+        role: "listbox",
+        "aria-multiselectable": "true"
+      },
+      searchable && /* @__PURE__ */ React9.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React9.createElement(
+        "input",
+        {
+          ref: searchInputRef,
+          type: "text",
+          className: cn(
+            "w-full border border-input rounded px-2 py-1 text-sm bg-transparent outline-none focus:ring-1 focus:ring-ring",
+            INPUT_AUTOFILL_RESET_CLASSES
+          ),
+          placeholder: "Search...",
+          value: searchQuery,
+          onChange: handleSearchChange,
+          onClick: (e) => e.stopPropagation(),
+          "aria-label": "Search options"
+        }
+      )),
+      showSelectAll && filteredOptions.length > 0 && /* @__PURE__ */ React9.createElement("div", { className: "flex gap-2 p-2 border-b border-border" }, /* @__PURE__ */ React9.createElement(
+        "button",
+        {
+          type: "button",
+          className: "flex-1 px-3 py-1.5 text-xs font-medium rounded border border-input bg-transparent hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          onClick: handleSelectAll,
+          disabled
+        },
+        "Select All"
+      ), value.length > 0 && /* @__PURE__ */ React9.createElement(
+        "button",
+        {
+          type: "button",
+          className: "flex-1 px-3 py-1.5 text-xs font-medium rounded border border-input bg-transparent hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          onClick: handleClearAll,
+          disabled
+        },
+        "Clear All"
+      )),
+      isMaxReached && /* @__PURE__ */ React9.createElement("div", { className: "px-2 py-1 text-xs font-medium text-amber-600 bg-destructive/80 text-destructive-foreground border-b border-destructive" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " ", "reached"),
+      /* @__PURE__ */ React9.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React9.createElement("div", { className: "px-2 py-1 text-center text-sm" }, "No options found") : optionGroups.length > 0 ? (
+        // Render grouped options
+        optionGroups.map((group, groupIndex) => {
+          const groupOptions = group.options.filter(
+            (opt) => filteredOptions.includes(opt)
+          );
+          if (groupOptions.length === 0) return null;
+          return /* @__PURE__ */ React9.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React9.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
+            const globalIndex = filteredOptions.indexOf(option);
+            const isSelected = value.includes(option.value);
+            const isFocused = globalIndex === focusedIndex;
+            const isDisabled = option.disabled || isMaxReached && !isSelected;
+            return /* @__PURE__ */ React9.createElement(
+              "div",
+              {
+                key: option.value,
+                className: cn(
+                  "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 px-2 text-sm outline-none transition-colors hover:bg-muted",
+                  isFocused && "bg-muted",
+                  isSelected && "font-medium",
+                  isDisabled && "pointer-events-none opacity-50"
+                ),
+                onClick: () => !isDisabled && handleToggleOption(option.value),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": isDisabled
+              },
+              /* @__PURE__ */ React9.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
+              /* @__PURE__ */ React9.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
+            );
+          }));
+        })
+      ) : (
+        // Render flat options
+        filteredOptions.map((option, index) => {
+          const isSelected = value.includes(option.value);
+          const isFocused = index === focusedIndex;
+          const isDisabled = option.disabled || isMaxReached && !isSelected;
+          return /* @__PURE__ */ React9.createElement(
+            "div",
+            {
+              key: option.value,
+              className: cn(
+                "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 px-2 text-sm outline-none transition-colors hover:bg-muted",
+                isFocused && "bg-muted",
+                isSelected && "font-medium bg-muted",
+                isDisabled && "pointer-events-none opacity-50"
+              ),
+              onClick: () => !isDisabled && handleToggleOption(option.value),
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": isDisabled
+            },
+            /* @__PURE__ */ React9.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
+            /* @__PURE__ */ React9.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
+          );
+        })
+      ))
+    )
+  );
+}
+MultiSelect.displayName = "MultiSelect";
 function FileInput({
   name,
   value = [],
@@ -904,14 +1265,14 @@ function FileInput({
   onFileRemove,
   ...props
 }) {
-  const inputRef = React8.useRef(null);
-  const [dragActive, setDragActive] = React8.useState(false);
-  const [cropperOpen, setCropperOpen] = React8.useState(false);
-  const [imageToCrop, setImageToCrop] = React8.useState(null);
-  const [crop, setCrop] = React8.useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = React8.useState(1);
-  const [croppedAreaPixels, setCroppedAreaPixels] = React8.useState(null);
-  const validateFile = React8.useCallback(
+  const inputRef = React9.useRef(null);
+  const [dragActive, setDragActive] = React9.useState(false);
+  const [cropperOpen, setCropperOpen] = React9.useState(false);
+  const [imageToCrop, setImageToCrop] = React9.useState(null);
+  const [crop, setCrop] = React9.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React9.useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = React9.useState(null);
+  const validateFile = React9.useCallback(
     (file) => {
       if (accept) {
         const acceptedTypes = accept.split(",").map((t) => t.trim());
@@ -946,7 +1307,7 @@ function FileInput({
     },
     [accept, maxSize]
   );
-  const handleFiles = React8.useCallback(
+  const handleFiles = React9.useCallback(
     (fileList) => {
       if (!fileList || fileList.length === 0) return;
       const newFiles = Array.from(fileList);
@@ -997,7 +1358,7 @@ function FileInput({
       onValidationError
     ]
   );
-  const createCroppedImage = React8.useCallback(
+  const createCroppedImage = React9.useCallback(
     async (imageUrl, cropArea) => {
       return new Promise((resolve, reject) => {
         const image = new Image();
@@ -1041,7 +1402,7 @@ function FileInput({
     },
     []
   );
-  const handleCropSave = React8.useCallback(async () => {
+  const handleCropSave = React9.useCallback(async () => {
     if (!imageToCrop || !croppedAreaPixels) return;
     try {
       const croppedBlob = await createCroppedImage(
@@ -1074,7 +1435,7 @@ function FileInput({
     onChange,
     multiple
   ]);
-  const handleCropCancel = React8.useCallback(() => {
+  const handleCropCancel = React9.useCallback(() => {
     if (imageToCrop) {
       URL.revokeObjectURL(imageToCrop.url);
     }
@@ -1084,13 +1445,13 @@ function FileInput({
     setZoom(1);
     setCroppedAreaPixels(null);
   }, [imageToCrop]);
-  const onCropChange = React8.useCallback((crop2) => {
+  const onCropChange = React9.useCallback((crop2) => {
     setCrop(crop2);
   }, []);
-  const onZoomChange = React8.useCallback((zoom2) => {
+  const onZoomChange = React9.useCallback((zoom2) => {
     setZoom(zoom2);
   }, []);
-  const onCropCompleteInternal = React8.useCallback(
+  const onCropCompleteInternal = React9.useCallback(
     (_, croppedAreaPixels2) => {
       setCroppedAreaPixels(croppedAreaPixels2);
     },
@@ -1151,7 +1512,7 @@ function FileInput({
     }
     return null;
   };
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     return () => {
       value.forEach((file) => {
         const previewUrl = getPreviewUrl(file);
@@ -1165,7 +1526,7 @@ function FileInput({
     };
   }, [value, imageToCrop]);
   const combinedClassName = `${className}`.trim();
-  return /* @__PURE__ */ React8.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React9.createElement(
     "input",
     {
       ref: inputRef,
@@ -1182,7 +1543,7 @@ function FileInput({
       "aria-required": required || props["aria-required"],
       style: { display: "none" }
     }
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "div",
     {
       className: `flex min-h-32 w-full cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-input bg-transparent p-6 transition-colors hover:bg-primary/50 hover:border-ring ${dragActive ? "bg-primary text-primary-foreground border-ring" : ""} ${disabled ? "cursor-not-allowed opacity-50" : ""} ${error ? "border-destructive" : ""}`,
@@ -1197,7 +1558,7 @@ function FileInput({
       "aria-label": placeholder,
       "aria-disabled": disabled
     },
-    /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React9.createElement(
       "svg",
       {
         width: "48",
@@ -1210,19 +1571,19 @@ function FileInput({
         strokeLinejoin: "round",
         "aria-hidden": "true"
       },
-      /* @__PURE__ */ React8.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-      /* @__PURE__ */ React8.createElement("polyline", { points: "17 8 12 3 7 8" }),
-      /* @__PURE__ */ React8.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-    ), /* @__PURE__ */ React8.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React8.createElement("p", { className: "text-xs" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React8.createElement("p", { className: "text-xs " }, "Max size: ", formatFileSize(maxSize)))
-  ), value.length > 0 && /* @__PURE__ */ React8.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
+      /* @__PURE__ */ React9.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ React9.createElement("polyline", { points: "17 8 12 3 7 8" }),
+      /* @__PURE__ */ React9.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+    ), /* @__PURE__ */ React9.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React9.createElement("p", { className: "text-xs" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React9.createElement("p", { className: "text-xs " }, "Max size: ", formatFileSize(maxSize)))
+  ), value.length > 0 && /* @__PURE__ */ React9.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
     const previewUrl = showPreview ? getPreviewUrl(file) : null;
-    return /* @__PURE__ */ React8.createElement(
+    return /* @__PURE__ */ React9.createElement(
       "li",
       {
         key: `${file.name}-${index}`,
         className: "flex items-center gap-3 p-3 rounded-md border border-border bg-card text-card-foreground hover:bg-primary/50 transition-colors"
       },
-      previewUrl && /* @__PURE__ */ React8.createElement(
+      previewUrl && /* @__PURE__ */ React9.createElement(
         "img",
         {
           src: previewUrl,
@@ -1232,7 +1593,7 @@ function FileInput({
           height: "48"
         }
       ),
-      /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React8.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React8.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React9.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React9.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React9.createElement(
         "div",
         {
           className: "h-1.5 bg-muted rounded-full overflow-hidden flex-1",
@@ -1242,15 +1603,15 @@ function FileInput({
           "aria-valuemax": 100,
           "aria-label": `Upload progress: ${uploadProgress[file.name]}%`
         },
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(
           "div",
           {
             className: "h-full bg-primary transition-all",
             style: { width: `${uploadProgress[file.name]}%` }
           }
         )
-      ), /* @__PURE__ */ React8.createElement("span", { className: "text-xs " }, uploadProgress[file.name], "%"))),
-      enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React8.createElement(
+      ), /* @__PURE__ */ React9.createElement("span", { className: "text-xs " }, uploadProgress[file.name], "%"))),
+      enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React9.createElement(
         "button",
         {
           type: "button",
@@ -1262,7 +1623,7 @@ function FileInput({
           className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground transition-colors",
           "aria-label": `Crop ${file.name}`
         },
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(
           "svg",
           {
             width: "20",
@@ -1275,11 +1636,11 @@ function FileInput({
             strokeLinejoin: "round",
             "aria-hidden": "true"
           },
-          /* @__PURE__ */ React8.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
-          /* @__PURE__ */ React8.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
+          /* @__PURE__ */ React9.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
+          /* @__PURE__ */ React9.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
         )
       ),
-      /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React9.createElement(
         "button",
         {
           type: "button",
@@ -1291,7 +1652,7 @@ function FileInput({
           className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground transition-colors",
           "aria-label": `Remove ${file.name}`
         },
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(
           "svg",
           {
             width: "20",
@@ -1304,19 +1665,19 @@ function FileInput({
             strokeLinejoin: "round",
             "aria-hidden": "true"
           },
-          /* @__PURE__ */ React8.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ React8.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          /* @__PURE__ */ React9.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ React9.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
         )
       )
     );
-  })), cropperOpen && imageToCrop && /* @__PURE__ */ React8.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React8.createElement(
+  })), cropperOpen && imageToCrop && /* @__PURE__ */ React9.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React9.createElement(
     "div",
     {
       className: "absolute inset-0 bg-black/50",
       onClick: handleCropCancel,
       "aria-label": "Close cropper"
     }
-  ), /* @__PURE__ */ React8.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React8.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React9.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React9.createElement(
     "button",
     {
       type: "button",
@@ -1325,7 +1686,7 @@ function FileInput({
       "aria-label": "Close"
     },
     "\u2715"
-  )), /* @__PURE__ */ React8.createElement("div", { className: "p-4" }, /* @__PURE__ */ React8.createElement(
+  )), /* @__PURE__ */ React9.createElement("div", { className: "p-4" }, /* @__PURE__ */ React9.createElement(
     "div",
     {
       className: "relative w-full h-96 bg-muted rounded-md overflow-hidden",
@@ -1347,7 +1708,7 @@ function FileInput({
         document.addEventListener("mouseup", handleMouseUp);
       }
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "img",
       {
         src: imageToCrop.url,
@@ -1382,7 +1743,7 @@ function FileInput({
         }
       }
     ),
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "div",
       {
         className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-primary rounded pointer-events-none",
@@ -1391,9 +1752,9 @@ function FileInput({
           aspectRatio: cropAspectRatio ? String(cropAspectRatio) : void 0
         }
       },
-      /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React8.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React8.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React8.createElement("div", null))
+      /* @__PURE__ */ React9.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React9.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React9.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React9.createElement("div", null))
     )
-  ), /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React9.createElement(
     "label",
     {
       htmlFor: "zoom-slider",
@@ -1402,7 +1763,7 @@ function FileInput({
     "Zoom: ",
     zoom.toFixed(1),
     "x"
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "input",
     {
       id: "zoom-slider",
@@ -1415,7 +1776,7 @@ function FileInput({
       className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer",
       "aria-label": "Zoom level"
     }
-  ))), /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React9.createElement(
     "button",
     {
       type: "button",
@@ -1423,7 +1784,7 @@ function FileInput({
       onClick: handleCropCancel
     },
     "Cancel"
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "button",
     {
       type: "button",
@@ -1465,13 +1826,13 @@ function DatePicker({
   showIcon = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React8.useState(false);
-  const [selectedMonth, setSelectedMonth] = React8.useState(
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [selectedMonth, setSelectedMonth] = React9.useState(
     value || /* @__PURE__ */ new Date()
   );
-  const containerRef = React8.useRef(null);
-  const inputRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const inputRef = React9.useRef(null);
+  const dropdownRef = React9.useRef(null);
+  React9.useEffect(() => {
     if (value) {
       setSelectedMonth(value);
     }
@@ -1497,12 +1858,20 @@ function DatePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  const closeCalendar = React8.useCallback(() => {
-    if (!isOpen) return;
+  const closeCalendar = React9.useCallback(() => {
     setIsOpen(false);
     onBlur?.();
-  }, [isOpen, onBlur]);
-  useOnClickOutside(containerRef, closeCalendar, "pointerdown", true);
+  }, [onBlur]);
+  useOnClickOutside([inputRef, dropdownRef], closeCalendar, void 0, {
+    capture: true
+  });
+  const handleBlur = (event) => {
+    const nextTarget = event?.relatedTarget;
+    const focusStayedInside = !!inputRef.current && inputRef.current.contains(nextTarget) || !!dropdownRef.current && dropdownRef.current.contains(nextTarget);
+    if (!nextTarget || !focusStayedInside) {
+      onBlur?.();
+    }
+  };
   const dayGridStyle = {
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
   };
@@ -1540,7 +1909,7 @@ function DatePicker({
     const handleNextMonth = () => {
       setSelectedMonth(new Date(year, month + 1, 1));
     };
-    return /* @__PURE__ */ React8.createElement("div", { role: "grid", "aria-label": "Calendar", className: "w-[248px] max-w-full" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between pb-3" }, /* @__PURE__ */ React8.createElement(
+    return /* @__PURE__ */ React9.createElement("div", { role: "grid", "aria-label": "Calendar", className: "w-[248px] max-w-full" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-between pb-3" }, /* @__PURE__ */ React9.createElement(
       "button",
       {
         type: "button",
@@ -1549,7 +1918,7 @@ function DatePicker({
         "aria-label": "Previous month"
       },
       "\u2039"
-    ), /* @__PURE__ */ React8.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React8.createElement(
+    ), /* @__PURE__ */ React9.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React9.createElement(
       "button",
       {
         type: "button",
@@ -1558,13 +1927,13 @@ function DatePicker({
         "aria-label": "Next month"
       },
       "\u203A"
-    )), /* @__PURE__ */ React8.createElement(
+    )), /* @__PURE__ */ React9.createElement(
       "div",
       {
         className: "grid gap-1 text-xs text-muted-foreground",
         style: dayGridStyle
       },
-      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React8.createElement(
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React9.createElement(
         "div",
         {
           key: day,
@@ -1572,14 +1941,14 @@ function DatePicker({
         },
         day
       ))
-    ), /* @__PURE__ */ React8.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
+    ), /* @__PURE__ */ React9.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React8.createElement("div", { key: `empty-${index}`, className: "h-8 w-8" });
+        return /* @__PURE__ */ React9.createElement("div", { key: `empty-${index}`, className: "h-8 w-8" });
       }
       const isSelected = value && date.toDateString() === value.toDateString();
       const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
       const disabled2 = isDisabled(date);
-      return /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React9.createElement(
         "button",
         {
           key: date.toISOString(),
@@ -1600,20 +1969,20 @@ function DatePicker({
     })));
   };
   const combinedClassName = cn("relative", className);
-  return /* @__PURE__ */ React8.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: combinedClassName, onBlur: handleBlur }, /* @__PURE__ */ React9.createElement(
     "input",
     {
       type: "hidden",
       name,
       value: value ? value.toISOString() : ""
     }
-  ), /* @__PURE__ */ React8.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React9.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1626,9 +1995,9 @@ function DatePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React8.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+      /* @__PURE__ */ React9.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
     )
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "input",
     {
       ref: inputRef,
@@ -1645,7 +2014,6 @@ function DatePicker({
       ),
       value: displayValue,
       onClick: handleToggle,
-      onBlur,
       disabled,
       required,
       placeholder,
@@ -1654,7 +2022,7 @@ function DatePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && value && !disabled && /* @__PURE__ */ React8.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React9.createElement(
     "button",
     {
       type: "button",
@@ -1664,7 +2032,14 @@ function DatePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React8.createElement("div", { className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, renderCalendar()));
+  )), isOpen && !disabled && /* @__PURE__ */ React9.createElement(
+    "div",
+    {
+      ref: dropdownRef,
+      className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3"
+    },
+    renderCalendar()
+  ));
 }
 DatePicker.displayName = "DatePicker";
 function normalizeToNativeTime(value) {
@@ -1724,11 +2099,11 @@ function TimePicker({
   showIcon = true,
   ...props
 }) {
-  const inputRef = React8.useRef(null);
-  const [nativeValue, setNativeValue] = React8.useState(
+  const inputRef = React9.useRef(null);
+  const [nativeValue, setNativeValue] = React9.useState(
     normalizeToNativeTime(value)
   );
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     setNativeValue(normalizeToNativeTime(value));
   }, [value]);
   const handleChange = (e) => {
@@ -1744,13 +2119,13 @@ function TimePicker({
   };
   const hasValue = Boolean(value);
   const stepInSeconds = Math.max(1, minuteStep * 60);
-  return /* @__PURE__ */ React8.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React8.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React8.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React9.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React9.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React9.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1763,10 +2138,10 @@ function TimePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React8.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ React8.createElement("path", { d: "M12 6v6l4 2" })
+      /* @__PURE__ */ React9.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ React9.createElement("path", { d: "M12 6v6l4 2" })
     )
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "input",
     {
       ref: inputRef,
@@ -1794,7 +2169,7 @@ function TimePicker({
       "aria-required": required || props["aria-required"],
       ...props
     }
-  ), clearable && value && !disabled && /* @__PURE__ */ React8.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React9.createElement(
     "button",
     {
       type: "button",
@@ -1847,15 +2222,16 @@ function DateRangePicker({
   separator = " - ",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React8.useState(false);
-  const [selectedMonth, setSelectedMonth] = React8.useState(
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [selectedMonth, setSelectedMonth] = React9.useState(
     value.start || /* @__PURE__ */ new Date()
   );
-  const [rangeStart, setRangeStart] = React8.useState(value.start);
-  const [rangeEnd, setRangeEnd] = React8.useState(value.end);
-  const [hoverDate, setHoverDate] = React8.useState(null);
-  const containerRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const [rangeStart, setRangeStart] = React9.useState(value.start);
+  const [rangeEnd, setRangeEnd] = React9.useState(value.end);
+  const [hoverDate, setHoverDate] = React9.useState(null);
+  const triggerRef = React9.useRef(null);
+  const dropdownRef = React9.useRef(null);
+  React9.useEffect(() => {
     setRangeStart(value.start);
     setRangeEnd(value.end);
     if (value.start) {
@@ -1898,12 +2274,20 @@ function DateRangePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  const closeCalendar = React8.useCallback(() => {
-    if (!isOpen) return;
+  const closeCalendar = React9.useCallback(() => {
     setIsOpen(false);
     onBlur?.();
-  }, [isOpen, onBlur]);
-  useOnClickOutside(containerRef, closeCalendar, "pointerdown", true);
+  }, [onBlur]);
+  useOnClickOutside([triggerRef, dropdownRef], closeCalendar, void 0, {
+    capture: true
+  });
+  const handleBlur = (event) => {
+    const nextTarget = event?.relatedTarget;
+    const focusStayedInside = !!triggerRef.current && triggerRef.current.contains(nextTarget) || !!dropdownRef.current && dropdownRef.current.contains(nextTarget);
+    if (!nextTarget || !focusStayedInside) {
+      onBlur?.();
+    }
+  };
   const dayGridStyle = {
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
   };
@@ -1937,7 +2321,7 @@ function DateRangePicker({
     for (let day = 1; day <= daysInMonth; day++) {
       days.push(new Date(year, month, day));
     }
-    return /* @__PURE__ */ React8.createElement("div", { className: "w-[240px] max-w-full" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between pb-3" }, controls?.prev ? /* @__PURE__ */ React8.createElement(
+    return /* @__PURE__ */ React9.createElement("div", { className: "w-[240px] max-w-full" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-between pb-3" }, controls?.prev ? /* @__PURE__ */ React9.createElement(
       "button",
       {
         type: "button",
@@ -1946,7 +2330,7 @@ function DateRangePicker({
         "aria-label": "Previous month"
       },
       "\u2039"
-    ) : /* @__PURE__ */ React8.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" }), /* @__PURE__ */ React8.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), controls?.next ? /* @__PURE__ */ React8.createElement(
+    ) : /* @__PURE__ */ React9.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" }), /* @__PURE__ */ React9.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), controls?.next ? /* @__PURE__ */ React9.createElement(
       "button",
       {
         type: "button",
@@ -1955,13 +2339,13 @@ function DateRangePicker({
         "aria-label": "Next month"
       },
       "\u203A"
-    ) : /* @__PURE__ */ React8.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" })), /* @__PURE__ */ React8.createElement(
+    ) : /* @__PURE__ */ React9.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" })), /* @__PURE__ */ React9.createElement(
       "div",
       {
         className: "grid gap-1 text-xs text-muted-foreground",
         style: dayGridStyle
       },
-      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React8.createElement(
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React9.createElement(
         "div",
         {
           key: `${month}-${day}`,
@@ -1969,9 +2353,9 @@ function DateRangePicker({
         },
         day
       ))
-    ), /* @__PURE__ */ React8.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
+    ), /* @__PURE__ */ React9.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React8.createElement("div", { key: `empty-${month}-${index}`, className: "h-8 w-8" });
+        return /* @__PURE__ */ React9.createElement("div", { key: `empty-${month}-${index}`, className: "h-8 w-8" });
       }
       const isStart = rangeStart && date.toDateString() === rangeStart.toDateString();
       const isEnd = rangeEnd && date.toDateString() === rangeEnd.toDateString();
@@ -1983,7 +2367,7 @@ function DateRangePicker({
       );
       const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
       const disabled2 = isDisabled(date);
-      return /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React9.createElement(
         "button",
         {
           key: date.toISOString(),
@@ -2008,27 +2392,27 @@ function DateRangePicker({
   };
   const combinedClassName = cn("relative", className);
   const displayValue = rangeStart && rangeEnd ? `${formatDate2(rangeStart, format)}${separator}${formatDate2(rangeEnd, format)}` : rangeStart ? formatDate2(rangeStart, format) : "";
-  return /* @__PURE__ */ React8.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: combinedClassName, onBlur: handleBlur }, /* @__PURE__ */ React9.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[start]`,
       value: rangeStart ? rangeStart.toISOString() : ""
     }
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[end]`,
       value: rangeEnd ? rangeEnd.toISOString() : ""
     }
-  ), /* @__PURE__ */ React8.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React9.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2041,11 +2425,12 @@ function DateRangePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React8.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+      /* @__PURE__ */ React9.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
     )
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "input",
     {
+      ref: triggerRef,
       type: "text",
       className: cn(
         "flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-base shadow-sm transition-colors",
@@ -2059,7 +2444,6 @@ function DateRangePicker({
       ),
       value: displayValue,
       onClick: handleToggle,
-      onBlur,
       disabled,
       required,
       placeholder,
@@ -2068,7 +2452,7 @@ function DateRangePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React8.createElement(
+  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React9.createElement(
     "button",
     {
       type: "button",
@@ -2078,7 +2462,15 @@ function DateRangePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React8.createElement("div", { className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, /* @__PURE__ */ React8.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React8.createElement("div", { className: "grid gap-4", style: monthsGridStyle }, renderMonth(selectedMonth, { prev: true }), renderMonth(addMonths(selectedMonth, 1), { next: true }))), rangeStart && !rangeEnd && /* @__PURE__ */ React8.createElement("div", { className: "text-xs text-center pt-2 border-t border-border mt-2" }, "Select end date")));
+  )), isOpen && !disabled && /* @__PURE__ */ React9.createElement(
+    "div",
+    {
+      ref: dropdownRef,
+      className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3"
+    },
+    /* @__PURE__ */ React9.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React9.createElement("div", { className: "grid gap-4", style: monthsGridStyle }, renderMonth(selectedMonth, { prev: true }), renderMonth(addMonths(selectedMonth, 1), { next: true }))),
+    rangeStart && !rangeEnd && /* @__PURE__ */ React9.createElement("div", { className: "text-xs text-center pt-2 border-t border-border mt-2" }, "Select end date")
+  ));
 }
 DateRangePicker.displayName = "DateRangePicker";
 function htmlToMarkdown(html) {
@@ -2149,11 +2541,11 @@ function RichTextEditor({
   ],
   ...props
 }) {
-  const [currentMode, setCurrentMode] = React8.useState(mode);
-  const [content, setContent] = React8.useState(value);
-  const editorRef = React8.useRef(null);
-  const textareaRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const [currentMode, setCurrentMode] = React9.useState(mode);
+  const [content, setContent] = React9.useState(value);
+  const editorRef = React9.useRef(null);
+  const textareaRef = React9.useRef(null);
+  React9.useEffect(() => {
     setContent(value);
     if (currentMode === "wysiwyg" && editorRef.current) {
       editorRef.current.innerHTML = value;
@@ -2241,7 +2633,7 @@ function RichTextEditor({
       }
     }
   };
-  const hasValue = React8.useMemo(() => {
+  const hasValue = React9.useMemo(() => {
     if (!content) return false;
     const stripped = content.replace(/<[^>]+>/g, "").trim();
     return stripped.length > 0;
@@ -2258,10 +2650,10 @@ function RichTextEditor({
     maxHeight,
     overflowY: maxHeight ? "auto" : void 0
   };
-  return /* @__PURE__ */ React8.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React8.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
+  return /* @__PURE__ */ React9.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React9.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React9.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
     const button = toolbarConfig[buttonName];
     if (!button) return null;
-    return /* @__PURE__ */ React8.createElement(
+    return /* @__PURE__ */ React9.createElement(
       "button",
       {
         key: buttonName,
@@ -2274,7 +2666,7 @@ function RichTextEditor({
       },
       button.icon
     );
-  })), allowModeSwitch && /* @__PURE__ */ React8.createElement(
+  })), allowModeSwitch && /* @__PURE__ */ React9.createElement(
     "button",
     {
       type: "button",
@@ -2285,7 +2677,7 @@ function RichTextEditor({
       "aria-label": `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`
     },
     currentMode === "wysiwyg" ? "MD" : "WYSIWYG"
-  )), /* @__PURE__ */ React8.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React8.createElement(
+  )), /* @__PURE__ */ React9.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React9.createElement(
     "div",
     {
       ref: editorRef,
@@ -2300,7 +2692,7 @@ function RichTextEditor({
       "aria-required": required || props["aria-required"],
       suppressContentEditableWarning: true
     }
-  ) : /* @__PURE__ */ React8.createElement(
+  ) : /* @__PURE__ */ React9.createElement(
     "textarea",
     {
       ref: textareaRef,
@@ -2323,6 +2715,6 @@ function RichTextEditor({
 }
 RichTextEditor.displayName = "RichTextEditor";
 
-export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, Radio, RichTextEditor, Select, TextArea, TextInput, TimePicker };
+export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, RichTextEditor, Select, TextArea, TextInput, TimePicker };
 //# sourceMappingURL=inputs.js.map
 //# sourceMappingURL=inputs.js.map