shadcn-zod-formkit 1.22.0 → 1.22.2

package/dist/index.mjs

@@ -5564,33 +5564,34 @@ var FormFieldsGrid = ({
     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-4 w-full flex-wrap" : "flex flex-col gap-2 w-full";
+    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) => {
+  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-4 w-full flex-wrap" : "flex flex-col gap-2 w-full";
+    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 renderField(item);
-      if (Array.isArray(item)) return renderColumn(item);
+      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) => {
+  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-4 py-2 flex-wrap", children: row.map((col, idx) => {
-      if (isFieldProps(col)) return renderColumn([col]);
-      if (Array.isArray(col)) return renderColumn(col);
+    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) }, idx);
-    if (Array.isArray(f)) return /* @__PURE__ */ jsx("div", { children: renderRow(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;
   }) });
 };