shadcn-zod-formkit 1.22.3 → 1.23.0

package/dist/index.d.mts

@@ -79,8 +79,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>> {
+type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<T, RT>[];
+interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
     label: string;
     onChange?: (...event: any[]) => void;
@@ -89,7 +89,7 @@ interface FieldProps<T = Record<string, any>> {
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     direction?: 'row' | 'col';
-    repeaterFields?: Array<FieldProps | FieldProps[]>;
+    repeaterFields?: FieldConfig<RT>;
     minItems?: number;
     maxItems?: number;
     currencyFormat?: Intl.NumberFormatOptions;
@@ -219,13 +219,17 @@ interface Props$4<T extends Record<string, any>> {
     withErrorsAlert?: boolean;
     errorAlertPosition?: alertPositionType;
     withCard?: boolean;
+    withFormWrapper?: boolean;
+    withSubmitBtn?: boolean;
     submitBtnLabel?: string;
+    submitBtnLabelSubmiting?: string;
     submitBtnClass?: string;
+    btnGroupDirection?: 'flex-start' | 'flex-end' | 'flex-center';
     children?: ReactNode;
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$4<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;

package/dist/index.d.ts

@@ -79,8 +79,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>> {
+type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<T, RT>[];
+interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
     label: string;
     onChange?: (...event: any[]) => void;
@@ -89,7 +89,7 @@ interface FieldProps<T = Record<string, any>> {
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     direction?: 'row' | 'col';
-    repeaterFields?: Array<FieldProps | FieldProps[]>;
+    repeaterFields?: FieldConfig<RT>;
     minItems?: number;
     maxItems?: number;
     currencyFormat?: Intl.NumberFormatOptions;
@@ -219,13 +219,17 @@ interface Props$4<T extends Record<string, any>> {
     withErrorsAlert?: boolean;
     errorAlertPosition?: alertPositionType;
     withCard?: boolean;
+    withFormWrapper?: boolean;
+    withSubmitBtn?: boolean;
     submitBtnLabel?: string;
+    submitBtnLabelSubmiting?: string;
     submitBtnClass?: string;
+    btnGroupDirection?: 'flex-start' | 'flex-end' | 'flex-center';
     children?: ReactNode;
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$4<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;

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, ChevronsUpDown, Check, Upload, GripVertical, SearchIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Loader2, Save, Pencil, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, Trash2, ChevronsUpDown, Check, Upload, GripVertical, SearchIcon, CircleIcon } from 'lucide-react';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
@@ -5551,49 +5551,55 @@ 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-4"
+  gap = "gap-2"
 }) => {
-  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-col sm:flex-row sm:items-center sm:gap-x-4 gap-y-2 flex-wrap" : "flex flex-col gap-2";
-    return /* @__PURE__ */ jsxs("div", { className: dirClass, children: [
-      renderUp && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
-      InputFactory.create(fieldCopy, form, isPending),
-      renderDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
-    ] });
-  };
-  const renderColumn = (col, parentKey = "") => {
-    if (col.length === 0) return null;
-    const colDirection = isFieldProps(col[0]) && col[0].direction === "row" ? "flex flex-col sm:flex-row sm:items-center sm:gap-x-4 gap-y-2 flex-wrap" : "flex flex-col w-full";
-    return /* @__PURE__ */ jsx("div", { className: colDirection, children: col.map((item, idx) => {
-      if (isFieldProps(item))
-        return /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-[200px]", children: renderField(item) }, `${parentKey}${item.name.toString()}-${idx}`);
-      if (Array.isArray(item)) return renderColumn(item, `${parentKey}col${idx}-`);
-      return null;
-    }) });
-  };
-  const renderRow = (row, parentKey = "") => {
-    if (row.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col sm:flex-row sm:gap-x-4 gap-y-2 py-2 flex-wrap gap-4", children: row.map((col, idx) => {
-      if (isFieldProps(col)) return renderColumn([col], `${parentKey}row${idx}-`);
-      if (Array.isArray(col)) return renderColumn(col, `${parentKey}row${idx}-`);
-      return null;
-    }) });
-  };
-  return /* @__PURE__ */ jsx("div", { className: `w-full flex flex-col ${gap} ${className}`, children: fields.map((f, idx) => {
-    if (isFieldProps(f)) return /* @__PURE__ */ jsx("div", { children: renderField(f) }, `field-${f.name.toString()}-${idx}`);
-    if (Array.isArray(f)) return /* @__PURE__ */ jsx("div", { children: renderRow(f, `row-${idx}-`) }, `row-${idx}`);
-    return null;
-  }) });
+  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}`
+    )
+  ) });
 };
 var DynamicForm = ({
   formTitle,
@@ -5611,9 +5617,13 @@ var DynamicForm = ({
   withErrorsAlert = true,
   errorAlertPosition = "up",
   withCard = false,
-  submitBtnClass = "",
+  submitBtnClass,
   listBtnConfig = [],
-  submitBtnLabel = "Guardar"
+  submitBtnLabel = "Guardar",
+  submitBtnLabelSubmiting = "Guardando...",
+  withFormWrapper = true,
+  btnGroupDirection = "flex-end",
+  withSubmitBtn = true
 }) => {
   const [isPending, startTransition] = useTransition();
   const schema = useMemo(() => {
@@ -5644,6 +5654,56 @@ var DynamicForm = ({
     const resp = { data, form };
     onClick(resp);
   };
+  const formBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full grid grid-cols-1", children: [
+      /* @__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 h-full", style: {
+      justifyContent: btnGroupDirection,
+      // Alinea horizontalmente a la derecha
+      alignItems: "center"
+      // Centra verticalmente (opcional)
+    }, children: [
+      listBtnConfig.map((btn, key) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: btn.btnType,
+          size: "icon-lg",
+          className: submitBtnClass,
+          variant: btn.variant,
+          onClick: btn.onClick,
+          disabled: btn.disabled,
+          children: btn.label
+        },
+        key
+      )),
+      !readOnly && withSubmitBtn && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: onClick ? "button" : "submit",
+          size: "icon-lg",
+          className: cn("text-lg", submitBtnClass),
+          disabled: isPending,
+          onClick: onClick ? handleClick : void 0,
+          children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 mr-2 animate-spin" }),
+            submitBtnLabelSubmiting
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Save, { className: "h-5 w-5 mr-2" }),
+            submitBtnLabel
+          ] })
+        }
+      )
+    ] })
+  ] });
   const formContent = /* @__PURE__ */ jsxs("div", { children: [
     showFormHeader && /* @__PURE__ */ jsxs(CardTitle, { className: "flex flex-row items-center gap-2 p-2 border-b", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2 w-full", children: [
@@ -5662,58 +5722,8 @@ var DynamicForm = ({
         fields
       }
     ),
-    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: form.handleSubmit(handleSubmit),
-        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
-              }
-            ),
-            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: [
-            listBtnConfig.map((btn, key) => /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: btn.btnType,
-                size: "lg",
-                className: submitBtnClass,
-                variant: btn.variant,
-                onClick: btn.onClick,
-                disabled: btn.disabled,
-                children: btn.label
-              },
-              key
-            )),
-            !readOnly && /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: onClick ? "button" : "submit",
-                size: "lg",
-                className: submitBtnClass,
-                disabled: isPending,
-                onClick: onClick ? handleClick : void 0,
-                children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-                  "Guardando..."
-                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Save, { className: "h-4 w-4 mr-2" }),
-                  submitBtnLabel
-                ] })
-              }
-            )
-          ] })
-        ]
-      }
-    ) }),
+    withFormWrapper && /* @__PURE__ */ jsx(FormWrapper, { form, handleSubmit, children: formBody }),
+    !withFormWrapper && formBody,
     withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsx(
       FormErrorsAlert,
       {
@@ -5725,6 +5735,16 @@ var DynamicForm = ({
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: formContent }) });
 };
+var FormWrapper = ({ form, handleSubmit, children, readOnly }) => {
+  return /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      onSubmit: form.handleSubmit(handleSubmit),
+      className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
+      children
+    }
+  ) });
+};
 var DynamicFormExample = () => {
   const record = {
     username: "John Doe ",