shadcn-zod-formkit 1.13.0 → 1.15.0

package/dist/index.d.mts

@@ -80,6 +80,8 @@ declare const inputFieldComp: InputTypes[];
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
+    childrenPosition?: 'up' | 'down';
+    children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     repeaterFields?: Array<FieldProps | FieldProps[]>;
     minItems?: number;
@@ -173,12 +175,11 @@ declare enum TextInputType {
     PASSWORD = "password"
 }
 
-declare abstract class BaseInput<T = unknown> {
+declare abstract class BaseInput {
     protected readonly input: FieldProps;
     protected readonly form: UseFormReturn;
     protected readonly isSubmitting?: boolean | undefined;
-    protected readonly children?: ReactNode | ((item: T, index: number) => ReactNode);
-    constructor(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean | undefined, children?: ReactNode | ((item: T, index: number) => ReactNode));
+    constructor(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean | undefined);
     abstract render(): JSX.Element;
 }
 declare const entityToInputOption: (entitiy: any, name?: string, description?: string, groupedLabel?: string) => InputOption;
@@ -204,8 +205,10 @@ interface Props$4<T extends Record<string, any>> {
     withCard?: boolean;
     submitBtnLabel?: string;
     submitBtnClass?: string;
+    children?: ReactNode;
+    childrenHeader?: ReactNode;
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, extraValidations, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, extraValidations, children, childrenHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: 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

@@ -80,6 +80,8 @@ declare const inputFieldComp: InputTypes[];
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
+    childrenPosition?: 'up' | 'down';
+    children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     repeaterFields?: Array<FieldProps | FieldProps[]>;
     minItems?: number;
@@ -173,12 +175,11 @@ declare enum TextInputType {
     PASSWORD = "password"
 }
 
-declare abstract class BaseInput<T = unknown> {
+declare abstract class BaseInput {
     protected readonly input: FieldProps;
     protected readonly form: UseFormReturn;
     protected readonly isSubmitting?: boolean | undefined;
-    protected readonly children?: ReactNode | ((item: T, index: number) => ReactNode);
-    constructor(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean | undefined, children?: ReactNode | ((item: T, index: number) => ReactNode));
+    constructor(input: FieldProps, form: UseFormReturn, isSubmitting?: boolean | undefined);
     abstract render(): JSX.Element;
 }
 declare const entityToInputOption: (entitiy: any, name?: string, description?: string, groupedLabel?: string) => InputOption;
@@ -204,8 +205,10 @@ interface Props$4<T extends Record<string, any>> {
     withCard?: boolean;
     submitBtnLabel?: string;
     submitBtnClass?: string;
+    children?: ReactNode;
+    childrenHeader?: ReactNode;
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, extraValidations, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, extraValidations, children, childrenHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: 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

@@ -159,11 +159,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) => ({
@@ -5366,6 +5365,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,
@@ -5375,23 +5375,44 @@ var FormFieldsGrid = ({
   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",
+    (inputOrGroup, idx) => Array.isArray(inputOrGroup) ? /* @__PURE__ */ jsx(
+      "div",
       {
-        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);
+        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(
-      "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__ */ jsxs(Fragment, { children: [
+            renderUp && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
+            InputFactory.create(fieldCopy, form, isPending),
+            renderDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
+          ] });
+        })()
       },
-      `field-group-${idx}`
+      `field-single-${idx}`
     )
   ) });
 };
@@ -5403,6 +5424,8 @@ var DynamicForm = ({
   record = {},
   onSubmit,
   extraValidations,
+  children,
+  childrenHeader,
   withErrorsAlert = true,
   errorAlertPosition = "up",
   withCard = false,
@@ -5432,12 +5455,18 @@ var DynamicForm = ({
     }
   };
   const formContent = /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 p-2 border-b", children: [
-      /* @__PURE__ */ jsx(Pencil, { className: "h-5 w-5" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx("p", { children: formTitle }),
-        formSubTitle && /* @__PURE__ */ jsx(CardDescription, { children: formSubTitle })
-      ] })
+    /* @__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: [
+        /* @__PURE__ */ jsx(Pencil, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs(CardTitle, { className: "text-xl", children: [
+            formTitle,
+            " "
+          ] }),
+          formSubTitle && /* @__PURE__ */ jsx(CardDescription, { children: formSubTitle })
+        ] })
+      ] }),
+      childrenHeader && /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children: childrenHeader })
     ] }),
     withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsx(FormErrorsAlert, { formState: form.formState, fields }),
     /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
@@ -5446,7 +5475,10 @@ var DynamicForm = ({
         onSubmit: form.handleSubmit(handleSubmit),
         className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "w-full grid grid-cols-1", children: /* @__PURE__ */ jsx(FormFieldsGrid, { fields, form, readOnly }) }),
+          /* @__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 })
+          ] }),
           !readOnly && /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 justify-end items-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "lg", className: submitBtnClass, disabled: isPending, children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
             "Guardando..."