shadcn-zod-formkit 3.8.0 → 3.8.1

package/README.md

@@ -1,8 +1,8 @@
-⚡️ # React Dynamic Form Maker
+# React Dynamic Form Maker
 
-⚡️ **Next.js & Client Components**
+> **v3.5.4** · Next.js & React Client Components
 
-📦 A React library for creating **dynamic forms** with **Zod validations**, supporting multiple input types: text, number, email, switch, color, date, select, file, OTP and many more.
+📦 A React library for creating **dynamic forms** with **Zod validations**, supporting 40+ input types: text, number, email, switch, color, date, select, file, OTP, location, repeater, keyboard integration, and many more.
 
 ---
 
@@ -1134,6 +1134,12 @@ MIT License - see the [LICENSE.md](LICENSE.md) file for details.
 
 ---
 
+## 📚 Documentation
+
+- [Quick Start](docs/QUICK_START.md) — Run the example app and test features
+- [Testing Guide](docs/TESTING_GUIDE.md) — Testing conventions and setup
+- [Roadmap & Upcoming Improvements](docs/PROXIMAS_MEJORAS.md) — Planned features and known issues
+
 ## 🔗 Links
 
 - [GitHub Repository](https://github.com/NativoLink/shadcn-zod-formkit)

package/dist/index.cjs

@@ -10216,12 +10216,36 @@ var useKeyboardStore = zustand.create((set, get) => ({
     }
   }))
 }));
+
+// src/components/custom/form/inputs/base/definitions.ts
+var flattenFields = (fields, onAnyFieldChange) => {
+  const result = [];
+  for (const field of fields) {
+    if (Array.isArray(field)) {
+      result.push(...flattenFields(field));
+    } else if (field.fields) {
+      result.push(...flattenFields(field.fields));
+    } else {
+      if (onAnyFieldChange) field.onAnyFieldChange = (data) => onAnyFieldChange(data);
+      result.push(field);
+    }
+  }
+  return result;
+};
+var TextInputType = /* @__PURE__ */ ((TextInputType3) => {
+  TextInputType3["DEFAULT"] = "default";
+  TextInputType3["NUMBER"] = "number";
+  TextInputType3["EMAIL"] = "email";
+  TextInputType3["PHONE"] = "phone";
+  TextInputType3["PASSWORD"] = "password";
+  return TextInputType3;
+})(TextInputType || {});
 var QwertyKeyboard = class extends BaseKeyboard {
-  render() {
+  render(input) {
     return /* @__PURE__ */ jsxRuntime.jsx(KeyboardQwerty, {});
   }
 };
-var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2xl", onDelete }) => {
+var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2xl", onDelete, input }) => {
   const [shiftMode, setShiftMode] = React3.useState("off");
   const [mode, setMode] = React3.useState("letters");
   const lastShiftPress = React3.useRef(0);
@@ -10292,11 +10316,7 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
   };
   const shiftLabel = shiftMode === "caps" ? lucideReact.ArrowBigUpDash : lucideReact.ArrowBigUp;
   const shiftActive = shiftMode !== "off";
-  const textField = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: currentInputField && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 h-full min-h-16 flex-1 flex flex-row text-2xl font-bold justify-center text-center items-center gap-2 rounded-xl border-2 transition-all  outline-none border-amber-400 bg-amber-50 ", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-    " ",
-    currentInputField.field?.value,
-    " "
-  ] }) }) });
+  const textField = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: currentInputField && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 h-full min-h-16 flex-1 flex flex-row text-2xl font-bold justify-center text-center items-center gap-2 rounded-xl border-2 transition-all  outline-none border-amber-400 bg-amber-50 ", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentInputField.input && currentInputField.input.keyboardType == "password" /* PASSWORD */ ? "\u2022".repeat(currentInputField.field?.value.toString().length) : currentInputField.field?.value || "" }) }) });
   if (mode === "symbols") {
     const keys = [
       ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
@@ -10343,7 +10363,10 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
             { label: "esc", onClick: () => {
               setIsOpen(false);
             }, className: "bg-red-200" },
-            ...fila1
+            ...fila1,
+            { label: "delete", icons: [lucideReact.DeleteIcon], onClick: () => {
+              backspace();
+            }, className: "bg-red-200 text-xs" }
           ],
           [
             { label: "tab", onClick: () => {
@@ -10378,30 +10401,6 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
     )
   ] });
 };
-
-// src/components/custom/form/inputs/base/definitions.ts
-var flattenFields = (fields, onAnyFieldChange) => {
-  const result = [];
-  for (const field of fields) {
-    if (Array.isArray(field)) {
-      result.push(...flattenFields(field));
-    } else if (field.fields) {
-      result.push(...flattenFields(field.fields));
-    } else {
-      if (onAnyFieldChange) field.onAnyFieldChange = (data) => onAnyFieldChange(data);
-      result.push(field);
-    }
-  }
-  return result;
-};
-var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
-  TextInputType2["DEFAULT"] = "default";
-  TextInputType2["NUMBER"] = "number";
-  TextInputType2["EMAIL"] = "email";
-  TextInputType2["PHONE"] = "phone";
-  TextInputType2["PASSWORD"] = "password";
-  return TextInputType2;
-})(TextInputType || {});
 var keyboardMap = {
   ["qwerty" /* QWERTY */]: QwertyKeyboard,
   ["qwerty_not_chars" /* QWERTY_NOT_CHARS */]: QwertyKeyboard,
@@ -10490,52 +10489,52 @@ var isValidField = (input, form, defaultValue) => {
 };
 
 // src/components/custom/form/inputs/base/input-types.ts
-var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
-  InputTypes2["HIDDEN"] = "hidden";
-  InputTypes2["TEXT"] = "text";
-  InputTypes2["TEXT_GROUP"] = "text_group";
-  InputTypes2["NUMBER"] = "number";
-  InputTypes2["SWITCH"] = "switch";
-  InputTypes2["CHECKBOX"] = "checkbox";
-  InputTypes2["SELECT"] = "select";
-  InputTypes2["SIMPLE_CHECK_LIST"] = "siple_checklist";
-  InputTypes2["CHECK_LIST"] = "checklist";
-  InputTypes2["GROUPED_SWITCH_LIST"] = "grouped_switchlist";
-  InputTypes2["ACCORDION_GROUPED_SWITCH_LIST"] = "accordion_grouped_switchlist";
-  InputTypes2["DATE"] = "date";
-  InputTypes2["TEXTAREA"] = "textarea";
-  InputTypes2["FILE"] = "file";
-  InputTypes2["OTP"] = "otp";
-  InputTypes2["FORM"] = "form";
-  InputTypes2["COLOR"] = "color";
-  InputTypes2["RADIO_GROUP"] = "radio_group";
-  InputTypes2["TAGS"] = "tags";
-  InputTypes2["DATE_TIME"] = "date_time";
-  InputTypes2["TIME"] = "time";
-  InputTypes2["FILE_MULTI_UPLOAD"] = "file_multi_upload";
-  InputTypes2["SLIDER"] = "slider";
-  InputTypes2["BUTTON_GROUP"] = "button_group";
-  InputTypes2["CURRENCY"] = "currency";
-  InputTypes2["KEY_VALUE"] = "key_value";
-  InputTypes2["REPEATER"] = "repeater";
-  InputTypes2["MULTI_SELECT"] = "multi_select";
-  InputTypes2["COMBOBOX"] = "COMBO_BOX";
-  InputTypes2["SORTABLE_LIST"] = "sortable_list";
-  InputTypes2["REPEATER_TABS"] = "repeater_tabs";
-  InputTypes2["STRING_LIST"] = "string_list";
-  InputTypes2["RATING"] = "rating";
-  InputTypes2["PHONE"] = "phone";
-  InputTypes2["URL"] = "url";
-  InputTypes2["PASSWORD"] = "password";
-  InputTypes2["AUTOCOMPLETE"] = "autocomplete";
-  InputTypes2["EMAIL"] = "email";
-  InputTypes2["SEARCH"] = "search";
-  InputTypes2["LOCATION_PICKER"] = "location_picker";
-  InputTypes2["DATE_RANGE"] = "date_range";
-  InputTypes2["COUNTRY_SELECT"] = "country_select";
-  InputTypes2["RANGE"] = "range";
-  InputTypes2["FILE_UPLOAD"] = "file_upload";
-  return InputTypes2;
+var InputTypes = /* @__PURE__ */ ((InputTypes3) => {
+  InputTypes3["HIDDEN"] = "hidden";
+  InputTypes3["TEXT"] = "text";
+  InputTypes3["TEXT_GROUP"] = "text_group";
+  InputTypes3["NUMBER"] = "number";
+  InputTypes3["SWITCH"] = "switch";
+  InputTypes3["CHECKBOX"] = "checkbox";
+  InputTypes3["SELECT"] = "select";
+  InputTypes3["SIMPLE_CHECK_LIST"] = "siple_checklist";
+  InputTypes3["CHECK_LIST"] = "checklist";
+  InputTypes3["GROUPED_SWITCH_LIST"] = "grouped_switchlist";
+  InputTypes3["ACCORDION_GROUPED_SWITCH_LIST"] = "accordion_grouped_switchlist";
+  InputTypes3["DATE"] = "date";
+  InputTypes3["TEXTAREA"] = "textarea";
+  InputTypes3["FILE"] = "file";
+  InputTypes3["OTP"] = "otp";
+  InputTypes3["FORM"] = "form";
+  InputTypes3["COLOR"] = "color";
+  InputTypes3["RADIO_GROUP"] = "radio_group";
+  InputTypes3["TAGS"] = "tags";
+  InputTypes3["DATE_TIME"] = "date_time";
+  InputTypes3["TIME"] = "time";
+  InputTypes3["FILE_MULTI_UPLOAD"] = "file_multi_upload";
+  InputTypes3["SLIDER"] = "slider";
+  InputTypes3["BUTTON_GROUP"] = "button_group";
+  InputTypes3["CURRENCY"] = "currency";
+  InputTypes3["KEY_VALUE"] = "key_value";
+  InputTypes3["REPEATER"] = "repeater";
+  InputTypes3["MULTI_SELECT"] = "multi_select";
+  InputTypes3["COMBOBOX"] = "COMBO_BOX";
+  InputTypes3["SORTABLE_LIST"] = "sortable_list";
+  InputTypes3["REPEATER_TABS"] = "repeater_tabs";
+  InputTypes3["STRING_LIST"] = "string_list";
+  InputTypes3["RATING"] = "rating";
+  InputTypes3["PHONE"] = "phone";
+  InputTypes3["URL"] = "url";
+  InputTypes3["PASSWORD"] = "password";
+  InputTypes3["AUTOCOMPLETE"] = "autocomplete";
+  InputTypes3["EMAIL"] = "email";
+  InputTypes3["SEARCH"] = "search";
+  InputTypes3["LOCATION_PICKER"] = "location_picker";
+  InputTypes3["DATE_RANGE"] = "date_range";
+  InputTypes3["COUNTRY_SELECT"] = "country_select";
+  InputTypes3["RANGE"] = "range";
+  InputTypes3["FILE_UPLOAD"] = "file_upload";
+  return InputTypes3;
 })(InputTypes || {});
 var inputFieldComp = [
   "string_list" /* STRING_LIST */,
@@ -10579,7 +10578,12 @@ var inputFieldComp = [
   // ✨ New input types (v1.36.0)
   "email" /* EMAIL */,
   "search" /* SEARCH */,
-  "location_picker" /* LOCATION_PICKER */
+  "location_picker" /* LOCATION_PICKER */,
+  "date_range" /* DATE_RANGE */,
+  "country_select" /* COUNTRY_SELECT */,
+  "range" /* RANGE */,
+  // ✨ New input types (v1.37.0)
+  "file_upload" /* FILE_UPLOAD */
 ];
 function Accordion({
   ...props
@@ -13634,7 +13638,7 @@ var FieldFileMultiUpload = ({ input, form, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
-var FakeInput = ({ input, field, form, isValid, isSubmitting }) => {
+var FakeInput = ({ input, field, form, isValid, isSubmitting, isPasswordField, showPassword = false, setShowPassword }) => {
   const ref = React3.useRef(null);
   const {
     setCurrentInputField,
@@ -13644,8 +13648,6 @@ var FakeInput = ({ input, field, form, isValid, isSubmitting }) => {
     currentInputField
   } = useKeyboardStore();
   const [isFocused, setIsFocused] = React3.useState(false);
-  const [showPassword, setShowPassword] = React3.useState(false);
-  const isPasswordField = input.keyboardType === "password" /* PASSWORD */ || input.inputType == "password" /* PASSWORD */;
   input.zodType ? true : false;
   const value = input?.value ?? field?.value ?? "";
   const handleFocus = () => {
@@ -13708,7 +13710,7 @@ var FakeInput = ({ input, field, form, isValid, isSubmitting }) => {
             {
               variant: "ghost",
               type: "button",
-              onClick: () => setShowPassword(!showPassword),
+              onClick: () => setShowPassword ? setShowPassword(!showPassword) : {},
               children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
             }
           ),
@@ -13766,6 +13768,10 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
+var applyInputFilter = (value, filter) => {
+  if (!filter) return value;
+  return value.split("").filter(filter).join("");
+};
 var CustomInputGroup = ({
   value,
   input,
@@ -13790,25 +13796,6 @@ var CustomInputGroup = ({
   const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField || withKeyboard;
   const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
   const setCurrentInputField = useKeyboardStore((state) => state.setCurrentInputField);
-  const applyMask = (value2, mask) => {
-    if (!mask) return value2;
-    if (typeof mask === "string") {
-      let result = "";
-      let valueIndex = 0;
-      for (let i = 0; i < mask.length && valueIndex < value2.length; i++) {
-        if (mask[i] === "#") {
-          result += value2[valueIndex++];
-        } else {
-          result += mask[i];
-        }
-      }
-      return result;
-    } else if (mask instanceof RegExp) {
-      const matches = value2.match(mask);
-      return matches ? matches.join("") : value2;
-    }
-    return value2;
-  };
   const formatNumber = (value2, config) => {
     if (!config || value2 === "") return value2;
     let numValue = parseFloat(value2);
@@ -13847,87 +13834,84 @@ var CustomInputGroup = ({
         return value2;
     }
   };
-  if (input.isFakeInput) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      FakeInput,
-      {
-        input,
-        field,
-        form
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: input.classNameGroupInput ?? "h-10", children: [
-    (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
-      textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textLeft }),
-      iconsLeft.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index))
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputGroupInput,
-      {
-        className: input.classNameInput ?? "h-full text-xl font-semibold",
-        placeholder: input.placeHolder,
-        disabled: input.disabled || isSubmitting,
-        onBlur: field?.onBlur,
-        onFocus: () => setCurrentInputField({ input, field }),
-        name: field?.name,
-        ref: field?.ref,
-        type: isPasswordField && !showPassword ? "password" : isNumberField ? "number" : "text",
-        value: field?.value ?? value ?? "",
-        onChange: (e) => {
-          if (onChange) {
-            onChange(e);
-          }
-          let value2 = e.target.value;
-          console.log("Valor raw del input:", value2);
-          if (isNumberField) {
-            const numConfig = input.inputNumberConfig;
-            const cleanValue = value2.replace(/[^\d.-]/g, "");
-            const numValue = cleanValue === "" ? "" : Number(cleanValue);
-            if (numConfig?.formatOnInput) {
-              value2 = formatNumber(cleanValue, numConfig);
+  let fieldType = isPasswordField && !showPassword ? "password" : isNumberField ? "number" : "text";
+  if (input.isFakeInput) fieldType = "hidden";
+  const inputGroupClass = input.isFakeInput ? fieldType : "";
+  React3.useEffect(() => {
+    if (!input.isFakeInput) return;
+    handleOnChage(field?.value, input, field);
+  }, [field?.value]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    input.isFakeInput && /* @__PURE__ */ jsxRuntime.jsx(FakeInput, { input, field, form, setShowPassword, isPasswordField, showPassword }),
+    /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: cn(input.classNameGroupInput ?? "h-10", inputGroupClass), children: [
+      (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
+        textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textLeft }),
+        iconsLeft.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputGroupInput,
+        {
+          className: input.classNameInput ?? "h-full text-xl font-semibold",
+          placeholder: input.placeHolder,
+          disabled: input.disabled || isSubmitting,
+          onBlur: field?.onBlur,
+          onFocus: () => setCurrentInputField({ input, field }),
+          name: field?.name,
+          ref: field?.ref,
+          type: fieldType,
+          value: field?.value ?? value ?? "",
+          onChange: (e) => {
+            let value2 = e.target.value;
+            console.log("\u{1F680} ~ CustomInputGroup ~ value:", value2);
+            console.log("Valor raw del input:", value2);
+            if (isNumberField) {
+              const numConfig = input.inputNumberConfig;
+              const cleanValue = value2.replace(/[^\d.-]/g, "");
+              const numValue = cleanValue === "" ? "" : Number(cleanValue);
+              if (numConfig?.formatOnInput) {
+                value2 = formatNumber(cleanValue, numConfig);
+              } else {
+                value2 = numValue;
+              }
             } else {
-              value2 = numValue;
+              let processedValue = value2;
+              value2 = applyTransform(processedValue, input.transform);
             }
-          } else {
-            let processedValue = e.target.value;
-            processedValue = applyMask(processedValue, input.mask);
-            value2 = applyTransform(processedValue, input.transform);
+            field?.onChange(value2);
+            isValidField(input, form);
+            handleOnChage(value2, input, field);
           }
-          field?.onChange(value2);
-          isValidField(input, form);
-          handleOnChage(value2, input, field);
-        }
-      }
-    ),
-    showInputGroupAddons && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
-      infoTooltip && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 20 }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: infoTooltip }) })
-      ] }),
-      textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
-      iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index)),
-      isPasswordField && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowPassword(!showPassword),
-          className: "p-1",
-          children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
         }
       ),
-      withKeyboard && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "text-2xl",
-          onClick: () => {
-            setIsOpen();
-            setCurrentInputField({ input, field });
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, {})
-        }
-      )
+      showInputGroupAddons && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
+        infoTooltip && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 20 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: infoTooltip }) })
+        ] }),
+        textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
+        iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index)),
+        isPasswordField && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowPassword(!showPassword),
+            className: "p-1",
+            children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
+          }
+        ),
+        withKeyboard && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-2xl",
+            onClick: () => {
+              setIsOpen();
+              setCurrentInputField({ input, field });
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, {})
+          }
+        )
+      ] })
     ] })
   ] });
 };
@@ -15088,12 +15072,12 @@ var FieldText = ({ input, form, isSubmitting }) => {
     return value;
   };
   const applyTransform = (value) => {
-    input.inputGroupConfig?.transform || input.transform;
+    const transform = input.inputGroupConfig?.transform || input.transform;
     if (!input.inputGroupConfig?.transform) return value;
     if (typeof input.transform === "function") {
       return input.transform(value);
     }
-    switch (input.transform) {
+    switch (transform) {
       case "uppercase":
         return value.toUpperCase();
       case "lowercase":
@@ -15753,6 +15737,63 @@ function EmailInputComponent({
     ] }) })
   ] }) });
 }
+var SearchInputClass = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldSearch, { form, input, isSubmitting });
+  }
+};
+var FieldSearch = ({ input, form, isSubmitting }) => {
+  const debounceRef = React3.useRef();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        const handleChange = (e) => {
+          const value = e.target.value;
+          field.onChange(value);
+          if (input.debounce) {
+            clearTimeout(debounceRef.current);
+            debounceRef.current = setTimeout(() => {
+              handleOnChage(value, input, field);
+            }, input.debounce);
+          } else {
+            handleOnChage(value, input, field);
+          }
+        };
+        const handleClear = () => {
+          field.onChange("");
+          handleOnChage("", input, field);
+        };
+        const hasValue = Boolean(field.value);
+        const isDisabled = input.disabled || isSubmitting;
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
+          input.label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InputGroupInput,
+              {
+                type: "search",
+                placeholder: input.placeHolder,
+                disabled: isDisabled,
+                value: field.value ?? "",
+                onChange: handleChange,
+                onBlur: field.onBlur,
+                name: field.name,
+                ref: field.ref
+              }
+            ),
+            hasValue && !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleClear, "aria-label": "Clear search", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+};
 var MapComponent2 = React3.lazy(() => Promise.resolve().then(() => (init_map_component(), map_component_exports)));
 var LocationPickerInput = class extends BaseInput {
   render() {
@@ -16637,8 +16678,7 @@ var inputMap = {
   ["autocomplete" /* AUTOCOMPLETE */]: AutocompleteInput,
   // ✨ New input types (v1.36.0)
   ["email" /* EMAIL */]: EmailInput,
-  ["search" /* SEARCH */]: TextInput,
-  // SearchInput component is currently a function component
+  ["search" /* SEARCH */]: SearchInputClass,
   ["location_picker" /* LOCATION_PICKER */]: LocationPickerInput,
   ["date_range" /* DATE_RANGE */]: DateRangeInput,
   ["country_select" /* COUNTRY_SELECT */]: CountrySelectInput,
@@ -17789,6 +17829,7 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.WizardForm = WizardForm;
 exports.applyCase = applyCase;
+exports.applyInputFilter = applyInputFilter;
 exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
@@ -17803,6 +17844,7 @@ exports.getDynamicSchema = getDynamicSchema;
 exports.getFieldLabel = getFieldLabel;
 exports.handleOnChage = handleOnChage;
 exports.inputFieldComp = inputFieldComp;
+exports.inputMap = inputMap;
 exports.isValidField = isValidField;
 exports.letter = letter;
 exports.mockFields = mockFields;