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

package/README.md

@@ -120,10 +120,55 @@ registerFields({
 
 // Register the submit button component
 registerFormComponent('SubmitButton', Button);
+
+// Optional: Register field wrappers for custom styling
+registerFormComponent('FieldWrapper', ({ children, name, type, className }) => (
+  <div className={`field-wrapper field-${type}`} data-field={name}>
+    {children}
+  </div>
+));
+
+registerFormComponent('FieldsWrapper', ({ children }) => (
+  <div className="form-fields">
+    {children}
+  </div>
+));
 ```
 
 ---
 
+## Field Wrappers
+
+Customize how fields are wrapped without modifying individual field components:
+
+### FieldWrapper
+
+Wraps each individual field. Receives the field's `name`, `type`, and `className`:
+
+```typescript
+registerFormComponent('FieldWrapper', ({ children, name, type, className }) => (
+  <div className={`form-group ${className || ''}`} data-field-type={type}>
+    {children}
+  </div>
+));
+```
+
+### FieldsWrapper
+
+Wraps all fields together (excludes the submit button). Useful for grid layouts:
+
+```typescript
+registerFormComponent('FieldsWrapper', ({ children, className }) => (
+  <div className={`grid grid-cols-2 gap-4 ${className || ''}`}>
+    {children}
+  </div>
+));
+```
+
+Both default to `React.Fragment`, adding zero DOM overhead when not customized.
+
+---
+
 ## Field Types
 
 Built-in HTML fallback types:
@@ -365,6 +410,8 @@ The render function receives:
 | `isValid` | `boolean` | Form validity state |
 | `isDirty` | `boolean` | Form dirty state |
 | `renderField` | `function` | Manual field renderer |
+| `FieldWrapper` | `ComponentType` | Registered FieldWrapper component |
+| `FieldsWrapper` | `ComponentType` | Registered FieldsWrapper component |
 
 ### Fields Object
 

package/dist/index.js

@@ -2808,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',
@@ -3561,6 +3567,8 @@ function FormGeneratorImpl(props) {
     form: form
   }), [form, handleSubmit, mergedDefaultValues]);
   const SubmitButton = getFormComponent('SubmitButton');
+  const FieldWrapper = getFormComponent('FieldWrapper');
+  const FieldsWrapper = getFormComponent('FieldsWrapper');
   const {
     regularFields,
     arrayFields
@@ -3583,8 +3591,13 @@ function FormGeneratorImpl(props) {
     const entries = new Map();
     regularFields.forEach((field_0, index) => {
       if (!field_0.hidden) {
-        const element = jsxRuntime.jsx(FieldRenderer, {
-          field: field_0
+        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,
@@ -3594,7 +3607,7 @@ function FormGeneratorImpl(props) {
       }
     });
     return entries;
-  }, [regularFields]);
+  }, [regularFields, FieldWrapper]);
   const templateFields = React.useMemo(() => createTemplateFields(fieldEntries), [fieldEntries]);
   const buttons = React.useMemo(() => {
     const result = {
@@ -3627,11 +3640,23 @@ function FormGeneratorImpl(props) {
         ref: formRef,
         onSubmit: handleSubmit,
         className: className,
-        children: [regularFields.map((field_2, index_0) => jsxRuntime.jsx(FieldRenderer, {
-          field: field_2
-        }, field_2.name || `field-${index_0}`)), arrayFields.map(arrayField => jsxRuntime.jsx(ArrayFieldRenderer, {
-          field: arrayField
-        }, arrayField.name)), 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
@@ -3651,7 +3676,9 @@ function FormGeneratorImpl(props) {
     isSubmitting: form.formState.isSubmitting,
     isValid: form.formState.isValid,
     isDirty: form.formState.isDirty,
-    renderField
+    renderField,
+    FieldWrapper,
+    FieldsWrapper
   };
   const renderFn = children;
   return jsxRuntime.jsx(FormProvider, {