@invana/forms 0.0.11 → 0.0.12

package/dist/index.d.cts

@@ -66,6 +66,20 @@ type FieldConfig = {
     defaultValue?: string;
     /** Number of visible rows for `textarea` fields. */
     rows?: number;
+    /**
+     * How many grid columns the field spans on `md+` screens. Defaults to `1`.
+     * The grid is two columns by default (see `ObjectField`'s `columns`), so
+     * `colSpan: 2` makes a full-width field (textarea, long URI, …). A span
+     * larger than the column count simply fills the row. Ignored below `md`,
+     * where every field stacks full width.
+     */
+    colSpan?: number;
+    /**
+     * Extra classes merged onto the field's grid cell. Escape hatch for
+     * per-field layout/spacing tweaks (custom width, ordering, margins, …)
+     * without adding a dedicated prop for every case.
+     */
+    className?: string;
 };
 type RowConfig = {
     id: string;
@@ -79,6 +93,12 @@ interface ObjectFieldProps {
     labelPosition?: LabelPosition;
     /** Field density. Defaults to `sm` (compact) for backward compatibility. */
     size?: FieldSize;
+    /**
+     * Number of columns in the field grid on `md+` screens. Defaults to `2`.
+     * Increase it to build wider layouts that fields can span via `colSpan`.
+     * Below `md` the grid always collapses to a single column.
+     */
+    columns?: number;
 }
 
 type AnyValue = any;

package/dist/index.d.ts

@@ -66,6 +66,20 @@ type FieldConfig = {
     defaultValue?: string;
     /** Number of visible rows for `textarea` fields. */
     rows?: number;
+    /**
+     * How many grid columns the field spans on `md+` screens. Defaults to `1`.
+     * The grid is two columns by default (see `ObjectField`'s `columns`), so
+     * `colSpan: 2` makes a full-width field (textarea, long URI, …). A span
+     * larger than the column count simply fills the row. Ignored below `md`,
+     * where every field stacks full width.
+     */
+    colSpan?: number;
+    /**
+     * Extra classes merged onto the field's grid cell. Escape hatch for
+     * per-field layout/spacing tweaks (custom width, ordering, margins, …)
+     * without adding a dedicated prop for every case.
+     */
+    className?: string;
 };
 type RowConfig = {
     id: string;
@@ -79,6 +93,12 @@ interface ObjectFieldProps {
     labelPosition?: LabelPosition;
     /** Field density. Defaults to `sm` (compact) for backward compatibility. */
     size?: FieldSize;
+    /**
+     * Number of columns in the field grid on `md+` screens. Defaults to `2`.
+     * Increase it to build wider layouts that fields can span via `colSpan`.
+     * Below `md` the grid always collapses to a single column.
+     */
+    columns?: number;
 }
 
 type AnyValue = any;

package/dist/index.js

@@ -681,11 +681,6 @@ var Field = {
 function humanize(name) {
   return name.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim();
 }
-function chunk(arr, size) {
-  const out = [];
-  for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
-  return out;
-}
 function renderField(field, parentName, control, labelPosition, size) {
   return /* @__PURE__ */ jsx(
     FormField,
@@ -751,9 +746,38 @@ function renderField(field, parentName, control, labelPosition, size) {
     field.name
   );
 }
-function renderRows(fields, rowConfig, parentName, control, labelPosition, size) {
+function renderGrid(fields, parentName, control, labelPosition, size, columns, key) {
+  const customCols = columns !== 2;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-4",
+        customCols ? "md:[grid-template-columns:repeat(var(--ff-cols),minmax(0,1fr))]" : "md:grid-cols-2"
+      ),
+      style: customCols ? { "--ff-cols": columns } : void 0,
+      children: fields.map((f) => {
+        const span = f.colSpan && f.colSpan > 1 ? f.colSpan : void 0;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              span && "md:[grid-column:span_var(--ff-span)/span_var(--ff-span)]",
+              f.className
+            ),
+            style: span ? { "--ff-span": span } : void 0,
+            children: renderField(f, parentName, control, labelPosition, size)
+          },
+          f.name
+        );
+      })
+    },
+    key
+  );
+}
+function renderRows(fields, rowConfig, parentName, control, labelPosition, size, columns) {
   if (!rowConfig || rowConfig.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: chunk(fields, 2).map((row, i) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition, size)) }, i)) });
+    return renderGrid(fields, parentName, control, labelPosition, size, columns);
   }
   const used = new Set(rowConfig.flatMap((r) => r.fields));
   const unassigned = fields.filter((f) => !used.has(f.name));
@@ -761,16 +785,26 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition, size)
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     rowConfig.map((row) => {
       const rowFields = row.fields.map((n) => byName.get(n)).filter((f) => !!f);
-      return chunk(rowFields, 2).map((cnk, idx) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "grid grid-cols-1 gap-4 md:grid-cols-2",
-          children: cnk.map((f) => renderField(f, parentName, control, labelPosition, size))
-        },
-        `${row.id}-${idx}`
-      ));
+      if (rowFields.length === 0) return null;
+      return renderGrid(
+        rowFields,
+        parentName,
+        control,
+        labelPosition,
+        size,
+        columns,
+        row.id
+      );
     }),
-    unassigned.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: chunk(unassigned, 2).map((row, i) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition, size)) }, `u-${i}`)) })
+    unassigned.length > 0 && renderGrid(
+      unassigned,
+      parentName,
+      control,
+      labelPosition,
+      size,
+      columns,
+      "_unassigned"
+    )
   ] });
 }
 var ObjectField = ({
@@ -779,7 +813,8 @@ var ObjectField = ({
   fields,
   rowConfig,
   labelPosition = "side",
-  size = "sm"
+  size = "sm",
+  columns = 2
 }) => {
   const grouped = fields.reduce((acc, f) => {
     const key = f.group ?? "_ungrouped";
@@ -790,7 +825,15 @@ var ObjectField = ({
   delete grouped["_ungrouped"];
   const groupedEntries = Object.entries(grouped);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(ungrouped, rowConfig, name, control, labelPosition, size) }),
+    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(
+      ungrouped,
+      rowConfig,
+      name,
+      control,
+      labelPosition,
+      size,
+      columns
+    ) }),
     groupedEntries.length > 0 && /* @__PURE__ */ jsx(
       Accordion,
       {
@@ -802,7 +845,15 @@ var ObjectField = ({
             humanize(group),
             " Settings"
           ] }),
-          /* @__PURE__ */ jsx(AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(gFields, rowConfig, name, control, labelPosition, size) }) })
+          /* @__PURE__ */ jsx(AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(
+            gFields,
+            rowConfig,
+            name,
+            control,
+            labelPosition,
+            size,
+            columns
+          ) }) })
         ] }, group))
       }
     )