shadcn-zod-formkit 1.21.0 → 1.22.0

package/dist/index.mjs

@@ -5551,63 +5551,46 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   return foundField?.label ?? fieldErrorKey;
 };
 var isRenderableChild = (c) => c !== void 0 && c !== null && typeof c !== "function";
-var isFieldProps = (f) => {
-  return !Array.isArray(f);
-};
+var isFieldProps = (f) => !Array.isArray(f);
 var FormFieldsGrid = ({
   fields,
   form,
   isPending,
   readOnly,
   className = "",
-  gap = "gap-2"
+  gap = "gap-4"
 }) => {
   const renderField = (field) => {
-    const fieldCopy = {
-      ...field,
-      disabled: readOnly ? true : field.disabled
-    };
+    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-row items-center gap-4 w-full px-2" : "flex flex-col gap-2 w-full px-2";
+    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";
     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 renderGroup = (group, groupDirection = "row") => {
-    const dirClass = groupDirection === "row" ? "flex flex-row items-start gap-4 py-3 w-full" : "flex flex-col gap-4 py-3 w-full";
-    return /* @__PURE__ */ jsx("div", { className: dirClass, children: group.map(
-      (f, idx) => isFieldProps(f) ? renderField(f) : Array.isArray(f) ? (
-        // ⚠ Solo soportamos [[FieldProps]] como subgrupo
-        /* @__PURE__ */ jsx("div", { className: "w-full flex flex-row items-start gap-4", children: f.map(
-          (subField) => isFieldProps(subField) ? renderField(subField) : null
-        ) }, idx)
-      ) : null
-    ) });
+  const renderColumn = (col) => {
+    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";
+    return /* @__PURE__ */ jsx("div", { className: colDirection, children: col.map((item, idx) => {
+      if (isFieldProps(item)) return renderField(item);
+      if (Array.isArray(item)) return renderColumn(item);
+      return null;
+    }) });
   };
-  return /* @__PURE__ */ jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map((f, idx) => {
-    if (isFieldProps(f)) {
-      return renderField(f);
-    } else if (Array.isArray(f)) {
-      if (f.length > 0 && Array.isArray(f[0])) {
-        return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 py-3", children: f.map((subGroup, subIdx) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "w-full flex flex-row items-start gap-4",
-            children: Array.isArray(subGroup) && subGroup.map(
-              (subField) => isFieldProps(subField) ? renderField(subField) : null
-            )
-          },
-          subIdx
-        )) }, idx);
-      } else {
-        const firstField = f[0];
-        const direction = firstField?.direction ?? "row";
-        return /* @__PURE__ */ jsx("div", { children: renderGroup(f, direction) }, idx);
-      }
-    }
+  const renderRow = (row) => {
+    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 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);
     return null;
   }) });
 };