warqadui 0.0.18 → 0.0.20

package/dist/index.js

@@ -57,7 +57,14 @@ __export(index_exports, {
   PhoneInput: () => PhoneInput,
   PostTable: () => PostTable,
   SearchApi: () => SearchApi,
+  SearchApiContent: () => SearchApiContent,
+  SearchApiInput: () => SearchApiInput,
+  SearchApiItem: () => SearchApiItem,
+  SearchApiTrigger: () => SearchApiTrigger,
   Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectItem: () => SelectItem,
+  SelectTrigger: () => SelectTrigger,
   SimpleTable: () => SimpleTable,
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
@@ -67,6 +74,8 @@ __export(index_exports, {
   useA4StatementView: () => useA4DataView_default,
   useApi: () => useApis_default,
   useModal: () => useModal,
+  useSearchApiContext: () => useSearchApiContext,
+  useSelectContext: () => useSelectContext,
   useTheme: () => useTheme,
   useTransaction: () => useTransaction_default,
   useWarqadConfig: () => useWarqadConfig
@@ -1372,65 +1381,113 @@ var PhoneInput = (0, import_react9.forwardRef)(
 PhoneInput.displayName = "PhoneInput";
 
 // src/components/Fields/select.tsx
-var import_react10 = require("react");
+var import_react10 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_lucide_react7 = require("lucide-react");
 var import_react_hook_form3 = require("react-hook-form");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var SelectContent = ({
-  label,
-  options,
-  icon,
+var SelectContext = (0, import_react10.createContext)(void 0);
+var useSelectContext = () => {
+  const context = (0, import_react10.useContext)(SelectContext);
+  if (!context)
+    throw new Error("Select components must be used within a SelectProvider");
+  return context;
+};
+var Select = (0, import_react10.forwardRef)((props, ref) => {
+  const { form, name, onChange, value, children, options = [] } = props;
+  if (form && name) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_react_hook_form3.Controller,
+      {
+        name,
+        control: form.control,
+        render: ({
+          field: {
+            onChange: formOnChange,
+            value: formValue,
+            ref: fieldRef,
+            onBlur
+          }
+        }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          SelectRoot,
+          {
+            ...props,
+            options,
+            currentValue: formValue,
+            onChangeHandler: (val) => {
+              formOnChange(val);
+              onChange?.(val);
+            },
+            fieldInternalProps: { ref: fieldRef, onBlur },
+            children
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    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] = (0, import_react10.useState)(false);
   const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
-  const [dropdownStyle, setDropdownStyle] = (0, import_react10.useState)({});
+  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(-1);
+  const [registeredOptions, setRegisteredOptions] = (0, import_react10.useState)([]);
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
   const containerRef = (0, import_react10.useRef)(null);
   const dropdownAnchorRef = (0, import_react10.useRef)(null);
   const dropdownContentRef = (0, import_react10.useRef)(null);
-  const lastFocusTime = (0, import_react10.useRef)(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];
+    });
   };
-  (0, import_react10.useEffect)(() => {
-    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]);
+  };
   (0, import_react10.useEffect)(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -1443,20 +1500,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 {
@@ -1469,7 +1512,27 @@ var SelectContent = ({
     }
     message = currentError?.message || message;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  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 = import_react10.default.Children.count(children) > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectContext.Provider, { value: valueCtx, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -1482,172 +1545,246 @@ var SelectContent = ({
             style: { color: isFocused || isOpen ? primaryColor : void 0 },
             children: [
               label,
-              props.required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", ref: dropdownAnchorRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-            "div",
+        hasChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            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__ */ (0, import_jsx_runtime18.jsx)(
-                  "div",
-                  {
-                    className: `pl-2.5 pr-2 flex items-center transition-colors duration-200`,
-                    style: { color: isFocused || isOpen ? primaryColor : "#9ca3af" },
-                    children: icon
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  "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__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pr-2.5 flex items-center gap-1 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  import_lucide_react7.ChevronDown,
-                  {
-                    className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
-                  }
-                ) })
-              ]
+              id,
+              icon,
+              placeholder,
+              variant,
+              className,
+              ...props
             }
           ),
-          isOpen && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-              "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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
-                  options.map((option, index) => {
-                    const isSelected = currentValue === option.value;
-                    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                      "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__ */ (0, import_jsx_runtime18.jsx)("span", { className: "whitespace-nowrap truncate flex-1", children: option.label }),
-                          isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                            import_lucide_react7.Check,
-                            {
-                              className: "h-4 w-4 shrink-0 ml-2",
-                              style: { color: primaryColor }
-                            }
-                          )
-                        ]
-                      },
-                      String(option.value) || index
-                    );
-                  }),
-                  options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-3 text-center text-sm text-gray-500", children: "No options available" })
-                ] })
-              }
-            ),
-            document.body
-          )
+          allOptions && allOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectContent, { children: allOptions.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            SelectItem,
+            {
+              value: opt.value,
+              label: opt.label,
+              disabled: opt.disabled
+            },
+            String(opt.value) || index
+          )) })
         ] }),
         message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
       ]
     }
-  );
+  ) });
 };
-var Select = (0, import_react10.forwardRef)(
-  (props, ref) => {
-    const { form, name, onChange, value } = props;
-    if (form && name) {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_react_hook_form3.Controller,
-        {
-          name,
-          control: form.control,
-          render: ({
-            field: {
-              onChange: formOnChange,
-              value: formValue,
-              ref: fieldRef,
-              onBlur
-            }
-          }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            SelectContent,
+var SelectTrigger = (0, import_react10.forwardRef)(
+  ({
+    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 = (0, import_react10.useRef)(0);
+    const displayOption = options.find((o) => o.value === selectedValue);
+    const displayValue = displayOption ? displayOption.label : selectedValue != null && selectedValue !== "" ? String(selectedValue) : placeholder;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "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__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "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__ */ (0, import_jsx_runtime18.jsx)(
+            "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__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pr-2.5 flex items-center gap-1 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_lucide_react7.ChevronDown,
+            {
+              className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          ) })
+        ] })
+      }
+    ) });
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = (0, import_react10.forwardRef)(
+  ({ children, className = "", style, ...props }, ref) => {
+    const { isOpen, setIsOpen, dropdownAnchorRef, dropdownContentRef } = useSelectContext();
+    const [dropdownStyle, setDropdownStyle] = (0, import_react10.useState)({});
+    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__ */ (0, import_jsx_runtime18.jsx)(
-      SelectContent,
+        setDropdownStyle(newStyle);
+      }
+    };
+    (0, import_react10.useEffect)(() => {
+      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 (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "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__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col gap-0.5", children: import_react10.default.Children.count(children) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-3 text-center text-sm text-gray-500", children: "No options available" }) : children })
+        }
+      ),
+      document.body
+    );
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = (0, import_react10.forwardRef)(
+  ({ value, label, disabled, children, className = "", ...props }, ref) => {
+    const {
+      selectedValue,
+      setSelectedValue,
+      setIsOpen,
+      primaryColor,
+      fieldInternalProps,
+      registerOption
+    } = useSelectContext();
+    const isSelected = selectedValue === value;
+    const displayLabel = label || children || value;
+    (0, import_react10.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime18.jsxs)(
+      "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__ */ (0, import_jsx_runtime18.jsx)("span", { className: "whitespace-nowrap truncate flex-1", children: children || label }),
+          isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_lucide_react7.Check,
+            {
+              className: "h-4 w-4 shrink-0 ml-2",
+              style: { color: primaryColor }
+            }
+          )
+        ]
       }
     );
   }
 );
-Select.displayName = "Select";
+SelectItem.displayName = "SelectItem";
 
 // src/components/Fields/textArea.tsx
 var import_react11 = require("react");
@@ -1740,7 +1877,7 @@ var Textarea = (0, import_react11.forwardRef)(
 );
 
 // src/components/Fields/searchApi.tsx
-var import_react13 = require("react");
+var import_react13 = __toESM(require("react"));
 var import_react_dom2 = require("react-dom");
 var import_lucide_react8 = require("lucide-react");
 
@@ -1913,27 +2050,77 @@ var useApis_default = useApi;
 // src/components/Fields/searchApi.tsx
 var import_react_hook_form5 = require("react-hook-form");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var SearchApiContent = ({
-  label,
-  api,
-  placeholder = "Search...",
+var SearchApiContext = (0, import_react13.createContext)(
+  void 0
+);
+var useSearchApiContext = () => {
+  const context = (0, import_react13.useContext)(SearchApiContext);
+  if (!context)
+    throw new Error(
+      "SearchApi components must be used within a SearchApiProvider"
+    );
+  return context;
+};
+var SearchApi = (0, import_react13.forwardRef)(
+  (props, _) => {
+    const { form, name, onChange, value, children } = props;
+    if (form && name) {
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react_hook_form5.Controller,
+        {
+          name,
+          control: form.control,
+          render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            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__ */ (0, import_jsx_runtime20.jsx)(
+      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] = (0, import_react13.useState)("");
@@ -1947,51 +2134,13 @@ var SearchApiContent = ({
   const [hasAttemptedHydration, setHasAttemptedHydration] = (0, import_react13.useState)(false);
   const containerRef = (0, import_react13.useRef)(null);
   const dropdownAnchorRef = (0, import_react13.useRef)(null);
-  const dropdownRef = (0, import_react13.useRef)(null);
+  const dropdownContentRef = (0, import_react13.useRef)(null);
   const inputRef = (0, import_react13.useRef)(null);
   const prevApiRef = (0, import_react13.useRef)(api);
-  const [dropdownStyle, setDropdownStyle] = (0, import_react13.useState)({});
-  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);
-    }
-  };
-  (0, import_react13.useEffect)(() => {
-    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({
@@ -2042,7 +2191,7 @@ var SearchApiContent = ({
       setHasAttemptedHydration(true);
       if (selectedObject) setSelectedObject(void 0);
     }
-  }, [currentValue, selectedObject]);
+  }, [currentValue]);
   const getOptionValue = (option) => {
     if (valueKey === "_id" && option._id === void 0 && option.id !== void 0) {
       return option.id;
@@ -2055,11 +2204,14 @@ var SearchApiContent = ({
       if (found) {
         setSelectedObject(found);
         if (form && obj) {
-          form.setValue(obj, found);
+          form.setValue(obj, found, {
+            shouldValidate: true,
+            shouldDirty: true
+          });
         }
       }
     }
-  }, [currentValue, options, selectedObject, form, obj]);
+  }, [currentValue, options, obj]);
   (0, import_react13.useEffect)(() => {
     if (prevApiRef.current !== api) {
       prevApiRef.current = api;
@@ -2084,11 +2236,11 @@ var SearchApiContent = ({
       }
       fetchOptions("");
     }
-  }, [api, form, name, obj, onChangeHandler]);
+  }, [api, name, obj]);
   (0, import_react13.useEffect)(() => {
     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("");
@@ -2109,42 +2261,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) {
@@ -2166,13 +2297,7 @@ var SearchApiContent = ({
   const filteredOptions = options.filter(
     (option) => !filter.includes(getOptionValue(option))
   );
-  (0, import_react13.useEffect)(() => {
-    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 }
@@ -2184,7 +2309,42 @@ var SearchApiContent = ({
     }
     message = currentError?.message || message;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  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 = import_react13.default.Children.count(children) > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchApiContext.Provider, { value: valueCtx, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -2201,153 +2361,280 @@ var SearchApiContent = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: dropdownAnchorRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            "div",
+        hasChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchApiTrigger, { className, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchApiInput, { ...props }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchApiContent, { children: filteredOptions.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            SearchApiItem,
             {
-              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__ */ (0, import_jsx_runtime20.jsx)(
-                  "div",
-                  {
-                    className: `${variant === "ghost" ? "pl-0" : "pl-2.5"} text-gray-400`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Search, { className: "h-4 w-4" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 relative ms-2", children: [
-                  !isOpen && currentValue && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    "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__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pr-2.5 w-16! flex items-center gap-1 shrink-0 min-w-10 justify-end", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
-                  currentValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    "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__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.X, { className: "h-3 w-3" })
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_lucide_react8.ChevronDown,
-                    {
-                      className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
-                    }
-                  )
-                ] }) })
-              ]
-            }
-          ),
-          isOpen && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              "div",
-              {
-                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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-4 text-center text-sm text-gray-500", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
-                  "Loading options..."
-                ] }) : filteredOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-1", children: filteredOptions.map((option, index) => {
-                  const optValue = getOptionValue(option);
-                  const isSelected = currentValue === optValue;
-                  const isHighlighted = index === activeIndex;
-                  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                    "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__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate", children: option[labelKey] }),
-                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                          import_lucide_react8.Check,
-                          {
-                            className: "h-4 w-4",
-                            style: { color: primaryColor }
-                          }
-                        )
-                      ]
-                    },
-                    optValue || index
-                  );
-                }) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-4 text-center text-sm text-gray-500", children: errorMessage || (searchTerm ? `No results for "${searchTerm}"` : "No options available") })
-              }
-            ),
-            document.body
-          )
+              option: opt,
+              index
+            },
+            String(getOptionValue(opt)) || index
+          )) })
         ] }),
         message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
       ]
     }
-  );
+  ) });
 };
-var SearchApi = (0, import_react13.forwardRef)(
-  (props, _) => {
-    const { form, name, onChange, value } = props;
-    if (form && name) {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react_hook_form5.Controller,
-        {
-          name,
-          control: form.control,
-          render: ({
-            field: { onChange: formOnChange, value: formValue, ref, onBlur }
-          }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            SearchApiContent,
+var SearchApiTrigger = (0, import_react13.forwardRef)(
+  ({ className = "", children, ...props }, ref) => {
+    const {
+      isOpen,
+      setIsOpen,
+      isFocused,
+      setIsFocused,
+      primaryColor,
+      dropdownAnchorRef,
+      disabled,
+      isLoading,
+      clearSelection,
+      selectedValue,
+      variant,
+      inputRef
+    } = useSearchApiContext();
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "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__ */ (0, import_jsx_runtime20.jsx)(
+            "div",
             {
-              ...props,
-              currentValue: formValue,
-              onChangeHandler: formOnChange,
-              fieldInternalProps: { ref, onBlur }
+              className: `${variant === "ghost" ? "pl-0" : "pl-2.5"} text-gray-400`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Search, { className: "h-4 w-4" })
             }
-          )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 relative ms-2", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pr-2.5 w-16! flex items-center gap-1 shrink-0 min-w-10 justify-end", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
+            selectedValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "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__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.X, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_lucide_react8.ChevronDown,
+              {
+                className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
+              }
+            )
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
+SearchApiTrigger.displayName = "SearchApiTrigger";
+var SearchApiInput = (0, import_react13.forwardRef)(
+  ({ 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;
         }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      SearchApiContent,
+      }
+    };
+    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__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      !isOpen && selectedValue && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "input",
+        {
+          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
+        }
+      )
+    ] });
+  }
+);
+SearchApiInput.displayName = "SearchApiInput";
+var SearchApiContent = (0, import_react13.forwardRef)(
+  ({ children, className = "", style, ...props }, ref) => {
+    const {
+      isOpen,
+      setIsOpen,
+      dropdownAnchorRef,
+      dropdownContentRef,
+      isLoading,
+      searchTerm,
+      options,
+      error
+    } = useSearchApiContext();
+    const [dropdownStyle, setDropdownStyle] = (0, import_react13.useState)({});
+    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);
+      }
+    };
+    (0, import_react13.useEffect)(() => {
+      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 (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-4 text-center text-sm text-gray-500", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
+            "Loading options..."
+          ] }) : import_react13.default.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-1", children }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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 = (0, import_react13.forwardRef)(
+  ({ 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__ */ (0, import_jsx_runtime20.jsxs)(
+      "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__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate", children: option[labelKey] }),
+          isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Check, { className: "h-4 w-4", style: { color: primaryColor } })
+        ]
+      },
+      optValue || index
     );
   }
 );
-SearchApi.displayName = "SearchApi";
+SearchApiItem.displayName = "SearchApiItem";
 
 // src/components/Fields/date.tsx
 var import_react14 = require("react");
@@ -2466,8 +2753,15 @@ var Fields = {
   Input,
   PhoneInput,
   Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
   Textarea,
   SearchApi,
+  SearchApiTrigger,
+  SearchApiInput,
+  SearchApiContent,
+  SearchApiItem,
   DateInput
 };
 var Fields_default = Fields;
@@ -4069,7 +4363,14 @@ var generatePdf = async (elementId, options = {}) => {
   PhoneInput,
   PostTable,
   SearchApi,
+  SearchApiContent,
+  SearchApiInput,
+  SearchApiItem,
+  SearchApiTrigger,
   Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
   SimpleTable,
   Textarea,
   ThemeProvider,
@@ -4079,6 +4380,8 @@ var generatePdf = async (elementId, options = {}) => {
   useA4StatementView,
   useApi,
   useModal,
+  useSearchApiContext,
+  useSelectContext,
   useTheme,
   useTransaction,
   useWarqadConfig