shadcn-zod-formkit 1.8.0 → 1.9.0

package/dist/index.d.mts

@@ -75,8 +75,8 @@ declare enum InputTypes {
 }
 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;
@@ -182,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>)[];
@@ -204,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;
@@ -423,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

@@ -75,8 +75,8 @@ declare enum InputTypes {
 }
 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;
@@ -182,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>)[];
@@ -204,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;
@@ -423,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

@@ -5028,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) {
@@ -5058,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),
           ":"
@@ -5091,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 = ({
@@ -5118,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 {
@@ -5134,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: [
@@ -5162,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 }) });
@@ -5343,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