shadcn-zod-formkit 1.22.3 → 1.23.0

package/dist/index.cjs

@@ -5589,49 +5589,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__ */ jsxRuntime.jsxs("div", { className: dirClass, children: [
-      renderUp && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
-      InputFactory.create(fieldCopy, form, isPending),
-      renderDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: colDirection, children: col.map((item, idx) => {
-      if (isFieldProps(item))
-        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `w-full flex flex-col ${gap} ${className}`, children: fields.map((f, idx) => {
-    if (isFieldProps(f)) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderField(f) }, `field-${f.name.toString()}-${idx}`);
-    if (Array.isArray(f)) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderRow(f, `row-${idx}-`) }, `row-${idx}`);
-    return null;
-  }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map(
+    (inputOrGroup, idx) => Array.isArray(inputOrGroup) ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "w-full px-2", children: [
+            renderInlineChild && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
+            InputFactory.create(fieldCopy, form, isPending),
+            renderInlineChildDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children })
+          ] }, `field-${idx}-${subIdx}`);
+        })
+      },
+      `field-group-${idx}`
+    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            renderUp && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
+            InputFactory.create(fieldCopy, form, isPending),
+            renderDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children })
+          ] });
+        })()
+      },
+      `field-single-${idx}`
+    )
+  ) });
 };
 var DynamicForm = ({
   formTitle,
@@ -5649,9 +5655,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] = React3.useTransition();
   const schema = React3.useMemo(() => {
@@ -5682,6 +5692,56 @@ var DynamicForm = ({
     const resp = { data, form };
     onClick(resp);
   };
+  const formBody = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full grid grid-cols-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormFieldsGrid,
+        {
+          fields,
+          form,
+          readOnly
+        }
+      ),
+      children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: onClick ? "button" : "submit",
+          size: "icon-lg",
+          className: cn("text-lg", submitBtnClass),
+          disabled: isPending,
+          onClick: onClick ? handleClick : void 0,
+          children: isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 mr-2 animate-spin" }),
+            submitBtnLabelSubmiting
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-5 w-5 mr-2" }),
+            submitBtnLabel
+          ] })
+        }
+      )
+    ] })
+  ] });
   const formContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     showFormHeader && /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex flex-row items-center gap-2 p-2 border-b", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-2 w-full", children: [
@@ -5700,58 +5760,8 @@ var DynamicForm = ({
         fields
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "form",
-      {
-        onSubmit: form.handleSubmit(handleSubmit),
-        className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full grid grid-cols-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              FormFieldsGrid,
-              {
-                fields,
-                form,
-                readOnly
-              }
-            ),
-            children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { className: "flex flex-row w-full", children: [
-            listBtnConfig.map((btn, key) => /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                type: btn.btnType,
-                size: "lg",
-                className: submitBtnClass,
-                variant: btn.variant,
-                onClick: btn.onClick,
-                disabled: btn.disabled,
-                children: btn.label
-              },
-              key
-            )),
-            !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                type: onClick ? "button" : "submit",
-                size: "lg",
-                className: submitBtnClass,
-                disabled: isPending,
-                onClick: onClick ? handleClick : void 0,
-                children: isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-                  "Guardando..."
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4 mr-2" }),
-                  submitBtnLabel
-                ] })
-              }
-            )
-          ] })
-        ]
-      }
-    ) }),
+    withFormWrapper && /* @__PURE__ */ jsxRuntime.jsx(FormWrapper, { form, handleSubmit, children: formBody }),
+    !withFormWrapper && formBody,
     withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsxRuntime.jsx(
       FormErrorsAlert,
       {
@@ -5763,6 +5773,16 @@ var DynamicForm = ({
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: formContent }) });
 };
+var FormWrapper = ({ form, handleSubmit, children, readOnly }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.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 ",