shadcn-ui-react 0.7.10 → 0.7.12

package/dist/index.cjs

@@ -251,12 +251,10 @@ __export(index_exports, {
   SelectGroup: () => SelectGroup,
   SelectItem: () => SelectItem,
   SelectLabel: () => SelectLabel,
-  SelectScrollDownButton: () => SelectScrollDownButton,
-  SelectScrollUpButton: () => SelectScrollUpButton,
   SelectSeparator: () => SelectSeparator,
   SelectTrigger: () => SelectTrigger,
   SelectValue: () => SelectValue,
-  Separator: () => Separator6,
+  Separator: () => Separator5,
   Sheet: () => Sheet,
   SheetClose: () => SheetClose,
   SheetContent: () => SheetContent,
@@ -307,9 +305,18 @@ __export(index_exports, {
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  formCompositeControlBase: () => formCompositeControlBase,
+  formCompositeControlErrorClass: () => formCompositeControlErrorClass,
+  formCompositeVariants: () => formCompositeVariants,
+  formControlBase: () => formControlBase,
+  formControlErrorClass: () => formControlErrorClass,
+  formInputVariants: () => formInputVariants,
+  formSizeVariants: () => formSizeVariants,
   getDefaultOptionLabel: () => getDefaultOptionLabel,
   getDefaultOptionValue: () => getDefaultOptionValue,
   getErrorMessage: () => getErrorMessage,
+  getFormControlSizeClass: () => getFormControlSizeClass,
+  getFormSizeClasses: () => getFormSizeClasses,
   getNextEnabledIndex: () => getNextEnabledIndex,
   iconButtonVariants: () => iconButtonVariants,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
@@ -319,7 +326,8 @@ __export(index_exports, {
   toggleVariants: () => toggleVariants,
   useFormField: () => useFormField,
   useSidebar: () => useSidebar,
-  useToast: () => useToast
+  useToast: () => useToast,
+  variants: () => variants
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -6550,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"]);
@@ -6865,7 +6873,7 @@ var import_react_hook_form4 = require("react-hook-form");
 // src/components/input.tsx
 var React45 = __toESM(require("react"), 1);
 
-// src/components/Form/utils/form-utils.ts
+// src/utils/form-utils.ts
 var formInputVariants = {
   outline: "rounded-md border border-input bg-input backdrop-blur-sm shadow-sm hover:border-primary/60 focus:border-primary focus:ring-2 focus:ring-primary/20",
   soft: "rounded-md border border-transparent bg-muted/60 shadow-sm hover:bg-muted focus:bg-input/80 focus:ring-2 focus:ring-primary/20",
@@ -6875,6 +6883,15 @@ var formInputVariants = {
   unstyled: "border-0 shadow-none focus:ring-0",
   link: "h-auto border-0 bg-transparent p-0 text-primary shadow-none underline-offset-4 focus:underline focus:ring-0"
 };
+var formCompositeVariants = {
+  outline: "rounded-md border border-input bg-input backdrop-blur-sm shadow-sm hover:border-primary/60 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20",
+  soft: "rounded-md border border-transparent bg-muted/60 shadow-sm hover:bg-muted focus-within:bg-input/80 focus-within:ring-2 focus-within:ring-primary/20",
+  ghost: "rounded-md border border-transparent bg-transparent hover:bg-muted/50 focus-within:ring-2 focus-within:ring-ring",
+  filled: "rounded-md border border-input bg-muted/70 shadow-inner hover:bg-muted focus-within:bg-input/70 focus-within:ring-2 focus-within:ring-primary/20",
+  flushed: "rounded-none border-0 border-b border-input px-0 shadow-none focus-within:border-b-2 focus-within:border-primary focus-within:ring-0",
+  unstyled: "border-0 shadow-none focus-within:ring-0",
+  link: "h-auto border-0 bg-transparent p-0 text-primary shadow-none underline-offset-4 focus-within:underline focus-within:ring-0"
+};
 var variants = formInputVariants;
 var formSizeVariants = {
   "2xs": {
@@ -6955,9 +6972,18 @@ var formSizeVariants = {
     message: "text-base"
   }
 };
+var formControlBase = "relative inline-flex w-full items-center justify-between gap-2 text-foreground outline-none transition data-[placeholder]:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50";
+var formCompositeControlBase = "relative flex w-full items-center gap-2 text-foreground outline-none transition";
+var formControlErrorClass = "border-destructive focus:border-destructive focus:ring-destructive/20";
+var formCompositeControlErrorClass = "border-destructive focus-within:border-destructive focus-within:ring-destructive/20";
 function getFormSizeClasses(size = "md", customSize) {
   return __spreadValues(__spreadValues({}, formSizeVariants[size]), customSize);
 }
+function getFormControlSizeClass(variant, sizeClasses) {
+  if (variant === "flushed") return sizeClasses.flushedControl;
+  if (variant === "link") return sizeClasses.linkControl;
+  return sizeClasses.control;
+}
 
 // src/components/input.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -7167,207 +7193,851 @@ var import_react_hook_form5 = require("react-hook-form");
 
 // src/components/select.tsx
 var import_react_icons9 = require("@radix-ui/react-icons");
-var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
 var React46 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Select2 = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var BODY_UNLOCK_ATTR = "data-select-scroll-unlocked";
-var BODY_UNLOCK_STYLE_ID = "radix-select-scroll-unlock-style";
-var useSafeLayoutEffect = typeof window !== "undefined" ? React46.useLayoutEffect : React46.useEffect;
-function SelectBodyScrollUnlock() {
-  useSafeLayoutEffect(() => {
-    var _a;
-    if (typeof document === "undefined") return;
-    if (!document.getElementById(BODY_UNLOCK_STYLE_ID)) {
-      const style = document.createElement("style");
-      style.id = BODY_UNLOCK_STYLE_ID;
-      style.textContent = `
-        body[${BODY_UNLOCK_ATTR}][data-scroll-locked] {
-          overflow: auto !important;
-          margin-right: 0 !important;
-          padding-right: 0 !important;
-        }
-      `;
-      document.head.appendChild(style);
-    }
-    const body = document.body;
-    const currentCount = Number((_a = body.getAttribute(BODY_UNLOCK_ATTR)) != null ? _a : "0");
-    body.setAttribute(BODY_UNLOCK_ATTR, String(currentCount + 1));
-    return () => {
-      var _a2;
-      const nextCount = Number((_a2 = body.getAttribute(BODY_UNLOCK_ATTR)) != null ? _a2 : "1") - 1;
-      if (nextCount <= 0) {
-        body.removeAttribute(BODY_UNLOCK_ATTR);
-      } else {
-        body.setAttribute(BODY_UNLOCK_ATTR, String(nextCount));
+var SelectContext = React46.createContext(null);
+function useSelectContext(componentName) {
+  const context = React46.useContext(SelectContext);
+  if (!context) {
+    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;
+}
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [internalValue, setInternalValue] = React46.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const setValue = React46.useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(
+          (previousValue) => Object.is(previousValue, nextValue) ? previousValue : nextValue
+        );
       }
-    };
-  }, []);
-  return null;
+      if (!Object.is(currentValue, nextValue)) {
+        onChange == null ? void 0 : onChange(nextValue);
+      }
+    },
+    [currentValue, isControlled, onChange]
+  );
+  return [currentValue, setValue];
 }
-var SelectTrigger = React46.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    SelectPrimitive.Trigger,
-    __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background transition-colors placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-        className
-      )
-    }, props), {
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons9.CaretSortIcon, { className: "h-4 w-4 shrink-0 opacity-50" }) })
-      ]
-    })
+function composeRefs(...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(node);
+        return;
+      }
+      ref.current = node;
+    });
+  };
+}
+function getNodeText(node) {
+  if (node === null || node === void 0 || typeof node === "boolean") {
+    return "";
+  }
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(getNodeText).join("");
+  }
+  if (React46.isValidElement(node)) {
+    return getNodeText(node.props.children);
+  }
+  return "";
+}
+function getEnabledItems(items) {
+  return items.filter((item) => !item.disabled);
+}
+function getNextItemValue(items, currentValue, direction) {
+  var _a, _b, _c;
+  const enabledItems = getEnabledItems(items);
+  if (!enabledItems.length) return void 0;
+  const currentIndex = enabledItems.findIndex(
+    (item) => item.value === currentValue
+  );
+  if (currentIndex === -1) {
+    return direction === "next" ? (_a = enabledItems[0]) == null ? void 0 : _a.value : (_b = enabledItems[enabledItems.length - 1]) == null ? void 0 : _b.value;
+  }
+  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 = "",
+  onValueChange,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  name,
+  required,
+  variant = "outline",
+  size = "sm",
+  customSize,
+  invalid = false,
+  children
+}) {
+  const triggerRef = React46.useRef(null);
+  const contentRef = React46.useRef(null);
+  const [currentValue, setCurrentValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [isOpen, setIsOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const itemsRef = React46.useRef(/* @__PURE__ */ new Map());
+  const [itemsVersion, forceItemsUpdate] = React46.useReducer(
+    (version) => version + 1,
+    0
+  );
+  const [activeValue, setActiveValue] = React46.useState();
+  const items = React46.useMemo(
+    () => Array.from(itemsRef.current.values()),
+    [itemsVersion]
+  );
+  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.delete(value2);
+    forceItemsUpdate();
+  }, []);
+  const updateItemRef = React46.useCallback(
+    (value2, id, node) => {
+      const currentItem = itemsRef.current.get(value2);
+      if (!currentItem || currentItem.id !== id) return;
+      if (currentItem.ref === node) return;
+      currentItem.ref = node;
+    },
+    []
   );
-});
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React46.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    SelectPrimitive.ScrollUpButton,
-    __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )
-    }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons9.ChevronUpIcon, { className: "h-4 w-4" })
-    })
+  const handleOpenChange = React46.useCallback(
+    (nextOpen) => {
+      if (disabled) return;
+      setIsOpen(nextOpen);
+    },
+    [disabled, setIsOpen]
   );
-});
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React46.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    SelectPrimitive.ScrollDownButton,
-    __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )
-    }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons9.ChevronDownIcon, { className: "h-4 w-4" })
-    })
+  const handleValueChange = React46.useCallback(
+    (nextValue) => {
+      if (disabled) return;
+      setCurrentValue(nextValue);
+      setIsOpen(false);
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = triggerRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+      });
+    },
+    [disabled, setCurrentValue, setIsOpen]
   );
-});
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+  React46.useEffect(() => {
+    var _a;
+    if (!isOpen) return;
+    const selectedEnabledItem = items.find(
+      (item) => item.value === currentValue && !item.disabled
+    );
+    const firstEnabledItem = getEnabledItems(items)[0];
+    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 (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, true);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, [isOpen, setIsOpen]);
+  const contextValue = React46.useMemo(
+    () => ({
+      value: currentValue,
+      open: isOpen,
+      disabled,
+      invalid,
+      variant,
+      size,
+      customSize,
+      selectedItem,
+      activeValue,
+      items,
+      triggerRef,
+      contentRef,
+      setOpen: handleOpenChange,
+      setValue: handleValueChange,
+      setActiveValue,
+      registerItem,
+      unregisterItem,
+      updateItemRef
+    }),
+    [
+      currentValue,
+      isOpen,
+      disabled,
+      invalid,
+      variant,
+      size,
+      customSize,
+      selectedItem,
+      activeValue,
+      items,
+      handleOpenChange,
+      handleValueChange,
+      registerItem,
+      unregisterItem,
+      updateItemRef
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(SelectContext.Provider, { value: contextValue, children: [
+    children,
+    name ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "input",
+      {
+        type: "hidden",
+        name,
+        value: currentValue,
+        required,
+        disabled
+      }
+    ) : null
+  ] });
+}
+var SelectTrigger = React46.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      variant,
+      size,
+      customSize,
+      invalid,
+      disabled,
+      onClick,
+      onKeyDown,
+      onPointerDown
+    } = _b, props = __objRest(_b, [
+      "className",
+      "children",
+      "variant",
+      "size",
+      "customSize",
+      "invalid",
+      "disabled",
+      "onClick",
+      "onKeyDown",
+      "onPointerDown"
+    ]);
+    const context = useSelectContext("SelectTrigger");
+    const resolvedVariant = variant != null ? variant : context.variant;
+    const resolvedSize = size != null ? size : context.size;
+    const resolvedCustomSize = customSize != null ? customSize : context.customSize;
+    const resolvedInvalid = invalid != null ? invalid : context.invalid;
+    const resolvedDisabled = disabled != null ? disabled : context.disabled;
+    const sizeClasses = getFormSizeClasses(resolvedSize, resolvedCustomSize);
+    const controlSizeClass = getFormControlSizeClass(
+      resolvedVariant,
+      sizeClasses
+    );
+    const typeaheadRef = React46.useRef("");
+    const typeaheadTimeoutRef = React46.useRef(null);
+    const moveActiveItem = React46.useCallback(
+      (direction) => {
+        var _a2;
+        const nextValue = getNextItemValue(
+          context.items,
+          (_a2 = context.activeValue) != null ? _a2 : context.value,
+          direction
+        );
+        if (nextValue) {
+          context.setActiveValue(nextValue);
+        }
+      },
+      [context]
+    );
+    const handleTypeahead = React46.useCallback(
+      (key) => {
+        typeaheadRef.current += key.toLowerCase();
+        if (typeaheadTimeoutRef.current) {
+          window.clearTimeout(typeaheadTimeoutRef.current);
+        }
+        typeaheadTimeoutRef.current = window.setTimeout(() => {
+          typeaheadRef.current = "";
+        }, 500);
+        const enabledItems = getEnabledItems(context.items);
+        const match2 = enabledItems.find(
+          (item) => item.textValue.toLowerCase().startsWith(typeaheadRef.current)
+        );
+        if (!match2) return;
+        if (!context.open) {
+          context.setOpen(true);
+        }
+        context.setActiveValue(match2.value);
+      },
+      [context]
+    );
+    React46.useEffect(() => {
+      return () => {
+        if (typeaheadTimeoutRef.current) {
+          window.clearTimeout(typeaheadTimeoutRef.current);
+        }
+      };
+    }, []);
+    const handleKeyDown = (event) => {
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      if (event.defaultPrevented || resolvedDisabled) return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        if (!context.open) {
+          context.setOpen(true);
+          return;
+        }
+        moveActiveItem("next");
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!context.open) {
+          context.setOpen(true);
+          return;
+        }
+        moveActiveItem("previous");
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!context.open) {
+          context.setOpen(true);
+          return;
+        }
+        if (context.activeValue) {
+          context.setValue(context.activeValue);
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        context.setOpen(false);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        const firstEnabledItem = getEnabledItems(context.items)[0];
+        if (firstEnabledItem) {
+          context.setActiveValue(firstEnabledItem.value);
+        }
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        const enabledItems = getEnabledItems(context.items);
+        const lastEnabledItem = enabledItems[enabledItems.length - 1];
+        if (lastEnabledItem) {
+          context.setActiveValue(lastEnabledItem.value);
+        }
+        return;
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        handleTypeahead(event.key);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "button",
+      __spreadProps(__spreadValues({
+        ref: composeRefs(ref, context.triggerRef),
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": context.open,
+        "data-placeholder": !context.value ? "" : void 0,
+        disabled: resolvedDisabled,
+        className: cn(
+          formControlBase,
+          "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
+      }, props), {
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons9.CaretSortIcon, { className: "h-4 w-4 shrink-0 opacity-50" })
+        ]
+      })
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectValue = React46.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, placeholder = "Select an option", children } = _b, props = __objRest(_b, ["className", "placeholder", "children"]);
+    var _a2;
+    const context = useSelectContext("SelectValue");
+    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
+      })
+    );
+  }
+);
 var SelectContent = React46.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
       children,
-      position = "popper",
       sideOffset = 4,
-      align = "start"
+      align = "start",
+      position: _position,
+      style
     } = _b, props = __objRest(_b, [
       "className",
       "children",
-      "position",
       "sideOffset",
-      "align"
+      "align",
+      "position",
+      "style"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectBodyScrollUnlock, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-        SelectPrimitive.Content,
-        __spreadProps(__spreadValues({
-          ref,
-          position,
-          sideOffset,
-          align,
+    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.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 = 288;
+      const minUsefulHeight = 140;
+      const availableBelow = window.innerHeight - rect.bottom - viewportPadding - sideOffset;
+      const availableAbove = rect.top - viewportPadding - sideOffset;
+      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,
+        Math.min(preferredMaxHeight, availableHeight)
+      );
+      const baseStyle = {
+        position: "fixed",
+        zIndex: 9999,
+        width: rect.width,
+        minWidth: rect.width,
+        maxWidth: "calc(100vw - 16px)",
+        maxHeight: contentMaxHeight
+      };
+      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") {
+        baseStyle.top = rect.bottom + sideOffset;
+        baseStyle.bottom = void 0;
+      } else {
+        baseStyle.bottom = window.innerHeight - rect.top + sideOffset;
+        baseStyle.top = void 0;
+      }
+      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]);
+    React46.useLayoutEffect(() => {
+      var _a2, _b2;
+      if (!context.open) return;
+      updatePosition();
+      scheduleUpdatePosition();
+      const handleResize = () => {
+        scheduleUpdatePosition();
+      };
+      const handlePageScroll = (event) => {
+        var _a3;
+        const target = event.target;
+        if (target && ((_a3 = scrollRef.current) == null ? void 0 : _a3.contains(target))) {
+          return;
+        }
+        scheduleUpdatePosition();
+      };
+      window.addEventListener("resize", handleResize);
+      window.addEventListener("scroll", handlePageScroll, true);
+      (_a2 = window.visualViewport) == null ? void 0 : _a2.addEventListener("resize", handleResize);
+      (_b2 = window.visualViewport) == null ? void 0 : _b2.addEventListener("scroll", handleResize);
+      return () => {
+        var _a3, _b3;
+        window.removeEventListener("resize", handleResize);
+        window.removeEventListener("scroll", handlePageScroll, true);
+        (_a3 = window.visualViewport) == null ? void 0 : _a3.removeEventListener("resize", handleResize);
+        (_b3 = window.visualViewport) == null ? void 0 : _b3.removeEventListener("scroll", handleResize);
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+      };
+    }, [context.open, scheduleUpdatePosition, updatePosition]);
+    React46.useLayoutEffect(() => {
+      if (!context.open) return;
+      const frame = requestAnimationFrame(() => {
+        const activeItem = context.items.find(
+          (item) => item.value === context.activeValue
+        );
+        scrollItemIntoView(scrollRef.current, activeItem == null ? void 0 : activeItem.ref);
+      });
+      return () => {
+        cancelAnimationFrame(frame);
+      };
+    }, [context.activeValue, context.items, context.open]);
+    if (!context.open) {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { hidden: true, "aria-hidden": "true", style: { display: "none" }, children });
+    }
+    if (!mounted || !contentStyle) return null;
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "div",
+        __spreadProps(__spreadValues({}, props), {
+          ref: composeRefs(ref, context.contentRef),
+          role: "listbox",
+          "data-side": side,
           className: cn(
-            "relative z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-            "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-            "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-            position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+            "min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
             className
+          ),
+          style: __spreadValues(__spreadValues({}, contentStyle), style),
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              ref: scrollRef,
+              "data-select-scroll-content": true,
+              className: cn(
+                "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: "auto",
+                overscrollBehavior: "contain",
+                scrollbarGutter: "stable",
+                WebkitOverflowScrolling: "touch"
+              },
+              onWheel: (event) => {
+                event.stopPropagation();
+              },
+              onTouchMove: (event) => {
+                event.stopPropagation();
+              },
+              children
+            }
           )
-        }, props), {
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectScrollUpButton, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              SelectPrimitive.Viewport,
-              {
-                className: cn(
-                  "max-h-[min(20rem,var(--radix-select-content-available-height))] overflow-y-auto p-1",
-                  position === "popper" && "w-full min-w-(--radix-select-trigger-width)"
-                ),
-                children
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectScrollDownButton, {})
-          ]
         })
-      ) })
-    ] });
+      ),
+      document.body
+    );
   }
 );
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React46.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    SelectPrimitive.Label,
-    __spreadValues({
-      ref,
-      className: cn("px-2 py-1.5 text-sm font-semibold", className)
-    }, props)
-  );
-});
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React46.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    SelectPrimitive.Item,
-    __spreadProps(__spreadValues({
-      ref,
-      className: cn(
-        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none transition-colors",
-        "focus:bg-accent focus:text-accent-foreground",
-        "data-disabled:pointer-events-none data-disabled:opacity-50",
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons9.CheckIcon, { className: "h-4 w-4" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SelectPrimitive.ItemText, { children })
-      ]
-    })
-  );
-});
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React46.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    SelectPrimitive.Separator,
-    __spreadValues({
-      ref,
-      className: cn("-mx-1 my-1 h-px bg-muted", className)
-    }, props)
-  );
-});
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+SelectContent.displayName = "SelectContent";
+var SelectGroup = React46.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", __spreadValues({ ref, role: "group", className }, props));
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+var SelectLabel = React46.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      __spreadValues({
+        ref,
+        className: cn("px-2 py-1.5 text-sm font-semibold", className)
+      }, props)
+    );
+  }
+);
+SelectLabel.displayName = "SelectLabel";
+var SelectItem = React46.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      value,
+      disabled = false,
+      textValue,
+      size,
+      customSize,
+      onClick,
+      onMouseMove,
+      onMouseDown
+    } = _b, props = __objRest(_b, [
+      "className",
+      "children",
+      "value",
+      "disabled",
+      "textValue",
+      "size",
+      "customSize",
+      "onClick",
+      "onMouseMove",
+      "onMouseDown"
+    ]);
+    const context = useSelectContext("SelectItem");
+    const {
+      registerItem,
+      unregisterItem,
+      updateItemRef,
+      setActiveValue,
+      setValue,
+      value: selectedValue,
+      activeValue,
+      size: contextSize,
+      customSize: contextCustomSize
+    } = context;
+    const itemId = React46.useId();
+    const localRef = React46.useRef(null);
+    const resolvedSize = size != null ? size : contextSize;
+    const resolvedCustomSize = customSize != null ? customSize : contextCustomSize;
+    const sizeClasses = getFormSizeClasses(resolvedSize, resolvedCustomSize);
+    const labelText = textValue != null ? textValue : getNodeText(children);
+    const isSelected = selectedValue === value;
+    const isActive = activeValue === value;
+    React46.useLayoutEffect(() => {
+      registerItem({
+        id: itemId,
+        value,
+        label: children,
+        textValue: labelText,
+        disabled,
+        ref: localRef.current
+      });
+      return () => {
+        unregisterItem(value, itemId);
+      };
+    }, [
+      registerItem,
+      unregisterItem,
+      itemId,
+      value,
+      labelText,
+      disabled,
+      children
+    ]);
+    const handleItemRef = React46.useCallback(
+      (node) => {
+        localRef.current = node;
+        updateItemRef(value, itemId, node);
+      },
+      [updateItemRef, value, itemId]
+    );
+    const setRefs = React46.useMemo(
+      () => composeRefs(ref, handleItemRef),
+      [ref, handleItemRef]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: setRefs,
+        id: itemId,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": disabled,
+        "data-highlighted": isActive ? "" : void 0,
+        "data-disabled": disabled ? "" : void 0,
+        className: cn(
+          "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 outline-none transition-colors",
+          sizeClasses.selectItem,
+          !disabled && "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+          disabled && "pointer-events-none opacity-50",
+          className
+        ),
+        onMouseDown: (event) => {
+          event.preventDefault();
+          onMouseDown == null ? void 0 : onMouseDown(event);
+        },
+        onMouseMove: (event) => {
+          onMouseMove == null ? void 0 : onMouseMove(event);
+          if (!disabled) {
+            setActiveValue(value);
+          }
+        },
+        onClick: (event) => {
+          onClick == null ? void 0 : onClick(event);
+          if (!event.defaultPrevented && !disabled) {
+            setValue(value);
+          }
+        }
+      }, props), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons9.CheckIcon, { className: "h-4 w-4" }) : null }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate", children })
+        ]
+      })
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var SelectSeparator = React46.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      __spreadValues({
+        ref,
+        role: "separator",
+        className: cn("-mx-1 my-1 h-px bg-muted", className)
+      }, props)
+    );
+  }
+);
+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) {
@@ -7386,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,
@@ -7397,6 +8071,11 @@ function SearchableSelectBase({
   disabled,
   name,
   required,
+  invalid = false,
+  size = "md",
+  customSize,
+  variant = "outline",
+  classNameDefault = true,
   triggerClassName,
   contentClassName,
   itemClassName,
@@ -7404,7 +8083,11 @@ 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);
   const isControlled = value !== void 0;
   const [internalValue, setInternalValue] = React47.useState(defaultValue != null ? defaultValue : "");
   const currentValue = isControlled ? value != null ? value : "" : internalValue;
@@ -7414,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);
@@ -7433,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);
@@ -7469,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",
@@ -7483,19 +8357,18 @@ function SearchableSelectBase({
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
-        className: cn(
-          "relative flex h-9 w-full items-center gap-2 rounded-md border border-input bg-background px-3 text-sm shadow-sm transition",
-          "focus-within:border-primary/60 focus-within:ring-2 focus-within:ring-primary/20",
+        className: classNameDefault ? cn(
+          formCompositeControlBase,
+          formCompositeVariants[variant],
+          triggerSizeClass,
+          invalid && formCompositeControlErrorClass,
           disabled && "cursor-not-allowed opacity-50",
           triggerClassName
-        ),
-        onPointerDown: () => {
-          if (disabled) return;
-          setOpen(true);
-          requestAnimationFrame(() => {
-            var _a;
-            (_a = inputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
-          });
+        ) : triggerClassName,
+        onPointerDown: (event) => {
+          if (disabled || event.button !== 0 || event.ctrlKey) return;
+          event.preventDefault();
+          openDropdown();
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -7507,17 +8380,14 @@ function SearchableSelectBase({
               "aria-autocomplete": "list",
               "aria-expanded": open,
               "aria-controls": listboxId,
+              "aria-invalid": invalid || void 0,
               "aria-activedescendant": activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
               placeholder: open ? searchPlaceholder : placeholder,
               autoComplete: "off",
               spellCheck: false,
               disabled,
               onFocus: () => {
-                setOpen(true);
-                requestAnimationFrame(() => {
-                  var _a;
-                  (_a = inputRef.current) == null ? void 0 : _a.select();
-                });
+                openDropdown();
               },
               onChange: (event) => {
                 setInputValue(event.target.value);
@@ -7558,7 +8428,7 @@ function SearchableSelectBase({
                 }
               },
               className: cn(
-                "h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-sm outline-none",
+                "h-full min-w-0 flex-1 border-0 bg-transparent p-0 outline-none",
                 "placeholder:text-muted-foreground disabled:cursor-not-allowed",
                 searchInputClassName
               )
@@ -7600,76 +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: "px-3 py-6 text-center text-sm text-muted-foreground", 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 py-2 text-left text-sm outline-none transition",
-                    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(
@@ -7684,7 +8485,7 @@ var FormSelect = ({
   rules,
   shouldUnregister,
   defaultValue,
-  placeholder = "Seleccionar opci\xF3n",
+  placeholder = "Select an option",
   label,
   requiredLabel,
   className,
@@ -7700,7 +8501,6 @@ var FormSelect = ({
   getOptionLabel = getDefaultOptionLabel,
   getOptionDisabled,
   getOptionData,
-  children,
   onChange,
   onChangeItem,
   disabled,
@@ -7709,17 +8509,14 @@ var FormSelect = ({
   variant = "outline",
   invalid,
   searchable = false,
-  searchPlaceholder = "Buscar\u2026",
-  emptyText = "No hay resultados",
-  position = "popper"
+  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 triggerBase = "relative inline-flex w-full items-center justify-between gap-2 text-foreground outline-none ring-offset-background transition placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50";
-  const triggerSizeClass = variant === "flushed" ? sizeClasses.flushedControl : variant === "link" ? sizeClasses.linkControl : sizeClasses.control;
-  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 triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
   const normalizedOptions = React48.useMemo(() => {
     if (options) return options;
     return (items != null ? items : []).map((item) => {
@@ -7760,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)(
@@ -7784,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,
@@ -7794,93 +8587,47 @@ var FormSelect = ({
               searchPlaceholder,
               emptyText,
               disabled,
-              triggerClassName: cn(
-                "min-h-10 w-full rounded-xl border border-input bg-input px-3 text-sm shadow-sm",
-                "focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20",
-                hasError && "border-destructive ring-destructive/20",
-                className
-              ),
-              contentClassName: cn(
-                "z-50 mt-1 max-h-72 w-full overflow-hidden rounded-xl border border-border bg-popover shadow-xl",
-                contentClassName
-              ),
-              itemClassName: cn(sizeClasses.selectItem, itemClassName),
-              searchInputClassName: cn(
-                "h-full w-full min-w-0 bg-transparent outline-none placeholder:text-muted-foreground",
-                searchInputClassName
-              ),
+              invalid: hasError,
+              size,
+              customSize,
+              variant,
+              classNameDefault,
+              triggerClassName: className,
+              contentClassName,
+              itemClassName,
+              searchInputClassName,
               onValueChange: (value, option) => {
                 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: cn(
-                      triggerBase,
-                      variants[variant],
-                      triggerSizeClass,
-                      hasError && "border-destructive ring-destructive focus:ring-destructive/40",
-                      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)(
@@ -8790,7 +9537,7 @@ SearchInput.displayName = "SearchInput";
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
 var React59 = __toESM(require("react"), 1);
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var Separator6 = React59.forwardRef(
+var Separator5 = React59.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -8808,7 +9555,7 @@ var Separator6 = React59.forwardRef(
     );
   }
 );
-Separator6.displayName = SeparatorPrimitive.Root.displayName;
+Separator5.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/sheet.tsx
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
@@ -9609,24 +10356,10 @@ UiInput.displayName = "UiInput";
 // src/components/ui/select.tsx
 var React72 = __toESM(require("react"), 1);
 var import_lucide_react9 = require("lucide-react");
-
-// src/types/select.ts
-var selectVariants = {
-  outline: "rounded-md border border-input bg-input backdrop-blur-sm shadow-sm hover:border-primary/60 focus:border-primary focus:ring-2 focus:ring-primary/20",
-  soft: "rounded-md border border-transparent bg-muted/60 shadow-sm hover:bg-muted focus:bg-input/80 focus:ring-2 focus:ring-primary/20",
-  ghost: "rounded-md border border-transparent bg-transparent hover:bg-muted/50 focus:ring-2 focus:ring-ring",
-  filled: "rounded-md border border-input bg-muted/70 shadow-inner hover:bg-muted focus:bg-input/70 focus:ring-2 focus:ring-primary/20",
-  flushed: "rounded-none border-0 border-b border-input px-0 shadow-none focus:border-b-2 focus:border-primary focus:ring-0",
-  unstyled: "border-0 shadow-none focus:ring-0",
-  link: "h-auto border-0 bg-transparent p-0 text-primary shadow-none underline-offset-4 focus:underline focus:ring-0"
-};
-var variants2 = selectVariants;
-
-// src/components/ui/select.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function UiSelect({
   label,
-  placeholder,
+  placeholder = "Select an option",
   value,
   defaultValue,
   onChange,
@@ -9642,37 +10375,27 @@ function UiSelect({
   messageClassName,
   requiredLabelClassName,
   size = "md",
+  customSize,
   variant = "outline",
   errorMessage,
-  htmlFormItemId
+  htmlFormItemId,
+  position
 }) {
   const generatedId = React72.useId();
   const triggerId = htmlFormItemId != null ? htmlFormItemId : generatedId;
   const messageId = `${triggerId}-message`;
   const hasError = Boolean(errorMessage);
-  const triggerBase = "relative inline-flex w-full items-center justify-between text-foreground outline-none ring-offset-background transition placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50";
-  const sizeTrigger = {
-    sm: "h-9 px-3 text-sm",
-    md: "h-10 px-3.5 text-sm",
-    lg: "h-11 px-4 text-base"
-  };
-  const itemSize = {
-    sm: "h-8 text-sm",
-    md: "h-9 text-sm",
-    lg: "h-10 text-base"
-  };
-  const specialFlushed = variant === "flushed" ? size === "sm" ? "h-9 text-sm" : size === "lg" ? "h-11 text-base" : "h-10 text-sm" : "";
-  const specialLink = variant === "link" ? "text-sm" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("w-full space-y-1.5", selectClassName), children: [
+  const sizeClasses = getFormSizeClasses(size, customSize);
+  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 text-sm font-medium",
+          "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)(
@@ -9680,7 +10403,7 @@ function UiSelect({
             {
               "aria-hidden": "true",
               className: cn(
-                "mt-0.5 h-3 w-3 shrink-0 text-red-500",
+                "h-3 w-3 shrink-0 text-red-500",
                 requiredLabelClassName
               )
             }
@@ -9695,6 +10418,10 @@ function UiSelect({
         defaultValue,
         onValueChange: onChange,
         disabled,
+        size,
+        customSize,
+        variant,
+        invalid: hasError,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             SelectTrigger,
@@ -9702,26 +10429,33 @@ function UiSelect({
               id: triggerId,
               "aria-invalid": hasError || void 0,
               "aria-describedby": errorMessage ? messageId : void 0,
-              className: cn(
-                triggerBase,
-                variants2[variant],
-                variant === "flushed" ? specialFlushed : variant === "link" ? specialLink : sizeTrigger[size],
-                hasError && "border-destructive ring-destructive focus:ring-destructive/40",
-                className
-              ),
+              className,
               children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectValue, { placeholder })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectContent, { className: contentClassName, children: children != null ? children : items == null ? void 0 : items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            SelectItem,
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            SelectContent,
             {
-              value: item.value,
-              disabled: item.disabled,
-              className: cn(itemSize[size], itemClassName),
-              children: item.label
-            },
-            item.value
-          )) })
+              position,
+              sideOffset: 6,
+              className: cn(
+                "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(),
+              children: children != null ? children : items == null ? void 0 : items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                SelectItem,
+                {
+                  value: item.value,
+                  disabled: item.disabled,
+                  className: cn(sizeClasses.selectItem, itemClassName),
+                  children: item.label
+                },
+                item.value
+              ))
+            }
+          )
         ]
       }
     ),
@@ -9729,7 +10463,11 @@ function UiSelect({
       "p",
       {
         id: messageId,
-        className: cn("text-sm font-medium text-destructive", messageClassName),
+        className: cn(
+          "font-medium text-destructive",
+          sizeClasses.message,
+          messageClassName
+        ),
         children: errorMessage
       }
     ) : null
@@ -10330,7 +11068,7 @@ function DataTable({
                         children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectValue, { placeholder: `${pageSize}` })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectItem, { value: `${size}`, children: size }, size)) })
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectItem, { value: `${size}`, children: size }, size)) })
                   ]
                 }
               )
@@ -10855,8 +11593,6 @@ function PaginationSection({
   SelectGroup,
   SelectItem,
   SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
   SelectValue,
@@ -10911,9 +11647,18 @@ function PaginationSection({
   badgeVariants,
   buttonVariants,
   cn,
+  formCompositeControlBase,
+  formCompositeControlErrorClass,
+  formCompositeVariants,
+  formControlBase,
+  formControlErrorClass,
+  formInputVariants,
+  formSizeVariants,
   getDefaultOptionLabel,
   getDefaultOptionValue,
   getErrorMessage,
+  getFormControlSizeClass,
+  getFormSizeClasses,
   getNextEnabledIndex,
   iconButtonVariants,
   navigationMenuTriggerStyle,
@@ -10923,5 +11668,6 @@ function PaginationSection({
   toggleVariants,
   useFormField,
   useSidebar,
-  useToast
+  useToast,
+  variants
 });