shadcn-ui-react 0.7.10 → 0.7.11

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);
 
@@ -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,195 +7193,750 @@ 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 />`);
+  }
+  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(nextValue);
       }
-    };
-  }, []);
-  return null;
+      onChange == null ? void 0 : onChange(nextValue);
+    },
+    [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
   );
-});
-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" })
-    })
+  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 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 = items.find((item) => item.value === currentValue);
+  const registerItem = React46.useCallback((item) => {
+    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
+    }));
+    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;
+      itemsRef.current.set(value2, __spreadProps(__spreadValues({}, currentItem), {
+        ref: node
+      }));
+      forceItemsUpdate();
+    },
+    []
   );
-});
-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 handleOpenChange = React46.useCallback(
+    (nextOpen) => {
+      if (disabled) return;
+      setIsOpen(nextOpen);
+    },
+    [disabled, setIsOpen]
   );
-});
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+  const handleValueChange = React46.useCallback(
+    (nextValue) => {
+      if (disabled) return;
+      setCurrentValue(nextValue);
+      setIsOpen(false);
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = triggerRef.current) == null ? void 0 : _a.focus();
+      });
+    },
+    [disabled, setCurrentValue, setIsOpen]
+  );
+  React46.useEffect(() => {
+    var _a;
+    if (!isOpen) return;
+    const selectedEnabledItem = items.find(
+      (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);
+  }, [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))) {
+        return;
+      }
+      setIsOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [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
+      }
+    ) : null
+  ] });
+}
+var SelectTrigger = React46.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      variant,
+      size,
+      customSize,
+      invalid,
+      disabled,
+      onClick,
+      onKeyDown
+    } = _b, props = __objRest(_b, [
+      "className",
+      "children",
+      "variant",
+      "size",
+      "customSize",
+      "invalid",
+      "disabled",
+      "onClick",
+      "onKeyDown"
+    ]);
+    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,
+          "whitespace-nowrap ring-offset-background [&>span]:line-clamp-1",
+          formInputVariants[resolvedVariant],
+          controlSizeClass,
+          resolvedInvalid && formControlErrorClass,
+          className
+        ),
+        onClick: (event) => {
+          onClick == null ? void 0 : onClick(event);
+          if (!event.defaultPrevented && !resolvedDisabled) {
+            context.setOpen(!context.open);
+          }
+        },
+        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, children } = _b, props = __objRest(_b, ["className", "placeholder", "children"]);
+    var _a2, _b2;
+    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 }));
+  }
+);
+SelectValue.displayName = "SelectValue";
 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 [mounted, setMounted] = React46.useState(false);
+    const [side, setSide] = React46.useState("bottom");
+    const [contentStyle, setContentStyle] = React46.useState();
+    React46.useEffect(() => {
+      setMounted(true);
+    }, []);
+    const updatePosition = React46.useCallback(() => {
+      const trigger = context.triggerRef.current;
+      if (!trigger) return;
+      const rect = trigger.getBoundingClientRect();
+      const viewportPadding = 8;
+      const preferredMaxHeight = 260;
+      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 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.transform = void 0;
+      }
+      if (align === "center") {
+        baseStyle.left = rect.left + rect.width / 2;
+        baseStyle.transform = "translateX(-50%)";
+      }
+      if (align === "end") {
+        baseStyle.left = rect.right;
+        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(nextSide);
+      setContentStyle(baseStyle);
+    }, [align, context.triggerRef, sideOffset]);
+    const scheduleUpdatePosition = React46.useCallback(() => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rafRef.current = requestAnimationFrame(() => {
+        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(() => {
+        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"
+        });
+      });
+      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 rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+            "overflow-hidden",
             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 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"
+              ),
+              style: {
+                maxHeight: contentStyle.maxHeight,
+                overflowX: "hidden",
+                overflowY: "scroll",
+                overscrollBehavior: "contain",
+                scrollbarGutter: "stable",
+                WebkitOverflowScrolling: "touch"
+              },
+              onWheel: (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.useEffect(() => {
+      registerItem({
+        id: itemId,
+        value,
+        label: children,
+        textValue: labelText,
+        disabled,
+        ref: localRef.current
+      });
+      return () => {
+        unregisterItem(value, itemId);
+      };
+    }, [
+      registerItem,
+      unregisterItem,
+      itemId,
+      value,
+      children,
+      labelText,
+      disabled
+    ]);
+    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);
@@ -7397,6 +7978,11 @@ function SearchableSelectBase({
   disabled,
   name,
   required,
+  invalid = false,
+  size = "md",
+  customSize,
+  variant = "outline",
+  classNameDefault = true,
   triggerClassName,
   contentClassName,
   itemClassName,
@@ -7405,6 +7991,8 @@ function SearchableSelectBase({
   const rootRef = React47.useRef(null);
   const inputRef = 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;
@@ -7483,12 +8071,14 @@ 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
-        ),
+        ) : triggerClassName,
         onPointerDown: () => {
           if (disabled) return;
           setOpen(true);
@@ -7507,6 +8097,7 @@ 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",
@@ -7558,7 +8149,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
               )
@@ -7621,7 +8212,16 @@ function SearchableSelectBase({
             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) => {
+            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)(
@@ -7645,7 +8245,8 @@ function SearchableSelectBase({
                     }
                   },
                   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",
+                    "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",
@@ -7711,13 +8312,13 @@ var FormSelect = ({
   searchable = false,
   searchPlaceholder = "Buscar\u2026",
   emptyText = "No hay resultados",
-  position = "popper"
+  classNameDefault = true,
+  position
 }) => {
   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 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(() => {
@@ -7794,21 +8395,15 @@ 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);
@@ -7832,13 +8427,13 @@ var FormSelect = ({
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   SelectTrigger,
                   {
-                    className: cn(
-                      triggerBase,
-                      variants[variant],
+                    className: classNameDefault ? cn(
+                      formControlBase,
+                      formInputVariants[variant],
                       triggerSizeClass,
-                      hasError && "border-destructive ring-destructive focus:ring-destructive/40",
+                      hasError && formControlErrorClass,
                       className
-                    ),
+                    ) : className,
                     children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder })
                   }
                 ) }),
@@ -8790,7 +9385,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 +9403,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,20 +10204,6 @@ 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,
@@ -9642,33 +10223,28 @@ function UiSelect({
   messageClassName,
   requiredLabelClassName,
   size = "md",
+  customSize,
   variant = "outline",
+  classNameDefault = true,
   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);
+  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: [
     label ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       Label3,
       {
         className: cn(
-          "inline-flex items-start gap-0.5 text-sm font-medium",
+          "inline-flex items-start gap-0.5 font-medium",
+          sizeClasses.label,
           hasError && "text-destructive",
           labelClassName
         ),
@@ -9680,7 +10256,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
               )
             }
@@ -9702,26 +10278,45 @@ 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: classNameDefault ? cn(
+                formControlBase,
+                formInputVariants[variant],
+                triggerSizeClass,
+                hasError && formControlErrorClass,
                 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(
+                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 != 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 +10324,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 +10929,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 +11454,6 @@ function PaginationSection({
   SelectGroup,
   SelectItem,
   SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
   SelectValue,
@@ -10911,9 +11508,18 @@ function PaginationSection({
   badgeVariants,
   buttonVariants,
   cn,
+  formCompositeControlBase,
+  formCompositeControlErrorClass,
+  formCompositeVariants,
+  formControlBase,
+  formControlErrorClass,
+  formInputVariants,
+  formSizeVariants,
   getDefaultOptionLabel,
   getDefaultOptionValue,
   getErrorMessage,
+  getFormControlSizeClass,
+  getFormSizeClasses,
   getNextEnabledIndex,
   iconButtonVariants,
   navigationMenuTriggerStyle,
@@ -10923,5 +11529,6 @@ function PaginationSection({
   toggleVariants,
   useFormField,
   useSidebar,
-  useToast
+  useToast,
+  variants
 });