shadcn-zod-formkit 1.20.0 → 1.21.1

package/dist/index.d.mts

@@ -78,6 +78,8 @@ declare enum InputTypes {
 }
 declare const inputFieldComp: InputTypes[];
 
+declare const flattenFields: <T extends Record<string, any>>(fields: FieldConfig<T>[]) => FieldProps<T>[];
+type FieldConfig<T> = FieldProps<T> | FieldConfig<T>[];
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
@@ -86,6 +88,7 @@ interface FieldProps<T = Record<string, any>> {
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
+    direction?: 'row' | 'col';
     repeaterFields?: Array<FieldProps | FieldProps[]>;
     minItems?: number;
     maxItems?: number;
@@ -208,7 +211,7 @@ interface Props$4<T extends Record<string, any>> {
     formTitle: string;
     formSubTitle?: string;
     readOnly?: boolean;
-    fields: Array<FieldProps<T> | FieldProps<T>[]>;
+    fields: FieldConfig<T>[];
     record?: Partial<T>;
     onSubmit?: (resp: FormResp<T>) => void;
     onClick?: (resp: FormResp<T>) => void;
@@ -229,16 +232,16 @@ declare const mockFields: Array<FieldProps | FieldProps[]>;
 
 interface Props$3<T extends FieldValues = Record<string, any>> {
     formState: FormState<any>;
-    fields: Array<FieldProps<T> | FieldProps<T>[]>;
+    fields: FieldConfig<T>[];
 }
-declare const FormErrorsAlert: <T extends FieldValues = Record<string, any>>({ formState, fields }: Props$3<T>) => react_jsx_runtime.JSX.Element;
+declare const FormErrorsAlert: <T extends FieldValues = Record<string, any>>({ formState, fields, }: Props$3<T>) => react_jsx_runtime.JSX.Element;
 declare const getFieldLabel: <T extends FieldValues>(fieldErrorKey: string, fields: ReadonlyArray<FieldProps<T>>) => string;
 
 declare class InputFactory {
     static create<T extends Record<string, any> = Record<string, any>>(input: FieldProps<T>, form: UseFormReturn<T>, isSubmitting?: boolean): JSX.Element;
 }
-declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<T>, fields?: Array<FieldProps<T> | FieldProps<T>[]>): Record<string, any>;
-declare const getDynamicSchema: <T extends Record<string, any>>(fields: Array<FieldProps<T> | FieldProps<T>[]>, extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[]) => ZodObject<Record<keyof T, ZodTypeAny>>;
+declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<T>, fields?: FieldConfig<T>[]): Record<string, any>;
+declare const getDynamicSchema: <T extends Record<string, any>>(fields: FieldConfig<T>[], extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[]) => ZodObject<Record<keyof T, ZodTypeAny>>;
 
 declare class CheckListInput extends BaseInput {
     render(): JSX.Element;
@@ -447,4 +450,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 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, 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, inputFieldComp, mockFields, useFormField, validationMessages };

package/dist/index.d.ts

@@ -78,6 +78,8 @@ declare enum InputTypes {
 }
 declare const inputFieldComp: InputTypes[];
 
+declare const flattenFields: <T extends Record<string, any>>(fields: FieldConfig<T>[]) => FieldProps<T>[];
+type FieldConfig<T> = FieldProps<T> | FieldConfig<T>[];
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
@@ -86,6 +88,7 @@ interface FieldProps<T = Record<string, any>> {
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
+    direction?: 'row' | 'col';
     repeaterFields?: Array<FieldProps | FieldProps[]>;
     minItems?: number;
     maxItems?: number;
@@ -208,7 +211,7 @@ interface Props$4<T extends Record<string, any>> {
     formTitle: string;
     formSubTitle?: string;
     readOnly?: boolean;
-    fields: Array<FieldProps<T> | FieldProps<T>[]>;
+    fields: FieldConfig<T>[];
     record?: Partial<T>;
     onSubmit?: (resp: FormResp<T>) => void;
     onClick?: (resp: FormResp<T>) => void;
@@ -229,16 +232,16 @@ declare const mockFields: Array<FieldProps | FieldProps[]>;
 
 interface Props$3<T extends FieldValues = Record<string, any>> {
     formState: FormState<any>;
-    fields: Array<FieldProps<T> | FieldProps<T>[]>;
+    fields: FieldConfig<T>[];
 }
-declare const FormErrorsAlert: <T extends FieldValues = Record<string, any>>({ formState, fields }: Props$3<T>) => react_jsx_runtime.JSX.Element;
+declare const FormErrorsAlert: <T extends FieldValues = Record<string, any>>({ formState, fields, }: Props$3<T>) => react_jsx_runtime.JSX.Element;
 declare const getFieldLabel: <T extends FieldValues>(fieldErrorKey: string, fields: ReadonlyArray<FieldProps<T>>) => string;
 
 declare class InputFactory {
     static create<T extends Record<string, any> = Record<string, any>>(input: FieldProps<T>, form: UseFormReturn<T>, isSubmitting?: boolean): JSX.Element;
 }
-declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<T>, fields?: Array<FieldProps<T> | FieldProps<T>[]>): Record<string, any>;
-declare const getDynamicSchema: <T extends Record<string, any>>(fields: Array<FieldProps<T> | FieldProps<T>[]>, extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[]) => ZodObject<Record<keyof T, ZodTypeAny>>;
+declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<T>, fields?: FieldConfig<T>[]): Record<string, any>;
+declare const getDynamicSchema: <T extends Record<string, any>>(fields: FieldConfig<T>[], extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[]) => ZodObject<Record<keyof T, ZodTypeAny>>;
 
 declare class CheckListInput extends BaseInput {
     render(): JSX.Element;
@@ -447,4 +450,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 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, 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, inputFieldComp, mockFields, useFormField, validationMessages };

package/dist/index.mjs

@@ -196,6 +196,19 @@ var entitiesToGroupedOption = (data, optionValue = "name") => {
 };
 
 // src/components/custom/form/inputs/base/definitions.ts
+var flattenFields = (fields) => {
+  const result = [];
+  for (const field of fields) {
+    if (Array.isArray(field)) {
+      result.push(...flattenFields(field));
+    } else if (field.fields) {
+      result.push(...flattenFields(field.fields));
+    } else {
+      result.push(field);
+    }
+  }
+  return result;
+};
 var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
   TextInputType2["DEFAULT"] = "default";
   TextInputType2["NUMBER"] = "number";
@@ -1779,7 +1792,7 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
     if (input.listConfig?.onOptionChange) input.listConfig.onOptionChange(value);
   };
   const selectedValue = form.watch(input.name);
-  return /* @__PURE__ */ jsx(ButtonGroup, { className: "flex flex-row  w-full", children: options.map((option) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ButtonGroup, { className: "flex flex-row  w-full", children: options.map((option, key) => /* @__PURE__ */ jsx(
     Button,
     {
       type: "button",
@@ -1789,7 +1802,7 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
       disabled: isSubmitting,
       children: option.label ?? option.name
     },
-    option.value
+    key
   )) });
 };
 var CheckListInput = class extends BaseInput {
@@ -5455,32 +5468,12 @@ var InputFactory = class {
 function getDefaultValues(entity, fields) {
   const defaults = {};
   if (entity) {
-    for (const key in entity) {
-      const value = entity[key];
-      if (value === null || value === void 0) {
-        defaults[key] = "";
-        continue;
-      }
-      switch (typeof value) {
-        case "string":
-          defaults[key] = value;
-          break;
-        case "number":
-          defaults[key] = value;
-          break;
-        case "boolean":
-          defaults[key] = value;
-          break;
-        case "object":
-          defaults[key] = Array.isArray(value) ? [...value] : { ...value };
-          break;
-        default:
-          defaults[key] = value;
-      }
-    }
+    Object.entries(entity).forEach(([key, value]) => {
+      defaults[key] = value ?? "";
+    });
   }
   if (fields) {
-    const flatFields = fields.flat();
+    const flatFields = flattenFields2(fields);
     for (const field of flatFields) {
       const key = field.name;
       if (defaults[key] === void 0) {
@@ -5490,10 +5483,21 @@ function getDefaultValues(entity, fields) {
   }
   return defaults;
 }
+var flattenFields2 = (fields) => {
+  const result = [];
+  for (const field of fields) {
+    if (Array.isArray(field)) {
+      result.push(...flattenFields2(field));
+    } else if (field.fields) {
+      result.push(...flattenFields2(field.fields));
+    } else {
+      result.push(field);
+    }
+  }
+  return result;
+};
 var getDynamicSchema = (fields, extraValidations) => {
-  const flatFields = fields.flatMap(
-    (f) => Array.isArray(f) ? f : [f]
-  );
+  const flatFields = flattenFields2(fields);
   const shape = flatFields.reduce((acc, f) => {
     acc[f.name] = f.zodType ?? z2.any();
     return acc;
@@ -5506,12 +5510,26 @@ var getDynamicSchema = (fields, extraValidations) => {
   }
   return schema;
 };
+var flattenFields3 = (fields) => {
+  const result = [];
+  for (const field of fields) {
+    if (Array.isArray(field)) {
+      result.push(...flattenFields3(field));
+    } else if (field.fields) {
+      result.push(...flattenFields3(field.fields));
+    } else {
+      result.push(field);
+    }
+  }
+  return result;
+};
 var FormErrorsAlert = ({
   formState,
   fields
 }) => {
-  const flatFields = fields.flatMap((f) => Array.isArray(f) ? f : [f]);
-  return /* @__PURE__ */ jsx("div", { style: { marginTop: 4 }, children: Object.entries(formState.errors).length > 0 && /* @__PURE__ */ jsx(
+  const flatFields = flattenFields3(fields);
+  const hasErrors = Object.keys(formState.errors).length > 0;
+  return /* @__PURE__ */ jsx("div", { style: { marginTop: 4 }, children: hasErrors && /* @__PURE__ */ jsx(
     CustomAlert,
     {
       title: "Revisar los siguientes criterios",
@@ -5533,55 +5551,48 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   return foundField?.label ?? fieldErrorKey;
 };
 var isRenderableChild = (c) => c !== void 0 && c !== null && typeof c !== "function";
+var isFieldProps = (f) => !Array.isArray(f);
 var FormFieldsGrid = ({
   fields,
   form,
   isPending,
   readOnly,
   className = "",
-  gap = "gap-2"
+  gap = "gap-4"
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map(
-    (inputOrGroup, idx) => Array.isArray(inputOrGroup) ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "w-full flex flex-row items-start gap-4 py-3",
-        children: inputOrGroup.map((field, subIdx) => {
-          const fieldCopy = {
-            ...field,
-            disabled: readOnly ? true : field.disabled
-          };
-          const renderInlineChild = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
-          const renderInlineChildDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
-          return /* @__PURE__ */ jsxs("div", { className: "w-full px-2", children: [
-            renderInlineChild && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
-            InputFactory.create(fieldCopy, form, isPending),
-            renderInlineChildDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
-          ] }, `field-${idx}-${subIdx}`);
-        })
-      },
-      `field-group-${idx}`
-    ) : /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "flex flex-col justify-between py-3 w-full px-2",
-        children: (() => {
-          const fieldCopy = {
-            ...inputOrGroup,
-            disabled: readOnly ? true : inputOrGroup.disabled
-          };
-          const renderUp = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
-          const renderDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            renderUp && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
-            InputFactory.create(fieldCopy, form, isPending),
-            renderDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
-          ] });
-        })()
-      },
-      `field-single-${idx}`
-    )
-  ) });
+  const renderField = (field) => {
+    const fieldCopy = { ...field, disabled: readOnly ? true : field.disabled };
+    const renderUp = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
+    const renderDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
+    const dirClass = fieldCopy.direction === "row" ? "flex flex-row items-center gap-4" : "flex flex-col gap-2";
+    return /* @__PURE__ */ jsxs("div", { className: `${dirClass} w-full`, children: [
+      renderUp && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
+      InputFactory.create(fieldCopy, form, isPending),
+      renderDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
+    ] });
+  };
+  const renderColumn = (col) => {
+    if (col.length === 0) return null;
+    const colDirection = isFieldProps(col[0]) && col[0].direction === "row" ? "flex flex-row gap-4" : "flex flex-col gap-2";
+    return /* @__PURE__ */ jsx("div", { className: `${colDirection} flex-1`, children: col.map((item, idx) => {
+      if (isFieldProps(item)) return renderField(item);
+      if (Array.isArray(item)) return renderColumn(item);
+      return null;
+    }) });
+  };
+  const renderRow = (row) => {
+    if (row.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "w-full flex flex-row gap-4 py-2", children: row.map((col, idx) => {
+      if (isFieldProps(col)) return renderColumn([col]);
+      if (Array.isArray(col)) return renderColumn(col);
+      return null;
+    }) });
+  };
+  return /* @__PURE__ */ jsx("div", { className: `w-full flex flex-col gap-4 ${className}`, children: fields.map((f, idx) => {
+    if (isFieldProps(f)) return /* @__PURE__ */ jsx("div", { children: renderField(f) }, idx);
+    if (Array.isArray(f)) return /* @__PURE__ */ jsx("div", { children: renderRow(f) }, idx);
+    return null;
+  }) });
 };
 var DynamicForm = ({
   formTitle,
@@ -5604,7 +5615,10 @@ var DynamicForm = ({
   submitBtnLabel = "Guardar"
 }) => {
   const [isPending, startTransition] = useTransition();
-  const schema = useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
+  const schema = useMemo(() => {
+    const allFields = flattenFields(fields);
+    return getDynamicSchema(allFields, extraValidations);
+  }, [fields, extraValidations]);
   const resolver = zodResolver(schema);
   const initialValues = useMemo(() => getDefaultValues(record), [record]);
   const form = useForm({
@@ -5640,7 +5654,13 @@ var DynamicForm = ({
       ] }),
       childrenHeader && /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children: childrenHeader })
     ] }),
-    withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsx(FormErrorsAlert, { formState: form.formState, fields }),
+    withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsx(
+      FormErrorsAlert,
+      {
+        formState: form.formState,
+        fields
+      }
+    ),
     /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
       "form",
       {
@@ -5648,10 +5668,17 @@ var DynamicForm = ({
         className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "w-full grid grid-cols-1", children: [
-            /* @__PURE__ */ jsx(FormFieldsGrid, { fields, form, readOnly }),
+            /* @__PURE__ */ jsx(
+              FormFieldsGrid,
+              {
+                fields,
+                form,
+                readOnly
+              }
+            ),
             children && /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
           ] }),
-          /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex flex-row  w-full", children: [
+          /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex flex-row w-full", children: [
             listBtnConfig.map((btn, key) => /* @__PURE__ */ jsx(
               Button,
               {
@@ -5686,7 +5713,13 @@ var DynamicForm = ({
         ]
       }
     ) }),
-    withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsx(FormErrorsAlert, { formState: form.formState, fields })
+    withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsx(
+      FormErrorsAlert,
+      {
+        formState: form.formState,
+        fields: fields.flatMap((f) => Array.isArray(f) ? f : [f])
+      }
+    )
   ] });
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: formContent }) });
@@ -5866,6 +5899,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, 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, inputFieldComp, mockFields, useFormField, validationMessages };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map