shadcn-zod-formkit 1.13.0 → 1.15.0

package/dist/index.cjs

@@ -196,11 +196,10 @@ var validationMessages = {
 
 // src/components/custom/form/inputs/base/base-input.ts
 var BaseInput = class {
-  constructor(input, form, isSubmitting, children) {
+  constructor(input, form, isSubmitting) {
     this.input = input;
     this.form = form;
     this.isSubmitting = isSubmitting;
-    this.children = children;
   }
 };
 var entityToInputOption = (entitiy, name = "name", description = "description", groupedLabel) => ({
@@ -5403,6 +5402,7 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   const foundField = fields.find((field) => field.name === fieldErrorKey);
   return foundField?.label ?? fieldErrorKey;
 };
+var isRenderableChild = (c) => c !== void 0 && c !== null && typeof c !== "function";
 var FormFieldsGrid = ({
   fields,
   form,
@@ -5412,23 +5412,44 @@ var FormFieldsGrid = ({
   gap = "gap-2"
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map(
-    (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+    (inputOrGroup, idx) => Array.isArray(inputOrGroup) ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        className: "w-full flex flex-row justify-between py-3",
-        children: input.map((field, subIdx) => {
-          if (readOnly) field.disabled = true;
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx);
+        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(
-      "span",
+      "div",
       {
         className: "flex flex-col justify-between py-3 w-full px-2",
-        children: InputFactory.create(input, form, isPending)
+        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-group-${idx}`
+      `field-single-${idx}`
     )
   ) });
 };
@@ -5440,6 +5461,8 @@ var DynamicForm = ({
   record = {},
   onSubmit,
   extraValidations,
+  children,
+  childrenHeader,
   withErrorsAlert = true,
   errorAlertPosition = "up",
   withCard = false,
@@ -5469,12 +5492,18 @@ var DynamicForm = ({
     }
   };
   const formContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center gap-2 p-2 border-b", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-5 w-5" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: formTitle }),
-        formSubTitle && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: formSubTitle })
-      ] })
+    /* @__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: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-xl", children: [
+            formTitle,
+            " "
+          ] }),
+          formSubTitle && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: formSubTitle })
+        ] })
+      ] }),
+      childrenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children: childrenHeader })
     ] }),
     withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields }),
     /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5483,7 +5512,10 @@ var DynamicForm = ({
         onSubmit: form.handleSubmit(handleSubmit),
         className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-1", children: /* @__PURE__ */ jsxRuntime.jsx(FormFieldsGrid, { fields, form, readOnly }) }),
+          /* @__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 })
+          ] }),
           !readOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 justify-end items-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "lg", className: submitBtnClass, disabled: isPending, children: isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
             "Guardando..."