shadcn-zod-formkit 1.27.4 → 1.29.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import { ReactNode, JSX } from 'react';
+import { ReactNode, JSX, Dispatch, SetStateAction, ChangeEventHandler } from 'react';
 import * as react_hook_form from 'react-hook-form';
 import { UseFormReturn, ControllerRenderProps, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
 import { ZodTypeAny, z, ZodObject } from 'zod';
@@ -488,6 +488,18 @@ interface Props$3 {
     isSubmitting?: boolean;
 }
 declare const FieldTextGroup: ({ form, input, isSubmitting }: Props$3) => react_jsx_runtime.JSX.Element;
+interface customInputGroup {
+    value?: any;
+    input: FieldProps<Record<string, any>, Record<string, any>>;
+    field?: ControllerRenderProps<FieldValues, string>;
+    form: UseFormReturn;
+    isSubmitting?: boolean;
+    isValid?: boolean;
+    setShowPassword?: Dispatch<SetStateAction<boolean>>;
+    autoValidate?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+}
+declare const CustomInputGroup: ({ value, input, field, form, isSubmitting, onChange, isValid }: customInputGroup) => react_jsx_runtime.JSX.Element;
 
 declare class TextInput extends BaseInput {
     render(): JSX.Element;
@@ -739,4 +751,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, CustomInputGroup, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import { ReactNode, JSX } from 'react';
+import { ReactNode, JSX, Dispatch, SetStateAction, ChangeEventHandler } from 'react';
 import * as react_hook_form from 'react-hook-form';
 import { UseFormReturn, ControllerRenderProps, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
 import { ZodTypeAny, z, ZodObject } from 'zod';
@@ -488,6 +488,18 @@ interface Props$3 {
     isSubmitting?: boolean;
 }
 declare const FieldTextGroup: ({ form, input, isSubmitting }: Props$3) => react_jsx_runtime.JSX.Element;
+interface customInputGroup {
+    value?: any;
+    input: FieldProps<Record<string, any>, Record<string, any>>;
+    field?: ControllerRenderProps<FieldValues, string>;
+    form: UseFormReturn;
+    isSubmitting?: boolean;
+    isValid?: boolean;
+    setShowPassword?: Dispatch<SetStateAction<boolean>>;
+    autoValidate?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+}
+declare const CustomInputGroup: ({ value, input, field, form, isSubmitting, onChange, isValid }: customInputGroup) => react_jsx_runtime.JSX.Element;
 
 declare class TextInput extends BaseInput {
     render(): JSX.Element;
@@ -739,4 +751,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, CustomInputGroup, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React3 from 'react';
-import React3__default, { useMemo, useState, useEffect, useRef, useTransition } from 'react';
+import React3__default, { useState, useMemo, useEffect, useRef, useTransition } from 'react';
 import { FormProvider, Controller, useFormContext, useFormState, useFieldArray, useForm } from 'react-hook-form';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Slot } from '@radix-ui/react-slot';
@@ -2183,6 +2183,28 @@ var ColorInput = class extends BaseInput {
     return /* @__PURE__ */ jsx(FieldColor, { input, form, isSubmitting });
   }
 };
+var PRESET_COLORS = [
+  "#ef4444",
+  // red
+  "#f97316",
+  // orange
+  "#eab308",
+  // yellow
+  "#22c55e",
+  // green
+  "#06b6d4",
+  // cyan
+  "#3b82f6",
+  // blue
+  "#8b5cf6",
+  // purple
+  "#ec4899",
+  // pink
+  "#64748b",
+  // slate
+  "#000000"
+  // black
+];
 var FieldColor = ({ form, input, isSubmitting }) => {
   const [ColorCmp, _setColorCmp] = useState(ColorComp);
   return /* @__PURE__ */ jsx(
@@ -2213,13 +2235,17 @@ var FieldColor = ({ form, input, isSubmitting }) => {
 var ColorComp = React3__default.forwardRef(
   ({ value = "#000000", onChange, onBlur, disabled, className, hideInput = ["hsv"] }, ref) => {
     const [color, setColor] = useColor(value);
-    const [open, setOpen] = React3__default.useState(false);
+    const [open, setOpen] = useState(false);
     React3__default.useEffect(() => {
       if (value !== color.hex) {
         setColor({ ...color, hex: value });
       }
-    }, [color, setColor, value]);
+    }, [value]);
     const handleColorChange = (newColor) => {
+      setColor({ ...color, hex: newColor });
+      onChange?.(newColor);
+    };
+    const handlePickerChange = (newColor) => {
       setColor(newColor);
       onChange?.(newColor.hex);
     };
@@ -2229,21 +2255,38 @@ var ColorComp = React3__default.forwardRef(
         onBlur?.();
       }
     };
-    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-2", children: PRESET_COLORS.map((presetColor) => /* @__PURE__ */ jsx(
+        "button",
         {
-          ref,
-          variant: "outline",
+          type: "button",
           disabled,
-          className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", className),
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-4 w-4 border border-border rounded-sm", style: { backgroundColor: color.hex, width: 20, height: 20 } }),
-            /* @__PURE__ */ jsx("span", { children: color.hex })
-          ] })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsx(ColorPicker, { color, onChange: handleColorChange, hideInput }) })
+          className: cn(
+            "size-6 rounded-md border-2 transition-all hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed",
+            color.hex === presetColor ? "border-foreground ring-2 ring-foreground/20" : "border-border hover:border-foreground/50"
+          ),
+          style: { backgroundColor: presetColor },
+          onClick: () => handleColorChange(presetColor),
+          "aria-label": `Select color ${presetColor}`
+        },
+        presetColor
+      )) }),
+      /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            variant: "outline",
+            disabled,
+            className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", className),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-4 w-4 border border-border rounded-sm", style: { backgroundColor: color.hex, width: 20, height: 20 } }),
+              /* @__PURE__ */ jsx("span", { children: color.hex })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsx(ColorPicker, { color, onChange: handlePickerChange, hideInput }) })
+      ] })
     ] });
   }
 );
@@ -4700,21 +4743,7 @@ var TextInputGroup = class extends BaseInput {
   }
 };
 var FieldTextGroup = ({ form, input, isSubmitting }) => {
-  const groupConfig = input.inputGroupConfig;
-  const infoTooltip = input?.infoTooltip;
-  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
-  const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
-  const iconInvalidState = /* @__PURE__ */ jsx(CircleX, { style: { color: "#ff8080" } });
-  const iconLoadingState = /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
-  const iconsRight = groupConfig?.iconsRight ?? [];
-  const iconsLeft = groupConfig?.iconsLeft ?? [];
-  const textLeft = groupConfig?.textLeft;
-  const textRight = groupConfig?.textRight;
   const [isValid2, setIsValid] = useState(isValidField(input, form));
-  const [showPassword, setShowPassword] = useState(false);
-  const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
-  const isNumberField = input.keyboardType === "number" /* NUMBER */;
-  const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
   const formField = /* @__PURE__ */ jsx(
     FormField,
     {
@@ -4724,51 +4753,13 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
         setIsValid(isValidField(input, form));
         return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
-          /* @__PURE__ */ jsx(FormControl, { className: "shadow-lg", children: /* @__PURE__ */ jsxs(InputGroup, { children: [
-            (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxs(InputGroupAddon, { children: [
-              textLeft && /* @__PURE__ */ jsx(InputGroupText, { children: textLeft }),
-              iconsLeft.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 20 }, index))
-            ] }),
-            /* @__PURE__ */ jsx(
-              InputGroupInput,
-              {
-                placeholder: input.placeHolder,
-                disabled: input.disabled || isSubmitting,
-                onBlur: field.onBlur,
-                name: field.name,
-                ref: field.ref,
-                type: isPasswordField && !showPassword ? "password" : isNumberField ? "number" : "text",
-                value: field.value ?? "",
-                onChange: (e) => {
-                  let value = e.target.value;
-                  if (isNumberField) {
-                    value = e.target.value === "" ? "" : Number(e.target.value);
-                  }
-                  field.onChange(value);
-                  isValidField(input, form);
-                  handleOnChage(value, input, field);
-                }
-              }
-            ),
-            showInputGroupAddons && /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", children: [
-              infoTooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Info, { size: 20 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: infoTooltip }) })
-              ] }),
-              textRight && /* @__PURE__ */ jsx(InputGroupText, { children: textRight }),
-              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 20 }, index)),
-              isPasswordField && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setShowPassword(!showPassword),
-                  className: "p-1",
-                  children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { size: 20 }) : /* @__PURE__ */ jsx(Eye, { size: 20 })
-                }
-              ),
-              autoValidate && /* @__PURE__ */ jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
-            ] })
-          ] }) }),
+          /* @__PURE__ */ jsx(FormControl, { className: "shadow-lg", children: CustomInputGroup({
+            input,
+            isSubmitting,
+            field,
+            form,
+            isValid: isValid2
+          }) }),
           input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
           /* @__PURE__ */ jsx(FormMessage, {})
         ] });
@@ -4778,6 +4769,78 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsx(Fragment, { children: formField });
 };
+var CustomInputGroup = ({
+  value,
+  input,
+  field,
+  form,
+  isSubmitting,
+  onChange,
+  isValid: isValid2
+}) => {
+  const groupConfig = input.inputGroupConfig;
+  const infoTooltip = input?.infoTooltip;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
+  const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsx(CircleX, { style: { color: "#ff8080" } });
+  const iconLoadingState = /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
+  const iconsRight = groupConfig?.iconsRight ?? [];
+  const iconsLeft = groupConfig?.iconsLeft ?? [];
+  const textLeft = groupConfig?.textLeft;
+  const textRight = groupConfig?.textRight;
+  const [showPassword, setShowPassword] = useState(false);
+  const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
+  const isNumberField = input.keyboardType === "number" /* NUMBER */;
+  const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
+  return /* @__PURE__ */ jsxs(InputGroup, { children: [
+    (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxs(InputGroupAddon, { children: [
+      textLeft && /* @__PURE__ */ jsx(InputGroupText, { children: textLeft }),
+      iconsLeft.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 20 }, index))
+    ] }),
+    /* @__PURE__ */ jsx(
+      InputGroupInput,
+      {
+        placeholder: input.placeHolder,
+        disabled: input.disabled || isSubmitting,
+        onBlur: field?.onBlur,
+        name: field?.name,
+        ref: field?.ref,
+        type: isPasswordField && !showPassword ? "password" : isNumberField ? "number" : "text",
+        value: field?.value ?? value ?? "",
+        onChange: (e) => {
+          if (onChange) {
+            onChange(e);
+          }
+          let value2 = e.target.value;
+          if (isNumberField) {
+            value2 = e.target.value === "" ? "" : Number(e.target.value);
+          }
+          field?.onChange(value2);
+          isValidField(input, form);
+          handleOnChage(value2, input, field);
+        }
+      }
+    ),
+    showInputGroupAddons && /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", children: [
+      infoTooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Info, { size: 20 }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: infoTooltip }) })
+      ] }),
+      textRight && /* @__PURE__ */ jsx(InputGroupText, { children: textRight }),
+      iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 20 }, index)),
+      isPasswordField && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          className: "p-1",
+          children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { size: 20 }) : /* @__PURE__ */ jsx(Eye, { size: 20 })
+        }
+      ),
+      autoValidate && /* @__PURE__ */ jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
+    ] })
+  ] });
+};
 var NumberInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -5527,6 +5590,10 @@ var StringValueListInput = class extends BaseInput {
 var FieldStringValueList = ({ form, input, isSubmitting }) => {
   const fieldName = input.name;
   const withAddBtn = input.withAddBtn ?? false;
+  const [isValid2, setIsValid] = useState(isValidField(input, form));
+  useEffect(() => {
+    setIsValid(isValidField(input, form));
+  }, [input]);
   useEffect(() => {
     const current = form.getValues(fieldName);
     if (!Array.isArray(current)) {
@@ -5554,7 +5621,7 @@ var FieldStringValueList = ({ form, input, isSubmitting }) => {
     {
       control: form.control,
       name: fieldName,
-      render: () => {
+      render: (field) => {
         const items = form.watch(fieldName) || [];
         return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
@@ -5567,12 +5634,14 @@ var FieldStringValueList = ({ form, input, isSubmitting }) => {
                 className: "flex items-center gap-4 py-2",
                 children: [
                   /* @__PURE__ */ jsx(
-                    Input,
+                    CustomInputGroup,
                     {
-                      placeholder: `Item ${index + 1}`,
+                      autoValidate: true,
                       value,
-                      disabled: isSubmitting,
-                      onChange: (e) => handleChange(index, e.target.value)
+                      input,
+                      isValid: isValid2,
+                      onChange: (e) => handleChange(index, e.target.value),
+                      form
                     }
                   ),
                   input.isRemovebleOption && /* @__PURE__ */ jsx(
@@ -6516,6 +6585,6 @@ var GenericFilter = ({
   ) }) });
 };
 
-export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput2 as FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, GenericFilter, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, CustomInputGroup, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput2 as FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, GenericFilter, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map