shadcn-zod-formkit 1.0.5 → 1.1.0

package/README.md

@@ -44,6 +44,8 @@ import {
   TextInputType
 } from "shadcn-zod-formkit";
 
+import { Mail, User } from 'lucide-react';
+
 export default function Home() {
   // Record From DB example (User),
   // record is used for define default values
@@ -69,14 +71,26 @@ export default function Home() {
 const mockFields: Array<FieldProps |FieldProps[]> = [
   {
     name: "username",
-    label: "Nombre de usuario",
-    inputType: InputTypes.TEXT,
-    ZodTypeAny: z .string().min(3).max(20),
+    label: "Username",
+    inputType: InputTypes.TEXT_GROUP,
+    inputGroupConfig:{
+      autoValidIcons: true,
+      iconsLeft: [User]
+    },
+    zodType: z.string().min(3).max(20),
   },
   {
     name: "email",
-    label: "Correo electrónico",
-    inputType: InputTypes.TEXT,
+    label: "Email",
+    inputType: InputTypes.TEXT_GROUP,
+    inputGroupConfig:{
+      autoValidIcons: true,
+      iconsLeft: [Mail],
+    },
+    zodType: z
+      .string()
+      .email("Invalid Email")
+      .optional(),
   },
 ]
 ```
@@ -117,8 +131,8 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
   - Combine multiple FieldProps in arrays for grouped fields (like age + color).
 
 ## 🧠 Acknowledgements
-  React - A JavaScript library for building user interfaces.
-  Next.js - The React framework for production.
-  Tailwind CSS - A utility-first CSS framework for creating custom designs.
-  Zod - TypeScript-first schema declaration and validation.
+  - React - A JavaScript library for building user interfaces.
+  - Next.js - The React framework for production.
+  - Tailwind CSS - A utility-first CSS framework for creating custom designs.
+  - Zod - TypeScript-first schema declaration and validation.
 

package/dist/index.cjs

@@ -5,7 +5,7 @@ var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React8 = require('react');
+var React3 = require('react');
 var reactHookForm = require('react-hook-form');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var reactSlot = require('@radix-ui/react-slot');
@@ -50,7 +50,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
@@ -573,8 +573,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  const ref = React8__namespace.useRef(null);
-  React8__namespace.useEffect(() => {
+  const ref = React3__namespace.useRef(null);
+  React3__namespace.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -735,11 +735,11 @@ function PopoverAnchor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { "data-slot": "popover-anchor", ...props });
 }
-var ColorCnInput = React8__namespace.forwardRef(
+var ColorCnInput = React3__namespace.forwardRef(
   ({ value = "#000000", onChange, onBlur, disabled, className }, ref) => {
     const [color, setColor] = reactColorPalette.useColor(value);
-    const [open, setOpen] = React8__namespace.useState(false);
-    React8__namespace.useEffect(() => {
+    const [open, setOpen] = React3__namespace.useState(false);
+    React3__namespace.useEffect(() => {
       if (value !== color.hex) {
         setColor({ ...color, hex: value });
       }
@@ -953,7 +953,7 @@ classVarianceAuthority.cva(
   }
 );
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React8__namespace.createContext(
+var FormFieldContext = React3__namespace.createContext(
   {}
 );
 var FormField = ({
@@ -962,8 +962,8 @@ var FormField = ({
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React8__namespace.useContext(FormFieldContext);
-  const itemContext = React8__namespace.useContext(FormItemContext);
+  const fieldContext = React3__namespace.useContext(FormFieldContext);
+  const itemContext = React3__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -980,11 +980,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React8__namespace.createContext(
+var FormItemContext = React3__namespace.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React8__namespace.useId();
+  const id = React3__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1220,7 +1220,7 @@ function InputOTPSlot({
   className,
   ...props
 }) {
-  const inputOTPContext = React8__namespace.useContext(inputOtp.OTPInputContext);
+  const inputOTPContext = React3__namespace.useContext(inputOtp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -1625,9 +1625,9 @@ var GroupedSwitches = ({ options, onChange, input, isSubmitting }) => {
     { id: 4, name: "MOCK OPTION - DELETE ", checked: false }
   ];
   const initialSwitches = options ? options.length > 0 ? options : input.listConfig?.list ?? [] : mockInputOptions;
-  const [switches, setSwitches] = React8.useState(initialSwitches);
-  const [allChecked, setAllChecked] = React8.useState(initialSwitches.every((opt) => opt.checked));
-  const [bgColor, setBgColor] = React8.useState("bg-green-500/5 border-green-400/10");
+  const [switches, setSwitches] = React3.useState(initialSwitches);
+  const [allChecked, setAllChecked] = React3.useState(initialSwitches.every((opt) => opt.checked));
+  const [bgColor, setBgColor] = React3.useState("bg-green-500/5 border-green-400/10");
   const handleMainToggle = (checked) => {
     const updated = switches.map((opt) => ({ ...opt, checked }));
     setSwitches(updated);
@@ -1681,9 +1681,9 @@ var AccordionGroupedSwitchInput = class extends BaseInput {
   }
 };
 var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitting }) => {
-  const [groupsState, setGroupsState] = React8.useState([]);
-  const [selectedOptions, setSelectedOptions] = React8.useState([]);
-  React8.useEffect(() => {
+  const [groupsState, setGroupsState] = React3.useState([]);
+  const [selectedOptions, setSelectedOptions] = React3.useState([]);
+  React3.useEffect(() => {
     const selected = input.listConfig?.selectedList ?? [];
     const updatedGroups = groups.map((group) => ({
       ...group,
@@ -1905,7 +1905,7 @@ var ColorInput = class extends BaseInput {
   }
 };
 var FieldColor = ({ form, input, isSubmitting }) => {
-  const [ColorCmp, _setColorCmp] = React8.useState(ColorComp);
+  const [ColorCmp, _setColorCmp] = React3.useState(ColorComp);
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
@@ -1940,11 +1940,11 @@ var FieldColor = ({ form, input, isSubmitting }) => {
     }
   );
 };
-var ColorComp = React8__namespace.default.forwardRef(
+var ColorComp = React3__namespace.default.forwardRef(
   ({ value = "#000000", onChange, onBlur, disabled, className, hideInput = ["hsv"] }, ref) => {
     const [color, setColor] = reactColorPalette.useColor(value);
-    const [open, setOpen] = React8__namespace.default.useState(false);
-    React8__namespace.default.useEffect(() => {
+    const [open, setOpen] = React3__namespace.default.useState(false);
+    React3__namespace.default.useEffect(() => {
       if (value !== color.hex) {
         setColor({ ...color, hex: value });
       }
@@ -3542,10 +3542,10 @@ var DateInput = class extends BaseInput {
         control: form.control,
         name: input.name,
         render: ({ field }) => {
-          const [date, setDate] = React8__namespace.useState(
+          const [date, setDate] = React3__namespace.useState(
             field.value ? new Date(field.value) : void 0
           );
-          React8__namespace.useEffect(() => {
+          React3__namespace.useEffect(() => {
             if (field.value && !date) {
               setDate(new Date(field.value));
             }
@@ -3607,13 +3607,13 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
   const iconsLeft = groupConfig?.iconsLeft ?? [];
   const textLeft = groupConfig?.textLeft;
   const textRight = groupConfig?.textRight;
-  const [isValid2, setIsValid] = React8.useState(() => {
+  const [isValid2, setIsValid] = React3.useState(() => {
     const value = form.getValues(input.name);
     const fieldState = form.getFieldState(input.name);
     return !fieldState.error && value !== void 0 && value !== "";
   });
-  const [dateTime, setDateTime] = React8.useState(() => form.getValues(input.name) ?? "");
-  React8.useEffect(() => {
+  const [dateTime, setDateTime] = React3.useState(() => form.getValues(input.name) ?? "");
+  React3.useEffect(() => {
     const fieldValue = form.getValues(input.name) ?? "";
     if (fieldValue !== dateTime) setDateTime(fieldValue);
   }, [form.getValues(input.name)]);
@@ -3666,11 +3666,11 @@ var FileInput = class extends BaseInput {
   }
 };
 var FieldFile = ({ form, input, isSubmitting }) => {
-  const [preview, setPreview] = React8.useState(form.getValues(input.name) ?? null);
-  const [showPreview, setShowPreview] = React8.useState(input.fileConfig?.showPreview ?? false);
+  const [preview, setPreview] = React3.useState(form.getValues(input.name) ?? null);
+  const [showPreview, setShowPreview] = React3.useState(input.fileConfig?.showPreview ?? false);
   const accept = input.fileConfig?.accept || "*/*";
   const multiple = input.fileConfig?.multiple || false;
-  React8.useEffect(() => {
+  React3.useEffect(() => {
     setPreview(form.getValues(input.name) || null);
   }, [input]);
   const handleFileChange = (e) => {
@@ -3725,9 +3725,9 @@ var FileMultiUploadInput = class extends BaseInput {
   }
 };
 var FieldFileMultiUpload = ({ input, form, isSubmitting }) => {
-  const inputRef = React8.useRef(null);
-  const [files, setFiles] = React8.useState(form.getValues(input.name) || []);
-  const [dragOver, setDragOver] = React8.useState(false);
+  const inputRef = React3.useRef(null);
+  const [files, setFiles] = React3.useState(form.getValues(input.name) || []);
+  const [dragOver, setDragOver] = React3.useState(false);
   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" } });
@@ -3821,6 +3821,7 @@ var TextInputGroup = class extends BaseInput {
 };
 var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
+  const infoTooltip = input?.infoTooltip;
   const autoValidate = groupConfig?.autoValidIcons;
   const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
@@ -3829,7 +3830,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const iconsLeft = groupConfig?.iconsLeft ?? [];
   const textLeft = groupConfig?.textLeft;
   const textRight = groupConfig?.textRight;
-  const [isValid2, setIsValid] = React8.useState(() => {
+  const [isValid2, setIsValid] = React3.useState(() => {
     const value = form.getValues(input.name);
     const fieldState = form.getFieldState(input.name);
     return !fieldState.error && value !== void 0 && value !== "";
@@ -3858,7 +3859,11 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                 type: input.keyboardType
               }
             ),
-            (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
+            (iconsRight.length > 0 || textRight || autoValidate || infoTooltip) && /* @__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)),
               autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
@@ -4050,7 +4055,7 @@ var FieldSimpleCheckList = ({ input, value, onChange, isSubmitting }) => {
     { id: 4, name: "MOCK OPTION - DELETE", checked: false }
   ];
   const initialOptions = input.listConfig?.list ?? mockInputOptions;
-  const [options, setOptions] = React8.useState(
+  const [options, setOptions] = React3.useState(
     value.length > 0 ? value : initialOptions
   );
   const allChecked = options.every((opt) => opt.checked);
@@ -4115,7 +4120,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React8__namespace.useMemo(
+  const _values = React3__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -4171,7 +4176,7 @@ var SliderInput = class extends BaseInput {
 };
 var FieldSlider = ({ input, form, isSubmitting }) => {
   const initialValue = form.getValues(input.name) ?? input.value ?? 0;
-  const [value, setValue] = React8.useState(initialValue);
+  const [value, setValue] = React3.useState(initialValue);
   const handleChange = (val) => {
     setValue(val);
     form.setValue(input.name, val);
@@ -4271,252 +4276,80 @@ var FieldTags = ({ input, form, isSubmitting }) => {
 };
 var SPLITTER_REGEX = /[\n#?=&\t,./-]+/;
 var FORMATTING_REGEX = /^[^a-zA-Z0-9]*|[^a-zA-Z0-9]*$/g;
-var TagInputContext = React8__namespace.default.createContext(null);
-var TagsInput = React8__namespace.default.forwardRef(
+var TagsInput = React3__namespace.default.forwardRef(
   ({
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    children,
     value,
     onValueChange,
     placeholder,
     maxItems,
     minItems,
+    tagsPosition = "bottom",
     className,
     dir,
     ...props
   }, ref) => {
-    const [activeIndex, setActiveIndex] = React8__namespace.default.useState(-1);
-    const [inputValue, setInputValue] = React8__namespace.default.useState("");
-    const [disableInput, setDisableInput] = React8__namespace.default.useState(false);
-    const [disableButton, setDisableButton] = React8__namespace.default.useState(false);
-    const [isValueSelected, setIsValueSelected] = React8__namespace.default.useState(false);
-    const [selectedValue, setSelectedValue] = React8__namespace.default.useState("");
+    const [inputValue, setInputValue] = React3__namespace.default.useState("");
     const parseMinItems = minItems ?? 0;
     const parseMaxItems = maxItems ?? Infinity;
-    const onValueChangeHandler = React8__namespace.default.useCallback(
-      (val) => {
-        if (!value.includes(val) && value.length < parseMaxItems) {
-          onValueChange([...value, val]);
-        }
-      },
-      [value]
-    );
-    const RemoveValue = React8__namespace.default.useCallback(
-      (val) => {
-        if (value.includes(val) && value.length > parseMinItems) {
-          onValueChange(value.filter((item) => item !== val));
-        }
-      },
-      [value]
-    );
-    const handlePaste = React8__namespace.default.useCallback(
-      (e) => {
+    const addTag = (val) => {
+      if (!value.includes(val) && value.length < parseMaxItems) {
+        onValueChange([...value, val]);
+      }
+    };
+    const removeTag = (val) => {
+      if (value.includes(val) && value.length > parseMinItems) {
+        onValueChange(value.filter((v) => v !== val));
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && inputValue.trim() !== "") {
         e.preventDefault();
-        const tags = e.clipboardData.getData("text").split(SPLITTER_REGEX);
-        const newValue = [...value];
-        tags.forEach((item) => {
-          const parsedItem = item.replaceAll(FORMATTING_REGEX, "").trim();
-          if (parsedItem.length > 0 && !newValue.includes(parsedItem) && newValue.length < parseMaxItems) {
-            newValue.push(parsedItem);
-          }
-        });
-        onValueChange(newValue);
+        addTag(inputValue.trim());
         setInputValue("");
-      },
-      [value]
-    );
-    const handleSelect = React8__namespace.default.useCallback(
-      (e) => {
-        e.preventDefault();
-        const target = e.currentTarget;
-        const selection = target.value.substring(
-          target.selectionStart ?? 0,
-          target.selectionEnd ?? 0
-        );
-        setSelectedValue(selection);
-        setIsValueSelected(selection === inputValue);
-      },
-      [inputValue]
-    );
-    React8__namespace.default.useEffect(() => {
-      const VerifyDisable = () => {
-        if (value.length - 1 >= parseMinItems) {
-          setDisableButton(false);
-        } else {
-          setDisableButton(true);
-        }
-        if (value.length + 1 <= parseMaxItems) {
-          setDisableInput(false);
-        } else {
-          setDisableInput(true);
-        }
-      };
-      VerifyDisable();
-    }, [value]);
-    const handleKeyDown = React8__namespace.default.useCallback(
-      async (e) => {
-        e.stopPropagation();
-        const moveNext = () => {
-          const nextIndex = activeIndex + 1 > value.length - 1 ? -1 : activeIndex + 1;
-          setActiveIndex(nextIndex);
-        };
-        const movePrev = () => {
-          const prevIndex = activeIndex - 1 < 0 ? value.length - 1 : activeIndex - 1;
-          setActiveIndex(prevIndex);
-        };
-        const moveCurrent = () => {
-          const newIndex = activeIndex - 1 <= 0 ? value.length - 1 === 0 ? -1 : 0 : activeIndex - 1;
-          setActiveIndex(newIndex);
-        };
-        const target = e.currentTarget;
-        switch (e.key) {
-          case "ArrowLeft":
-            if (dir === "rtl") {
-              if (value.length > 0 && activeIndex !== -1) {
-                moveNext();
-              }
-            } else {
-              if (value.length > 0 && target.selectionStart === 0) {
-                movePrev();
-              }
-            }
-            break;
-          case "ArrowRight":
-            if (dir === "rtl") {
-              if (value.length > 0 && target.selectionStart === 0) {
-                movePrev();
-              }
-            } else {
-              if (value.length > 0 && activeIndex !== -1) {
-                moveNext();
-              }
-            }
-            break;
-          case "Backspace":
-          case "Delete":
-            if (value.length > 0) {
-              if (activeIndex !== -1 && activeIndex < value.length) {
-                RemoveValue(value[activeIndex]);
-                moveCurrent();
-              } else {
-                if (target.selectionStart === 0) {
-                  if (selectedValue === inputValue || isValueSelected) {
-                    RemoveValue(value[value.length - 1]);
-                  }
-                }
-              }
-            }
-            break;
-          case "Escape":
-            const newIndex = activeIndex === -1 ? value.length - 1 : -1;
-            setActiveIndex(newIndex);
-            break;
-          case "Enter":
-            if (inputValue.trim() !== "") {
-              e.preventDefault();
-              onValueChangeHandler(inputValue);
-              setInputValue("");
-            }
-            break;
-        }
-      },
-      [activeIndex, value, inputValue, RemoveValue]
-    );
-    const mousePreventDefault = React8__namespace.default.useCallback((e) => {
+      }
+      if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+        removeTag(value[value.length - 1]);
+      }
+    };
+    const handlePaste = (e) => {
       e.preventDefault();
-      e.stopPropagation();
-    }, []);
-    const handleChange = React8__namespace.default.useCallback(
-      (e) => {
-        setInputValue(e.currentTarget.value);
-      },
-      []
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      TagInputContext.Provider,
+      const tags = e.clipboardData.getData("text").split(SPLITTER_REGEX).map((t) => t.replace(FORMATTING_REGEX, "").trim()).filter((t) => t && !value.includes(t)).slice(0, parseMaxItems - value.length);
+      if (tags.length) onValueChange([...value, ...tags]);
+    };
+    const renderTags = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mb-1 mt-1", children: value.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Badge,
       {
-        value: {
-          value,
-          onValueChange,
-          inputValue,
-          setInputValue,
-          activeIndex,
-          setActiveIndex
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            ...props,
-            ref,
-            dir,
-            className: cn(
-              "flex items-center flex-wrap gap-1 p-1 rounded-lg bg-background overflow-hidden   ring-1 ring-muted  ",
-              {
-                "focus-within:ring-ring": activeIndex === -1
-              },
-              className
-            ),
-            children: [
-              value.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-                Badge,
-                {
-                  tabIndex: activeIndex !== -1 ? 0 : activeIndex,
-                  "aria-disabled": disableButton,
-                  "data-active": activeIndex === index,
-                  className: cn(
-                    "relative px-1 rounded flex items-center gap-1 data-[active='true']:ring-2 data-[active='true']:ring-muted-foreground truncate aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
-                  ),
-                  variant: "secondary",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: item }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-label": `Remove ${item} option`,
-                        "aria-roledescription": "button to remove option",
-                        disabled: disableButton,
-                        onMouseDown: mousePreventDefault,
-                        onClick: () => RemoveValue(item),
-                        className: "disabled:cursor-not-allowed",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
-                            "Remove ",
-                            item,
-                            " option"
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4 hover:stroke-destructive" })
-                        ]
-                      }
-                    )
-                  ]
-                },
-                item
-              )),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Input,
-                {
-                  tabIndex: 0,
-                  "aria-label": "input tag",
-                  disabled: disableInput,
-                  onKeyDown: handleKeyDown,
-                  onPaste: handlePaste,
-                  value: inputValue,
-                  onSelect: handleSelect,
-                  onChange: activeIndex === -1 ? handleChange : void 0,
-                  placeholder,
-                  onClick: () => setActiveIndex(-1),
-                  className: cn(
-                    "outline-0 border-none h-7 min-w-fit flex-1 focus-visible:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-0 placeholder:text-muted-foreground px-1",
-                    activeIndex !== -1 && "caret-transparent"
-                  )
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
+        className: "flex items-center gap-1 px-2 py-0.5 rounded bg-muted text-muted-foreground text-xs",
+        children: [
+          tag,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => removeTag(tag),
+              className: "ml-1 text-xs hover:text-destructive",
+              children: "\xD7"
+            }
+          )
+        ]
+      },
+      tag
+    )) });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, ref, className: cn("w-full", className), children: [
+      tagsPosition === "top" && renderTags(),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          onPaste: handlePaste,
+          placeholder,
+          className: "w-full px-2 py-1 border rounded focus:outline-none focus:ring focus:ring-primary"
+        }
+      ),
+      tagsPosition === "bottom" && renderTags()
+    ] });
   }
 );
 TagsInput.displayName = "TagsInput";
@@ -4593,13 +4426,13 @@ var FieldTimeInput = ({ form, input, isSubmitting }) => {
   const iconsLeft = groupConfig?.iconsLeft ?? [];
   const textLeft = groupConfig?.textLeft;
   const textRight = groupConfig?.textRight;
-  const [isValid2, setIsValid] = React8.useState(() => {
+  const [isValid2, setIsValid] = React3.useState(() => {
     const value = form.getValues(input.name);
     const fieldState = form.getFieldState(input.name);
     return !fieldState.error && value !== void 0 && value !== "";
   });
-  const [time, setTime] = React8.useState(() => form.getValues(input.name) ?? "");
-  React8.useEffect(() => {
+  const [time, setTime] = React3.useState(() => form.getValues(input.name) ?? "");
+  React3.useEffect(() => {
     const fieldValue = form.getValues(input.name) ?? "";
     if (fieldValue !== time) setTime(fieldValue);
   }, [form.getValues(input.name)]);
@@ -4771,14 +4604,14 @@ var DynamicForm = ({
   submitBtnClass = "",
   submitBtnLabel = "Submit"
 }) => {
-  const [isPending, startTransition] = React8.useTransition();
-  const schema = React8.useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
-  const defaultValues = React8.useMemo(() => getDefaultValues(record), [record]);
+  const [isPending, startTransition] = React3.useTransition();
+  const schema = React3.useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
+  const defaultValues = React3.useMemo(() => getDefaultValues(record), [record]);
   const form = reactHookForm.useForm({
     resolver: zod.zodResolver(schema),
     defaultValues
   });
-  React8.useEffect(() => {
+  React3.useEffect(() => {
     console.log("\u{1F501} Redibuja cuando cambian los fields o los valores por defecto");
     form.reset(defaultValues);
   }, []);
@@ -4940,7 +4773,7 @@ var mockFields = [
   }
 ];
 var InputList = ({ handleAddInput, inputsTypes }) => {
-  const [inputSetups, setInputSetups] = React8.useState(
+  const [inputSetups, setInputSetups] = React3.useState(
     () => Object.fromEntries(
       inputsTypes.map((type) => [type, { required: false, disabled: false }])
     )