formanitor 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -2180,6 +2180,21 @@ var Section = ({ title, children }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 pt-4 space-y-4 border-t-0", children }) })
   ] });
 };
+var ColumnLayout = ({
+  columns,
+  label,
+  children
+}) => {
+  const gridCols = Math.max(1, Math.min(columns, 12));
+  const gridClass = `grid gap-4 w-full`;
+  const style = {
+    gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+    label != null && label !== "" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-sm font-medium text-gray-700", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: gridClass, style, children })
+  ] });
+};
 var DynamicForm = () => {
   const store = useFormStore();
   const schema = store.getSchema();
@@ -2198,6 +2213,17 @@ var DynamicForm = () => {
       if (node.type === "section") {
         return /* @__PURE__ */ jsxRuntime.jsx(Section, { title: node.title, children: node.children.map((fieldId) => /* @__PURE__ */ jsxRuntime.jsx(FieldRenderer, { fieldId }, fieldId)) }, node.id);
       }
+      if (node.type === "column_layout") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnLayout,
+          {
+            columns: node.columns,
+            label: node.label,
+            children: node.children.map((fieldId) => /* @__PURE__ */ jsxRuntime.jsx(FieldRenderer, { fieldId }, fieldId))
+          },
+          node.id
+        );
+      }
       return null;
     })
   ] });
@@ -2570,6 +2596,29 @@ var ReadOnlyForm = ({ schema, submission }) => {
           fieldId
         )) }, node.id);
       }
+      if (node.type === "column_layout") {
+        const visibleFields = node.children.map((fieldId) => {
+          const fieldDef = fieldMap.get(fieldId);
+          return fieldDef ? { fieldId, fieldDef } : null;
+        }).filter((f) => f !== null);
+        if (visibleFields.length === 0) return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnLayout,
+          {
+            columns: node.columns,
+            label: node.label,
+            children: visibleFields.map(({ fieldId, fieldDef }) => /* @__PURE__ */ jsxRuntime.jsx(
+              ReadOnlyFieldRenderer,
+              {
+                fieldDef,
+                value: formData[fieldId]
+              },
+              fieldId
+            ))
+          },
+          node.id
+        );
+      }
       return null;
     })
   ] });