shadcn-zod-formkit 1.21.1 → 1.22.1

package/dist/index.cjs

@@ -5602,8 +5602,8 @@ 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-row items-center gap-4" : "flex flex-col gap-2";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${dirClass} w-full`, children: [
+    const dirClass = fieldCopy.direction === "row" ? "flex flex-col sm:flex-row sm:items-center sm:gap-x-4 gap-y-2 w-full flex-wrap" : "flex flex-col gap-2 w-full";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: dirClass, children: [
       renderUp && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
       InputFactory.create(fieldCopy, form, isPending),
       renderDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children })
@@ -5611,22 +5611,22 @@ var FormFieldsGrid = ({
   };
   const renderColumn = (col) => {
     if (col.length === 0) return null;
-    const colDirection = isFieldProps(col[0]) && col[0].direction === "row" ? "flex flex-row gap-4" : "flex flex-col gap-2";
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${colDirection} flex-1`, children: col.map((item, idx) => {
-      if (isFieldProps(item)) return renderField(item);
+    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 w-full flex-wrap" : "flex flex-col gap-2 w-full";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: colDirection, children: col.map((item, idx) => {
+      if (isFieldProps(item)) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-[200px]", children: renderField(item) }, idx);
       if (Array.isArray(item)) return renderColumn(item);
       return null;
     }) });
   };
   const renderRow = (row) => {
     if (row.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-row gap-4 py-2", children: row.map((col, idx) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full flex flex-col sm:flex-row sm:gap-x-4 gap-y-2 py-2 flex-wrap gap-2`, children: row.map((col, idx) => {
       if (isFieldProps(col)) return renderColumn([col]);
       if (Array.isArray(col)) return renderColumn(col);
       return null;
     }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full flex flex-col gap-4 ${className}`, children: fields.map((f, idx) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full flex flex-col ${gap} ${className}`, children: fields.map((f, idx) => {
     if (isFieldProps(f)) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderField(f) }, idx);
     if (Array.isArray(f)) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderRow(f) }, idx);
     return null;