shadcn-zod-formkit 3.2.0 → 3.3.0

package/README.md

@@ -112,6 +112,8 @@ export default function BasicFormExample() {
 
 ## 📚 Available Input Types
 
+> New in v1.36.0: `Date Range`, `Country Select`, `Range`, plus existing `Location Picker` and `Search` inputs.
+
 | Input Type                          | Constant                                  | Description                           |
 |-------------------------------------|-------------------------------------------|---------------------------------------|
 | **Text Input**                      | `InputTypes.TEXT_GROUP`                   | Text input with icon support          |
@@ -126,6 +128,9 @@ export default function BasicFormExample() {
 | **Date Time Picker**                | `InputTypes.DATE_TIME`                    | Date and time selection               |
 | **Time Picker**                     | `InputTypes.TIME`                         | Time selection                        |
 | **Location Picker** ✨              | `InputTypes.LOCATION_PICKER`              | Interactive map with GPS & geocoding  |
+| **Date Range Picker** ✨            | `InputTypes.DATE_RANGE`                   | Range selection with dual calendar    |
+| **Country Select** ✨               | `InputTypes.COUNTRY_SELECT`               | Searchable country dropdown with flags|
+| **Range Input** ✨                  | `InputTypes.RANGE`                        | Min/max slider range input            |
 | **Select**                          | `InputTypes.SELECT`                       | Dropdown select                       |
 | **Multi Select**                    | `InputTypes.MULTI_SELECT`                 | Multiple selection dropdown           |
 | **Combobox**                        | `InputTypes.COMBOBOX`                     | Searchable select                     |

package/dist/index.cjs

@@ -10002,6 +10002,10 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   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;
 })(InputTypes || {});
 var inputFieldComp = [
@@ -15100,6 +15104,606 @@ function LocationPickerComponent({
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: "\u{1F4A1} Haz click en el mapa para marcar una ubicaci\xF3n o busca una direcci\xF3n." })
   ] });
 }
+var DateRangeInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldDateRangeInput, { input, form, isSubmitting });
+  }
+};
+var FieldDateRangeInput = ({ form, input, isSubmitting }) => {
+  const [isValid, setIsValid] = React3.useState(isValidField(input, form));
+  const infoTooltip = input?.infoTooltip;
+  const groupConfig = input.inputGroupConfig;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
+  const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
+  const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
+  const iconsRight = groupConfig?.iconsRight ?? [];
+  groupConfig?.iconsLeft ?? [];
+  groupConfig?.textLeft;
+  const textRight = groupConfig?.textRight;
+  const formField = /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
+        const [dateRange, setDateRange] = React3__namespace.useState(
+          field.value ? {
+            from: field.value.from ? new Date(field.value.from) : void 0,
+            to: field.value.to ? new Date(field.value.to) : void 0
+          } : void 0
+        );
+        React3__namespace.useEffect(() => {
+          if (field.value && !dateRange) {
+            setDateRange({
+              from: field.value.from ? new Date(field.value.from) : void 0,
+              to: field.value.to ? new Date(field.value.to) : void 0
+            });
+            setIsValid(isValidField(input, form));
+          }
+        }, [field.value]);
+        const formatDateRange = (range) => {
+          if (!range || !range.from) return input.placeHolder ?? "Seleccionar rango de fechas";
+          if (range.to) {
+            return `${dateFns.format(range.from, "LLL dd, y")} - ${dateFns.format(range.to, "LLL dd, y")}`;
+          }
+          return dateFns.format(range.from, "LLL dd, y");
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: "flex flex-row gap-1", 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 }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  type: "button",
+                  className: cn(
+                    "w-full justify-start text-left py-0.5 ",
+                    !dateRange && "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-1 justify-start text-left ", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
+                      formatDateRange(dateRange)
+                    ] }),
+                    (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
+                      iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
+                      autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid ? iconValidState : iconInvalidState })
+                    ] })
+                  ]
+                }
+              )
+            ] }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
+};
+var countries = [
+  { name: "Afghanistan", code: "AF", flag: "\u{1F1E6}\u{1F1EB}" },
+  { name: "Albania", code: "AL", flag: "\u{1F1E6}\u{1F1F1}" },
+  { name: "Algeria", code: "DZ", flag: "\u{1F1E9}\u{1F1FF}" },
+  { name: "Argentina", code: "AR", flag: "\u{1F1E6}\u{1F1F7}" },
+  { name: "Australia", code: "AU", flag: "\u{1F1E6}\u{1F1FA}" },
+  { name: "Austria", code: "AT", flag: "\u{1F1E6}\u{1F1F9}" },
+  { name: "Bangladesh", code: "BD", flag: "\u{1F1E7}\u{1F1E9}" },
+  { name: "Belgium", code: "BE", flag: "\u{1F1E7}\u{1F1EA}" },
+  { name: "Brazil", code: "BR", flag: "\u{1F1E7}\u{1F1F7}" },
+  { name: "Canada", code: "CA", flag: "\u{1F1E8}\u{1F1E6}" },
+  { name: "Chile", code: "CL", flag: "\u{1F1E8}\u{1F1F1}" },
+  { name: "China", code: "CN", flag: "\u{1F1E8}\u{1F1F3}" },
+  { name: "Colombia", code: "CO", flag: "\u{1F1E8}\u{1F1F4}" },
+  { name: "Denmark", code: "DK", flag: "\u{1F1E9}\u{1F1F0}" },
+  { name: "Egypt", code: "EG", flag: "\u{1F1EA}\u{1F1EC}" },
+  { name: "Finland", code: "FI", flag: "\u{1F1EB}\u{1F1EE}" },
+  { name: "France", code: "FR", flag: "\u{1F1EB}\u{1F1F7}" },
+  { name: "Germany", code: "DE", flag: "\u{1F1E9}\u{1F1EA}" },
+  { name: "Greece", code: "GR", flag: "\u{1F1EC}\u{1F1F7}" },
+  { name: "India", code: "IN", flag: "\u{1F1EE}\u{1F1F3}" },
+  { name: "Indonesia", code: "ID", flag: "\u{1F1EE}\u{1F1E9}" },
+  { name: "Ireland", code: "IE", flag: "\u{1F1EE}\u{1F1EA}" },
+  { name: "Italy", code: "IT", flag: "\u{1F1EE}\u{1F1F9}" },
+  { name: "Japan", code: "JP", flag: "\u{1F1EF}\u{1F1F5}" },
+  { name: "Jordan", code: "JO", flag: "\u{1F1EF}\u{1F1F4}" },
+  { name: "Kenya", code: "KE", flag: "\u{1F1F0}\u{1F1EA}" },
+  { name: "South Korea", code: "KR", flag: "\u{1F1F0}\u{1F1F7}" },
+  { name: "Lebanon", code: "LB", flag: "\u{1F1F1}\u{1F1E7}" },
+  { name: "Malaysia", code: "MY", flag: "\u{1F1F2}\u{1F1FE}" },
+  { name: "Mexico", code: "MX", flag: "\u{1F1F2}\u{1F1FD}" },
+  { name: "Morocco", code: "MA", flag: "\u{1F1F2}\u{1F1E6}" },
+  { name: "Netherlands", code: "NL", flag: "\u{1F1F3}\u{1F1F1}" },
+  { name: "New Zealand", code: "NZ", flag: "\u{1F1F3}\u{1F1FF}" },
+  { name: "Norway", code: "NO", flag: "\u{1F1F3}\u{1F1F4}" },
+  { name: "Pakistan", code: "PK", flag: "\u{1F1F5}\u{1F1F0}" },
+  { name: "Peru", code: "PE", flag: "\u{1F1F5}\u{1F1EA}" },
+  { name: "Philippines", code: "PH", flag: "\u{1F1F5}\u{1F1ED}" },
+  { name: "Poland", code: "PL", flag: "\u{1F1F5}\u{1F1F1}" },
+  { name: "Portugal", code: "PT", flag: "\u{1F1F5}\u{1F1F9}" },
+  { name: "Romania", code: "RO", flag: "\u{1F1F7}\u{1F1F4}" },
+  { name: "Russia", code: "RU", flag: "\u{1F1F7}\u{1F1FA}" },
+  { name: "Saudi Arabia", code: "SA", flag: "\u{1F1F8}\u{1F1E6}" },
+  { name: "Singapore", code: "SG", flag: "\u{1F1F8}\u{1F1EC}" },
+  { name: "South Africa", code: "ZA", flag: "\u{1F1FF}\u{1F1E6}" },
+  { name: "Spain", code: "ES", flag: "\u{1F1EA}\u{1F1F8}" },
+  { name: "Sweden", code: "SE", flag: "\u{1F1F8}\u{1F1EA}" },
+  { name: "Switzerland", code: "CH", flag: "\u{1F1E8}\u{1F1ED}" },
+  { name: "Thailand", code: "TH", flag: "\u{1F1F9}\u{1F1ED}" },
+  { name: "Turkey", code: "TR", flag: "\u{1F1F9}\u{1F1F7}" },
+  { name: "Ukraine", code: "UA", flag: "\u{1F1FA}\u{1F1E6}" },
+  { name: "United Arab Emirates", code: "AE", flag: "\u{1F1E6}\u{1F1EA}" },
+  { name: "United Kingdom", code: "GB", flag: "\u{1F1EC}\u{1F1E7}" },
+  { name: "United States", code: "US", flag: "\u{1F1FA}\u{1F1F8}" },
+  { name: "Vietnam", code: "VN", flag: "\u{1F1FB}\u{1F1F3}" }
+];
+var CountrySelectInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldCountrySelectInput, { input, form, isSubmitting });
+  }
+};
+var FieldCountrySelectInput = ({ form, input, isSubmitting }) => {
+  const [isValid, setIsValid] = React3.useState(isValidField(input, form));
+  const infoTooltip = input?.infoTooltip;
+  const groupConfig = input.inputGroupConfig;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
+  const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { style: { color: "#ff8080" } });
+  const iconsRight = groupConfig?.iconsRight ?? [];
+  groupConfig?.iconsLeft ?? [];
+  groupConfig?.textLeft;
+  const textRight = groupConfig?.textRight;
+  const formField = /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
+        const [open, setOpen] = React3__namespace.useState(false);
+        const [value, setValue] = React3__namespace.useState(field.value || "");
+        const selectedCountry = countries.find((country) => country.code === value);
+        const handleSelect = (countryCode) => {
+          setValue(countryCode);
+          setOpen(false);
+          handleOnChage(countryCode, input, field);
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: "flex flex-row gap-1", children: [
+              infoTooltip && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { size: 20 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: infoTooltip }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  role: "combobox",
+                  "aria-expanded": open,
+                  className: "w-full justify-between",
+                  children: [
+                    selectedCountry ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedCountry.flag }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedCountry.name }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+                        "(",
+                        selectedCountry.code,
+                        ")"
+                      ] })
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: input.placeHolder ?? "Select country..." }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+                  ]
+                }
+              ),
+              (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
+                iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
+                autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isValid ? iconValidState : iconInvalidState })
+              ] })
+            ] }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[400px] p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: "Search countries..." }),
+              /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No country found." }),
+                /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: countries.map((country) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  CommandItem,
+                  {
+                    value: `${country.name} ${country.code}`,
+                    onSelect: () => handleSelect(country.code),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.Check,
+                        {
+                          className: cn(
+                            "mr-2 h-4 w-4",
+                            value === country.code ? "opacity-100" : "opacity-0"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: country.flag }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: country.name }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto text-muted-foreground", children: [
+                        "(",
+                        country.code,
+                        ")"
+                      ] })
+                    ]
+                  },
+                  country.code
+                )) })
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
+};
+var RangeInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldRange, { input, form, isSubmitting });
+  }
+};
+var FieldRange = ({ input, form, isSubmitting }) => {
+  const [isValid, setIsValid] = React3.useState(isValidField(input, form));
+  const groupConfig = input.inputGroupConfig;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
+  const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
+  const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
+  const iconsRight = groupConfig?.iconsRight ?? [];
+  const textRight = groupConfig?.textRight;
+  const minValue = input.min ?? 0;
+  const maxValue = input.max ?? 100;
+  const step = input.step ?? 1;
+  const initialValue = form.getValues(input.name) ?? input.value ?? [minValue, maxValue];
+  const [value, setValue] = React3.useState(Array.isArray(initialValue) ? initialValue : [minValue, maxValue]);
+  const handleChange = (val) => {
+    setValue(val);
+    ({ min: val[0], max: val[1] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field, fieldState }) => {
+        setIsValid(isValidField(input, form));
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Slider,
+              {
+                value,
+                onValueChange: handleChange,
+                max: maxValue,
+                min: minValue,
+                step,
+                className: "w-full"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: "flex flex-row gap-1 justify-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Min:" }),
+                /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { className: "min-w-[60px] text-center", children: value[0] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Max:" }),
+                /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { className: "min-w-[60px] text-center", children: value[1] })
+              ] }),
+              (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
+                iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
+                autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid ? iconValidState : iconInvalidState })
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+};
+var FileUploadInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldFileUpload, { input, form, isSubmitting });
+  }
+};
+var FieldFileUpload = ({ input, form, isSubmitting }) => {
+  const inputRef = React3.useRef(null);
+  const [file, setFile] = React3.useState(form.getValues(input.name) || null);
+  const [dragOver, setDragOver] = React3.useState(false);
+  const [uploading, setUploading] = React3.useState(false);
+  const [uploadProgress, setUploadProgress] = React3.useState(0);
+  const [previewUrl, setPreviewUrl] = React3.useState(null);
+  const config = input.fileConfig;
+  const {
+    dragAndDrop = true,
+    progressBar = true,
+    uploadUrl,
+    onUploadProgress,
+    onUploadComplete,
+    previewFormats = { image: true, video: false, audio: false, pdf: false },
+    maxSize = 10 * 1024 * 1024,
+    // 10MB default
+    acceptedFormats = ["*"]
+  } = config || {};
+  const autoValidate = input.inputGroupConfig?.autoValidIcons;
+  const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
+  const generatePreview = (fileData) => {
+    const type = fileData.type;
+    if (previewFormats.image && type.startsWith("image/")) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setPreviewUrl(e.target?.result);
+      };
+      if (fileData.file) reader.readAsDataURL(fileData.file);
+    } else if (previewFormats.video && type.startsWith("video/")) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setPreviewUrl(e.target?.result);
+      };
+      if (fileData.file) reader.readAsDataURL(fileData.file);
+    } else if (previewFormats.audio && type.startsWith("audio/")) {
+      setPreviewUrl("audio");
+    } else if (previewFormats.pdf && type === "application/pdf") {
+      setPreviewUrl("pdf");
+    }
+  };
+  const handleFileSelect = async (selectedFile) => {
+    if (selectedFile.size > maxSize) {
+      form.setError(input.name, {
+        type: "manual",
+        message: `File size exceeds ${(maxSize / 1024 / 1024).toFixed(0)}MB limit`
+      });
+      return;
+    }
+    const fileData = {
+      name: selectedFile.name,
+      size: selectedFile.size,
+      type: selectedFile.type,
+      lastModified: selectedFile.lastModified,
+      file: selectedFile,
+      uploadProgress: 0
+    };
+    setFile(fileData);
+    form.setValue(input.name, fileData);
+    generatePreview(fileData);
+    if (uploadUrl) {
+      await handleUpload(fileData);
+    }
+  };
+  const handleUpload = async (fileData) => {
+    if (!uploadUrl || !fileData.file) return;
+    setUploading(true);
+    setUploadProgress(0);
+    try {
+      const formData = new FormData();
+      formData.append("file", fileData.file);
+      const xhr = new XMLHttpRequest();
+      xhr.upload.addEventListener("progress", (e) => {
+        if (e.lengthComputable) {
+          const percentComplete = e.loaded / e.total * 100;
+          setUploadProgress(percentComplete);
+          onUploadProgress?.(percentComplete);
+        }
+      });
+      xhr.addEventListener("load", () => {
+        if (xhr.status === 200) {
+          try {
+            const response = JSON.parse(xhr.responseText);
+            fileData.uploadedUrl = response.url || response.data?.url;
+            fileData.uploadProgress = 100;
+            setUploadProgress(100);
+            setFile({ ...fileData });
+            form.setValue(input.name, fileData);
+            onUploadComplete?.(response);
+          } catch (e) {
+            console.error("Failed to parse upload response", e);
+          }
+        }
+      });
+      xhr.addEventListener("error", () => {
+        form.setError(input.name, {
+          type: "manual",
+          message: "Upload failed. Please try again."
+        });
+        setUploading(false);
+      });
+      xhr.open("POST", uploadUrl);
+      xhr.send(formData);
+    } catch (error) {
+      form.setError(input.name, {
+        type: "manual",
+        message: "Upload error. Please try again."
+      });
+      setUploading(false);
+    }
+  };
+  const handleInputChange = (event) => {
+    const selectedFile = event.target.files?.[0];
+    if (selectedFile) {
+      handleFileSelect(selectedFile);
+    }
+  };
+  const handleDrop = (event) => {
+    if (!dragAndDrop) return;
+    event.preventDefault();
+    setDragOver(false);
+    const droppedFile = event.dataTransfer.files?.[0];
+    if (droppedFile) {
+      handleFileSelect(droppedFile);
+    }
+  };
+  const handleDragOver = (event) => {
+    if (!dragAndDrop) return;
+    event.preventDefault();
+    setDragOver(true);
+  };
+  const handleDragLeave = () => {
+    setDragOver(false);
+  };
+  const handleRemove = () => {
+    setFile(null);
+    setPreviewUrl(null);
+    setUploadProgress(0);
+    form.setValue(input.name, null);
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+  };
+  const getFileIcon = () => {
+    if (!file) return null;
+    const type = file.type;
+    if (type.startsWith("image/")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "w-8 h-8" });
+    if (type.startsWith("video/")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "w-8 h-8" });
+    if (type.startsWith("audio/")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Music, { className: "w-8 h-8" });
+    if (type === "application/pdf") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-8 h-8" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { className: "w-8 h-8" });
+  };
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FormLabel, { htmlFor: input.name, children: [
+          input.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 mr-1", children: "*" }),
+          input.label
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          !file || !file.uploadedUrl ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              onDrop: handleDrop,
+              onDragOver: handleDragOver,
+              onDragLeave: handleDragLeave,
+              className: cn(
+                "relative border-2 border-dashed rounded-lg p-8 transition-colors",
+                dragAndDrop ? "cursor-pointer" : "",
+                dragOver ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-gray-400",
+                uploading ? "opacity-50 pointer-events-none" : ""
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "file",
+                    onChange: handleInputChange,
+                    className: "hidden",
+                    id: input.name,
+                    disabled: uploading || isSubmitting,
+                    accept: acceptedFormats.join(",")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center gap-3", children: uploading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-8 h-8 animate-spin text-blue-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: "Uploading..." })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-8 h-8 text-gray-400" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: dragAndDrop ? "Drag and drop your file here, or click to select" : "Click to select a file" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mt-1", children: [
+                      "Max size: ",
+                      formatFileSize(maxSize)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => inputRef.current?.click(),
+                      className: "mt-2 px-4 py-2 bg-blue-500 text-white text-sm rounded-md hover:bg-blue-600 transition-colors",
+                      children: "Select File"
+                    }
+                  )
+                ] }) })
+              ]
+            }
+          ) : null,
+          file && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border rounded-lg p-4 bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: previewUrl && previewUrl !== "audio" && previewUrl !== "pdf" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: previewUrl,
+                alt: "preview",
+                className: "w-16 h-16 object-cover rounded-md"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 bg-gray-200 rounded-md flex items-center justify-center text-gray-400", children: getFileIcon() }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: file.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: formatFileSize(file.size) }),
+              progressBar && file.uploadProgress !== void 0 && file.uploadProgress < 100 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "bg-blue-500 h-2 rounded-full transition-all duration-300",
+                    style: { width: `${file.uploadProgress}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mt-1", children: [
+                  Math.round(file.uploadProgress),
+                  "% uploaded"
+                ] })
+              ] }),
+              file.uploadedUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "w-4 h-4 text-green-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-green-600", children: "Upload complete" })
+              ] })
+            ] }),
+            !uploading && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleRemove,
+                className: "shrink-0 p-1 text-gray-400 hover:text-gray-600 rounded-md hover:bg-gray-200 transition-colors",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" })
+              }
+            )
+          ] }) }),
+          autoValidate && form.formState.errors[input.name] && iconInvalidState,
+          autoValidate && !form.formState.errors[input.name] && file && iconValidState
+        ] }) }),
+        input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+      ] })
+    }
+  );
+};
 var inputMap = {
   ["text_group" /* TEXT_GROUP */]: TextInputGroup,
   ["text" /* TEXT */]: TextInput,
@@ -15138,8 +15742,13 @@ var inputMap = {
   // ✨ New input types (v1.36.0)
   ["email" /* EMAIL */]: EmailInput,
   ["search" /* SEARCH */]: TextInput,
-  // TODO: Implement SearchInput
+  // SearchInput component is currently a function component
   ["location_picker" /* LOCATION_PICKER */]: LocationPickerInput,
+  ["date_range" /* DATE_RANGE */]: DateRangeInput,
+  ["country_select" /* COUNTRY_SELECT */]: CountrySelectInput,
+  ["range" /* RANGE */]: RangeInput,
+  // ✨ New input types (v1.37.0)
+  ["file_upload" /* FILE_UPLOAD */]: FileUploadInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!