shadcn-zod-formkit 1.7.0 → 1.9.0

package/dist/index.d.mts

@@ -70,12 +70,13 @@ declare enum InputTypes {
     BUTTON_GROUP = "button_group",
     CURRENCY = "currency",
     KEY_VALUE = "key_value",
-    REPEATER = "repeater"
+    REPEATER = "repeater",
+    MULTI_SELECT = "multi_select"
 }
 declare const inputFieldComp: InputTypes[];
 
-interface FieldProps {
-    name: string;
+interface FieldProps<T = Record<string, any>> {
+    name: keyof T;
     label: string;
     repeaterFields?: Array<FieldProps | FieldProps[]>;
     minItems?: number;
@@ -181,14 +182,14 @@ declare const entitiesToGroupedOption: (data: any[], optionValue?: string) => Gr
 
 type alertPositionType = 'up' | 'down';
 interface FormResp<T> {
-    form?: UseFormReturn;
+    form?: UseFormReturn<any>;
     data: T;
 }
 interface Props$4<T extends Record<string, any>> {
     formTitle: string;
     formSubTitle?: string;
     readOnly?: boolean;
-    fields: Array<FieldProps | FieldProps[]>;
+    fields: Array<FieldProps<T> | FieldProps<T>[]>;
     record?: Partial<T>;
     onSubmit?: (resp: FormResp<T>) => void;
     extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[];
@@ -203,17 +204,18 @@ declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubT
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;
 
-interface Props$3<T extends FieldValues> {
-    formState: FormState<T>;
-    fields: Array<FieldProps | FieldProps[]>;
+interface Props$3<T extends FieldValues = Record<string, any>> {
+    formState: FormState<any>;
+    fields: Array<FieldProps<T> | FieldProps<T>[]>;
 }
-declare const FormErrorsAlert: <T extends FieldValues>({ 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(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean): JSX.Element;
+    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: T): Record<string, any>;
-declare const getDynamicSchema: (fields: Array<FieldProps | FieldProps[]>, extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[]) => ZodObject<any>;
+declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<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 class CheckListInput extends BaseInput {
     render(): JSX.Element;
@@ -422,4 +424,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, 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, 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, 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 };

package/dist/index.d.ts

@@ -70,12 +70,13 @@ declare enum InputTypes {
     BUTTON_GROUP = "button_group",
     CURRENCY = "currency",
     KEY_VALUE = "key_value",
-    REPEATER = "repeater"
+    REPEATER = "repeater",
+    MULTI_SELECT = "multi_select"
 }
 declare const inputFieldComp: InputTypes[];
 
-interface FieldProps {
-    name: string;
+interface FieldProps<T = Record<string, any>> {
+    name: keyof T;
     label: string;
     repeaterFields?: Array<FieldProps | FieldProps[]>;
     minItems?: number;
@@ -181,14 +182,14 @@ declare const entitiesToGroupedOption: (data: any[], optionValue?: string) => Gr
 
 type alertPositionType = 'up' | 'down';
 interface FormResp<T> {
-    form?: UseFormReturn;
+    form?: UseFormReturn<any>;
     data: T;
 }
 interface Props$4<T extends Record<string, any>> {
     formTitle: string;
     formSubTitle?: string;
     readOnly?: boolean;
-    fields: Array<FieldProps | FieldProps[]>;
+    fields: Array<FieldProps<T> | FieldProps<T>[]>;
     record?: Partial<T>;
     onSubmit?: (resp: FormResp<T>) => void;
     extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[];
@@ -203,17 +204,18 @@ declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubT
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;
 
-interface Props$3<T extends FieldValues> {
-    formState: FormState<T>;
-    fields: Array<FieldProps | FieldProps[]>;
+interface Props$3<T extends FieldValues = Record<string, any>> {
+    formState: FormState<any>;
+    fields: Array<FieldProps<T> | FieldProps<T>[]>;
 }
-declare const FormErrorsAlert: <T extends FieldValues>({ 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(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean): JSX.Element;
+    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: T): Record<string, any>;
-declare const getDynamicSchema: (fields: Array<FieldProps | FieldProps[]>, extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[]) => ZodObject<any>;
+declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<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 class CheckListInput extends BaseInput {
     render(): JSX.Element;
@@ -422,4 +424,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, 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, 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, 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 };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Pencil, Loader2, Save, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, Trash2, Upload, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Pencil, Loader2, Save, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, ChevronsUpDown, Check, Trash2, Upload, SearchIcon, CircleIcon } from 'lucide-react';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
@@ -25,6 +25,7 @@ import { useTheme } from 'next-themes';
 import { Toaster as Toaster$1 } from 'sonner';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Command as Command$1 } from 'cmdk';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import z2 from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -229,9 +230,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["CURRENCY"] = "currency";
   InputTypes2["KEY_VALUE"] = "key_value";
   InputTypes2["REPEATER"] = "repeater";
+  InputTypes2["MULTI_SELECT"] = "multi_select";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "multi_select" /* MULTI_SELECT */,
   "repeater" /* REPEATER */,
   "key_value" /* KEY_VALUE */,
   "currency" /* CURRENCY */,
@@ -4007,6 +4010,201 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
     }
   );
 };
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx(
+          Command$1.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var MultiSelectInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsx(FieldMultiSelect, { input, form, isSubmitting });
+  }
+};
+var FieldMultiSelect = ({ form, input, isSubmitting }) => {
+  const mockInputOptions = [
+    { id: 1, name: "PERMISO 1" },
+    { id: 2, name: "PERMISO 2" },
+    { id: 3, name: "PERMISO 3" },
+    { id: 4, name: "PERMISO 4" }
+  ];
+  const lista = input?.listConfig?.list ?? mockInputOptions;
+  const optionValue = input?.listConfig?.optionValue ?? input.optionValue ?? "id";
+  const getValue = (item) => {
+    if (optionValue === "name") return item[optionValue];
+    return item.value ?? item.id;
+  };
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        const selectedValues = Array.isArray(field.value) ? field.value : [];
+        const toggleOption = (value) => {
+          const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
+          field.onChange(newValues);
+        };
+        return /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-col rounded-lg border p-3 shadow bg-blue-100/20", children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
+          input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                role: "combobox",
+                disabled: input.disabled || isSubmitting,
+                className: cn(
+                  "justify-between w-full bg-black/10 dark:bg-white/10",
+                  !selectedValues.length && "text-muted-foreground"
+                ),
+                children: [
+                  selectedValues.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: selectedValues.map((val) => {
+                    const option = lista.find(
+                      (item) => getValue(item).toString() === val
+                    );
+                    return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: option?.name ?? val }, val);
+                  }) }) : /* @__PURE__ */ jsx("span", { children: input.placeHolder ?? "Selecciona..." }),
+                  /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 opacity-50" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "p-0 w-[var(--radix-popover-trigger-width)]", children: /* @__PURE__ */ jsxs(Command, { children: [
+              /* @__PURE__ */ jsx(CommandInput, { placeholder: "Buscar..." }),
+              /* @__PURE__ */ jsxs(CommandList, { children: [
+                /* @__PURE__ */ jsx(CommandEmpty, { children: "No hay resultados." }),
+                /* @__PURE__ */ jsx(CommandGroup, { children: lista.map((item) => {
+                  const value = getValue(item).toString();
+                  const selected = selectedValues.includes(value);
+                  return /* @__PURE__ */ jsxs(
+                    CommandItem,
+                    {
+                      onSelect: () => toggleOption(value),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Check,
+                          {
+                            className: cn(
+                              "mr-2 h-4 w-4",
+                              selected ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        item.name
+                      ]
+                    },
+                    value
+                  );
+                }) })
+              ] })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+};
 var TextInputGroup = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -4804,6 +5002,7 @@ var inputMap = {
   ["currency" /* CURRENCY */]: CurrencyInput,
   ["key_value" /* KEY_VALUE */]: KeyValueListInput,
   ["repeater" /* REPEATER */]: RepeaterInput,
+  ["multi_select" /* MULTI_SELECT */]: MultiSelectInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -4829,6 +5028,7 @@ var InputFactory = class {
 };
 function getDefaultValues(entity) {
   const defaults = {};
+  if (!entity) return defaults;
   for (const key in entity) {
     const value = entity[key];
     if (value === null || value === void 0) {
@@ -4859,26 +5059,31 @@ function getDefaultValues(entity) {
   return defaults;
 }
 var getDynamicSchema = (fields, extraValidations) => {
-  const flatFields = fields.flatMap((f) => Array.isArray(f) ? f : [f]);
-  const shape = {};
-  flatFields.forEach((f) => {
-    shape[f.name] = f.zodType ?? z2.any();
-  });
+  const flatFields = fields.flatMap(
+    (f) => Array.isArray(f) ? f : [f]
+  );
+  const shape = flatFields.reduce((acc, f) => {
+    acc[f.name] = f.zodType ?? z2.any();
+    return acc;
+  }, {});
   let schema = z2.object(shape);
-  if (extraValidations && extraValidations.length > 0) {
-    extraValidations.forEach((fn) => {
+  if (extraValidations?.length) {
+    for (const fn of extraValidations) {
       schema = fn(schema);
-    });
+    }
   }
   return schema;
 };
-var FormErrorsAlert = ({ formState, fields }) => {
+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(
     CustomAlert,
     {
       title: "Revisar los siguientes criterios",
-      description: /* @__PURE__ */ jsx("ul", { children: Object.entries(formState?.errors).map(([key, value]) => /* @__PURE__ */ jsxs("li", { children: [
+      description: /* @__PURE__ */ jsx("ul", { children: Object.entries(formState.errors).map(([key, value]) => /* @__PURE__ */ jsxs("li", { children: [
         /* @__PURE__ */ jsxs("strong", { children: [
           getFieldLabel(key, flatFields),
           ":"
@@ -4892,15 +5097,36 @@ var FormErrorsAlert = ({ formState, fields }) => {
   ) });
 };
 var getFieldLabel = (fieldErrorKey, fields) => {
-  const findedField = fields.find((field) => field.name == fieldErrorKey);
-  return findedField?.label ?? fieldErrorKey;
+  const foundField = fields.find((field) => field.name === fieldErrorKey);
+  return foundField?.label ?? fieldErrorKey;
 };
-var FormFieldsGrid = ({ fields, form, isPending, readOnly, className = "", gap = "gap-2" }) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: fields.map(
-    (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsx("span", { className: "w-full  flex flex-row justify-between py-3", children: input.map((field, subIdx) => {
-      if (readOnly) field.disabled = readOnly;
-      return /* @__PURE__ */ jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx);
-    }) }, `field-group-${idx}`) : /* @__PURE__ */ jsx("span", { className: "flex flex-col justify-between py-3 w-full px-2", children: InputFactory.create(input, form, isPending) }, `field-group-${idx}`)
+var FormFieldsGrid = ({
+  fields,
+  form,
+  isPending,
+  readOnly,
+  className = "",
+  gap = "gap-2"
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map(
+    (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "w-full flex flex-row justify-between py-3",
+        children: input.map((field, subIdx) => {
+          if (readOnly) field.disabled = true;
+          return /* @__PURE__ */ jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx);
+        })
+      },
+      `field-group-${idx}`
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex flex-col justify-between py-3 w-full px-2",
+        children: InputFactory.create(input, form, isPending)
+      },
+      `field-group-${idx}`
+    )
   ) });
 };
 var DynamicForm = ({
@@ -4919,14 +5145,15 @@ var DynamicForm = ({
 }) => {
   const [isPending, startTransition] = useTransition();
   const schema = useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
-  const defaultValues = useMemo(() => getDefaultValues(record), [record]);
+  const resolver = zodResolver(schema);
+  const initialValues = useMemo(() => getDefaultValues(record), [record]);
   const form = useForm({
-    resolver: zodResolver(schema),
-    defaultValues
+    resolver,
+    defaultValues: initialValues
   });
   useEffect(() => {
-    form.reset(defaultValues);
-  }, [defaultValues, form]);
+    form.reset(initialValues);
+  }, [initialValues, form]);
   const handleSubmit = (data) => {
     if (readOnly) return;
     try {
@@ -4935,7 +5162,7 @@ var DynamicForm = ({
         onSubmit?.(resp);
       });
     } catch (error) {
-      console.error("Ocurri\xF3 un error al enviar el formulario.");
+      console.error("Ocurri\xF3 un error al enviar el formulario.", error);
     }
   };
   const formContent = /* @__PURE__ */ jsxs("div", { children: [
@@ -4963,8 +5190,7 @@ var DynamicForm = ({
           ] }) }) })
         ]
       }
-    ) }),
-    withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsx(FormErrorsAlert, { formState: form.formState, fields })
+    ) })
   ] });
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: formContent }) });
@@ -5144,6 +5370,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, 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, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map