warqadui 0.0.19 → 0.0.21

package/dist/index.mjs

@@ -1079,7 +1079,7 @@ var Input = forwardRef(
     const renderInput = (inputProps, localType = type || "text") => /* @__PURE__ */ jsxs11(
       "div",
       {
-        className: `${label ? "space-y-2" : ""} group  ${containerClassName} `,
+        className: `${label ? "space-y-2" : ""} group relative ${containerClassName} `,
         children: [
           label && /* @__PURE__ */ jsxs11(
             "label",
@@ -1135,7 +1135,7 @@ var Input = forwardRef(
               }
             )
           ] }),
-          message && /* @__PURE__ */ jsx16("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+          /* @__PURE__ */ jsx16("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx16("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
         ]
       }
     );
@@ -1241,7 +1241,7 @@ var PhoneInput = forwardRef2(
       }
       message = currentError?.message || message;
     }
-    const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ jsxs12("div", { className: `space-y-2 group ${containerClassName}`, children: [
+    const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ jsxs12("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
       /* @__PURE__ */ jsxs12(
         "label",
         {
@@ -1284,7 +1284,7 @@ var PhoneInput = forwardRef2(
           }
         )
       ] }),
-      message && /* @__PURE__ */ jsx17("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      /* @__PURE__ */ jsx17("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx17("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
     ] });
     if (form && name) {
       return /* @__PURE__ */ jsx17(
@@ -1306,65 +1306,120 @@ var PhoneInput = forwardRef2(
 PhoneInput.displayName = "PhoneInput";
 
 // src/components/Fields/select.tsx
-import { forwardRef as forwardRef3, useState as useState9, useEffect as useEffect6, useRef as useRef3 } from "react";
+import React6, {
+  createContext as createContext3,
+  useContext as useContext3,
+  useState as useState9,
+  useRef as useRef3,
+  useEffect as useEffect6,
+  forwardRef as forwardRef3
+} from "react";
 import { createPortal } from "react-dom";
 import { ChevronDown as ChevronDown2, Check as Check2 } from "lucide-react";
 import { Controller as Controller3 } from "react-hook-form";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var SelectContent = ({
-  label,
-  options,
-  icon,
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var SelectContext = createContext3(void 0);
+var useSelectContext = () => {
+  const context = useContext3(SelectContext);
+  if (!context)
+    throw new Error("Select components must be used within a SelectProvider");
+  return context;
+};
+var Select = forwardRef3((props, ref) => {
+  const { form, name, onChange, value, children, options = [] } = props;
+  if (form && name) {
+    return /* @__PURE__ */ jsx18(
+      Controller3,
+      {
+        name,
+        control: form.control,
+        render: ({
+          field: {
+            onChange: formOnChange,
+            value: formValue,
+            ref: fieldRef,
+            onBlur
+          }
+        }) => /* @__PURE__ */ jsx18(
+          SelectRoot,
+          {
+            ...props,
+            options,
+            currentValue: formValue,
+            onChangeHandler: (val) => {
+              formOnChange(val);
+              onChange?.(val);
+            },
+            fieldInternalProps: { ref: fieldRef, onBlur },
+            children
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx18(
+    SelectRoot,
+    {
+      ...props,
+      options,
+      currentValue: value,
+      onChangeHandler: onChange || (() => {
+      }),
+      children
+    }
+  );
+});
+Select.displayName = "Select";
+var SelectRoot = ({
+  children,
+  currentValue,
+  onChangeHandler,
+  form,
+  name,
   error,
+  options: initialOptions,
+  fieldInternalProps,
+  label,
   containerClassName = "",
-  name,
-  form,
-  onChangeHandler,
-  currentValue,
-  onFocus,
-  onBlur,
-  className = "",
   variant = "default",
-  fieldInternalProps,
+  icon,
+  placeholder = "Select...",
+  required,
+  disabled,
+  id,
+  className = "",
   ...props
 }) => {
   const [isOpen, setIsOpen] = useState9(false);
   const [isFocused, setIsFocused] = useState9(false);
-  const [dropdownStyle, setDropdownStyle] = useState9({});
+  const [activeIndex, setActiveIndex] = useState9(-1);
+  const [registeredOptions, setRegisteredOptions] = useState9([]);
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
   const containerRef = useRef3(null);
   const dropdownAnchorRef = useRef3(null);
   const dropdownContentRef = useRef3(null);
-  const lastFocusTime = useRef3(0);
-  const updateDropdownPosition = () => {
-    if (dropdownAnchorRef.current) {
-      const rect = dropdownAnchorRef.current.getBoundingClientRect();
-      const style = {
-        position: "fixed",
-        top: `${rect.bottom + 4}px`,
-        left: `${rect.left}px`,
-        width: `${rect.width}px`,
-        zIndex: 999999
-      };
-      if (rect.bottom + 240 > window.innerHeight) {
-        style.top = "auto";
-        style.bottom = `${window.innerHeight - rect.top + 4}px`;
+  const registerOption = (opt) => {
+    setRegisteredOptions((prev) => {
+      const index = prev.findIndex((p) => p.value === opt.value);
+      if (index >= 0) {
+        if (prev[index].label !== opt.label || prev[index].disabled !== opt.disabled) {
+          const newOpts = [...prev];
+          newOpts[index] = opt;
+          return newOpts;
+        }
+        return prev;
       }
-      setDropdownStyle(style);
-    }
+      return [...prev, opt];
+    });
   };
-  useEffect6(() => {
-    if (isOpen) {
-      updateDropdownPosition();
-      window.addEventListener("scroll", updateDropdownPosition, true);
-      window.addEventListener("resize", updateDropdownPosition);
-      return () => {
-        window.removeEventListener("scroll", updateDropdownPosition, true);
-        window.removeEventListener("resize", updateDropdownPosition);
-      };
+  const setSelectedValue = (val) => {
+    onChangeHandler(val);
+    if (form && name) {
+      form.setValue(name, val, { shouldValidate: true, shouldDirty: true });
+      form.clearErrors(name);
     }
-  }, [isOpen]);
+  };
   useEffect6(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -1377,20 +1432,6 @@ var SelectContent = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [fieldInternalProps]);
-  const handleSelect = (option) => {
-    if (option.disabled) return;
-    onChangeHandler(option.value);
-    if (form && name) {
-      form.setValue(name, option.value, {
-        shouldValidate: true,
-        shouldDirty: true
-      });
-      form.clearErrors(name);
-    }
-    setIsOpen(false);
-    fieldInternalProps?.onBlur?.();
-  };
-  const displayValue = options.find((o) => o.value === currentValue)?.label || "Select...";
   let message = error;
   if (form && name) {
     const {
@@ -1403,11 +1444,31 @@ var SelectContent = ({
     }
     message = currentError?.message || message;
   }
-  return /* @__PURE__ */ jsxs13(
+  const allOptions = initialOptions?.length ? initialOptions : registeredOptions;
+  const valueCtx = {
+    isOpen,
+    setIsOpen,
+    selectedValue: currentValue,
+    setSelectedValue,
+    activeIndex,
+    setActiveIndex,
+    isFocused,
+    setIsFocused,
+    dropdownAnchorRef,
+    dropdownContentRef,
+    containerRef,
+    primaryColor,
+    options: allOptions,
+    registerOption,
+    fieldInternalProps,
+    disabled
+  };
+  const hasChildren = React6.Children.count(children) > 0;
+  return /* @__PURE__ */ jsx18(SelectContext.Provider, { value: valueCtx, children: /* @__PURE__ */ jsxs13(
     "div",
     {
       ref: containerRef,
-      className: `${label ? "space-y-2" : ""} group ${containerClassName}`,
+      className: `${label ? "space-y-2" : ""} group relative ${containerClassName}`,
       children: [
         label && /* @__PURE__ */ jsxs13(
           "label",
@@ -1416,172 +1477,246 @@ var SelectContent = ({
             style: { color: isFocused || isOpen ? primaryColor : void 0 },
             children: [
               label,
-              props.required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 ml-1", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs13("div", { className: "relative", ref: dropdownAnchorRef, children: [
-          /* @__PURE__ */ jsxs13(
-            "div",
+        hasChildren ? children : /* @__PURE__ */ jsxs13(Fragment3, { children: [
+          /* @__PURE__ */ jsx18(
+            SelectTrigger,
             {
-              id: props.id,
-              className: `flex items-center w-full select-none text-gray-900 dark:text-white transition-all duration-200 outline-none focus:outline-none focus:ring-0 py-1 ${props.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${variant === "ghost" ? "bg-transparent border-transparent shadow-none px-0 h-full border-none ring-0 focus:border-none focus:ring-0" : isFocused || isOpen ? "ring-0 border rounded-xl h-9" : "border-gray-200 dark:border-zinc-800 border rounded-xl bg-white dark:bg-zinc-900/50 h-9"} ${className}`,
-              style: variant === "default" ? {
-                borderColor: isFocused || isOpen ? primaryColor : void 0,
-                boxShadow: isFocused || isOpen ? `${primaryColor}33 0px 0px 0px 2px` : void 0,
-                backgroundColor: isFocused || isOpen ? "var(--tw-colors-white, white)" : void 0
-              } : void 0,
-              onClick: () => {
-                if (props.disabled) return;
-                if (Date.now() - lastFocusTime.current < 150) {
-                  return;
-                }
-                setIsOpen(!isOpen);
-                setIsFocused(true);
-                onFocus?.(null);
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  if (props.disabled) return;
-                  setIsOpen(!isOpen);
-                  setIsFocused(true);
-                } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-                  e.preventDefault();
-                  setIsOpen(true);
-                }
-              },
-              onFocus: () => {
-                setIsFocused(true);
-                setIsOpen(true);
-                lastFocusTime.current = Date.now();
-              },
-              tabIndex: props.disabled ? -1 : 0,
-              onBlur: (e) => {
-                if (!dropdownContentRef.current?.contains(e.relatedTarget) && !containerRef.current?.contains(e.relatedTarget)) {
-                  setIsOpen(false);
-                  setIsFocused(false);
-                  fieldInternalProps?.onBlur?.();
-                  onBlur?.(null);
-                }
-              },
-              children: [
-                icon && /* @__PURE__ */ jsx18(
-                  "div",
-                  {
-                    className: `pl-2.5 pr-2 flex items-center transition-colors duration-200`,
-                    style: { color: isFocused || isOpen ? primaryColor : "#9ca3af" },
-                    children: icon
-                  }
-                ),
-                /* @__PURE__ */ jsx18(
-                  "div",
-                  {
-                    className: `flex-1 truncate text-sm ${icon ? "" : "pl-2.5"} ${!currentValue && currentValue !== 0 && currentValue !== false ? "text-gray-400 dark:text-zinc-500" : ""}`,
-                    children: displayValue
-                  }
-                ),
-                /* @__PURE__ */ jsx18("div", { className: "pr-2.5 flex items-center gap-1 shrink-0", children: /* @__PURE__ */ jsx18(
-                  ChevronDown2,
-                  {
-                    className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
-                  }
-                ) })
-              ]
+              id,
+              icon,
+              placeholder,
+              variant,
+              className,
+              ...props
             }
           ),
-          isOpen && typeof document !== "undefined" && createPortal(
-            /* @__PURE__ */ jsx18(
-              "div",
-              {
-                ref: dropdownContentRef,
-                className: "bg-white dark:bg-zinc-950 rounded-xl border border-gray-200 dark:border-zinc-800 shadow-xl max-h-60 overflow-y-auto overflow-x-hidden p-1.5",
-                style: dropdownStyle,
-                children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-0.5", children: [
-                  options.map((option, index) => {
-                    const isSelected = currentValue === option.value;
-                    return /* @__PURE__ */ jsxs13(
-                      "button",
-                      {
-                        type: "button",
-                        disabled: option.disabled,
-                        className: `w-full text-left px-3 py-2 rounded-md text-sm flex items-center justify-between transition-colors ${option.disabled ? "opacity-50 cursor-not-allowed text-gray-400" : isSelected ? "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800"}`,
-                        style: isSelected && !option.disabled && primaryColor ? {
-                          color: primaryColor
-                        } : void 0,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleSelect(option);
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx18("span", { className: "whitespace-nowrap truncate flex-1", children: option.label }),
-                          isSelected && /* @__PURE__ */ jsx18(
-                            Check2,
-                            {
-                              className: "h-4 w-4 shrink-0 ml-2",
-                              style: { color: primaryColor }
-                            }
-                          )
-                        ]
-                      },
-                      String(option.value) || index
-                    );
-                  }),
-                  options.length === 0 && /* @__PURE__ */ jsx18("div", { className: "p-3 text-center text-sm text-gray-500", children: "No options available" })
-                ] })
-              }
-            ),
-            document.body
-          )
+          allOptions && allOptions.length > 0 && /* @__PURE__ */ jsx18(SelectContent, { children: allOptions.map((opt, index) => /* @__PURE__ */ jsx18(
+            SelectItem,
+            {
+              value: opt.value,
+              label: opt.label,
+              disabled: opt.disabled
+            },
+            String(opt.value) || index
+          )) })
         ] }),
-        message && /* @__PURE__ */ jsx18("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+        /* @__PURE__ */ jsx18("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx18("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
       ]
     }
-  );
+  ) });
 };
-var Select = forwardRef3(
-  (props, ref) => {
-    const { form, name, onChange, value } = props;
-    if (form && name) {
-      return /* @__PURE__ */ jsx18(
-        Controller3,
-        {
-          name,
-          control: form.control,
-          render: ({
-            field: {
-              onChange: formOnChange,
-              value: formValue,
-              ref: fieldRef,
-              onBlur
-            }
-          }) => /* @__PURE__ */ jsx18(
-            SelectContent,
+var SelectTrigger = forwardRef3(
+  ({
+    className = "",
+    variant = "default",
+    icon,
+    placeholder = "Select...",
+    id,
+    children,
+    ...props
+  }, ref) => {
+    const {
+      isOpen,
+      setIsOpen,
+      isFocused,
+      setIsFocused,
+      primaryColor,
+      dropdownAnchorRef,
+      dropdownContentRef,
+      containerRef,
+      selectedValue,
+      options,
+      fieldInternalProps,
+      disabled
+    } = useSelectContext();
+    const lastFocusTime = useRef3(0);
+    const displayOption = options.find((o) => o.value === selectedValue);
+    const displayValue = displayOption ? displayOption.label : selectedValue != null && selectedValue !== "" ? String(selectedValue) : placeholder;
+    return /* @__PURE__ */ jsx18("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ jsx18(
+      "div",
+      {
+        id,
+        className: `flex items-center w-full select-none text-gray-900 dark:text-white transition-all duration-200 outline-none focus:outline-none focus:ring-0 py-1 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${variant === "ghost" ? "bg-transparent border-transparent shadow-none px-0 h-full border-none ring-0 focus:border-none focus:ring-0" : isFocused || isOpen ? "ring-0 border rounded-xl h-9" : "border-gray-200 dark:border-zinc-800 border rounded-xl bg-white dark:bg-zinc-900/50 h-9"} ${className}`,
+        style: variant === "default" ? {
+          borderColor: isFocused || isOpen ? primaryColor : void 0,
+          boxShadow: isFocused || isOpen ? `${primaryColor}33 0px 0px 0px 2px` : void 0,
+          backgroundColor: isFocused || isOpen ? "var(--tw-colors-white, white)" : void 0
+        } : void 0,
+        onMouseDown: (e) => {
+          if (disabled) return;
+          e.preventDefault();
+        },
+        onClick: (e) => {
+          if (disabled) return;
+          if (Date.now() - lastFocusTime.current < 150) return;
+          e.stopPropagation();
+          setIsOpen(!isOpen);
+          setIsFocused(true);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            if (disabled) return;
+            setIsOpen(!isOpen);
+            setIsFocused(true);
+          } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsOpen(true);
+          } else if (e.key === "Escape") {
+            setIsOpen(false);
+          }
+        },
+        onFocus: () => {
+          setIsFocused(true);
+          lastFocusTime.current = Date.now();
+        },
+        tabIndex: disabled ? -1 : 0,
+        onBlur: (e) => {
+          if (!dropdownContentRef.current?.contains(e.relatedTarget) && !containerRef.current?.contains(e.relatedTarget)) {
+            setIsFocused(false);
+            setIsOpen(false);
+            fieldInternalProps?.onBlur?.();
+          }
+        },
+        ...props,
+        children: children ? children : /* @__PURE__ */ jsxs13(Fragment3, { children: [
+          icon && /* @__PURE__ */ jsx18(
+            "div",
             {
-              ...props,
-              currentValue: formValue,
-              onChangeHandler: (val) => {
-                formOnChange(val);
-                onChange?.(val);
+              className: `pl-2.5 pr-2 flex items-center transition-colors duration-200`,
+              style: {
+                color: isFocused || isOpen ? primaryColor : "#9ca3af"
               },
-              fieldInternalProps: { ref: fieldRef, onBlur }
+              children: icon
             }
-          )
+          ),
+          /* @__PURE__ */ jsx18(
+            "div",
+            {
+              className: `flex-1 truncate text-sm ${icon ? "" : "pl-2.5"} ${!selectedValue && selectedValue !== 0 && selectedValue !== false ? "text-gray-400 dark:text-zinc-500" : ""}`,
+              children: displayValue
+            }
+          ),
+          /* @__PURE__ */ jsx18("div", { className: "pr-2.5 flex items-center gap-1 shrink-0", children: /* @__PURE__ */ jsx18(
+            ChevronDown2,
+            {
+              className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          ) })
+        ] })
+      }
+    ) });
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = forwardRef3(
+  ({ children, className = "", style, ...props }, ref) => {
+    const { isOpen, setIsOpen, dropdownAnchorRef, dropdownContentRef } = useSelectContext();
+    const [dropdownStyle, setDropdownStyle] = useState9({});
+    const updateDropdownPosition = () => {
+      if (dropdownAnchorRef.current) {
+        const rect = dropdownAnchorRef.current.getBoundingClientRect();
+        const newStyle = {
+          position: "fixed",
+          top: `${rect.bottom + 4}px`,
+          left: `${rect.left}px`,
+          width: `${rect.width}px`,
+          zIndex: 999999
+        };
+        if (rect.bottom + 240 > window.innerHeight) {
+          newStyle.top = "auto";
+          newStyle.bottom = `${window.innerHeight - rect.top + 4}px`;
         }
-      );
-    }
-    return /* @__PURE__ */ jsx18(
-      SelectContent,
+        setDropdownStyle(newStyle);
+      }
+    };
+    useEffect6(() => {
+      if (isOpen) {
+        updateDropdownPosition();
+        window.addEventListener("scroll", updateDropdownPosition, true);
+        window.addEventListener("resize", updateDropdownPosition);
+        return () => {
+          window.removeEventListener("scroll", updateDropdownPosition, true);
+          window.removeEventListener("resize", updateDropdownPosition);
+        };
+      }
+    }, [isOpen]);
+    if (!isOpen || typeof document === "undefined") return null;
+    return createPortal(
+      /* @__PURE__ */ jsx18(
+        "div",
+        {
+          ref: dropdownContentRef,
+          className: `bg-white dark:bg-zinc-950 rounded-xl border border-gray-200 dark:border-zinc-800 shadow-xl max-h-60 overflow-y-auto overflow-x-hidden p-1.5 ${className}`,
+          style: { ...dropdownStyle, ...style },
+          onMouseDown: (e) => e.stopPropagation(),
+          ...props,
+          children: /* @__PURE__ */ jsx18("div", { className: "flex flex-col gap-0.5", children: React6.Children.count(children) === 0 ? /* @__PURE__ */ jsx18("div", { className: "p-3 text-center text-sm text-gray-500", children: "No options available" }) : children })
+        }
+      ),
+      document.body
+    );
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = forwardRef3(
+  ({ value, label, disabled, children, className = "", ...props }, ref) => {
+    const {
+      selectedValue,
+      setSelectedValue,
+      setIsOpen,
+      primaryColor,
+      fieldInternalProps,
+      registerOption
+    } = useSelectContext();
+    const isSelected = selectedValue === value;
+    const displayLabel = label || children || value;
+    useEffect6(() => {
+      if (value !== void 0) {
+        registerOption({ value, label: String(displayLabel), disabled });
+      }
+    }, [value, displayLabel, disabled]);
+    const handleSelect = () => {
+      if (disabled) return;
+      setSelectedValue(value);
+      setIsOpen(false);
+      fieldInternalProps?.onBlur?.();
+    };
+    return /* @__PURE__ */ jsxs13(
+      "button",
       {
+        ref,
+        type: "button",
+        disabled,
+        className: `w-full text-left px-3 py-2 rounded-md text-sm flex items-center justify-between transition-colors ${disabled ? "opacity-50 cursor-not-allowed text-gray-400" : isSelected ? "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800"} ${className}`,
+        style: isSelected && !disabled && primaryColor ? { color: primaryColor } : void 0,
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          handleSelect();
+        },
         ...props,
-        currentValue: value,
-        onChangeHandler: onChange || (() => {
-        })
+        children: [
+          /* @__PURE__ */ jsx18("span", { className: "whitespace-nowrap truncate flex-1", children: children || label }),
+          isSelected && /* @__PURE__ */ jsx18(
+            Check2,
+            {
+              className: "h-4 w-4 shrink-0 ml-2",
+              style: { color: primaryColor }
+            }
+          )
+        ]
       }
     );
   }
 );
-Select.displayName = "Select";
+SelectItem.displayName = "SelectItem";
 
 // src/components/Fields/textArea.tsx
 import { forwardRef as forwardRef4, useState as useState10 } from "react";
@@ -1612,7 +1747,7 @@ var Textarea = forwardRef4(
       const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
       message = errorObj?.message;
     }
-    const renderInput = (inputProps, ref2) => /* @__PURE__ */ jsxs14("div", { className: `space-y-2 group w-full! ${containerClassName}`, children: [
+    const renderInput = (inputProps, ref2) => /* @__PURE__ */ jsxs14("div", { className: `space-y-2 group w-full! relative ${containerClassName}`, children: [
       /* @__PURE__ */ jsxs14(
         "label",
         {
@@ -1646,7 +1781,7 @@ var Textarea = forwardRef4(
           ...inputProps
         }
       ) }),
-      message && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      /* @__PURE__ */ jsx19("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
     ] });
     if (form && name) {
       return /* @__PURE__ */ jsx19(
@@ -1676,7 +1811,14 @@ var Textarea = forwardRef4(
 );
 
 // src/components/Fields/searchApi.tsx
-import { useState as useState12, useEffect as useEffect7, useRef as useRef4, forwardRef as forwardRef5 } from "react";
+import React7, {
+  createContext as createContext4,
+  useContext as useContext4,
+  useState as useState12,
+  useRef as useRef4,
+  useEffect as useEffect7,
+  forwardRef as forwardRef5
+} from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { Search, Loader2 as Loader22, ChevronDown as ChevronDown3, Check as Check3, X as X2 } from "lucide-react";
 
@@ -1848,28 +1990,78 @@ var useApis_default = useApi;
 
 // src/components/Fields/searchApi.tsx
 import { Controller as Controller5 } from "react-hook-form";
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
-var SearchApiContent = ({
-  label,
-  api,
-  placeholder = "Search...",
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var SearchApiContext = createContext4(
+  void 0
+);
+var useSearchApiContext = () => {
+  const context = useContext4(SearchApiContext);
+  if (!context)
+    throw new Error(
+      "SearchApi components must be used within a SearchApiProvider"
+    );
+  return context;
+};
+var SearchApi = forwardRef5(
+  (props, _) => {
+    const { form, name, onChange, value, children } = props;
+    if (form && name) {
+      return /* @__PURE__ */ jsx20(
+        Controller5,
+        {
+          name,
+          control: form.control,
+          render: ({ field }) => /* @__PURE__ */ jsx20(
+            SearchApiRoot,
+            {
+              ...props,
+              currentValue: field.value !== void 0 && field.value !== "" ? field.value : value,
+              onChangeHandler: (val) => {
+                field.onChange(val);
+                if (onChange) onChange(val);
+              },
+              fieldInternalProps: { ref: field.ref, onBlur: field.onBlur },
+              children
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx20(
+      SearchApiRoot,
+      {
+        ...props,
+        currentValue: value,
+        onChangeHandler: onChange || (() => {
+        }),
+        children
+      }
+    );
+  }
+);
+SearchApi.displayName = "SearchApi";
+var SearchApiRoot = ({
+  children,
   currentValue,
   onChangeHandler,
+  form,
+  name,
+  obj,
+  error,
+  api = "",
   queryKey = "search",
   labelKey = "name",
   valueKey = "_id",
-  error,
-  containerClassName = "",
-  className = "",
-  disabled,
-  name,
-  obj,
-  form,
   filter = [],
   required,
   v = 2,
   variant = "default",
   fieldInternalProps,
+  label,
+  containerClassName = "",
+  placeholder = "Search...",
+  disabled,
+  className = "",
   ...props
 }) => {
   const [searchTerm, setSearchTerm] = useState12("");
@@ -1883,51 +2075,13 @@ var SearchApiContent = ({
   const [hasAttemptedHydration, setHasAttemptedHydration] = useState12(false);
   const containerRef = useRef4(null);
   const dropdownAnchorRef = useRef4(null);
-  const dropdownRef = useRef4(null);
+  const dropdownContentRef = useRef4(null);
   const inputRef = useRef4(null);
   const prevApiRef = useRef4(api);
-  const [dropdownStyle, setDropdownStyle] = useState12({});
-  const updateDropdownPosition = () => {
-    if (dropdownAnchorRef.current) {
-      const rect = dropdownAnchorRef.current.getBoundingClientRect();
-      const style = {
-        position: "fixed",
-        top: `${rect.bottom + 4}px`,
-        left: `${rect.left}px`,
-        width: `${rect.width}px`,
-        zIndex: 999999
-      };
-      if (rect.bottom + 240 > window.innerHeight) {
-        style.top = "auto";
-        style.bottom = `${window.innerHeight - rect.top + 4}px`;
-      }
-      setDropdownStyle(style);
-    }
-  };
-  useEffect7(() => {
-    if (isOpen) {
-      updateDropdownPosition();
-      window.addEventListener("scroll", updateDropdownPosition, true);
-      window.addEventListener("resize", updateDropdownPosition);
-      return () => {
-        window.removeEventListener("scroll", updateDropdownPosition, true);
-        window.removeEventListener("resize", updateDropdownPosition);
-      };
-    }
-  }, [isOpen]);
-  const setInputRef = (element) => {
-    inputRef.current = element;
-    if (fieldInternalProps?.ref) {
-      if (typeof fieldInternalProps.ref === "function") {
-        fieldInternalProps.ref(element);
-      } else {
-        fieldInternalProps.ref.current = element;
-      }
-    }
-  };
   const { get, isLoading, error: errorMessage } = useApis_default();
   const fetchOptions = async (query) => {
     try {
+      if (!api) return;
       const params = {};
       if (query) params[queryKey] = query;
       const response = await get({
@@ -1991,7 +2145,10 @@ var SearchApiContent = ({
       if (found) {
         setSelectedObject(found);
         if (form && obj) {
-          form.setValue(obj, found);
+          form.setValue(obj, found, {
+            shouldValidate: true,
+            shouldDirty: true
+          });
         }
       }
     }
@@ -2024,7 +2181,7 @@ var SearchApiContent = ({
   useEffect7(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
-      if (containerRef.current && !containerRef.current.contains(target) && !(dropdownRef.current && dropdownRef.current.contains(target))) {
+      if (containerRef.current && !containerRef.current.contains(target) && !(dropdownContentRef.current && dropdownContentRef.current.contains(target))) {
         setIsOpen(false);
         setIsFocused(false);
         setSearchTerm("");
@@ -2045,42 +2202,21 @@ var SearchApiContent = ({
     return currentValue || "";
   };
   const handleSelect = (option) => {
-    const value = getOptionValue(option);
+    const val = getOptionValue(option);
+    setIsOpen(false);
+    inputRef.current?.blur();
     setSelectedObject(option);
-    onChangeHandler(value);
+    setTimeout(() => {
+      onChangeHandler(val);
+    }, 0);
     if (form) {
       if (obj) form.setValue(obj, option);
       if (name) form.clearErrors(name);
     }
-    setIsOpen(false);
     setSearchTerm("");
     setActiveIndex(-1);
     fieldInternalProps?.onBlur?.();
   };
-  const handleKeyDown = (e) => {
-    if (!isOpen) {
-      if (e.key === "ArrowDown" || e.key === "Enter") setIsOpen(true);
-      return;
-    }
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        setActiveIndex((prev) => prev < options.length - 1 ? prev + 1 : prev);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setActiveIndex((prev) => prev > 0 ? prev - 1 : prev);
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (activeIndex >= 0 && activeIndex < options.length)
-          handleSelect(options[activeIndex]);
-        break;
-      case "Escape":
-        setIsOpen(false);
-        break;
-    }
-  };
   const clearSelection = (e) => {
     e.stopPropagation();
     if (form) {
@@ -2102,13 +2238,7 @@ var SearchApiContent = ({
   const filteredOptions = options.filter(
     (option) => !filter.includes(getOptionValue(option))
   );
-  useEffect7(() => {
-    if (form && name && !form.watch(name)) {
-      form.setValue(name, void 0);
-      if (obj) form.setValue(obj, void 0);
-    }
-  }, [form, name, obj]);
-  let message = error;
+  let message = error || errorMessage;
   if (form && name) {
     const {
       formState: { errors }
@@ -2120,11 +2250,46 @@ var SearchApiContent = ({
     }
     message = currentError?.message || message;
   }
-  return /* @__PURE__ */ jsxs15(
+  const valueCtx = {
+    isOpen,
+    setIsOpen,
+    searchTerm,
+    setSearchTerm,
+    selectedValue: currentValue,
+    setSelectedValue: onChangeHandler,
+    // alias
+    activeIndex,
+    setActiveIndex,
+    isFocused,
+    setIsFocused,
+    dropdownAnchorRef,
+    dropdownContentRef,
+    containerRef,
+    inputRef,
+    primaryColor,
+    options: filteredOptions,
+    setOptions,
+    fieldInternalProps,
+    disabled,
+    isLoading,
+    clearSelection,
+    handleSelect,
+    getDisplayValue,
+    placeholder,
+    variant,
+    labelKey,
+    valueKey,
+    form,
+    name,
+    obj,
+    error: message
+  };
+  const hasChildren = React7.Children.count(children) > 0;
+  return /* @__PURE__ */ jsx20(SearchApiContext.Provider, { value: valueCtx, children: /* @__PURE__ */ jsxs15(
     "div",
     {
       ref: containerRef,
-      className: `${label ? "space-y-2" : ""} group ${containerClassName}`,
+      className: `${label ? "space-y-2" : ""} group relative ${containerClassName}`,
       children: [
         label && /* @__PURE__ */ jsxs15(
           "label",
@@ -2137,153 +2302,280 @@ var SearchApiContent = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs15("div", { className: "relative", ref: dropdownAnchorRef, children: [
-          /* @__PURE__ */ jsxs15(
+        hasChildren ? children : /* @__PURE__ */ jsxs15(Fragment4, { children: [
+          /* @__PURE__ */ jsx20(SearchApiTrigger, { className, children: /* @__PURE__ */ jsx20(SearchApiInput, { ...props }) }),
+          /* @__PURE__ */ jsx20(SearchApiContent, { children: filteredOptions.map((opt, index) => /* @__PURE__ */ jsx20(
+            SearchApiItem,
+            {
+              option: opt,
+              index
+            },
+            String(getOptionValue(opt)) || index
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx20("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx20("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+      ]
+    }
+  ) });
+};
+var SearchApiTrigger = forwardRef5(
+  ({ className = "", children, ...props }, ref) => {
+    const {
+      isOpen,
+      setIsOpen,
+      isFocused,
+      setIsFocused,
+      primaryColor,
+      dropdownAnchorRef,
+      disabled,
+      isLoading,
+      clearSelection,
+      selectedValue,
+      variant,
+      inputRef
+    } = useSearchApiContext();
+    return /* @__PURE__ */ jsx20("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        className: `flex items-center w-full px-0 text-gray-900 dark:text-white transition-all duration-200 cursor-text py-1 ${variant === "ghost" ? "bg-transparent border-transparent shadow-none px-0 h-full" : isFocused || isOpen ? "ring-2 bg-white dark:bg-zinc-900 border rounded-xl h-9" : "border-gray-200 dark:border-zinc-800 border rounded-xl bg-white dark:bg-zinc-900/50 h-9"} ${className}`,
+        style: variant === "default" ? {
+          borderColor: isFocused || isOpen ? primaryColor : void 0,
+          boxShadow: isFocused || isOpen ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+        } : void 0,
+        onClick: () => {
+          if (disabled) return;
+          inputRef.current?.focus();
+          setIsOpen(true);
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx20(
             "div",
             {
-              className: `flex items-center w-full px-0 text-gray-900 dark:text-white transition-all duration-200 cursor-text py-1 ${variant === "ghost" ? "bg-transparent border-transparent shadow-none px-0 h-full" : isFocused || isOpen ? "ring-2 bg-white dark:bg-zinc-900 border rounded-xl h-9" : "border-gray-200 dark:border-zinc-800 border rounded-xl bg-white dark:bg-zinc-900/50 h-9"} ${className}`,
-              style: variant === "default" ? {
-                borderColor: isFocused || isOpen ? primaryColor : void 0,
-                boxShadow: isFocused || isOpen ? `${primaryColor}33 0px 0px 0px 2px` : void 0
-              } : void 0,
-              onClick: () => {
-                if (disabled) return;
-                inputRef.current?.focus();
-                setIsOpen(true);
-              },
-              children: [
-                /* @__PURE__ */ jsx20(
-                  "div",
-                  {
-                    className: `${variant === "ghost" ? "pl-0" : "pl-2.5"} text-gray-400`,
-                    children: /* @__PURE__ */ jsx20(Search, { className: "h-4 w-4" })
-                  }
-                ),
-                /* @__PURE__ */ jsxs15("div", { className: "flex-1 relative ms-2", children: [
-                  !isOpen && currentValue && /* @__PURE__ */ jsx20("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
-                  /* @__PURE__ */ jsx20(
-                    "input",
-                    {
-                      ref: setInputRef,
-                      type: "text",
-                      className: `block w-full bg-transparent border-none focus:ring-0 py-1 focus:outline-none text-sm placeholder-gray-400 dark:placeholder-zinc-500 ${!isOpen && currentValue ? "opacity-0" : "opacity-100"} ${variant === "ghost" ? "h-full" : "h-9"}`,
-                      placeholder: !currentValue ? placeholder : "",
-                      value: searchTerm,
-                      onChange: (e) => setSearchTerm(e.target.value),
-                      onFocus: () => {
-                        setIsFocused(true);
-                        setIsOpen(true);
-                      },
-                      onKeyDown: handleKeyDown,
-                      disabled,
-                      ...props
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx20("div", { className: "pr-2.5 w-16! flex items-center gap-1 shrink-0 min-w-10 justify-end", children: isLoading ? /* @__PURE__ */ jsx20(Loader22, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
-                  currentValue && !disabled && /* @__PURE__ */ jsx20(
-                    "button",
-                    {
-                      onClick: clearSelection,
-                      type: "button",
-                      className: "p-0.5 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
-                      children: /* @__PURE__ */ jsx20(X2, { className: "h-3 w-3" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx20(
-                    ChevronDown3,
-                    {
-                      className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
-                    }
-                  )
-                ] }) })
-              ]
+              className: `${variant === "ghost" ? "pl-0" : "pl-2.5"} text-gray-400`,
+              children: /* @__PURE__ */ jsx20(Search, { className: "h-4 w-4" })
             }
           ),
-          isOpen && typeof document !== "undefined" && createPortal2(
-            /* @__PURE__ */ jsx20(
-              "div",
+          /* @__PURE__ */ jsx20("div", { className: "flex-1 relative ms-2", children }),
+          /* @__PURE__ */ jsx20("div", { className: "pr-2.5 w-16! flex items-center gap-1 shrink-0 min-w-10 justify-end", children: isLoading ? /* @__PURE__ */ jsx20(Loader22, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
+            selectedValue && !disabled && /* @__PURE__ */ jsx20(
+              "button",
               {
-                ref: dropdownRef,
-                className: "bg-white dark:bg-zinc-900 rounded-xl border border-gray-200 dark:border-zinc-800 shadow-lg max-h-60 overflow-y-auto overflow-x-hidden",
-                style: dropdownStyle,
-                children: isLoading && options.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "p-4 text-center text-sm text-gray-500", children: [
-                  /* @__PURE__ */ jsx20(Loader22, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
-                  "Loading options..."
-                ] }) : filteredOptions.length > 0 ? /* @__PURE__ */ jsx20("div", { className: "py-1", children: filteredOptions.map((option, index) => {
-                  const optValue = getOptionValue(option);
-                  const isSelected = currentValue === optValue;
-                  const isHighlighted = index === activeIndex;
-                  return /* @__PURE__ */ jsxs15(
-                    "button",
-                    {
-                      type: "button",
-                      className: `w-full text-left px-3 py-2 text-sm flex items-center justify-between transition-colors ${isSelected ? "font-medium" : isHighlighted ? "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-zinc-800"}`,
-                      style: {
-                        backgroundColor: isSelected ? `${primaryColor}1A` : void 0,
-                        color: isSelected ? primaryColor : void 0
-                      },
-                      onClick: () => handleSelect(option),
-                      onMouseEnter: () => setActiveIndex(index),
-                      children: [
-                        /* @__PURE__ */ jsx20("span", { className: "truncate", children: option[labelKey] }),
-                        isSelected && /* @__PURE__ */ jsx20(
-                          Check3,
-                          {
-                            className: "h-4 w-4",
-                            style: { color: primaryColor }
-                          }
-                        )
-                      ]
-                    },
-                    optValue || index
-                  );
-                }) }) : /* @__PURE__ */ jsx20("div", { className: "p-4 text-center text-sm text-gray-500", children: errorMessage || (searchTerm ? `No results for "${searchTerm}"` : "No options available") })
+                onClick: clearSelection,
+                type: "button",
+                className: "p-0.5 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+                children: /* @__PURE__ */ jsx20(X2, { className: "h-3 w-3" })
               }
             ),
-            document.body
-          )
-        ] }),
-        message && /* @__PURE__ */ jsx20("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
-      ]
-    }
-  );
-};
-var SearchApi = forwardRef5(
-  (props, _) => {
-    const { form, name, onChange, value } = props;
-    if (form && name) {
-      return /* @__PURE__ */ jsx20(
-        Controller5,
+            /* @__PURE__ */ jsx20(
+              ChevronDown3,
+              {
+                className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
+              }
+            )
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
+SearchApiTrigger.displayName = "SearchApiTrigger";
+var SearchApiInput = forwardRef5(
+  ({ className = "", ...props }, ref) => {
+    const {
+      isOpen,
+      setIsOpen,
+      isFocused,
+      setIsFocused,
+      searchTerm,
+      setSearchTerm,
+      disabled,
+      selectedValue,
+      getDisplayValue,
+      placeholder,
+      variant,
+      activeIndex,
+      setActiveIndex,
+      options,
+      handleSelect,
+      inputRef,
+      fieldInternalProps
+    } = useSearchApiContext();
+    const setInternalInputRef = (element) => {
+      inputRef.current = element;
+      if (fieldInternalProps?.ref) {
+        if (typeof fieldInternalProps.ref === "function") {
+          fieldInternalProps.ref(element);
+        } else {
+          fieldInternalProps.ref.current = element;
+        }
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (!isOpen) {
+        if (e.key === "ArrowDown" || e.key === "Enter") setIsOpen(true);
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          e.stopPropagation();
+          setActiveIndex(
+            activeIndex < options.length - 1 ? activeIndex + 1 : activeIndex
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          e.stopPropagation();
+          setActiveIndex(activeIndex > 0 ? activeIndex - 1 : activeIndex);
+          break;
+        case "Enter":
+          e.preventDefault();
+          e.stopPropagation();
+          if (activeIndex >= 0 && activeIndex < options.length)
+            handleSelect(options[activeIndex]);
+          break;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          setIsOpen(false);
+          break;
+      }
+    };
+    return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+      !isOpen && selectedValue && /* @__PURE__ */ jsx20("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
+      /* @__PURE__ */ jsx20(
+        "input",
         {
-          name,
-          control: form.control,
-          render: ({
-            field: { onChange: formOnChange, value: formValue, ref, onBlur }
-          }) => /* @__PURE__ */ jsx20(
-            SearchApiContent,
-            {
-              ...props,
-              currentValue: formValue,
-              onChangeHandler: formOnChange,
-              fieldInternalProps: { ref, onBlur }
-            }
-          )
+          ref: setInternalInputRef,
+          type: "text",
+          className: `block w-full bg-transparent border-none focus:ring-0 py-1 focus:outline-none text-sm placeholder-gray-400 dark:placeholder-zinc-500 ${!isOpen && selectedValue ? "opacity-0" : "opacity-100"} ${variant === "ghost" ? "h-full" : "h-9"} ${className}`,
+          placeholder: !selectedValue ? placeholder : "",
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value),
+          onFocus: () => {
+            setIsFocused(true);
+            setIsOpen(true);
+          },
+          onKeyDown: handleKeyDown,
+          disabled,
+          ...props
         }
-      );
-    }
-    return /* @__PURE__ */ jsx20(
-      SearchApiContent,
+      )
+    ] });
+  }
+);
+SearchApiInput.displayName = "SearchApiInput";
+var SearchApiContent = forwardRef5(
+  ({ children, className = "", style, ...props }, ref) => {
+    const {
+      isOpen,
+      setIsOpen,
+      dropdownAnchorRef,
+      dropdownContentRef,
+      isLoading,
+      searchTerm,
+      options,
+      error
+    } = useSearchApiContext();
+    const [dropdownStyle, setDropdownStyle] = useState12({});
+    const updateDropdownPosition = () => {
+      if (dropdownAnchorRef.current) {
+        const rect = dropdownAnchorRef.current.getBoundingClientRect();
+        const newStyle = {
+          position: "fixed",
+          top: `${rect.bottom + 4}px`,
+          left: `${rect.left}px`,
+          width: `${rect.width}px`,
+          zIndex: 999999
+        };
+        if (rect.bottom + 240 > window.innerHeight) {
+          newStyle.top = "auto";
+          newStyle.bottom = `${window.innerHeight - rect.top + 4}px`;
+        }
+        setDropdownStyle(newStyle);
+      }
+    };
+    useEffect7(() => {
+      if (isOpen) {
+        updateDropdownPosition();
+        window.addEventListener("scroll", updateDropdownPosition, true);
+        window.addEventListener("resize", updateDropdownPosition);
+        return () => {
+          window.removeEventListener("scroll", updateDropdownPosition, true);
+          window.removeEventListener("resize", updateDropdownPosition);
+        };
+      }
+    }, [isOpen]);
+    if (!isOpen || typeof document === "undefined") return null;
+    return createPortal2(
+      /* @__PURE__ */ jsx20(
+        "div",
+        {
+          ref: dropdownContentRef,
+          className: `bg-white dark:bg-zinc-900 rounded-xl border border-gray-200 dark:border-zinc-800 shadow-lg max-h-60 overflow-y-auto overflow-x-hidden ${className}`,
+          style: { ...dropdownStyle, ...style },
+          onMouseDown: (e) => e.stopPropagation(),
+          ...props,
+          children: isLoading && options.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "p-4 text-center text-sm text-gray-500", children: [
+            /* @__PURE__ */ jsx20(Loader22, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
+            "Loading options..."
+          ] }) : React7.Children.count(children) > 0 ? /* @__PURE__ */ jsx20("div", { className: "py-1", children }) : /* @__PURE__ */ jsx20("div", { className: "p-4 text-center text-sm text-gray-500", children: error && options.length === 0 ? error : searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+        }
+      ),
+      document.body
+    );
+  }
+);
+SearchApiContent.displayName = "SearchApiContent";
+var SearchApiItem = forwardRef5(
+  ({ option, index, className = "", ...props }, ref) => {
+    const {
+      selectedValue,
+      activeIndex,
+      setActiveIndex,
+      handleSelect,
+      primaryColor,
+      labelKey,
+      valueKey
+    } = useSearchApiContext();
+    const getOptionValue = (opt) => {
+      if (valueKey === "_id" && opt._id === void 0 && opt.id !== void 0) {
+        return opt.id;
+      }
+      return opt[valueKey];
+    };
+    const optValue = getOptionValue(option);
+    const isSelected = selectedValue === optValue;
+    const isHighlighted = index === activeIndex;
+    return /* @__PURE__ */ jsxs15(
+      "button",
       {
+        ref,
+        type: "button",
+        className: `w-full text-left px-3 py-2 text-sm flex items-center justify-between transition-colors ${isSelected ? "font-medium" : isHighlighted ? "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-zinc-800"} ${className}`,
+        style: isSelected && primaryColor ? {
+          backgroundColor: `${primaryColor}1A`,
+          color: primaryColor
+        } : void 0,
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          handleSelect(option);
+        },
+        onMouseEnter: () => setActiveIndex(index),
         ...props,
-        currentValue: value,
-        onChangeHandler: onChange || (() => {
-        })
-      }
+        children: [
+          /* @__PURE__ */ jsx20("span", { className: "truncate", children: option[labelKey] }),
+          isSelected && /* @__PURE__ */ jsx20(Check3, { className: "h-4 w-4", style: { color: primaryColor } })
+        ]
+      },
+      optValue || index
     );
   }
 );
-SearchApi.displayName = "SearchApi";
+SearchApiItem.displayName = "SearchApiItem";
 
 // src/components/Fields/date.tsx
 import { forwardRef as forwardRef6, useState as useState13 } from "react";
@@ -2370,15 +2662,18 @@ var DateInput = forwardRef6(
         }
       );
     };
-    return /* @__PURE__ */ jsxs16("div", { className: `space-y-2 group ${containerClassName}`, children: [
-      label && /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsxs16("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
+      label && /* @__PURE__ */ jsxs16(
         "label",
         {
           className: "block text-xs font-medium transition-colors duration-200",
           style: {
             color: message ? "#ef4444" : isFocused ? primaryColor : void 0
           },
-          children: label
+          children: [
+            label,
+            props.required && /* @__PURE__ */ jsx21("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
         }
       ),
       form && name ? /* @__PURE__ */ jsx21(
@@ -2394,7 +2689,7 @@ var DateInput = forwardRef6(
           )
         }
       ) : renderDatePicker(value, onChange, onBlur, ref),
-      message && /* @__PURE__ */ jsx21("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      /* @__PURE__ */ jsx21("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx21("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
     ] });
   }
 );
@@ -2404,8 +2699,15 @@ var Fields = {
   Input,
   PhoneInput,
   Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
   Textarea,
   SearchApi,
+  SearchApiTrigger,
+  SearchApiInput,
+  SearchApiContent,
+  SearchApiItem,
   DateInput
 };
 var Fields_default = Fields;
@@ -2422,7 +2724,7 @@ import {
   flexRender
 } from "@tanstack/react-table";
 import { ChevronDown as ChevronDown4, Search as Search2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 function DataTable({
   columns: userColumns,
   data,
@@ -2689,7 +2991,7 @@ function DataTable({
       }
     ) }) }),
     /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between px-2", children: [
-      /* @__PURE__ */ jsx22("div", { className: "flex-1 text-xs text-gray-500", children: selectable && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+      /* @__PURE__ */ jsx22("div", { className: "flex-1 text-xs text-gray-500", children: selectable && /* @__PURE__ */ jsxs17(Fragment5, { children: [
         table.getFilteredSelectedRowModel().rows.length,
         " of",
         " ",
@@ -2739,7 +3041,7 @@ import {
   flexRender as flexRender2
 } from "@tanstack/react-table";
 import { Plus, Edit2, Trash2, Check as Check4, X as X3, ChevronDown as ChevronDown5 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function PostTable({
   columns: userColumns,
   data: controlledData,
@@ -3069,7 +3371,7 @@ function PostTable({
                           "py-1! text-sm align-middle transition-colors duration-200",
                           verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""
                         ),
-                        children: /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-2", children: editingIndex !== null ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
+                        children: /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-2", children: editingIndex !== null ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
                           /* @__PURE__ */ jsx23(
                             "button",
                             {
@@ -3090,7 +3392,7 @@ function PostTable({
                               children: /* @__PURE__ */ jsx23(X3, { size: 16, strokeWidth: 2.5 })
                             }
                           )
-                        ] }) : /* @__PURE__ */ jsx23(Fragment4, { children: renderAddButton ? renderAddButton(
+                        ] }) : /* @__PURE__ */ jsx23(Fragment6, { children: renderAddButton ? renderAddButton(
                           entryData,
                           handleSaveField,
                           isSavingAsync
@@ -4025,7 +4327,14 @@ export {
   PhoneInput,
   PostTable,
   SearchApi,
+  SearchApiContent,
+  SearchApiInput,
+  SearchApiItem,
+  SearchApiTrigger,
   Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
   SimpleTable,
   Textarea,
   ThemeProvider,
@@ -4035,6 +4344,8 @@ export {
   useA4DataView_default as useA4StatementView,
   useApis_default as useApi,
   useModal,
+  useSearchApiContext,
+  useSelectContext,
   useTheme,
   useTransaction_default as useTransaction,
   useWarqadConfig