shadcn-zod-formkit 1.22.3 → 1.22.4

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;

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;

package/dist/index.mjs

@@ -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,