hs-uix 1.2.3 → 1.4.0

package/datatable.d.ts

@@ -3,6 +3,7 @@ export {
   DataTableProps,
   DataTableColumn,
   DataTableFilterConfig,
+  DataTableFilterType,
   DataTableGroupBy,
   DataTableSortDirection,
   DataTableSortObject,
@@ -18,4 +19,9 @@ export {
   DataTableSelectionAction,
   DataTableRowAction,
   DataTableSelectAllRequestPayload,
+  DataTableLabels,
+  DataTableSelectionBarRenderContext,
+  DataTableEmptyStateRenderContext,
+  DataTableLoadingStateRenderContext,
+  DataTableErrorStateRenderContext,
 } from "./packages/datatable/index";

package/dist/form.js

@@ -55,6 +55,7 @@ var getEmptyValue = (field) => {
     case "datetime":
       return void 0;
     case "display":
+    case "slot":
     case "crmPropertyList":
     case "crmAssociationPropertyList":
       return void 0;
@@ -198,7 +199,7 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
   const msg = options.messages || {};
-  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
+  if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
   const isRequired = resolveRequired(field, allValues);
   const plugin = fieldTypes && fieldTypes[field.type];
   const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
@@ -262,6 +263,10 @@ var resolveRequired = (field, allValues) => {
   if (typeof field.required === "function") return field.required(allValues);
   return !!field.required;
 };
+var resolveDisabled = (field, allValues) => {
+  if (typeof field.disabled === "function") return field.disabled(allValues);
+  return !!field.disabled;
+};
 var resolveOptions = (field, allValues) => {
   if (typeof field.options === "function") return field.options(allValues);
   return field.options || [];
@@ -417,6 +422,8 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     // explicit row layout array (overrides columns + columnWidth)
     sections,
     // FormBuilderSection[] — accordion field grouping
+    groups,
+    // Record<string, FormBuilderGroupOptions> — per-group rendering options keyed by group name
     gap = "sm",
     // gap between fields
     showRequiredIndicator = true,
@@ -593,7 +600,8 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       "defaultOpen",
       "info",
       "renderBefore",
-      "renderAfter"
+      "renderAfter",
+      "columns"
     ]);
     const SECTION_SUGGESTIONS = {
       title: "Use label instead",
@@ -625,7 +633,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
     for (const field of fields) {
-      if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
+      if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
       if (field.type === "fieldGroup" && field.items && field.fields) {
         for (const item of field.items) {
           const subFields = field.fields(item);
@@ -1157,7 +1165,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       const rawValues = {};
       for (const key of Object.keys(formValues)) {
         const f = fieldByName.get(key);
-        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
+        if (f && (f.type === "display" || f.type === "slot" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
         rawValues[key] = f && f.transformOut ? f.transformOut(formValues[key]) : formValues[key];
       }
       for (const f of fields) {
@@ -1306,9 +1314,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
     const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || field.disabled || formReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
-    if (field.type === "display") {
+    if (field.type === "display" || field.type === "slot") {
       if (field.render) {
         return field.render({
           values: formValues,
@@ -1350,7 +1358,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
           const sfError = formErrors[sf.name] || null;
           const sfLabel = itemIdx === 0 ? sf.label : void 0;
           const sfReadOnly = sf.readOnly || formReadOnly;
-          const sfDisabled = disabled || sf.disabled || formReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || formReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -1800,7 +1808,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             label: sfLabel,
             placeholder: sf.placeholder,
             readOnly: sf.readOnly || isReadOnly,
-            disabled: sf.disabled || isDisabled,
+            disabled: resolveDisabled(sf, formValues) || isDisabled,
             error: !!sfError,
             validationMessage: sfError || void 0,
             ...sf.fieldProps || {}
@@ -1880,6 +1888,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const getFieldColSpan = (field) => {
     if (field.colSpan != null) return Math.min(field.colSpan, columns);
     if (field.width === "full" && columns > 1) return columns;
+    if (columns > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
     return 1;
   };
   const getDependents = (parentField) => visibleFields.filter(
@@ -1894,24 +1903,31 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
     return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tooltip, null, tooltipMessage) }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "info" })))), renderFieldSubset(dependents)));
   };
-  const renderGridLayout = (fieldSubset) => {
+  const renderGridLayout = (fieldSubset, effectiveCols) => {
+    const cols = effectiveCols || columns;
     const fieldList = fieldSubset || visibleFields;
     const elements = [];
     let currentRow = [];
     let currentRowSpan = 0;
     const gridColumnWidth = 200;
+    const colSpan = (field) => {
+      if (field.colSpan != null) return Math.min(field.colSpan, cols);
+      if (field.width === "full" && cols > 1) return cols;
+      if (cols > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
+      return 1;
+    };
     const flushRow = () => {
       if (currentRow.length === 0) return;
-      const allUniform = currentRow.every((f) => getFieldColSpan(f) === 1);
-      const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
-      const remainder = columns - totalSpan;
+      const allUniform = currentRow.every((f) => colSpan(f) === 1);
+      const totalSpan = currentRow.reduce((s, f) => s + colSpan(f), 0);
+      const remainder = cols - totalSpan;
       if (allUniform) {
         elements.push(
           /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.AutoGrid, { key: `row-${currentRow[0].name}`, columnWidth: gridColumnWidth, flexible: true, gap }, currentRow.map((f) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: f.name }, renderField(f))), remainder > 0 && Array.from({ length: remainder }, (_, i) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: `spacer-${i}` })))
         );
       } else {
         elements.push(
-          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: remainder }))
+          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: f.name, flex: colSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: remainder }))
         );
       }
       currentRow = [];
@@ -1919,17 +1935,17 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     };
     for (const field of fieldList) {
       if (isDependent(field)) continue;
-      const span = getFieldColSpan(field);
-      if (span >= columns) {
+      const span = colSpan(field);
+      if (span >= cols) {
         flushRow();
         elements.push(
           /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: field.name }, renderField(field))
         );
       } else {
-        if (currentRowSpan + span > columns) flushRow();
+        if (currentRowSpan + span > cols) flushRow();
         currentRow.push(field);
         currentRowSpan += span;
-        if (currentRowSpan >= columns) flushRow();
+        if (currentRowSpan >= cols) flushRow();
       }
       const dependents = getDependents(field);
       if (dependents.length > 0) {
@@ -2061,13 +2077,23 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     const elements = [];
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i];
-      if (i > 0) {
+      const opts = chunk.group && groups && groups[chunk.group] || {};
+      const showDivider = opts.showDivider !== false;
+      const showLabel = opts.showLabel !== false;
+      if (i > 0 && showDivider) {
         elements.push(/* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Divider, { key: `group-div-${i}` }));
       }
-      if (chunk.group) {
-        elements.push(
-          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, chunk.group)
-        );
+      if (chunk.group && showLabel) {
+        if (typeof opts.renderHeader === "function") {
+          const header = opts.renderHeader(chunk.group, chunk.fields, formValues);
+          if (header) elements.push(
+            /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: `group-header-${i}` }, header)
+          );
+        } else {
+          elements.push(
+            /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, opts.label || chunk.group)
+          );
+        }
       }
       const chunkElements = renderFn(chunk.fields);
       if (Array.isArray(chunkElements)) {
@@ -2078,10 +2104,11 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     }
     return elements;
   };
-  const renderFieldSubset = (fieldSubset) => {
+  const renderFieldSubset = (fieldSubset, overrides) => {
+    const effectiveColumns = overrides && overrides.columns || columns;
     if (layout && fieldSubset === visibleFields) return renderExplicitLayout();
     if (columnWidth) return renderAutoGridLayout(fieldSubset);
-    if (columns > 1) return renderGridLayout(fieldSubset);
+    if (effectiveColumns > 1) return renderGridLayout(fieldSubset, effectiveColumns);
     return renderSingleColumnLayout(fieldSubset);
   };
   const renderSections = () => {
@@ -2096,7 +2123,8 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       const sectionFields = sec.fields ? visibleFields.filter((f) => sec.fields.includes(f.name)) : [];
       if (sectionFields.length === 0) continue;
       const sectionContext = { values: formValues, errors: formErrors };
-      const accordionContent = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields), sec.renderAfter && sec.renderAfter(sectionContext));
+      const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
+      const accordionContent = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
       const accordion = /* @__PURE__ */ import_react.default.createElement(
         import_ui_extensions.Accordion,
         {

package/dist/form.mjs

@@ -59,6 +59,7 @@ var getEmptyValue = (field) => {
     case "datetime":
       return void 0;
     case "display":
+    case "slot":
     case "crmPropertyList":
     case "crmAssociationPropertyList":
       return void 0;
@@ -202,7 +203,7 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
   const msg = options.messages || {};
-  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
+  if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
   const isRequired = resolveRequired(field, allValues);
   const plugin = fieldTypes && fieldTypes[field.type];
   const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
@@ -266,6 +267,10 @@ var resolveRequired = (field, allValues) => {
   if (typeof field.required === "function") return field.required(allValues);
   return !!field.required;
 };
+var resolveDisabled = (field, allValues) => {
+  if (typeof field.disabled === "function") return field.disabled(allValues);
+  return !!field.disabled;
+};
 var resolveOptions = (field, allValues) => {
   if (typeof field.options === "function") return field.options(allValues);
   return field.options || [];
@@ -421,6 +426,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // explicit row layout array (overrides columns + columnWidth)
     sections,
     // FormBuilderSection[] — accordion field grouping
+    groups,
+    // Record<string, FormBuilderGroupOptions> — per-group rendering options keyed by group name
     gap = "sm",
     // gap between fields
     showRequiredIndicator = true,
@@ -597,7 +604,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       "defaultOpen",
       "info",
       "renderBefore",
-      "renderAfter"
+      "renderAfter",
+      "columns"
     ]);
     const SECTION_SUGGESTIONS = {
       title: "Use label instead",
@@ -629,7 +637,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
     for (const field of fields) {
-      if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
+      if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
       if (field.type === "fieldGroup" && field.items && field.fields) {
         for (const item of field.items) {
           const subFields = field.fields(item);
@@ -1161,7 +1169,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const rawValues = {};
       for (const key of Object.keys(formValues)) {
         const f = fieldByName.get(key);
-        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
+        if (f && (f.type === "display" || f.type === "slot" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
         rawValues[key] = f && f.transformOut ? f.transformOut(formValues[key]) : formValues[key];
       }
       for (const f of fields) {
@@ -1310,9 +1318,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
     const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || field.disabled || formReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
-    if (field.type === "display") {
+    if (field.type === "display" || field.type === "slot") {
       if (field.render) {
         return field.render({
           values: formValues,
@@ -1354,7 +1362,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           const sfError = formErrors[sf.name] || null;
           const sfLabel = itemIdx === 0 ? sf.label : void 0;
           const sfReadOnly = sf.readOnly || formReadOnly;
-          const sfDisabled = disabled || sf.disabled || formReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || formReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -1804,7 +1812,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
             label: sfLabel,
             placeholder: sf.placeholder,
             readOnly: sf.readOnly || isReadOnly,
-            disabled: sf.disabled || isDisabled,
+            disabled: resolveDisabled(sf, formValues) || isDisabled,
             error: !!sfError,
             validationMessage: sfError || void 0,
             ...sf.fieldProps || {}
@@ -1884,6 +1892,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const getFieldColSpan = (field) => {
     if (field.colSpan != null) return Math.min(field.colSpan, columns);
     if (field.width === "full" && columns > 1) return columns;
+    if (columns > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
     return 1;
   };
   const getDependents = (parentField) => visibleFields.filter(
@@ -1898,24 +1907,31 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
     return /* @__PURE__ */ React.createElement(Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ React.createElement(Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React.createElement(Tooltip, null, tooltipMessage) }, /* @__PURE__ */ React.createElement(Icon, { name: "info" })))), renderFieldSubset(dependents)));
   };
-  const renderGridLayout = (fieldSubset) => {
+  const renderGridLayout = (fieldSubset, effectiveCols) => {
+    const cols = effectiveCols || columns;
     const fieldList = fieldSubset || visibleFields;
     const elements = [];
     let currentRow = [];
     let currentRowSpan = 0;
     const gridColumnWidth = 200;
+    const colSpan = (field) => {
+      if (field.colSpan != null) return Math.min(field.colSpan, cols);
+      if (field.width === "full" && cols > 1) return cols;
+      if (cols > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
+      return 1;
+    };
     const flushRow = () => {
       if (currentRow.length === 0) return;
-      const allUniform = currentRow.every((f) => getFieldColSpan(f) === 1);
-      const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
-      const remainder = columns - totalSpan;
+      const allUniform = currentRow.every((f) => colSpan(f) === 1);
+      const totalSpan = currentRow.reduce((s, f) => s + colSpan(f), 0);
+      const remainder = cols - totalSpan;
       if (allUniform) {
         elements.push(
           /* @__PURE__ */ React.createElement(AutoGrid, { key: `row-${currentRow[0].name}`, columnWidth: gridColumnWidth, flexible: true, gap }, currentRow.map((f) => /* @__PURE__ */ React.createElement(React.Fragment, { key: f.name }, renderField(f))), remainder > 0 && Array.from({ length: remainder }, (_, i) => /* @__PURE__ */ React.createElement(Box, { key: `spacer-${i}` })))
         );
       } else {
         elements.push(
-          /* @__PURE__ */ React.createElement(Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React.createElement(Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React.createElement(Box, { flex: remainder }))
+          /* @__PURE__ */ React.createElement(Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React.createElement(Box, { key: f.name, flex: colSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React.createElement(Box, { flex: remainder }))
         );
       }
       currentRow = [];
@@ -1923,17 +1939,17 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     };
     for (const field of fieldList) {
       if (isDependent(field)) continue;
-      const span = getFieldColSpan(field);
-      if (span >= columns) {
+      const span = colSpan(field);
+      if (span >= cols) {
         flushRow();
         elements.push(
           /* @__PURE__ */ React.createElement(React.Fragment, { key: field.name }, renderField(field))
         );
       } else {
-        if (currentRowSpan + span > columns) flushRow();
+        if (currentRowSpan + span > cols) flushRow();
         currentRow.push(field);
         currentRowSpan += span;
-        if (currentRowSpan >= columns) flushRow();
+        if (currentRowSpan >= cols) flushRow();
       }
       const dependents = getDependents(field);
       if (dependents.length > 0) {
@@ -2065,13 +2081,23 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const elements = [];
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i];
-      if (i > 0) {
+      const opts = chunk.group && groups && groups[chunk.group] || {};
+      const showDivider = opts.showDivider !== false;
+      const showLabel = opts.showLabel !== false;
+      if (i > 0 && showDivider) {
         elements.push(/* @__PURE__ */ React.createElement(Divider, { key: `group-div-${i}` }));
       }
-      if (chunk.group) {
-        elements.push(
-          /* @__PURE__ */ React.createElement(Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, chunk.group)
-        );
+      if (chunk.group && showLabel) {
+        if (typeof opts.renderHeader === "function") {
+          const header = opts.renderHeader(chunk.group, chunk.fields, formValues);
+          if (header) elements.push(
+            /* @__PURE__ */ React.createElement(React.Fragment, { key: `group-header-${i}` }, header)
+          );
+        } else {
+          elements.push(
+            /* @__PURE__ */ React.createElement(Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, opts.label || chunk.group)
+          );
+        }
       }
       const chunkElements = renderFn(chunk.fields);
       if (Array.isArray(chunkElements)) {
@@ -2082,10 +2108,11 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
     return elements;
   };
-  const renderFieldSubset = (fieldSubset) => {
+  const renderFieldSubset = (fieldSubset, overrides) => {
+    const effectiveColumns = overrides && overrides.columns || columns;
     if (layout && fieldSubset === visibleFields) return renderExplicitLayout();
     if (columnWidth) return renderAutoGridLayout(fieldSubset);
-    if (columns > 1) return renderGridLayout(fieldSubset);
+    if (effectiveColumns > 1) return renderGridLayout(fieldSubset, effectiveColumns);
     return renderSingleColumnLayout(fieldSubset);
   };
   const renderSections = () => {
@@ -2100,7 +2127,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const sectionFields = sec.fields ? visibleFields.filter((f) => sec.fields.includes(f.name)) : [];
       if (sectionFields.length === 0) continue;
       const sectionContext = { values: formValues, errors: formErrors };
-      const accordionContent = /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields), sec.renderAfter && sec.renderAfter(sectionContext));
+      const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
+      const accordionContent = /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
       const accordion = /* @__PURE__ */ React.createElement(
         Accordion,
         {

package/dist/index.js

@@ -1126,6 +1126,7 @@ var getEmptyValue = (field) => {
     case "datetime":
       return void 0;
     case "display":
+    case "slot":
     case "crmPropertyList":
     case "crmAssociationPropertyList":
       return void 0;
@@ -1269,7 +1270,7 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
   const msg = options.messages || {};
-  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
+  if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
   const isRequired = resolveRequired(field, allValues);
   const plugin = fieldTypes && fieldTypes[field.type];
   const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
@@ -1333,6 +1334,10 @@ var resolveRequired = (field, allValues) => {
   if (typeof field.required === "function") return field.required(allValues);
   return !!field.required;
 };
+var resolveDisabled = (field, allValues) => {
+  if (typeof field.disabled === "function") return field.disabled(allValues);
+  return !!field.disabled;
+};
 var resolveOptions = (field, allValues) => {
   if (typeof field.options === "function") return field.options(allValues);
   return field.options || [];
@@ -1488,6 +1493,8 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     // explicit row layout array (overrides columns + columnWidth)
     sections,
     // FormBuilderSection[] — accordion field grouping
+    groups,
+    // Record<string, FormBuilderGroupOptions> — per-group rendering options keyed by group name
     gap = "sm",
     // gap between fields
     showRequiredIndicator = true,
@@ -1664,7 +1671,8 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       "defaultOpen",
       "info",
       "renderBefore",
-      "renderAfter"
+      "renderAfter",
+      "columns"
     ]);
     const SECTION_SUGGESTIONS = {
       title: "Use label instead",
@@ -1696,7 +1704,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
     for (const field of fields) {
-      if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
+      if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
       if (field.type === "fieldGroup" && field.items && field.fields) {
         for (const item of field.items) {
           const subFields = field.fields(item);
@@ -2228,7 +2236,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       const rawValues = {};
       for (const key of Object.keys(formValues)) {
         const f = fieldByName.get(key);
-        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
+        if (f && (f.type === "display" || f.type === "slot" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
         rawValues[key] = f && f.transformOut ? f.transformOut(formValues[key]) : formValues[key];
       }
       for (const f of fields) {
@@ -2377,9 +2385,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
     const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || field.disabled || formReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
-    if (field.type === "display") {
+    if (field.type === "display" || field.type === "slot") {
       if (field.render) {
         return field.render({
           values: formValues,
@@ -2421,7 +2429,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
           const sfError = formErrors[sf.name] || null;
           const sfLabel = itemIdx === 0 ? sf.label : void 0;
           const sfReadOnly = sf.readOnly || formReadOnly;
-          const sfDisabled = disabled || sf.disabled || formReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || formReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -2871,7 +2879,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
             label: sfLabel,
             placeholder: sf.placeholder,
             readOnly: sf.readOnly || isReadOnly,
-            disabled: sf.disabled || isDisabled,
+            disabled: resolveDisabled(sf, formValues) || isDisabled,
             error: !!sfError,
             validationMessage: sfError || void 0,
             ...sf.fieldProps || {}
@@ -2951,6 +2959,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   const getFieldColSpan = (field) => {
     if (field.colSpan != null) return Math.min(field.colSpan, columns);
     if (field.width === "full" && columns > 1) return columns;
+    if (columns > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
     return 1;
   };
   const getDependents = (parentField) => visibleFields.filter(
@@ -2965,24 +2974,31 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
     return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tooltip, null, tooltipMessage) }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: "info" })))), renderFieldSubset(dependents)));
   };
-  const renderGridLayout = (fieldSubset) => {
+  const renderGridLayout = (fieldSubset, effectiveCols) => {
+    const cols = effectiveCols || columns;
     const fieldList = fieldSubset || visibleFields;
     const elements = [];
     let currentRow = [];
     let currentRowSpan = 0;
     const gridColumnWidth = 200;
+    const colSpan = (field) => {
+      if (field.colSpan != null) return Math.min(field.colSpan, cols);
+      if (field.width === "full" && cols > 1) return cols;
+      if (cols > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
+      return 1;
+    };
     const flushRow = () => {
       if (currentRow.length === 0) return;
-      const allUniform = currentRow.every((f) => getFieldColSpan(f) === 1);
-      const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
-      const remainder = columns - totalSpan;
+      const allUniform = currentRow.every((f) => colSpan(f) === 1);
+      const totalSpan = currentRow.reduce((s, f) => s + colSpan(f), 0);
+      const remainder = cols - totalSpan;
       if (allUniform) {
         elements.push(
           /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.AutoGrid, { key: `row-${currentRow[0].name}`, columnWidth: gridColumnWidth, flexible: true, gap }, currentRow.map((f) => /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, { key: f.name }, renderField(f))), remainder > 0 && Array.from({ length: remainder }, (_, i) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { key: `spacer-${i}` })))
         );
       } else {
         elements.push(
-          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: remainder }))
+          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { key: f.name, flex: colSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: remainder }))
         );
       }
       currentRow = [];
@@ -2990,17 +3006,17 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     };
     for (const field of fieldList) {
       if (isDependent(field)) continue;
-      const span = getFieldColSpan(field);
-      if (span >= columns) {
+      const span = colSpan(field);
+      if (span >= cols) {
         flushRow();
         elements.push(
           /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, { key: field.name }, renderField(field))
         );
       } else {
-        if (currentRowSpan + span > columns) flushRow();
+        if (currentRowSpan + span > cols) flushRow();
         currentRow.push(field);
         currentRowSpan += span;
-        if (currentRowSpan >= columns) flushRow();
+        if (currentRowSpan >= cols) flushRow();
       }
       const dependents = getDependents(field);
       if (dependents.length > 0) {
@@ -3132,13 +3148,23 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     const elements = [];
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i];
-      if (i > 0) {
+      const opts = chunk.group && groups && groups[chunk.group] || {};
+      const showDivider = opts.showDivider !== false;
+      const showLabel = opts.showLabel !== false;
+      if (i > 0 && showDivider) {
         elements.push(/* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Divider, { key: `group-div-${i}` }));
       }
-      if (chunk.group) {
-        elements.push(
-          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, chunk.group)
-        );
+      if (chunk.group && showLabel) {
+        if (typeof opts.renderHeader === "function") {
+          const header = opts.renderHeader(chunk.group, chunk.fields, formValues);
+          if (header) elements.push(
+            /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, { key: `group-header-${i}` }, header)
+          );
+        } else {
+          elements.push(
+            /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, opts.label || chunk.group)
+          );
+        }
       }
       const chunkElements = renderFn(chunk.fields);
       if (Array.isArray(chunkElements)) {
@@ -3149,10 +3175,11 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     }
     return elements;
   };
-  const renderFieldSubset = (fieldSubset) => {
+  const renderFieldSubset = (fieldSubset, overrides) => {
+    const effectiveColumns = overrides && overrides.columns || columns;
     if (layout && fieldSubset === visibleFields) return renderExplicitLayout();
     if (columnWidth) return renderAutoGridLayout(fieldSubset);
-    if (columns > 1) return renderGridLayout(fieldSubset);
+    if (effectiveColumns > 1) return renderGridLayout(fieldSubset, effectiveColumns);
     return renderSingleColumnLayout(fieldSubset);
   };
   const renderSections = () => {
@@ -3167,7 +3194,8 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       const sectionFields = sec.fields ? visibleFields.filter((f) => sec.fields.includes(f.name)) : [];
       if (sectionFields.length === 0) continue;
       const sectionContext = { values: formValues, errors: formErrors };
-      const accordionContent = /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields), sec.renderAfter && sec.renderAfter(sectionContext));
+      const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
+      const accordionContent = /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
       const accordion = /* @__PURE__ */ import_react2.default.createElement(
         import_ui_extensions2.Accordion,
         {

package/dist/index.mjs

@@ -1159,6 +1159,7 @@ var getEmptyValue = (field) => {
     case "datetime":
       return void 0;
     case "display":
+    case "slot":
     case "crmPropertyList":
     case "crmAssociationPropertyList":
       return void 0;
@@ -1302,7 +1303,7 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
   const msg = options.messages || {};
-  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
+  if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
   const isRequired = resolveRequired(field, allValues);
   const plugin = fieldTypes && fieldTypes[field.type];
   const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
@@ -1366,6 +1367,10 @@ var resolveRequired = (field, allValues) => {
   if (typeof field.required === "function") return field.required(allValues);
   return !!field.required;
 };
+var resolveDisabled = (field, allValues) => {
+  if (typeof field.disabled === "function") return field.disabled(allValues);
+  return !!field.disabled;
+};
 var resolveOptions = (field, allValues) => {
   if (typeof field.options === "function") return field.options(allValues);
   return field.options || [];
@@ -1521,6 +1526,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // explicit row layout array (overrides columns + columnWidth)
     sections,
     // FormBuilderSection[] — accordion field grouping
+    groups,
+    // Record<string, FormBuilderGroupOptions> — per-group rendering options keyed by group name
     gap = "sm",
     // gap between fields
     showRequiredIndicator = true,
@@ -1697,7 +1704,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       "defaultOpen",
       "info",
       "renderBefore",
-      "renderAfter"
+      "renderAfter",
+      "columns"
     ]);
     const SECTION_SUGGESTIONS = {
       title: "Use label instead",
@@ -1729,7 +1737,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
     for (const field of fields) {
-      if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
+      if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
       if (field.type === "fieldGroup" && field.items && field.fields) {
         for (const item of field.items) {
           const subFields = field.fields(item);
@@ -2261,7 +2269,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const rawValues = {};
       for (const key of Object.keys(formValues)) {
         const f = fieldByName.get(key);
-        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
+        if (f && (f.type === "display" || f.type === "slot" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
         rawValues[key] = f && f.transformOut ? f.transformOut(formValues[key]) : formValues[key];
       }
       for (const f of fields) {
@@ -2410,9 +2418,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
     const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || field.disabled || formReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
-    if (field.type === "display") {
+    if (field.type === "display" || field.type === "slot") {
       if (field.render) {
         return field.render({
           values: formValues,
@@ -2454,7 +2462,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           const sfError = formErrors[sf.name] || null;
           const sfLabel = itemIdx === 0 ? sf.label : void 0;
           const sfReadOnly = sf.readOnly || formReadOnly;
-          const sfDisabled = disabled || sf.disabled || formReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || formReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -2904,7 +2912,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
             label: sfLabel,
             placeholder: sf.placeholder,
             readOnly: sf.readOnly || isReadOnly,
-            disabled: sf.disabled || isDisabled,
+            disabled: resolveDisabled(sf, formValues) || isDisabled,
             error: !!sfError,
             validationMessage: sfError || void 0,
             ...sf.fieldProps || {}
@@ -2984,6 +2992,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const getFieldColSpan = (field) => {
     if (field.colSpan != null) return Math.min(field.colSpan, columns);
     if (field.width === "full" && columns > 1) return columns;
+    if (columns > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
     return 1;
   };
   const getDependents = (parentField) => visibleFields.filter(
@@ -2998,24 +3007,31 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
     return /* @__PURE__ */ React2.createElement(Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, /* @__PURE__ */ React2.createElement(Flex2, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React2.createElement(Text2, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ React2.createElement(Link2, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React2.createElement(Tooltip, null, tooltipMessage) }, /* @__PURE__ */ React2.createElement(Icon2, { name: "info" })))), renderFieldSubset(dependents)));
   };
-  const renderGridLayout = (fieldSubset) => {
+  const renderGridLayout = (fieldSubset, effectiveCols) => {
+    const cols = effectiveCols || columns;
     const fieldList = fieldSubset || visibleFields;
     const elements = [];
     let currentRow = [];
     let currentRowSpan = 0;
     const gridColumnWidth = 200;
+    const colSpan = (field) => {
+      if (field.colSpan != null) return Math.min(field.colSpan, cols);
+      if (field.width === "full" && cols > 1) return cols;
+      if (cols > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
+      return 1;
+    };
     const flushRow = () => {
       if (currentRow.length === 0) return;
-      const allUniform = currentRow.every((f) => getFieldColSpan(f) === 1);
-      const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
-      const remainder = columns - totalSpan;
+      const allUniform = currentRow.every((f) => colSpan(f) === 1);
+      const totalSpan = currentRow.reduce((s, f) => s + colSpan(f), 0);
+      const remainder = cols - totalSpan;
       if (allUniform) {
         elements.push(
           /* @__PURE__ */ React2.createElement(AutoGrid, { key: `row-${currentRow[0].name}`, columnWidth: gridColumnWidth, flexible: true, gap }, currentRow.map((f) => /* @__PURE__ */ React2.createElement(React2.Fragment, { key: f.name }, renderField(f))), remainder > 0 && Array.from({ length: remainder }, (_, i) => /* @__PURE__ */ React2.createElement(Box2, { key: `spacer-${i}` })))
         );
       } else {
         elements.push(
-          /* @__PURE__ */ React2.createElement(Flex2, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React2.createElement(Box2, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React2.createElement(Box2, { flex: remainder }))
+          /* @__PURE__ */ React2.createElement(Flex2, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React2.createElement(Box2, { key: f.name, flex: colSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React2.createElement(Box2, { flex: remainder }))
         );
       }
       currentRow = [];
@@ -3023,17 +3039,17 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     };
     for (const field of fieldList) {
       if (isDependent(field)) continue;
-      const span = getFieldColSpan(field);
-      if (span >= columns) {
+      const span = colSpan(field);
+      if (span >= cols) {
         flushRow();
         elements.push(
           /* @__PURE__ */ React2.createElement(React2.Fragment, { key: field.name }, renderField(field))
         );
       } else {
-        if (currentRowSpan + span > columns) flushRow();
+        if (currentRowSpan + span > cols) flushRow();
         currentRow.push(field);
         currentRowSpan += span;
-        if (currentRowSpan >= columns) flushRow();
+        if (currentRowSpan >= cols) flushRow();
       }
       const dependents = getDependents(field);
       if (dependents.length > 0) {
@@ -3165,13 +3181,23 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const elements = [];
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i];
-      if (i > 0) {
+      const opts = chunk.group && groups && groups[chunk.group] || {};
+      const showDivider = opts.showDivider !== false;
+      const showLabel = opts.showLabel !== false;
+      if (i > 0 && showDivider) {
         elements.push(/* @__PURE__ */ React2.createElement(Divider, { key: `group-div-${i}` }));
       }
-      if (chunk.group) {
-        elements.push(
-          /* @__PURE__ */ React2.createElement(Text2, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, chunk.group)
-        );
+      if (chunk.group && showLabel) {
+        if (typeof opts.renderHeader === "function") {
+          const header = opts.renderHeader(chunk.group, chunk.fields, formValues);
+          if (header) elements.push(
+            /* @__PURE__ */ React2.createElement(React2.Fragment, { key: `group-header-${i}` }, header)
+          );
+        } else {
+          elements.push(
+            /* @__PURE__ */ React2.createElement(Text2, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, opts.label || chunk.group)
+          );
+        }
       }
       const chunkElements = renderFn(chunk.fields);
       if (Array.isArray(chunkElements)) {
@@ -3182,10 +3208,11 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
     return elements;
   };
-  const renderFieldSubset = (fieldSubset) => {
+  const renderFieldSubset = (fieldSubset, overrides) => {
+    const effectiveColumns = overrides && overrides.columns || columns;
     if (layout && fieldSubset === visibleFields) return renderExplicitLayout();
     if (columnWidth) return renderAutoGridLayout(fieldSubset);
-    if (columns > 1) return renderGridLayout(fieldSubset);
+    if (effectiveColumns > 1) return renderGridLayout(fieldSubset, effectiveColumns);
     return renderSingleColumnLayout(fieldSubset);
   };
   const renderSections = () => {
@@ -3200,7 +3227,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const sectionFields = sec.fields ? visibleFields.filter((f) => sec.fields.includes(f.name)) : [];
       if (sectionFields.length === 0) continue;
       const sectionContext = { values: formValues, errors: formErrors };
-      const accordionContent = /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields), sec.renderAfter && sec.renderAfter(sectionContext));
+      const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
+      const accordionContent = /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
       const accordion = /* @__PURE__ */ React2.createElement(
         Accordion,
         {

package/form.d.ts

@@ -8,6 +8,14 @@ export {
   FormBuilderDateValue,
   FormBuilderTimeValue,
   FormBuilderDateTimeValue,
+  FormBuilderValidationContext,
+  FormBuilderValidatorResult,
+  FormBuilderValidator,
+  FormBuilderDependsOnConfig,
+  FormBuilderRepeaterProps,
+  FormBuilderLabels,
+  FormBuilderAlertConfig,
+  FormBuilderButtonsRenderContext,
   FormBuilderLayout,
   FormBuilderLayoutEntry,
   FormBuilderSection,

package/index.d.ts

@@ -3,6 +3,7 @@ export type {
   DataTableProps,
   DataTableColumn,
   DataTableFilterConfig,
+  DataTableFilterType,
   DataTableGroupBy,
   DataTableSortDirection,
   DataTableSortObject,
@@ -18,6 +19,11 @@ export type {
   DataTableSelectionAction,
   DataTableRowAction,
   DataTableSelectAllRequestPayload,
+  DataTableLabels,
+  DataTableSelectionBarRenderContext,
+  DataTableEmptyStateRenderContext,
+  DataTableLoadingStateRenderContext,
+  DataTableErrorStateRenderContext,
 } from "./packages/datatable/index";
 
 export { FormBuilder, useFormPrefill } from "./packages/form/index";
@@ -29,6 +35,14 @@ export type {
   FormBuilderDateValue,
   FormBuilderTimeValue,
   FormBuilderDateTimeValue,
+  FormBuilderValidationContext,
+  FormBuilderValidatorResult,
+  FormBuilderValidator,
+  FormBuilderDependsOnConfig,
+  FormBuilderRepeaterProps,
+  FormBuilderLabels,
+  FormBuilderAlertConfig,
+  FormBuilderButtonsRenderContext,
   FormBuilderLayout,
   FormBuilderLayoutEntry,
   FormBuilderSection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hs-uix",
-  "version": "1.2.3",
+  "version": "1.4.0",
   "description": "Production-ready UI components for HubSpot UI Extensions — DataTable, FormBuilder, and more",
   "license": "MIT",
   "main": "./dist/index.js",