shadcn-zod-formkit 1.13.0 → 1.14.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;

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;

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}`
     )
   ) });
 };