shadcn-ui-react 0.7.11 → 0.7.12

package/dist/index.cjs

@@ -6558,7 +6558,7 @@ var import_class_variance_authority5 = require("class-variance-authority");
 var React42 = __toESM(require("react"), 1);
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority5.cva)(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-label"
+  "text-sm font-medium leading-none text-label peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 var Label3 = React42.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -7200,7 +7200,9 @@ var SelectContext = React46.createContext(null);
 function useSelectContext(componentName) {
   const context = React46.useContext(SelectContext);
   if (!context) {
-    throw new Error(`${componentName} must be used within <Select />`);
+    throw new Error(
+      `${componentName} must be used within <Select />. Aseg\xFArate de importar Select, SelectTrigger, SelectContent, SelectValue y SelectItem desde el mismo archivo "../select", sin mezclar Radix ni otra versi\xF3n del componente.`
+    );
   }
   return context;
 }
@@ -7215,11 +7217,15 @@ function useControllableState({
   const setValue = React46.useCallback(
     (nextValue) => {
       if (!isControlled) {
-        setInternalValue(nextValue);
+        setInternalValue(
+          (previousValue) => Object.is(previousValue, nextValue) ? previousValue : nextValue
+        );
+      }
+      if (!Object.is(currentValue, nextValue)) {
+        onChange == null ? void 0 : onChange(nextValue);
       }
-      onChange == null ? void 0 : onChange(nextValue);
     },
-    [isControlled, onChange]
+    [currentValue, isControlled, onChange]
   );
   return [currentValue, setValue];
 }
@@ -7266,6 +7272,31 @@ function getNextItemValue(items, currentValue, direction) {
   const nextIndex = direction === "next" ? (currentIndex + 1) % enabledItems.length : (currentIndex - 1 + enabledItems.length) % enabledItems.length;
   return (_c = enabledItems[nextIndex]) == null ? void 0 : _c.value;
 }
+function areRegisteredItemsEqual(previous, next) {
+  return Boolean(
+    previous && previous.id === next.id && previous.value === next.value && previous.textValue === next.textValue && previous.disabled === next.disabled && previous.label === next.label
+  );
+}
+function areStylesEqual(previous, next) {
+  if (!previous) return false;
+  return previous.position === next.position && previous.zIndex === next.zIndex && previous.width === next.width && previous.minWidth === next.minWidth && previous.maxWidth === next.maxWidth && previous.maxHeight === next.maxHeight && previous.left === next.left && previous.right === next.right && previous.top === next.top && previous.bottom === next.bottom && previous.transform === next.transform;
+}
+function scrollItemIntoView(container, item) {
+  if (!container || !item) return;
+  const containerRect = container.getBoundingClientRect();
+  const itemRect = item.getBoundingClientRect();
+  const itemTop = itemRect.top - containerRect.top + container.scrollTop;
+  const itemBottom = itemTop + itemRect.height;
+  const visibleTop = container.scrollTop;
+  const visibleBottom = visibleTop + container.clientHeight;
+  if (itemTop < visibleTop) {
+    container.scrollTop = itemTop;
+    return;
+  }
+  if (itemBottom > visibleBottom) {
+    container.scrollTop = itemBottom - container.clientHeight;
+  }
+}
 function Select2({
   value,
   defaultValue = "",
@@ -7304,17 +7335,28 @@ function Select2({
     () => Array.from(itemsRef.current.values()),
     [itemsVersion]
   );
-  const selectedItem = items.find((item) => item.value === currentValue);
+  const selectedItem = React46.useMemo(
+    () => items.find((item) => item.value === currentValue),
+    [currentValue, items]
+  );
   const registerItem = React46.useCallback((item) => {
+    const previousItem = itemsRef.current.get(item.value);
+    if (previousItem && previousItem.id === item.id) {
+      previousItem.label = item.label;
+      previousItem.textValue = item.textValue;
+      previousItem.disabled = item.disabled;
+      if (!areRegisteredItemsEqual(previousItem, item)) {
+        forceItemsUpdate();
+      }
+      return;
+    }
     itemsRef.current.set(item.value, item);
     forceItemsUpdate();
   }, []);
   const unregisterItem = React46.useCallback((value2, id) => {
     const currentItem = itemsRef.current.get(value2);
     if (!currentItem || currentItem.id !== id) return;
-    itemsRef.current.set(value2, __spreadProps(__spreadValues({}, currentItem), {
-      ref: null
-    }));
+    itemsRef.current.delete(value2);
     forceItemsUpdate();
   }, []);
   const updateItemRef = React46.useCallback(
@@ -7322,10 +7364,7 @@ function Select2({
       const currentItem = itemsRef.current.get(value2);
       if (!currentItem || currentItem.id !== id) return;
       if (currentItem.ref === node) return;
-      itemsRef.current.set(value2, __spreadProps(__spreadValues({}, currentItem), {
-        ref: node
-      }));
-      forceItemsUpdate();
+      currentItem.ref = node;
     },
     []
   );
@@ -7343,7 +7382,7 @@ function Select2({
       setIsOpen(false);
       requestAnimationFrame(() => {
         var _a;
-        (_a = triggerRef.current) == null ? void 0 : _a.focus();
+        (_a = triggerRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
       });
     },
     [disabled, setCurrentValue, setIsOpen]
@@ -7355,21 +7394,24 @@ function Select2({
       (item) => item.value === currentValue && !item.disabled
     );
     const firstEnabledItem = getEnabledItems(items)[0];
-    setActiveValue((_a = selectedEnabledItem == null ? void 0 : selectedEnabledItem.value) != null ? _a : firstEnabledItem == null ? void 0 : firstEnabledItem.value);
+    const nextActiveValue = (_a = selectedEnabledItem == null ? void 0 : selectedEnabledItem.value) != null ? _a : firstEnabledItem == null ? void 0 : firstEnabledItem.value;
+    setActiveValue(
+      (previousValue) => previousValue === nextActiveValue ? previousValue : nextActiveValue
+    );
   }, [currentValue, isOpen, items]);
   React46.useEffect(() => {
     if (!isOpen) return;
     const handlePointerDown = (event) => {
       var _a, _b;
       const target = event.target;
-      if (((_a = triggerRef.current) == null ? void 0 : _a.contains(target)) || ((_b = contentRef.current) == null ? void 0 : _b.contains(target))) {
+      if (target && (((_a = triggerRef.current) == null ? void 0 : _a.contains(target)) || ((_b = contentRef.current) == null ? void 0 : _b.contains(target)))) {
         return;
       }
       setIsOpen(false);
     };
-    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("pointerdown", handlePointerDown, true);
     return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [isOpen, setIsOpen]);
   const contextValue = React46.useMemo(
@@ -7419,7 +7461,8 @@ function Select2({
         type: "hidden",
         name,
         value: currentValue,
-        required
+        required,
+        disabled
       }
     ) : null
   ] });
@@ -7435,7 +7478,8 @@ var SelectTrigger = React46.forwardRef(
       invalid,
       disabled,
       onClick,
-      onKeyDown
+      onKeyDown,
+      onPointerDown
     } = _b, props = __objRest(_b, [
       "className",
       "children",
@@ -7445,7 +7489,8 @@ var SelectTrigger = React46.forwardRef(
       "invalid",
       "disabled",
       "onClick",
-      "onKeyDown"
+      "onKeyDown",
+      "onPointerDown"
     ]);
     const context = useSelectContext("SelectTrigger");
     const resolvedVariant = variant != null ? variant : context.variant;
@@ -7571,16 +7616,27 @@ var SelectTrigger = React46.forwardRef(
         disabled: resolvedDisabled,
         className: cn(
           formControlBase,
-          "whitespace-nowrap ring-offset-background [&>span]:line-clamp-1",
+          "relative flex w-full items-center justify-between gap-2 overflow-hidden whitespace-nowrap ring-offset-background",
           formInputVariants[resolvedVariant],
           controlSizeClass,
           resolvedInvalid && formControlErrorClass,
           className
         ),
+        onPointerDown: (event) => {
+          onPointerDown == null ? void 0 : onPointerDown(event);
+          if (event.defaultPrevented || resolvedDisabled || event.button !== 0 || event.ctrlKey) {
+            return;
+          }
+          event.preventDefault();
+        },
         onClick: (event) => {
           onClick == null ? void 0 : onClick(event);
           if (!event.defaultPrevented && !resolvedDisabled) {
             context.setOpen(!context.open);
+            requestAnimationFrame(() => {
+              var _a2;
+              (_a2 = context.triggerRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
+            });
           }
         },
         onKeyDown: handleKeyDown
@@ -7596,13 +7652,25 @@ var SelectTrigger = React46.forwardRef(
 SelectTrigger.displayName = "SelectTrigger";
 var SelectValue = React46.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, placeholder, children } = _b, props = __objRest(_b, ["className", "placeholder", "children"]);
-    var _a2, _b2;
+    var _b = _a, { className, placeholder = "Select an option", children } = _b, props = __objRest(_b, ["className", "placeholder", "children"]);
+    var _a2;
     const context = useSelectContext("SelectValue");
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", __spreadProps(__spreadValues({ ref, className: cn("truncate", className) }, props), { children: (_b2 = children != null ? children : (_a2 = context.selectedItem) == null ? void 0 : _a2.label) != null ? _b2 : placeholder }));
+    const hasValue = Boolean(context.selectedItem) || children !== void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "span",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "min-w-0 flex-1 truncate text-left",
+          !hasValue && "text-muted-foreground",
+          className
+        )
+      }, props), {
+        children: hasValue ? children != null ? children : (_a2 = context.selectedItem) == null ? void 0 : _a2.label : placeholder
+      })
+    );
   }
 );
-SelectValue.displayName = "SelectValue";
 var SelectContent = React46.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -7623,22 +7691,33 @@ var SelectContent = React46.forwardRef(
     const context = useSelectContext("SelectContent");
     const scrollRef = React46.useRef(null);
     const rafRef = React46.useRef(null);
+    const lockedSideRef = React46.useRef(null);
     const [mounted, setMounted] = React46.useState(false);
     const [side, setSide] = React46.useState("bottom");
     const [contentStyle, setContentStyle] = React46.useState();
-    React46.useEffect(() => {
+    React46.useLayoutEffect(() => {
       setMounted(true);
     }, []);
+    React46.useLayoutEffect(() => {
+      if (!context.open) {
+        lockedSideRef.current = null;
+        setContentStyle(void 0);
+      }
+    }, [context.open]);
     const updatePosition = React46.useCallback(() => {
       const trigger = context.triggerRef.current;
       if (!trigger) return;
       const rect = trigger.getBoundingClientRect();
       const viewportPadding = 8;
-      const preferredMaxHeight = 260;
+      const preferredMaxHeight = 288;
       const minUsefulHeight = 140;
       const availableBelow = window.innerHeight - rect.bottom - viewportPadding - sideOffset;
       const availableAbove = rect.top - viewportPadding - sideOffset;
-      const nextSide = availableBelow >= Math.min(preferredMaxHeight, minUsefulHeight) || availableBelow >= availableAbove ? "bottom" : "top";
+      const calculatedSide = availableBelow >= Math.min(preferredMaxHeight, minUsefulHeight) || availableBelow >= availableAbove ? "bottom" : "top";
+      if (!lockedSideRef.current) {
+        lockedSideRef.current = calculatedSide;
+      }
+      const nextSide = lockedSideRef.current;
       const availableHeight = nextSide === "bottom" ? availableBelow : availableAbove;
       const contentMaxHeight = Math.max(
         80,
@@ -7654,14 +7733,17 @@ var SelectContent = React46.forwardRef(
       };
       if (align === "start") {
         baseStyle.left = rect.left;
+        baseStyle.right = void 0;
         baseStyle.transform = void 0;
       }
       if (align === "center") {
         baseStyle.left = rect.left + rect.width / 2;
+        baseStyle.right = void 0;
         baseStyle.transform = "translateX(-50%)";
       }
       if (align === "end") {
         baseStyle.left = rect.right;
+        baseStyle.right = void 0;
         baseStyle.transform = "translateX(-100%)";
       }
       if (nextSide === "bottom") {
@@ -7671,14 +7753,19 @@ var SelectContent = React46.forwardRef(
         baseStyle.bottom = window.innerHeight - rect.top + sideOffset;
         baseStyle.top = void 0;
       }
-      setSide(nextSide);
-      setContentStyle(baseStyle);
+      setSide(
+        (previousSide) => previousSide === nextSide ? previousSide : nextSide
+      );
+      setContentStyle(
+        (previousStyle) => areStylesEqual(previousStyle, baseStyle) ? previousStyle : baseStyle
+      );
     }, [align, context.triggerRef, sideOffset]);
     const scheduleUpdatePosition = React46.useCallback(() => {
       if (rafRef.current) {
         cancelAnimationFrame(rafRef.current);
       }
       rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
         updatePosition();
       });
     }, [updatePosition]);
@@ -7717,13 +7804,10 @@ var SelectContent = React46.forwardRef(
     React46.useLayoutEffect(() => {
       if (!context.open) return;
       const frame = requestAnimationFrame(() => {
-        var _a2;
         const activeItem = context.items.find(
           (item) => item.value === context.activeValue
         );
-        (_a2 = activeItem == null ? void 0 : activeItem.ref) == null ? void 0 : _a2.scrollIntoView({
-          block: "nearest"
-        });
+        scrollItemIntoView(scrollRef.current, activeItem == null ? void 0 : activeItem.ref);
       });
       return () => {
         cancelAnimationFrame(frame);
@@ -7741,8 +7825,7 @@ var SelectContent = React46.forwardRef(
           role: "listbox",
           "data-side": side,
           className: cn(
-            "min-w-32 rounded-md border border-border bg-popover text-popover-foreground shadow-md",
-            "overflow-hidden",
+            "min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
             className
           ),
           style: __spreadValues(__spreadValues({}, contentStyle), style),
@@ -7752,20 +7835,13 @@ var SelectContent = React46.forwardRef(
               ref: scrollRef,
               "data-select-scroll-content": true,
               className: cn(
-                "max-h-full px-1 py-1",
-                "!overflow-x-hidden !overflow-y-scroll overscroll-contain",
-                "[scrollbar-gutter:stable]",
-                "[scrollbar-width:thin]",
-                "[&::-webkit-scrollbar]:!block",
-                "[&::-webkit-scrollbar]:!w-2",
-                "[&::-webkit-scrollbar-track]:!bg-transparent",
-                "[&::-webkit-scrollbar-thumb]:!rounded-full",
-                "[&::-webkit-scrollbar-thumb]:!bg-border"
+                "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain px-1 py-1",
+                "scrollbar-gutter-stable"
               ),
               style: {
                 maxHeight: contentStyle.maxHeight,
                 overflowX: "hidden",
-                overflowY: "scroll",
+                overflowY: "auto",
                 overscrollBehavior: "contain",
                 scrollbarGutter: "stable",
                 WebkitOverflowScrolling: "touch"
@@ -7773,6 +7849,9 @@ var SelectContent = React46.forwardRef(
               onWheel: (event) => {
                 event.stopPropagation();
               },
+              onTouchMove: (event) => {
+                event.stopPropagation();
+              },
               children
             }
           )
@@ -7848,7 +7927,7 @@ var SelectItem = React46.forwardRef(
     const labelText = textValue != null ? textValue : getNodeText(children);
     const isSelected = selectedValue === value;
     const isActive = activeValue === value;
-    React46.useEffect(() => {
+    React46.useLayoutEffect(() => {
       registerItem({
         id: itemId,
         value,
@@ -7865,9 +7944,9 @@ var SelectItem = React46.forwardRef(
       unregisterItem,
       itemId,
       value,
-      children,
       labelText,
-      disabled
+      disabled,
+      children
     ]);
     const handleItemRef = React46.useCallback(
       (node) => {
@@ -7940,15 +8019,25 @@ SelectSeparator.displayName = "SelectSeparator";
 
 // src/components/searchable-select.tsx
 var React47 = __toESM(require("react"), 1);
+var import_react_dom2 = require("react-dom");
 var import_react_icons10 = require("@radix-ui/react-icons");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function normalizeText(value) {
   return String(value != null ? value : "").normalize("NFD").replace(new RegExp("\\p{Diacritic}", "gu"), "").toLowerCase().trim();
 }
 function getLabelText(value) {
+  if (value === null || value === void 0 || typeof value === "boolean") {
+    return "";
+  }
   if (typeof value === "string" || typeof value === "number") {
     return String(value);
   }
+  if (Array.isArray(value)) {
+    return value.map(getLabelText).join("");
+  }
+  if (React47.isValidElement(value)) {
+    return getLabelText(value.props.children);
+  }
   return "";
 }
 function getOptionText(item) {
@@ -7967,6 +8056,10 @@ function getNextEnabledIndex2(items, currentIndex, direction) {
   }
   return -1;
 }
+function areStylesEqual2(previous, next) {
+  if (!previous) return false;
+  return previous.position === next.position && previous.zIndex === next.zIndex && previous.width === next.width && previous.minWidth === next.minWidth && previous.maxWidth === next.maxWidth && previous.maxHeight === next.maxHeight && previous.left === next.left && previous.right === next.right && previous.top === next.top && previous.bottom === next.bottom && previous.transform === next.transform;
+}
 function SearchableSelectBase({
   items,
   value,
@@ -7990,6 +8083,8 @@ function SearchableSelectBase({
 }) {
   const rootRef = React47.useRef(null);
   const inputRef = React47.useRef(null);
+  const contentRef = React47.useRef(null);
+  const rafRef = React47.useRef(null);
   const listboxId = React47.useId();
   const sizeClasses = getFormSizeClasses(size, customSize);
   const triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
@@ -8002,9 +8097,14 @@ function SearchableSelectBase({
   const selectedText = React47.useMemo(() => {
     return getOptionText(selectedItem);
   }, [selectedItem]);
+  const [mounted, setMounted] = React47.useState(false);
   const [open, setOpen] = React47.useState(false);
   const [inputValue, setInputValue] = React47.useState(selectedText);
   const [activeIndex, setActiveIndex] = React47.useState(-1);
+  const [contentStyle, setContentStyle] = React47.useState();
+  React47.useLayoutEffect(() => {
+    setMounted(true);
+  }, []);
   React47.useEffect(() => {
     if (!open) {
       setInputValue(selectedText);
@@ -8021,17 +8121,110 @@ function SearchableSelectBase({
       return haystack.includes(query);
     });
   }, [inputValue, items]);
+  const updatePosition = React47.useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const rect = root.getBoundingClientRect();
+    const viewportPadding = 8;
+    const sideOffset = 6;
+    const preferredMaxHeight = 288;
+    const minUsefulHeight = 140;
+    const availableBelow = window.innerHeight - rect.bottom - viewportPadding - sideOffset;
+    const availableAbove = rect.top - viewportPadding - sideOffset;
+    const shouldOpenBelow = availableBelow >= Math.min(preferredMaxHeight, minUsefulHeight) || availableBelow >= availableAbove;
+    const availableHeight = shouldOpenBelow ? availableBelow : availableAbove;
+    const contentMaxHeight = Math.max(
+      96,
+      Math.min(preferredMaxHeight, availableHeight)
+    );
+    const nextStyle = {
+      position: "fixed",
+      zIndex: 9999,
+      left: Math.max(viewportPadding, rect.left),
+      width: rect.width,
+      minWidth: rect.width,
+      maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+      maxHeight: contentMaxHeight
+    };
+    if (shouldOpenBelow) {
+      nextStyle.top = rect.bottom + sideOffset;
+      nextStyle.bottom = void 0;
+    } else {
+      nextStyle.bottom = window.innerHeight - rect.top + sideOffset;
+      nextStyle.top = void 0;
+    }
+    setContentStyle(
+      (previousStyle) => areStylesEqual2(previousStyle, nextStyle) ? previousStyle : nextStyle
+    );
+  }, []);
+  const scheduleUpdatePosition = React47.useCallback(() => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      updatePosition();
+    });
+  }, [updatePosition]);
+  const openDropdown = React47.useCallback(() => {
+    if (disabled) return;
+    if (!open) {
+      setInputValue("");
+      setOpen(true);
+    }
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+    });
+  }, [disabled, open]);
+  React47.useLayoutEffect(() => {
+    if (!open) {
+      setContentStyle(void 0);
+    }
+  }, [open]);
+  React47.useLayoutEffect(() => {
+    var _a, _b;
+    if (!open) return;
+    updatePosition();
+    scheduleUpdatePosition();
+    const handleResizeOrScroll = () => {
+      scheduleUpdatePosition();
+    };
+    window.addEventListener("resize", handleResizeOrScroll);
+    window.addEventListener("scroll", handleResizeOrScroll, true);
+    (_a = window.visualViewport) == null ? void 0 : _a.addEventListener("resize", handleResizeOrScroll);
+    (_b = window.visualViewport) == null ? void 0 : _b.addEventListener("scroll", handleResizeOrScroll);
+    return () => {
+      var _a2, _b2;
+      window.removeEventListener("resize", handleResizeOrScroll);
+      window.removeEventListener("scroll", handleResizeOrScroll, true);
+      (_a2 = window.visualViewport) == null ? void 0 : _a2.removeEventListener(
+        "resize",
+        handleResizeOrScroll
+      );
+      (_b2 = window.visualViewport) == null ? void 0 : _b2.removeEventListener(
+        "scroll",
+        handleResizeOrScroll
+      );
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [open, scheduleUpdatePosition, updatePosition]);
   React47.useEffect(() => {
     if (!open) return;
     const firstEnabledIndex = filteredItems.findIndex((item) => !item.disabled);
-    setActiveIndex(firstEnabledIndex);
+    setActiveIndex(
+      (previousIndex) => previousIndex === firstEnabledIndex ? previousIndex : firstEnabledIndex
+    );
   }, [filteredItems, open]);
   React47.useEffect(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
-      var _a;
+      var _a, _b;
       const target = event.target;
-      if (target && ((_a = rootRef.current) == null ? void 0 : _a.contains(target))) {
+      if (target && (((_a = rootRef.current) == null ? void 0 : _a.contains(target)) || ((_b = contentRef.current) == null ? void 0 : _b.contains(target)))) {
         return;
       }
       setOpen(false);
@@ -8057,6 +8250,99 @@ function SearchableSelectBase({
     },
     [isControlled, onValueChange]
   );
+  const dropdown = open && mounted && contentStyle ? (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        ref: contentRef,
+        className: cn(
+          "overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
+          contentClassName
+        ),
+        style: __spreadProps(__spreadValues({}, contentStyle), {
+          maxHeight: contentStyle.maxHeight
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "div",
+          {
+            id: listboxId,
+            role: "listbox",
+            className: "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain p-1 scrollbar-gutter-stable",
+            style: {
+              maxHeight: contentStyle.maxHeight,
+              overflowX: "hidden",
+              overflowY: "auto",
+              overscrollBehavior: "contain",
+              scrollbarGutter: "stable",
+              WebkitOverflowScrolling: "touch"
+            },
+            onWheel: (event) => {
+              event.stopPropagation();
+            },
+            onTouchMove: (event) => {
+              event.stopPropagation();
+            },
+            children: filteredItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "div",
+              {
+                className: cn(
+                  "px-3 py-6 text-center text-muted-foreground",
+                  sizeClasses.message
+                ),
+                children: emptyText
+              }
+            ) : filteredItems.map((item, index) => {
+              const isSelected = item.value === currentValue;
+              const isActive = index === activeIndex;
+              return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                "div",
+                {
+                  id: `${listboxId}-option-${index}`,
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": item.disabled,
+                  tabIndex: -1,
+                  onMouseMove: () => {
+                    if (!item.disabled) {
+                      setActiveIndex(index);
+                    }
+                  },
+                  onPointerDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (!item.disabled) {
+                      selectItem(item);
+                    }
+                  },
+                  className: cn(
+                    "relative flex w-full select-none items-center gap-2 rounded-lg px-3 text-left outline-none transition",
+                    sizeClasses.selectItem,
+                    item.disabled ? "pointer-events-none opacity-50" : "cursor-pointer",
+                    isActive && !item.disabled && "bg-accent text-accent-foreground",
+                    !isActive && !item.disabled && "hover:bg-accent/70 hover:text-accent-foreground",
+                    isSelected && "font-medium",
+                    itemClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+                    isSelected ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                      import_react_icons10.CheckIcon,
+                      {
+                        "aria-hidden": "true",
+                        className: "h-4 w-4 shrink-0 text-primary"
+                      }
+                    ) : null
+                  ]
+                },
+                item.value
+              );
+            })
+          }
+        )
+      }
+    ),
+    document.body
+  ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
     name ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "input",
@@ -8079,13 +8365,10 @@ function SearchableSelectBase({
           disabled && "cursor-not-allowed opacity-50",
           triggerClassName
         ) : triggerClassName,
-        onPointerDown: () => {
-          if (disabled) return;
-          setOpen(true);
-          requestAnimationFrame(() => {
-            var _a;
-            (_a = inputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
-          });
+        onPointerDown: (event) => {
+          if (disabled || event.button !== 0 || event.ctrlKey) return;
+          event.preventDefault();
+          openDropdown();
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -8104,11 +8387,7 @@ function SearchableSelectBase({
               spellCheck: false,
               disabled,
               onFocus: () => {
-                setOpen(true);
-                requestAnimationFrame(() => {
-                  var _a;
-                  (_a = inputRef.current) == null ? void 0 : _a.select();
-                });
+                openDropdown();
               },
               onChange: (event) => {
                 setInputValue(event.target.value);
@@ -8191,86 +8470,7 @@ function SearchableSelectBase({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      "div",
-      {
-        className: cn(
-          "absolute left-0 top-full z-50 mt-1 w-full overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl transition",
-          !open && "pointer-events-none invisible opacity-0",
-          open && "visible opacity-100",
-          contentClassName
-        ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "div",
-          {
-            id: listboxId,
-            role: "listbox",
-            className: "max-h-72 overflow-y-auto overscroll-contain p-1 [scrollbar-gutter:stable]",
-            onWheelCapture: (event) => {
-              event.stopPropagation();
-            },
-            onTouchMoveCapture: (event) => {
-              event.stopPropagation();
-            },
-            children: filteredItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              "div",
-              {
-                className: cn(
-                  "px-3 py-6 text-center text-muted-foreground",
-                  sizeClasses.message
-                ),
-                children: emptyText
-              }
-            ) : filteredItems.map((item, index) => {
-              const isSelected = item.value === currentValue;
-              const isActive = index === activeIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-                "div",
-                {
-                  id: `${listboxId}-option-${index}`,
-                  role: "option",
-                  "aria-selected": isSelected,
-                  "aria-disabled": item.disabled,
-                  tabIndex: -1,
-                  onMouseMove: () => {
-                    if (!item.disabled) {
-                      setActiveIndex(index);
-                    }
-                  },
-                  onPointerDown: (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (!item.disabled) {
-                      selectItem(item);
-                    }
-                  },
-                  className: cn(
-                    "relative flex w-full select-none items-center gap-2 rounded-lg px-3 text-left outline-none transition",
-                    sizeClasses.selectItem,
-                    item.disabled ? "pointer-events-none opacity-50" : "cursor-pointer",
-                    isActive && !item.disabled && "bg-accent text-accent-foreground",
-                    !isActive && !item.disabled && "hover:bg-accent/70 hover:text-accent-foreground",
-                    isSelected && "font-medium",
-                    itemClassName
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
-                    isSelected ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                      import_react_icons10.CheckIcon,
-                      {
-                        "aria-hidden": "true",
-                        className: "h-4 w-4 shrink-0 text-primary"
-                      }
-                    ) : null
-                  ]
-                },
-                item.value
-              );
-            })
-          }
-        )
-      }
-    )
+    dropdown
   ] });
 }
 var SearchableSelect = React47.memo(
@@ -8285,7 +8485,7 @@ var FormSelect = ({
   rules,
   shouldUnregister,
   defaultValue,
-  placeholder = "Seleccionar opci\xF3n",
+  placeholder = "Select an option",
   label,
   requiredLabel,
   className,
@@ -8301,7 +8501,6 @@ var FormSelect = ({
   getOptionLabel = getDefaultOptionLabel,
   getOptionDisabled,
   getOptionData,
-  children,
   onChange,
   onChangeItem,
   disabled,
@@ -8310,17 +8509,14 @@ var FormSelect = ({
   variant = "outline",
   invalid,
   searchable = false,
-  searchPlaceholder = "Buscar\u2026",
-  emptyText = "No hay resultados",
-  classNameDefault = true,
-  position
+  searchPlaceholder = "Search\u2026",
+  emptyText = "No results",
+  classNameDefault = true
 }) => {
   const form = (0, import_react_hook_form5.useFormContext)();
   const controllerControl = control != null ? control : form == null ? void 0 : form.control;
   const sizeClasses = getFormSizeClasses(size, customSize);
   const triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
-  const contentBase = "z-50 rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none";
-  const contentViewport = "[&_[data-radix-select-viewport]]:max-h-72 [&_[data-radix-select-viewport]]:overflow-y-auto [&_[data-radix-select-viewport]]:overscroll-contain [&_[data-radix-select-viewport]]:[scrollbar-gutter:stable]";
   const normalizedOptions = React48.useMemo(() => {
     if (options) return options;
     return (items != null ? items : []).map((item) => {
@@ -8361,15 +8557,11 @@ var FormSelect = ({
           onChange == null ? void 0 : onChange(value);
           onChangeItem == null ? void 0 : onChangeItem((_a2 = nextOption == null ? void 0 : nextOption.data) != null ? _a2 : null);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(FormItem, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(FormItem, { className: itemClassName, children: [
           label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             FormLabel,
             {
-              className: cn(
-                "flex items-center gap-0.5",
-                sizeClasses.label,
-                labelClassName
-              ),
+              className: cn("flex items-center gap-0.5", labelClassName),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: label }),
                 requiredLabel ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -8385,7 +8577,7 @@ var FormSelect = ({
               ]
             }
           ) : null,
-          searchable ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          searchable ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             SearchableSelect,
             {
               items: normalizedOptions,
@@ -8408,74 +8600,34 @@ var FormSelect = ({
                 var _a2;
                 field.onChange(value);
                 onChange == null ? void 0 : onChange(value);
-                onChangeItem == null ? void 0 : onChangeItem((_a2 = option == null ? void 0 : option.data) != null ? _a2 : null);
+                onChangeItem == null ? void 0 : onChangeItem(
+                  (_a2 = option == null ? void 0 : option.data) != null ? _a2 : null
+                );
                 field.onBlur();
               }
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Select2,
             {
               value: (_b = field.value) != null ? _b : "",
               onValueChange: handleValueChange,
               onOpenChange: (nextOpen) => {
-                if (!nextOpen) {
-                  field.onBlur();
-                }
+                if (!nextOpen) field.onBlur();
               },
               disabled,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  SelectTrigger,
-                  {
-                    className: classNameDefault ? cn(
-                      formControlBase,
-                      formInputVariants[variant],
-                      triggerSizeClass,
-                      hasError && formControlErrorClass,
-                      className
-                    ) : className,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder })
-                  }
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  SelectContent,
-                  {
-                    position,
-                    sideOffset: 6,
-                    className: cn(
-                      contentBase,
-                      contentViewport,
-                      "w-(--radix-select-trigger-width) min-w-(--radix-select-trigger-width) overflow-hidden!",
-                      contentClassName
-                    ),
-                    onWheelCapture: (event) => {
-                      event.stopPropagation();
-                    },
-                    onTouchMoveCapture: (event) => {
-                      event.stopPropagation();
-                    },
-                    children: children ? children : normalizedOptions.length > 0 ? normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                      SelectItem,
-                      {
-                        value: option.value,
-                        disabled: option.disabled,
-                        className: cn(sizeClasses.selectItem, itemClassName),
-                        children: option.label
-                      },
-                      option.value
-                    )) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                      "div",
-                      {
-                        className: cn(
-                          "px-3 py-2 text-muted-foreground",
-                          sizeClasses.message
-                        ),
-                        children: emptyText
-                      }
-                    )
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                SelectTrigger,
+                {
+                  className: classNameDefault ? cn(
+                    formControlBase,
+                    formInputVariants[variant],
+                    triggerSizeClass,
+                    hasError && formControlErrorClass,
+                    className
+                  ) : className,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder })
+                }
+              ) })
             }
           ),
           fieldError ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -10207,7 +10359,7 @@ var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function UiSelect({
   label,
-  placeholder,
+  placeholder = "Select an option",
   value,
   defaultValue,
   onChange,
@@ -10225,7 +10377,6 @@ function UiSelect({
   size = "md",
   customSize,
   variant = "outline",
-  classNameDefault = true,
   errorMessage,
   htmlFormItemId,
   position
@@ -10235,20 +10386,16 @@ function UiSelect({
   const messageId = `${triggerId}-message`;
   const hasError = Boolean(errorMessage);
   const sizeClasses = getFormSizeClasses(size, customSize);
-  const triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
-  const contentBase = "z-50 rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none";
-  const contentViewport = "[&_[data-radix-select-viewport]]:max-h-72 [&_[data-radix-select-viewport]]:overflow-y-auto [&_[data-radix-select-viewport]]:overscroll-contain [&_[data-radix-select-viewport]]:[scrollbar-gutter:stable]";
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("w-full space-y-2", selectClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("w-full space-y-0.5", selectClassName), children: [
     label ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       Label3,
       {
+        htmlFor: triggerId,
         className: cn(
-          "inline-flex items-start gap-0.5 font-medium",
-          sizeClasses.label,
+          "flex items-center gap-0.5 text-sm font-medium -mt-0.75 -pt-1.5",
           hasError && "text-destructive",
           labelClassName
         ),
-        htmlFor: triggerId,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: label }),
           requiredLabel ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
@@ -10271,6 +10418,10 @@ function UiSelect({
         defaultValue,
         onValueChange: onChange,
         disabled,
+        size,
+        customSize,
+        variant,
+        invalid: hasError,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             SelectTrigger,
@@ -10278,13 +10429,7 @@ function UiSelect({
               id: triggerId,
               "aria-invalid": hasError || void 0,
               "aria-describedby": errorMessage ? messageId : void 0,
-              className: classNameDefault ? cn(
-                formControlBase,
-                formInputVariants[variant],
-                triggerSizeClass,
-                hasError && formControlErrorClass,
-                className
-              ) : className,
+              className,
               children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectValue, { placeholder })
             }
           ),
@@ -10294,17 +10439,11 @@ function UiSelect({
               position,
               sideOffset: 6,
               className: cn(
-                contentBase,
-                contentViewport,
-                "w-(--radix-select-trigger-width) min-w-(--radix-select-trigger-width) overflow-hidden!",
+                "z-50 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none",
                 contentClassName
               ),
-              onWheelCapture: (event) => {
-                event.stopPropagation();
-              },
-              onTouchMoveCapture: (event) => {
-                event.stopPropagation();
-              },
+              onWheelCapture: (event) => event.stopPropagation(),
+              onTouchMoveCapture: (event) => event.stopPropagation(),
               children: children != null ? children : items == null ? void 0 : items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 SelectItem,
                 {