shadcn-zod-formkit 1.23.2 → 1.25.0

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode, JSX } from 'react';
 import * as react_hook_form from 'react-hook-form';
-import { UseFormReturn, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
+import { UseFormReturn, ControllerRenderProps, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
 import { ZodTypeAny, z, ZodObject } from 'zod';
 import { LucideProps } from 'lucide-react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -74,7 +74,8 @@ declare enum InputTypes {
     MULTI_SELECT = "multi_select",
     COMBOBOX = "COMBO_BOX",
     SORTABLE_LIST = "sortable_list",
-    REPEATER_TABS = "repeater_tabs"
+    REPEATER_TABS = "repeater_tabs",
+    STRING_LIST = "string_list"
 }
 declare const inputFieldComp: InputTypes[];
 
@@ -83,13 +84,15 @@ type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<
 interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
     label: string;
+    isRemovebleOption?: boolean;
+    withDuplicatTag?: boolean;
     onChange?: (...event: any[]) => void;
     tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     direction?: 'row' | 'col';
-    repeaterFields?: FieldConfig<RT>;
+    repeaterFields?: Array<FieldProps<RT> | FieldProps<RT>[]>;
     minItems?: number;
     maxItems?: number;
     currencyFormat?: Intl.NumberFormatOptions;
@@ -199,6 +202,7 @@ declare const entityToInputOption: (entitiy: any, name?: string, description?: s
 declare const entitiesToInputOption: (data: any[], optionValue?: string, groupedLabel?: string) => InputOption[];
 declare const entityToGroupedOption: (entitiy: any, name?: string) => GroupedOption;
 declare const entitiesToGroupedOption: (data: any[], optionValue?: string) => GroupedOption[];
+declare const handleOnChage: (event: any[] | any, input: FieldProps, field?: ControllerRenderProps<FieldValues, string>) => void;
 
 type alertPositionType = 'up' | 'down';
 interface FormResp<T> {
@@ -454,4 +458,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldConfig, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldConfig, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode, JSX } from 'react';
 import * as react_hook_form from 'react-hook-form';
-import { UseFormReturn, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
+import { UseFormReturn, ControllerRenderProps, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
 import { ZodTypeAny, z, ZodObject } from 'zod';
 import { LucideProps } from 'lucide-react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -74,7 +74,8 @@ declare enum InputTypes {
     MULTI_SELECT = "multi_select",
     COMBOBOX = "COMBO_BOX",
     SORTABLE_LIST = "sortable_list",
-    REPEATER_TABS = "repeater_tabs"
+    REPEATER_TABS = "repeater_tabs",
+    STRING_LIST = "string_list"
 }
 declare const inputFieldComp: InputTypes[];
 
@@ -83,13 +84,15 @@ type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<
 interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
     label: string;
+    isRemovebleOption?: boolean;
+    withDuplicatTag?: boolean;
     onChange?: (...event: any[]) => void;
     tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     direction?: 'row' | 'col';
-    repeaterFields?: FieldConfig<RT>;
+    repeaterFields?: Array<FieldProps<RT> | FieldProps<RT>[]>;
     minItems?: number;
     maxItems?: number;
     currencyFormat?: Intl.NumberFormatOptions;
@@ -199,6 +202,7 @@ declare const entityToInputOption: (entitiy: any, name?: string, description?: s
 declare const entitiesToInputOption: (data: any[], optionValue?: string, groupedLabel?: string) => InputOption[];
 declare const entityToGroupedOption: (entitiy: any, name?: string) => GroupedOption;
 declare const entitiesToGroupedOption: (data: any[], optionValue?: string) => GroupedOption[];
+declare const handleOnChage: (event: any[] | any, input: FieldProps, field?: ControllerRenderProps<FieldValues, string>) => void;
 
 type alertPositionType = 'up' | 'down';
 interface FormResp<T> {
@@ -454,4 +458,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldConfig, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldConfig, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };

package/dist/index.mjs

@@ -194,6 +194,11 @@ var entitiesToGroupedOption = (data, optionValue = "name") => {
   }
   return entities;
 };
+var handleOnChage = (event, input, field) => {
+  console.log("\u{1F680} ~ handleOnChage ~ event:", event);
+  if (event) field?.onChange(event);
+  input.onChange?.(event);
+};
 
 // src/components/custom/form/inputs/base/definitions.ts
 var flattenFields = (fields) => {
@@ -251,9 +256,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["COMBOBOX"] = "COMBO_BOX";
   InputTypes2["SORTABLE_LIST"] = "sortable_list";
   InputTypes2["REPEATER_TABS"] = "repeater_tabs";
+  InputTypes2["STRING_LIST"] = "string_list";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "string_list" /* STRING_LIST */,
   "repeater_tabs" /* REPEATER_TABS */,
   "sortable_list" /* SORTABLE_LIST */,
   "COMBO_BOX" /* COMBOBOX */,
@@ -1629,13 +1636,14 @@ var GroupedSwitches = ({ options, onChange, input, isSubmitting }) => {
     setAllChecked(checked);
     onChange?.(updated.filter((opt) => opt.checked));
   };
-  const handleChildToggle = (option, checked) => {
+  const handleChildToggle = (option, checked, input2) => {
     const updated = switches.map(
       (opt) => opt.id === option.id ? { ...opt, checked } : opt
     );
     setSwitches(updated);
     setAllChecked(updated.every((opt) => opt.checked));
     onChange?.(updated.filter((opt) => opt.checked));
+    handleOnChage(updated.filter((opt) => opt.checked), input2);
   };
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: cn(`w-full h-full space-y-4 p-4  border-2 rounded-xl bg-green-500 ${allChecked ? "bg-green-500/5 border-green-400/10" : "bg-black/5"}`), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b p-2", children: [
@@ -1653,7 +1661,7 @@ var GroupedSwitches = ({ options, onChange, input, isSubmitting }) => {
           disabled: input.disabled || isSubmitting,
           id: String(opt.id),
           checked: opt?.checked || false,
-          onCheckedChange: (checked) => handleChildToggle(opt, checked)
+          onCheckedChange: (checked) => handleChildToggle(opt, checked, input)
         }
       )
     ] }, opt.id))
@@ -1694,7 +1702,7 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
   const countCheckedByGroup = (group) => {
     return group.options.filter((opt) => opt.checked).length;
   };
-  const handleOptionChange = (field, updatedGroupLabel, updatedOptions) => {
+  const handleOptionChange = (field, updatedGroupLabel, updatedOptions, input2) => {
     const newGroups = groupsState.map(
       (group) => group.label === updatedGroupLabel ? { ...group, options: updatedOptions } : group
     );
@@ -1703,6 +1711,7 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
     setSelectedOptions(allChecked);
     field.onChange(allChecked);
     onChange?.(allChecked);
+    handleOnChage(allChecked, input2, field);
   };
   return /* @__PURE__ */ jsx(
     FormField,
@@ -1733,7 +1742,7 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
                     isSubmitting,
                     input,
                     options: group.options,
-                    onChange: (updated) => handleOptionChange(field, group.label, updated)
+                    onChange: (updated) => handleOptionChange(field, group.label, updated, input)
                   }
                 ) })
               ]
@@ -1798,7 +1807,10 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
       type: "button",
       className,
       variant: selectedValue === option.value ? "default" : "outline",
-      onClick: () => handleSelect(option.value),
+      onClick: () => {
+        handleSelect(option.value);
+        handleOnChage(option.value, input);
+      },
       disabled: isSubmitting,
       children: option.label ?? option.name
     },
@@ -1823,6 +1835,7 @@ var CheckListInput = class extends BaseInput {
           /* @__PURE__ */ jsx(
             Checkbox,
             {
+              onChange: (e) => handleOnChage(e, input),
               disabled: input.disabled || isSubmitting,
               id: String(item[optionValue]),
               checked: value.includes(item[optionValue]),
@@ -1874,7 +1887,7 @@ var FieldCheckbox = ({ input, form, isSubmitting }) => {
               {
                 id: input.name,
                 checked: field.value,
-                onCheckedChange: field.onChange,
+                onCheckedChange: (e) => handleOnChage(e, input, field),
                 disabled: input.disabled || isSubmitting,
                 className: "data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white \n                  dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
               }
@@ -1910,23 +1923,14 @@ var FieldColor = ({ form, input, isSubmitting }) => {
           ColorCmp,
           {
             value: field.value || "#000000",
-            onChange: field.onChange,
+            onChange: (event) => {
+              handleOnChage(event, input, field);
+            },
             onBlur: field.onBlur,
             disabled: input.disabled || isSubmitting,
             placeholder: input.placeHolder
           }
-        ) : /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "color",
-            value: field.value || "#000000",
-            onChange: (e) => field.onChange(e.target.value),
-            onBlur: () => field.onBlur(),
-            disabled: input.disabled || isSubmitting,
-            placeholder: input.placeHolder,
-            style: { width: 48, height: 28 }
-          }
-        ) }),
+        ) : "N/A" }),
         /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
         /* @__PURE__ */ jsx(FormMessage, {})
       ] })
@@ -2147,6 +2151,7 @@ var FieldCombobox = ({ form, input, isSubmitting }) => {
                     const newValue = currentValue === value ? "" : currentValue;
                     setValue(newValue);
                     form.setValue(input.name, newValue);
+                    handleOnChage(options.find((o) => getValue(o) === newValue), input);
                     input.listConfig?.onOptionChange?.(
                       options.find((o) => getValue(o) === newValue)
                     );
@@ -2269,6 +2274,7 @@ var FieldCurrency = ({ form, input, isSubmitting }) => {
                   setRawValue(newVal);
                   const parsed = parseValue(newVal);
                   if (parsed !== null) field.onChange(parsed);
+                  handleOnChage(parsed, input, field);
                 },
                 onBlur: (e) => {
                   const formatted = formatValue(e.target.value);
@@ -3867,7 +3873,7 @@ var DateInput = class extends BaseInput {
           }, [field.value]);
           const handleSelect = (selectedDate) => {
             setDate(selectedDate);
-            field.onChange(selectedDate);
+            handleOnChage(selectedDate, input, field);
           };
           return /* @__PURE__ */ jsxs(FormItem, { children: [
             /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
@@ -3957,7 +3963,10 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
                 type: "datetime-local",
                 value: dateTime,
                 disabled: input.disabled || isSubmitting,
-                onChange: (e) => handleChange(e.target.value)
+                onChange: (e) => {
+                  handleOnChage(e.target.value, input, field);
+                  handleChange(e.target.value);
+                }
               }
             ),
             (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", children: [
@@ -4017,6 +4026,7 @@ var FieldFile = ({ form, input, isSubmitting }) => {
               onChange: (e) => {
                 field.onChange(e.target.files?.[0]);
                 handleFileChange(e);
+                handleOnChage(e.target.files?.[0], input, field);
               }
             }
           ) }),
@@ -4174,7 +4184,7 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
         return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsx(FormMessage, {}),
-          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 shadow-lg rounded-xl p-3 bg-white", children: [
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl p-3 ", children: [
             pairs.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No pairs have been added yet." }),
             pairs.map((pair, index) => /* @__PURE__ */ jsxs(
               "div",
@@ -4300,7 +4310,10 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
                   return /* @__PURE__ */ jsxs(
                     CommandItem,
                     {
-                      onSelect: () => toggleOption(value),
+                      onSelect: () => {
+                        handleOnChage(value, input, field);
+                        toggleOption(value);
+                      },
                       children: [
                         /* @__PURE__ */ jsx(
                           Check,
@@ -4383,6 +4396,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                   if (isNumberField) {
                     value = e.target.value === "" ? "" : Number(e.target.value);
                   }
+                  handleOnChage(value, input, field);
                   field.onChange(value);
                 }
               }
@@ -4440,7 +4454,7 @@ var FieldOTP = ({ form, input, isSubmitting }) => {
       name: input.name,
       render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
         /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
-        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputOTP, { maxLength: totalPositions.length, ...field, children: /* @__PURE__ */ jsx(InputOTPGroup, { children: totalPositions.map((position) => /* @__PURE__ */ jsx(InputOTPSlot, { index: position }, position)) }) }) }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputOTP, { maxLength: totalPositions.length, ...field, onChange: (event) => handleOnChage(event, input, field), children: /* @__PURE__ */ jsx(InputOTPGroup, { children: totalPositions.map((position) => /* @__PURE__ */ jsx(InputOTPSlot, { index: position }, position)) }) }) }),
         /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
         /* @__PURE__ */ jsx(FormMessage, {})
       ] })
@@ -4481,7 +4495,7 @@ var FieldRadioGroup = ({ input, form, isSubmitting }) => {
           {
             ...field,
             value: field.value ?? "",
-            onValueChange: field.onChange,
+            onValueChange: (e) => handleOnChage(e, input, field),
             className: "space-y-2 mt-3",
             children: options.map((opt, index) => /* @__PURE__ */ jsxs(
               "div",
@@ -4833,7 +4847,7 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
             {
               disabled: input.disabled || isSubmitting || loading,
               onValueChange: (val) => {
-                field.onChange(val);
+                handleOnChage(val, input, field);
                 setValue(val);
                 if (input.listConfig?.onOptionChange) {
                   const selectedItem = lista.find(
@@ -4877,7 +4891,7 @@ var SimpleCheckListInput = class extends BaseInput {
             isSubmitting,
             input,
             value: field.value || [],
-            onChange: field.onChange
+            onChange: (e) => handleOnChage(e, input, field)
           }
         )
       }
@@ -4899,12 +4913,14 @@ var FieldSimpleCheckList = ({ input, value, onChange, isSubmitting }) => {
   const handleMainToggle = (checked) => {
     const updated = options.map((opt) => ({ ...opt, checked }));
     setOptions(updated);
+    handleOnChage(updated, input);
     onChange(updated);
   };
   const handleChildToggle = (option, checked) => {
     const updated = options.map(
       (opt) => opt.id === option.id ? { ...opt, checked } : opt
     );
+    handleOnChage(updated, input);
     setOptions(updated);
     onChange(updated);
   };
@@ -5146,6 +5162,102 @@ function SortableWrapper({
     }
   );
 }
+var StringValueListInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsx(
+      FieldStringValueList,
+      {
+        input,
+        form,
+        isSubmitting
+      }
+    );
+  }
+};
+var FieldStringValueList = ({ form, input, isSubmitting }) => {
+  const fieldName = input.name;
+  useEffect(() => {
+    const current = form.getValues(fieldName);
+    if (!Array.isArray(current)) {
+      form.setValue(fieldName, []);
+    }
+  }, [form, fieldName]);
+  const handleAddItem = () => {
+    const current = form.getValues(fieldName) || [];
+    form.setValue(fieldName, [...current, ""]);
+  };
+  const handleRemoveItem = (index) => {
+    const current = form.getValues(fieldName) || [];
+    const updated = current.filter((_, i) => i !== index);
+    form.setValue(fieldName, updated);
+  };
+  const handleChange = (index, newValue) => {
+    const current = form.getValues(fieldName) || [];
+    const updated = current.map(
+      (item, i) => i === index ? newValue : item
+    );
+    form.setValue(fieldName, updated);
+  };
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control: form.control,
+      name: fieldName,
+      render: () => {
+        const items = form.watch(fieldName) || [];
+        return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsx(FormMessage, {}),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3  rounded-xl ", children: [
+            items.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No items have been added yet." }),
+            items.map((value, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex gap-2 items-center",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      placeholder: `Item ${index + 1}`,
+                      value,
+                      disabled: isSubmitting,
+                      onChange: (e) => handleChange(index, e.target.value)
+                    }
+                  ),
+                  input.isRemovebleOption && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "destructive",
+                      size: "icon",
+                      onClick: () => handleRemoveItem(index),
+                      disabled: isSubmitting,
+                      children: /* @__PURE__ */ jsx(Trash2, { size: 18 })
+                    }
+                  )
+                ]
+              },
+              index
+            )),
+            /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                onClick: handleAddItem,
+                disabled: isSubmitting,
+                children: /* @__PURE__ */ jsx(Plus, { size: 18, className: "mr-1" })
+              }
+            ) })
+          ] }) }),
+          input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description })
+        ] });
+      }
+    }
+  );
+};
 var SwitchInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -5169,7 +5281,7 @@ var FieldSwitch = ({ input, form, isSubmitting }) => {
           Switch,
           {
             checked: field.value,
-            onCheckedChange: field.onChange,
+            onCheckedChange: (event) => handleOnChage(event, input, field),
             "aria-disabled": true,
             disabled: input.disabled || isSubmitting
           }
@@ -5196,8 +5308,9 @@ var FieldTags = ({ input, form, isSubmitting }) => {
         /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
           TagsInput,
           {
+            input,
             value: field.value ?? [],
-            onValueChange: field.onChange,
+            onValueChange: (event) => handleOnChage(event, input, field),
             placeholder: "Enter for add tag"
           }
         ) }),
@@ -5212,6 +5325,7 @@ var SPLITTER_REGEX = /[\n#?=&\t,./-]+/;
 var FORMATTING_REGEX = /^[^a-zA-Z0-9]*|[^a-zA-Z0-9]*$/g;
 var TagsInput = React3__default.forwardRef(
   ({
+    input,
     value,
     onValueChange,
     placeholder,
@@ -5226,7 +5340,7 @@ var TagsInput = React3__default.forwardRef(
     const parseMinItems = minItems ?? 0;
     const parseMaxItems = maxItems ?? Infinity;
     const addTag = (val) => {
-      if (!value.includes(val) && value.length < parseMaxItems) {
+      if (!value.includes(val) && value.length < parseMaxItems || input.withDuplicatTag) {
         onValueChange([...value, val]);
       }
     };
@@ -5301,7 +5415,18 @@ function FieldTextArea({ form, input, isSubmitting }) {
       name: input.name,
       render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "shadow-lg", children: [
         /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
-        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Textarea, { className: "min-w-[260px] bg-white", placeholder: input.placeHolder, ...field, disabled: input.disabled || isSubmitting }) }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            className: "min-w-[260px] bg-white",
+            placeholder: input.placeHolder,
+            ...field,
+            onChange: (event) => {
+              handleOnChage(event, input, field);
+            },
+            disabled: input.disabled || isSubmitting
+          }
+        ) }),
         input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
         /* @__PURE__ */ jsx(FormMessage, {})
       ] })
@@ -5332,6 +5457,7 @@ var FieldText = ({ input, form, isSubmitting }) => {
             placeholder: input.placeHolder,
             ...field,
             type,
+            onChange: (e) => handleOnChage(e, input, field),
             disabled: input.disabled || isSubmitting
           }
         ) }),
@@ -5382,6 +5508,7 @@ var FieldTimeInput = ({ form, input, isSubmitting }) => {
         if (validNow !== isValid2) setIsValid(validNow);
         const handleChange = (val) => {
           setTime(val);
+          handleOnChage(val, input, field);
           field.onChange(val);
         };
         return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
@@ -5442,6 +5569,7 @@ var inputMap = {
   ["COMBO_BOX" /* COMBOBOX */]: ComboboxInput,
   ["sortable_list" /* SORTABLE_LIST */]: SortableListInput,
   ["repeater_tabs" /* REPEATER_TABS */]: RepeaterTabsInput,
+  ["string_list" /* STRING_LIST */]: StringValueListInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -5920,6 +6048,6 @@ var InputList = ({ handleAddInput, inputsTypes }) => {
   }) });
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, Label, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, Label, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map