@connect-soft/form-generator 1.1.0-alpha5 → 1.1.0-alpha7

package/dist/index.js

@@ -2792,52 +2792,13 @@ const r=(t,r,o)=>{if(t&&"reportValidity"in t){const s=get(o,r);t.setCustomValidi
 
 function t(r,e){try{var o=r();}catch(r){return e(r)}return o&&o.then?o.then(void 0,e):o}function s(r,e){for(var n={};r.length;){var t=r[0],s=t.code,i=t.message,a=t.path.join(".");if(!n[a])if("unionErrors"in t){var u=t.unionErrors[0].errors[0];n[a]={message:u.message,type:u.code};}else n[a]={message:i,type:s};if("unionErrors"in t&&t.unionErrors.forEach(function(e){return e.errors.forEach(function(e){return r.push(e)})}),e){var c=n[a].types,f=c&&c[t.code];n[a]=appendErrors(a,e,n,s,f?[].concat(f,t.message):t.message);}r.shift();}return n}function i(r,e){for(var n={};r.length;){var t=r[0],s=t.code,i=t.message,a=t.path.join(".");if(!n[a])if("invalid_union"===t.code&&t.errors.length>0){var u=t.errors[0][0];n[a]={message:u.message,type:u.code};}else n[a]={message:i,type:s};if("invalid_union"===t.code&&t.errors.forEach(function(e){return e.forEach(function(e){return r.push(e)})}),e){var c=n[a].types,f=c&&c[t.code];n[a]=appendErrors(a,e,n,s,f?[].concat(f,t.message):t.message);}r.shift();}return n}function a(o$1,a,u){if(void 0===u&&(u={}),function(r){return "_def"in r&&"object"==typeof r._def&&"typeName"in r._def}(o$1))return function(n,i,c){try{return Promise.resolve(t(function(){return Promise.resolve(o$1["sync"===u.mode?"parse":"parseAsync"](n,a)).then(function(e){return c.shouldUseNativeValidation&&o({},c),{errors:{},values:u.raw?Object.assign({},n):e}})},function(r){if(function(r){return Array.isArray(null==r?void 0:r.issues)}(r))return {values:{},errors:s$1(s(r.errors,!c.shouldUseNativeValidation&&"all"===c.criteriaMode),c)};throw r}))}catch(r){return Promise.reject(r)}};if(function(r){return "_zod"in r&&"object"==typeof r._zod}(o$1))return function(s,c,f){try{return Promise.resolve(t(function(){return Promise.resolve(("sync"===u.mode?n__namespace.parse:n__namespace.parseAsync)(o$1,s,a)).then(function(e){return f.shouldUseNativeValidation&&o({},f),{errors:{},values:u.raw?Object.assign({},s):e}})},function(r){if(function(r){return r instanceof n__namespace.$ZodError}(r))return {values:{},errors:s$1(i(r.issues,!f.shouldUseNativeValidation&&"all"===f.criteriaMode),f)};throw r}))}catch(r){return Promise.reject(r)}};throw new Error("Invalid input: not a Zod schema")}
 
-function isLayoutBlock(item) {
-  return item.type === 'columns' || item.type === 'section';
+function isArrayField(field) {
+  return field.type === 'array' && 'fields' in field;
 }
 
 const fieldRegistry = new Map();
 const componentRegistry = {};
-const layoutRegistry = {};
 const defaultFormComponents = {
-  FormItem: ({
-    className,
-    children
-  }) => /*#__PURE__*/React.createElement('div', {
-    className: className !== null && className !== void 0 ? className : 'form-item'
-  }, children),
-  FormInputLabelWrapper: ({
-    className,
-    orientation,
-    children
-  }) => /*#__PURE__*/React.createElement('div', {
-    'className': className !== null && className !== void 0 ? className : 'form-input-label-wrapper',
-    'data-orientation': orientation !== null && orientation !== void 0 ? orientation : 'vertical'
-  }, children),
-  FormLabel: ({
-    className,
-    children,
-    required,
-    htmlFor
-  }) => /*#__PURE__*/React.createElement('label', {
-    className: className !== null && className !== void 0 ? className : 'form-label',
-    htmlFor
-  }, children, required && /*#__PURE__*/React.createElement('span', {
-    className: 'required-indicator'
-  }, ' *')),
-  FormDescription: ({
-    className,
-    children
-  }) => /*#__PURE__*/React.createElement('p', {
-    className: className !== null && className !== void 0 ? className : 'form-description'
-  }, children),
-  FormMessage: ({
-    className,
-    name
-  }) => /*#__PURE__*/React.createElement('p', {
-    'className': className !== null && className !== void 0 ? className : 'form-message',
-    'data-field': name
-  }),
   SubmitButton: ({
     className,
     children,
@@ -2847,7 +2808,13 @@ const defaultFormComponents = {
     type: 'submit',
     className: className !== null && className !== void 0 ? className : 'form-submit',
     disabled: disabled || isSubmitting
-  }, isSubmitting ? 'Submitting...' : children)
+  }, isSubmitting ? 'Submitting...' : children),
+  FieldWrapper: ({
+    children
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, children),
+  FieldsWrapper: ({
+    children
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, children)
 };
 const htmlInputTypes = {
   text: 'text',
@@ -3032,10 +2999,6 @@ function getFieldComponent(type) {
   }
   return createDefaultFieldComponent(type);
 }
-function getFieldOptions(type) {
-  var _a;
-  return (_a = fieldRegistry.get(type)) === null || _a === void 0 ? void 0 : _a.options;
-}
 function getFieldValidator(type) {
   var _a;
   return (_a = fieldRegistry.get(type)) === null || _a === void 0 ? void 0 : _a.options.validator;
@@ -3081,37 +3044,6 @@ function getFormComponents() {
     ...componentRegistry
   };
 }
-function registerLayoutComponents(components, config = {}) {
-  const {
-    override = true
-  } = config;
-  Object.keys(components).forEach(key => {
-    const exists = key in layoutRegistry;
-    if (override === 'only' && !exists) return;
-    if (override === false && exists) return;
-    layoutRegistry[key] = components[key];
-  });
-}
-function registerLayoutComponent(name, component, config = {}) {
-  const {
-    override = true
-  } = config;
-  const exists = name in layoutRegistry;
-  if (override === 'only' && !exists) return;
-  if (override === false && exists) return;
-  layoutRegistry[name] = component;
-}
-function getLayoutComponent(name) {
-  return layoutRegistry[name];
-}
-function hasLayoutComponent(name) {
-  return name in layoutRegistry;
-}
-function clearLayoutRegistry() {
-  Object.keys(layoutRegistry).forEach(key => {
-    delete layoutRegistry[key];
-  });
-}
 function clearFieldRegistry() {
   fieldRegistry.clear();
 }
@@ -3127,106 +3059,6 @@ function resetFormComponentRegistry() {
 function clearAllRegistries() {
   clearFieldRegistry();
   clearFormComponentRegistry();
-  clearLayoutRegistry();
-}
-
-const RESERVED_PROPS = new Set(['all', 'remaining', 'names', 'has', 'render']);
-function createTemplateFields(fieldEntries) {
-  const accessedFields = new Set();
-  const handler = {
-    get(_, prop) {
-      if (typeof prop === 'symbol') {
-        return undefined;
-      }
-      if (prop === 'all') {
-        return Array.from(fieldEntries.values()).map(entry => entry.element);
-      }
-      if (prop === 'remaining') {
-        return Array.from(fieldEntries.entries()).filter(([name]) => !accessedFields.has(name)).map(([, entry]) => entry.element);
-      }
-      if (prop === 'names') {
-        return Array.from(fieldEntries.keys());
-      }
-      if (prop === 'has') {
-        return name => fieldEntries.has(name);
-      }
-      if (prop === 'render') {
-        return (...names) => {
-          return names.filter(name => fieldEntries.has(name)).map(name => {
-            accessedFields.add(name);
-            return fieldEntries.get(name).element;
-          });
-        };
-      }
-      if (fieldEntries.has(prop)) {
-        accessedFields.add(prop);
-        return fieldEntries.get(prop).element;
-      }
-      return undefined;
-    },
-    has(_, prop) {
-      if (typeof prop === 'symbol') {
-        return false;
-      }
-      return RESERVED_PROPS.has(prop) || fieldEntries.has(prop);
-    },
-    ownKeys() {
-      return [...RESERVED_PROPS, ...fieldEntries.keys()];
-    },
-    getOwnPropertyDescriptor(_, prop) {
-      if (typeof prop === 'symbol') {
-        return undefined;
-      }
-      if (RESERVED_PROPS.has(prop) || fieldEntries.has(prop)) {
-        return {
-          configurable: true,
-          enumerable: true,
-          value: this.get(_, prop, {})
-        };
-      }
-      return undefined;
-    }
-  };
-  return new Proxy({}, handler);
-}
-function createTemplateLayouts(layoutEntries) {
-  const handler = {
-    get(_, prop) {
-      if (typeof prop === 'symbol') {
-        return undefined;
-      }
-      if (prop === 'all') {
-        return Array.from(layoutEntries.values()).map(entry => entry.element);
-      }
-      if (layoutEntries.has(prop)) {
-        return layoutEntries.get(prop).element;
-      }
-      return undefined;
-    },
-    has(_, prop) {
-      if (typeof prop === 'symbol') {
-        return false;
-      }
-      return prop === 'all' || layoutEntries.has(prop);
-    },
-    ownKeys() {
-      return ['all', ...layoutEntries.keys()];
-    },
-    getOwnPropertyDescriptor(_, prop) {
-      if (typeof prop === 'symbol') {
-        return undefined;
-      }
-      if (prop === 'all' || layoutEntries.has(prop)) {
-        return {
-          configurable: true,
-          enumerable: true,
-          value: this.get(_, prop, {})
-        };
-      }
-      return undefined;
-    }
-  };
-  return new Proxy({}, handler);
 }
 
 const FieldRenderer = /*#__PURE__*/React.memo(t0 => {
@@ -3254,18 +3086,6 @@ const FieldRenderer = /*#__PURE__*/React.memo(t0 => {
         t2 = null;
         break bb0;
       }
-      const FormItemComponent = getFormComponent("FormItem");
-      const FormLabelComponent = getFormComponent("FormLabel");
-      const FormInputLabelWrapper = getFormComponent("FormInputLabelWrapper");
-      const FormDescriptionComponent = getFormComponent("FormDescription");
-      const FormMessageComponent = getFormComponent("FormMessage");
-      if (!FormItemComponent) {
-        console.warn("FormItem component not registered. Use registerFormComponent(\"FormItem\", Component) to register one.");
-        t2 = null;
-        break bb0;
-      }
-      const fieldOptions = getFieldOptions(field.type);
-      const itemClassName = [`form-field-${field.type}`, fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.className, field.className].filter(Boolean).join(" ");
       const fieldName = namePrefix ? `${namePrefix}.${field.name}` : field.name;
       t1 = jsxRuntime.jsx(Controller, {
         control: form.control,
@@ -3275,36 +3095,18 @@ const FieldRenderer = /*#__PURE__*/React.memo(t0 => {
             field: formField,
             fieldState
           } = t3;
-          return jsxRuntime.jsxs(FormItemComponent, {
-            className: itemClassName,
-            children: [jsxRuntime.jsxs(FormInputLabelWrapper, {
-              orientation: fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.inputLabelWrapperOrientation,
-              className: fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.inputLabelWrapper,
-              children: [field.label && FormLabelComponent && jsxRuntime.jsx(FormLabelComponent, {
-                className: fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.labelClassName,
-                required: field.required,
-                htmlFor: fieldName,
-                children: field.label
-              }), jsxRuntime.jsx(FieldComponent, {
-                field: {
-                  ...field,
-                  name: fieldName
-                },
-                formField,
-                fieldState: {
-                  invalid: fieldState.invalid,
-                  error: fieldState.error,
-                  isDirty: fieldState.isDirty,
-                  isTouched: fieldState.isTouched
-                }
-              })]
-            }), field.description && FormDescriptionComponent && jsxRuntime.jsx(FormDescriptionComponent, {
-              className: fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.descriptionClassName,
-              children: field.description
-            }), FormMessageComponent && jsxRuntime.jsx(FormMessageComponent, {
-              className: fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.messageClassName,
+          return jsxRuntime.jsx(FieldComponent, {
+            field: {
+              ...field,
               name: fieldName
-            })]
+            },
+            formField,
+            fieldState: {
+              invalid: fieldState.invalid,
+              error: fieldState.error,
+              isDirty: fieldState.isDirty,
+              isTouched: fieldState.isTouched
+            }
           });
         }
       });
@@ -3324,134 +3126,267 @@ const FieldRenderer = /*#__PURE__*/React.memo(t0 => {
   return t1;
 });
 FieldRenderer.displayName = 'FieldRenderer';
-const ColumnsRenderer = /*#__PURE__*/React.memo(t0 => {
-  const $ = compilerRuntime.c(6);
+
+function useArrayField(field) {
   const {
-    layout,
-    namePrefix
-  } = t0;
-  let t1;
-  let t2;
-  if ($[0] !== layout || $[1] !== namePrefix) {
-    t2 = Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const ColumnsComponent = getLayoutComponent("Columns");
-      if (!ColumnsComponent) {
-        console.warn("Columns layout component not registered. Use registerLayoutComponent(\"Columns\", Component) to register one.");
-        t2 = null;
-        break bb0;
-      }
-      const newPrefix = layout.wrapFieldNames && layout.name ? namePrefix ? `${namePrefix}.${layout.name}` : layout.name : namePrefix;
-      let t3;
-      if ($[4] !== newPrefix) {
-        t3 = (item, index) => jsxRuntime.jsx(FormItemRenderer, {
-          item,
-          namePrefix: newPrefix
-        }, index);
-        $[4] = newPrefix;
-        $[5] = t3;
-      } else {
-        t3 = $[5];
-      }
-      const renderItem = t3;
-      t1 = jsxRuntime.jsx(ColumnsComponent, {
-        layout,
-        renderItem
-      });
+    control
+  } = useFormContext();
+  const fieldArray = useFieldArray({
+    control,
+    name: field.name
+  });
+  const {
+    fields: items,
+    append,
+    prepend,
+    remove,
+    move,
+    swap,
+    insert
+  } = fieldArray;
+  const buildEmptyItem = React.useCallback(() => {
+    const item = {};
+    field.fields.forEach(f => {
+      var _a;
+      item[f.name] = (_a = f.defaultValue) !== null && _a !== void 0 ? _a : '';
+    });
+    return item;
+  }, [field.fields]);
+  const handleAppend = React.useCallback(() => {
+    append(buildEmptyItem());
+  }, [append, buildEmptyItem]);
+  const handleAppendWith = React.useCallback(values => {
+    append(values);
+  }, [append]);
+  const handlePrepend = React.useCallback(() => {
+    prepend(buildEmptyItem());
+  }, [prepend, buildEmptyItem]);
+  const handleInsert = React.useCallback((index, values_0) => {
+    insert(index, values_0 !== null && values_0 !== void 0 ? values_0 : buildEmptyItem());
+  }, [insert, buildEmptyItem]);
+  const canAppend = field.maxItems === undefined || items.length < field.maxItems;
+  const canRemove = field.minItems === undefined || items.length > field.minItems;
+  const renderField = React.useCallback((index_0, fieldName) => {
+    const childField = field.fields.find(f_0 => f_0.name === fieldName);
+    if (!childField) {
+      console.warn(`Field "${fieldName}" not found in array field "${field.name}"`);
+      return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
-    $[0] = layout;
-    $[1] = namePrefix;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    t1 = $[2];
-    t2 = $[3];
-  }
-  if (t2 !== Symbol.for("react.early_return_sentinel")) {
-    return t2;
-  }
-  return t1;
-});
-ColumnsRenderer.displayName = 'ColumnsRenderer';
-const SectionRenderer = /*#__PURE__*/React.memo(t0 => {
-  const $ = compilerRuntime.c(6);
+    return jsxRuntime.jsx(FieldRenderer, {
+      field: childField,
+      namePrefix: `${field.name}.${index_0}`
+    }, `${field.name}.${index_0}.${fieldName}`);
+  }, [field]);
+  const renderItem = React.useCallback(index_1 => {
+    const result = {};
+    field.fields.forEach(childField_0 => {
+      result[childField_0.name] = jsxRuntime.jsx(FieldRenderer, {
+        field: childField_0,
+        namePrefix: `${field.name}.${index_1}`
+      }, `${field.name}.${index_1}.${childField_0.name}`);
+    });
+    return result;
+  }, [field]);
+  return {
+    fieldArray,
+    append: handleAppend,
+    appendWith: handleAppendWith,
+    prepend: handlePrepend,
+    remove,
+    move,
+    swap,
+    insert: handleInsert,
+    field,
+    items: items.map((item_0, index_2) => ({
+      id: item_0.id,
+      index: index_2
+    })),
+    canAppend,
+    canRemove,
+    renderField,
+    renderItem
+  };
+}
+const ArrayFieldRenderer = /*#__PURE__*/React.memo(t0 => {
+  const $ = compilerRuntime.c(28);
   const {
-    layout,
-    namePrefix
+    field,
+    children
   } = t0;
-  let t1;
-  let t2;
-  if ($[0] !== layout || $[1] !== namePrefix) {
-    t2 = Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const SectionComponent = getLayoutComponent("Section");
-      if (!SectionComponent) {
-        console.warn("Section layout component not registered. Use registerLayoutComponent(\"Section\", Component) to register one.");
-        t2 = null;
-        break bb0;
-      }
-      const newPrefix = layout.wrapFieldNames && layout.name ? namePrefix ? `${namePrefix}.${layout.name}` : layout.name : namePrefix;
-      let t3;
-      if ($[4] !== newPrefix) {
-        t3 = (item, index) => jsxRuntime.jsx(FormItemRenderer, {
-          item,
-          namePrefix: newPrefix
-        }, index);
-        $[4] = newPrefix;
-        $[5] = t3;
+  const {
+    items,
+    append,
+    remove,
+    move,
+    canAppend,
+    renderItem,
+    field: arrayField
+  } = useArrayField(field);
+  if (field.hidden) {
+    return null;
+  }
+  if (!children) {
+    let t1;
+    if ($[0] !== append || $[1] !== canAppend || $[2] !== field.className || $[3] !== field.description || $[4] !== field.label || $[5] !== items || $[6] !== renderItem) {
+      let t2;
+      if ($[8] !== renderItem) {
+        t2 = t3 => {
+          const {
+            id,
+            index
+          } = t3;
+          return jsxRuntime.jsx("div", {
+            "data-array-item-index": index,
+            children: Object.values(renderItem(index))
+          }, id);
+        };
+        $[8] = renderItem;
+        $[9] = t2;
       } else {
-        t3 = $[5];
+        t2 = $[9];
       }
-      const renderItem = t3;
-      t1 = jsxRuntime.jsx(SectionComponent, {
-        layout,
-        renderItem
+      t1 = jsxRuntime.jsxs("div", {
+        className: field.className,
+        children: [field.label && jsxRuntime.jsx("label", {
+          children: field.label
+        }), field.description && jsxRuntime.jsx("p", {
+          children: field.description
+        }), items.map(t2), canAppend && jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: append,
+          children: "Add Item"
+        })]
       });
+      $[0] = append;
+      $[1] = canAppend;
+      $[2] = field.className;
+      $[3] = field.description;
+      $[4] = field.label;
+      $[5] = items;
+      $[6] = renderItem;
+      $[7] = t1;
+    } else {
+      t1 = $[7];
     }
-    $[0] = layout;
-    $[1] = namePrefix;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    t1 = $[2];
-    t2 = $[3];
+    return t1;
   }
-  if (t2 !== Symbol.for("react.early_return_sentinel")) {
-    return t2;
+  let t1;
+  if ($[10] !== arrayField || $[11] !== children || $[12] !== field.className || $[13] !== field.description || $[14] !== field.label || $[15] !== field.name || $[16] !== items || $[17] !== move || $[18] !== remove || $[19] !== renderItem) {
+    let t2;
+    if ($[21] !== arrayField || $[22] !== children || $[23] !== field.name || $[24] !== move || $[25] !== remove || $[26] !== renderItem) {
+      t2 = t3 => {
+        const {
+          id: id_0,
+          index: index_0
+        } = t3;
+        return children({
+          index: index_0,
+          id: id_0,
+          remove: () => remove(index_0),
+          move: toIndex => move(index_0, toIndex),
+          fields: renderItem(index_0),
+          fieldNames: arrayField.fields.map(_temp),
+          namePrefix: `${field.name}.${index_0}`
+        });
+      };
+      $[21] = arrayField;
+      $[22] = children;
+      $[23] = field.name;
+      $[24] = move;
+      $[25] = remove;
+      $[26] = renderItem;
+      $[27] = t2;
+    } else {
+      t2 = $[27];
+    }
+    t1 = jsxRuntime.jsxs("div", {
+      className: field.className,
+      children: [field.label && jsxRuntime.jsx("label", {
+        children: field.label
+      }), field.description && jsxRuntime.jsx("p", {
+        children: field.description
+      }), items.map(t2)]
+    });
+    $[10] = arrayField;
+    $[11] = children;
+    $[12] = field.className;
+    $[13] = field.description;
+    $[14] = field.label;
+    $[15] = field.name;
+    $[16] = items;
+    $[17] = move;
+    $[18] = remove;
+    $[19] = renderItem;
+    $[20] = t1;
+  } else {
+    t1 = $[20];
   }
   return t1;
 });
-SectionRenderer.displayName = 'SectionRenderer';
-const FormItemRenderer = /*#__PURE__*/React.memo(({
-  item,
-  namePrefix
-}) => {
-  if (item.hidden) {
-    return null;
-  }
-  if (isLayoutBlock(item)) {
-    switch (item.type) {
-      case 'columns':
-        return jsxRuntime.jsx(ColumnsRenderer, {
-          layout: item,
-          namePrefix: namePrefix
-        });
-      case 'section':
-        return jsxRuntime.jsx(SectionRenderer, {
-          layout: item,
-          namePrefix: namePrefix
-        });
-      default:
-        console.warn(`Unknown layout type: ${item.type}`);
-        return null;
+ArrayFieldRenderer.displayName = 'ArrayFieldRenderer';
+function _temp(f) {
+  return f.name;
+}
+
+const RESERVED_PROPS = new Set(['all', 'remaining', 'names', 'has', 'render']);
+function createTemplateFields(fieldEntries) {
+  const accessedFields = new Set();
+  const handler = {
+    get(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (prop === 'all') {
+        return Array.from(fieldEntries.values()).map(entry => entry.element);
+      }
+      if (prop === 'remaining') {
+        return Array.from(fieldEntries.entries()).filter(([name]) => !accessedFields.has(name)).map(([, entry]) => entry.element);
+      }
+      if (prop === 'names') {
+        return Array.from(fieldEntries.keys());
+      }
+      if (prop === 'has') {
+        return name => fieldEntries.has(name);
+      }
+      if (prop === 'render') {
+        return (...names) => {
+          return names.filter(name => fieldEntries.has(name)).map(name => {
+            accessedFields.add(name);
+            return fieldEntries.get(name).element;
+          });
+        };
+      }
+      if (fieldEntries.has(prop)) {
+        accessedFields.add(prop);
+        return fieldEntries.get(prop).element;
+      }
+      return undefined;
+    },
+    has(_, prop) {
+      if (typeof prop === 'symbol') {
+        return false;
+      }
+      return RESERVED_PROPS.has(prop) || fieldEntries.has(prop);
+    },
+    ownKeys() {
+      return [...RESERVED_PROPS, ...fieldEntries.keys()];
+    },
+    getOwnPropertyDescriptor(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (RESERVED_PROPS.has(prop) || fieldEntries.has(prop)) {
+        return {
+          configurable: true,
+          enumerable: true,
+          value: this.get(_, prop, {})
+        };
+      }
+      return undefined;
     }
-  }
-  return jsxRuntime.jsx(FieldRenderer, {
-    field: item,
-    namePrefix: namePrefix
-  });
-});
-FormItemRenderer.displayName = 'FormItemRenderer';
+  };
+  return new Proxy({}, handler);
+}
 
 function deepMerge(target, source) {
   const result = {
@@ -3507,96 +3442,61 @@ function getValidatorForField(field) {
   }
   return zod.z.any();
 }
-function buildSchema(items) {
+function buildArrayItemSchema(arrayField) {
+  const itemShape = {};
+  for (const field of arrayField.fields) {
+    const validator = getValidatorForField(field);
+    itemShape[field.name] = field.required ? validator : validator.optional();
+  }
+  return zod.z.object(itemShape);
+}
+function buildSchema(fields) {
   const shape = {};
-  for (const item of items) {
-    if (isLayoutBlock(item)) {
-      let childItems = [];
-      if (item.type === 'columns') {
-        for (const column of item.columns) {
-          childItems.push(...column.children);
-        }
-      } else if (item.type === 'section') {
-        childItems = item.children;
+  for (const field of fields) {
+    if (isArrayField(field)) {
+      let arraySchema = zod.z.array(buildArrayItemSchema(field));
+      if (field.minItems !== undefined) {
+        arraySchema = arraySchema.min(field.minItems);
       }
-      if (item.wrapFieldNames && item.name) {
-        shape[item.name] = buildSchema(childItems);
-      } else {
-        const childSchema = buildSchema(childItems);
-        if (childSchema instanceof zod.z.ZodObject) {
-          Object.assign(shape, childSchema.shape);
-        }
+      if (field.maxItems !== undefined) {
+        arraySchema = arraySchema.max(field.maxItems);
       }
+      shape[field.name] = arraySchema;
     } else {
-      const field = item;
       const validator = getValidatorForField(field);
       shape[field.name] = field.required ? validator : validator.optional();
     }
   }
   return zod.z.object(shape);
 }
-function buildDefaultValues(items) {
+function buildArrayItemDefaults(arrayField) {
+  var _a;
+  const item = {};
+  for (const field of arrayField.fields) {
+    item[field.name] = (_a = field.defaultValue) !== null && _a !== void 0 ? _a : '';
+  }
+  return item;
+}
+function buildDefaultValues(fields) {
   var _a;
   const values = {};
-  for (const item of items) {
-    if (isLayoutBlock(item)) {
-      let childItems = [];
-      if (item.type === 'columns') {
-        for (const column of item.columns) {
-          childItems.push(...column.children);
-        }
-      } else if (item.type === 'section') {
-        childItems = item.children;
-      }
-      if (item.wrapFieldNames && item.name) {
-        values[item.name] = buildDefaultValues(childItems);
+  for (const field of fields) {
+    if (isArrayField(field)) {
+      if (field.defaultValue && field.defaultValue.length > 0) {
+        values[field.name] = field.defaultValue;
+      } else if (field.minItems && field.minItems > 0) {
+        values[field.name] = Array.from({
+          length: field.minItems
+        }, () => buildArrayItemDefaults(field));
       } else {
-        Object.assign(values, buildDefaultValues(childItems));
+        values[field.name] = [];
       }
     } else {
-      const field = item;
       values[field.name] = (_a = field.defaultValue) !== null && _a !== void 0 ? _a : '';
     }
   }
   return values;
 }
-function getItemKey(item, index) {
-  if (isLayoutBlock(item)) {
-    return `layout-${item.type}-${index}`;
-  }
-  return item.name;
-}
-function extractFields(items) {
-  const fields = [];
-  for (const item of items) {
-    if (isLayoutBlock(item)) {
-      let childItems = [];
-      if (item.type === 'columns') {
-        for (const column of item.columns) {
-          childItems.push(...column.children);
-        }
-      } else if (item.type === 'section') {
-        childItems = item.children;
-      }
-      fields.push(...extractFields(childItems));
-    } else {
-      fields.push(item);
-    }
-  }
-  return fields;
-}
-function extractLayouts(items) {
-  const layouts = [];
-  items.forEach((item, index) => {
-    if (isLayoutBlock(item)) {
-      layouts.push({
-        layout: item,
-        index
-      });
-    }
-  });
-  return layouts;
-}
 
 function hasSchema(props) {
   return props.schema !== undefined;
@@ -3667,47 +3567,48 @@ function FormGeneratorImpl(props) {
     form: form
   }), [form, handleSubmit, mergedDefaultValues]);
   const SubmitButton = getFormComponent('SubmitButton');
+  const FieldWrapper = getFormComponent('FieldWrapper');
+  const FieldsWrapper = getFormComponent('FieldsWrapper');
+  const {
+    regularFields,
+    arrayFields
+  } = React.useMemo(() => {
+    const regular = [];
+    const arrays = [];
+    fields.forEach(field => {
+      if (isArrayField(field)) {
+        arrays.push(field);
+      } else {
+        regular.push(field);
+      }
+    });
+    return {
+      regularFields: regular,
+      arrayFields: arrays
+    };
+  }, [fields]);
   const fieldEntries = React.useMemo(() => {
     const entries = new Map();
-    const allFields = extractFields(fields);
-    allFields.forEach((field, index) => {
-      if (!field.hidden) {
-        const element = jsxRuntime.jsx(FieldRenderer, {
-          field: field
-        }, field.name || `field-${index}`);
-        entries.set(field.name, {
-          field,
+    regularFields.forEach((field_0, index) => {
+      if (!field_0.hidden) {
+        const element = jsxRuntime.jsx(FieldWrapper, {
+          name: field_0.name,
+          type: field_0.type,
+          className: field_0.className,
+          children: jsxRuntime.jsx(FieldRenderer, {
+            field: field_0
+          })
+        }, field_0.name || `field-${index}`);
+        entries.set(field_0.name, {
+          field: field_0,
           element,
           accessed: false
         });
       }
     });
     return entries;
-  }, [fields]);
-  const layoutEntries = React.useMemo(() => {
-    const entries_0 = new Map();
-    const allLayouts = extractLayouts(fields);
-    allLayouts.forEach(({
-      layout,
-      index: index_0
-    }) => {
-      if (!layout.hidden) {
-        const key_0 = layout.name || `layout-${layout.type}-${index_0}`;
-        const element_0 = jsxRuntime.jsx(FormItemRenderer, {
-          item: layout
-        }, key_0);
-        if (layout.name) {
-          entries_0.set(layout.name, {
-            layout,
-            element: element_0
-          });
-        }
-      }
-    });
-    return entries_0;
-  }, [fields]);
+  }, [regularFields, FieldWrapper]);
   const templateFields = React.useMemo(() => createTemplateFields(fieldEntries), [fieldEntries]);
-  const templateLayouts = React.useMemo(() => createTemplateLayouts(layoutEntries), [layoutEntries]);
   const buttons = React.useMemo(() => {
     const result = {
       submit: jsxRuntime.jsx(SubmitButton, {
@@ -3726,18 +3627,12 @@ function FormGeneratorImpl(props) {
     }
     return result;
   }, [SubmitButton, disabled, form.formState.isSubmitting, submitText, showReset, resetText, handleReset]);
-  const renderField = React.useCallback((field_0, options) => {
+  const renderField = React.useCallback((field_1, options) => {
     return jsxRuntime.jsx(FieldRenderer, {
-      field: field_0,
+      field: field_1,
       namePrefix: options === null || options === void 0 ? void 0 : options.namePrefix
     });
   }, []);
-  const renderLayout = React.useCallback((layout_0, options_0) => {
-    return jsxRuntime.jsx(FormItemRenderer, {
-      item: layout_0,
-      namePrefix: options_0 === null || options_0 === void 0 ? void 0 : options_0.namePrefix
-    });
-  }, []);
   if (!children) {
     return jsxRuntime.jsx(FormProvider, {
       ...form,
@@ -3745,9 +3640,23 @@ function FormGeneratorImpl(props) {
         ref: formRef,
         onSubmit: handleSubmit,
         className: className,
-        children: [fields.map((item, index_1) => jsxRuntime.jsx(FormItemRenderer, {
-          item: item
-        }, getItemKey(item, index_1))), jsxRuntime.jsx(SubmitButton, {
+        children: [jsxRuntime.jsxs(FieldsWrapper, {
+          children: [regularFields.map((field_2, index_0) => jsxRuntime.jsx(FieldWrapper, {
+            name: field_2.name,
+            type: field_2.type,
+            className: field_2.className,
+            children: jsxRuntime.jsx(FieldRenderer, {
+              field: field_2
+            })
+          }, field_2.name || `field-${index_0}`)), arrayFields.map(arrayField => jsxRuntime.jsx(FieldWrapper, {
+            name: arrayField.name,
+            type: "array",
+            className: arrayField.className,
+            children: jsxRuntime.jsx(ArrayFieldRenderer, {
+              field: arrayField
+            })
+          }, arrayField.name))]
+        }), jsxRuntime.jsx(SubmitButton, {
           disabled: disabled || form.formState.isSubmitting,
           isSubmitting: form.formState.isSubmitting,
           children: submitText
@@ -3757,7 +3666,9 @@ function FormGeneratorImpl(props) {
   }
   const renderProps = {
     fields: templateFields,
-    layouts: templateLayouts,
+    arrays: Object.fromEntries(arrayFields.map(arrayField_0 => [arrayField_0.name, {
+      field: arrayField_0
+    }])),
     buttons,
     title,
     description,
@@ -3766,7 +3677,8 @@ function FormGeneratorImpl(props) {
     isValid: form.formState.isValid,
     isDirty: form.formState.isDirty,
     renderField,
-    renderLayout
+    FieldWrapper,
+    FieldsWrapper
   };
   const renderFn = children;
   return jsxRuntime.jsx(FormProvider, {
@@ -3787,6 +3699,7 @@ Object.defineProperty(exports, "z", {
     enumerable: true,
     get: function () { return zod.z; }
 });
+exports.ArrayFieldRenderer = ArrayFieldRenderer;
 exports.Controller = Controller;
 exports.FieldRenderer = FieldRenderer;
 exports.FormGenerator = FormGenerator;
@@ -3794,24 +3707,20 @@ exports.FormProvider = FormProvider;
 exports.clearAllRegistries = clearAllRegistries;
 exports.clearFieldRegistry = clearFieldRegistry;
 exports.clearFormComponentRegistry = clearFormComponentRegistry;
-exports.clearLayoutRegistry = clearLayoutRegistry;
 exports.getFieldComponent = getFieldComponent;
 exports.getFormComponent = getFormComponent;
 exports.getFormComponents = getFormComponents;
-exports.getLayoutComponent = getLayoutComponent;
 exports.getRegisteredFieldTypes = getRegisteredFieldTypes;
 exports.hasFieldType = hasFieldType;
 exports.hasFormComponent = hasFormComponent;
-exports.hasLayoutComponent = hasLayoutComponent;
-exports.isLayoutBlock = isLayoutBlock;
+exports.isArrayField = isArrayField;
 exports.registerField = registerField;
 exports.registerFields = registerFields;
 exports.registerFormComponent = registerFormComponent;
 exports.registerFormComponents = registerFormComponents;
-exports.registerLayoutComponent = registerLayoutComponent;
-exports.registerLayoutComponents = registerLayoutComponents;
 exports.resetFormComponentRegistry = resetFormComponentRegistry;
 exports.unregisterField = unregisterField;
+exports.useArrayField = useArrayField;
 exports.useFieldArray = useFieldArray;
 exports.useForm = useForm;
 exports.useFormContext = useFormContext;