@syncfusion/ej2-react-form-renderer 0.1.0-beta

package/README.md

@@ -0,0 +1,148 @@
+# EJ2 React Form Renderer
+
+The `@syncfusion/ej2-react-form-renderer` package is a powerful React component for rendering dynamic, JSON-driven forms using Syncfusion's Essential® Studio React components.
+
+## Key Features
+
+- **JSON-Driven Forms**: Render forms from JSON schemas (FormSchema, DataSchema, or UISchema)
+- **20+ Field Types**: Support for textbox, textarea, number, dropdown, datepicker, checkbox, radio, switch, and more
+- **Advanced Layouts**: Panels, tables, tabs for complex form structures
+- **Validation**: Built-in validation with Syncfusion FormValidator
+- **Theming**: Support for all Syncfusion themes (Material, Bootstrap, Fluent, Tailwind, etc.)
+- **Accessibility**: WCAG 2.1 AA compliant
+- **TypeScript Support**: Full type definitions included
+
+## Installation
+
+To install `@syncfusion/ej2-react-form-renderer` and its dependencies, run:
+
+```sh
+npm install @syncfusion/ej2-react-form-renderer
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import React from 'react';
+import { FormRenderer } from '@syncfusion/ej2-react-form-renderer';
+import '@syncfusion/ej2-react-form-renderer/styles/tailwind3.css'; // Choose your theme
+
+const schema = {
+  "version": "1.0.0-beta",
+  "properties": {
+    "firstName": {
+      "id": "textbox_1773902761966_849",
+      "type": "string",
+      "label": "First Name",
+      "required": true
+    },
+    "lastName": {
+      "id": "textbox_1773902782931_266",
+      "type": "string",
+      "label": "Last Name",
+      "required": true
+    },
+    "age": {
+      "id": "number_1773902793792_571",
+      "type": "number",
+      "label": "Age",
+      "required": true
+    },
+    "dateOfBirth": {
+      "id": "datepicker_1773902807416_662",
+      "type": "string",
+      "format": "date",
+      "label": "Date of Birth",
+      "required": true
+    },
+    "submit": {
+      "id": "submit_button_initial",
+      "type": "button",
+      "label": "Submit",
+      "buttonType": "submit"
+    }
+  }
+};
+
+function App() {
+  const handleSubmit = (args) => {
+    console.log('Form submitted:', args.data);
+    console.log('Is valid:', args.isValid);
+  };
+
+  const handleChange = (args) => {
+    console.log('Field changed:', args.field, args.value);
+  };
+
+  return (
+    <FormRenderer
+      dataSchema={schema}
+      onSubmit={handleSubmit}
+      onChange={handleChange}
+    />
+  );
+}
+
+export default App;
+```
+
+## Supported Field Types
+
+- Basic inputs: `textbox`, `textarea`, `number`, `inputmask`
+- Selection controls: `dropdown`, `multiselect`, `radio`, `checkbox`, `checkboxgroup`
+- Date/time: `datepicker`, `datetimepicker`, `timepicker`, `daterange`
+- Rich inputs: `switch` (toggle), `colorpicker`, `rating`, `signature`, `imageeditor`, `richtexteditor`, `fileupload`, `rangeslider`
+- Layout & containers: `panel` (section), `table` (cells), `tabs`, `card`, `message` (alert), `statichtml`
+- Data display / complex controls: `datagrid` (embedded grid)
+- Buttons: `button`, `splitbutton` and grouped button configurations (`buttonsGroups`)
+
+
+## API Reference
+
+### FormRenderer Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `dataSchema` | `DataSchema \| FormSchema \| string` | Form schema (JSON or object) |
+| `uiSchema` | `UISchema \| string` | Optional UI layout schema |
+| `layout` | `'single' \| 'twocolumn' \| 'threecolumn' \| 'fourcolumn'` | Form layout (when no UI schema) |
+| `onSubmit` | `(args: SubmitEventArgs) => void` | Submit handler |
+| `onChange` | `(args: ChangeEventArgs) => void` | Field change handler |
+| `onButtonClick` | `(args: ButtonClickEventArgs) => void` | Button click handler |
+| `created` | `() => void` | Called when form is ready |
+| `className` | `string` | Additional CSS classes |
+
+### FormLayout
+
+```tsx
+export const FormLayout = {
+  SingleColumn: 'single',
+  TwoColumn: 'twocolumn',
+  ThreeColumn: 'threecolumn',
+  FourColumn: 'fourcolumn'
+} as const;
+```
+
+## Schema Formats
+
+The FormRenderer supports multiple schema formats:
+
+1. **DataSchema**: JSON Schema-compatible format
+2. **UISchema**: Separate UI layout configuration
+
+## Support
+
+Product support is available through the following channels:
+
+- [Support Ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed response in 24 hours
+- [Community Forum](https://www.syncfusion.com/forums)
+
+## License and Copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion's licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for React UI components, you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+© Copyright 2026 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution.

package/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @syncfusion/ej2-react-form-renderer
+ * Form Renderer Component - Dynamic JSON-driven forms
+ */
+
+export * from './src/index.js';

package/index.js

@@ -0,0 +1,6 @@
+/**
+ * @syncfusion/ej2-react-form-renderer
+ * Form Renderer Component - Dynamic JSON-driven forms
+ */
+
+export * from './src/index.js';

package/license

@@ -0,0 +1,13 @@
+Syncfusion® License
+
+Copyright (c) Syncfusion®, Inc. All rights reserved.
+
+Essential® JS 2 Form Renderer library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License.
+
+To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®'s terms and conditions.
+
+If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options.
+
+You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
+
+The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@syncfusion/ej2-react-form-renderer",
+  "version": "0.1.0-beta",
+  "description": "Form renderer component for rendering dynamic JSON-driven forms with Syncfusion EJ2 React components",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "keywords": [
+    "syncfusion",
+    "ej2",
+    "react",
+    "form",
+    "form-renderer",
+    "form-builder",
+    "dynamic-forms",
+    "json-forms",
+    "schema-forms",
+    "ui-components",
+    "react-components"
+  ],
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "typings": "./index.d.ts",
+  "readme": "README.md",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./styles/*": "./styles/*"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@syncfusion/ej2-react-buttons": "*",
+    "@syncfusion/ej2-react-calendars": "*",
+    "@syncfusion/ej2-react-dropdowns": "*",
+    "@syncfusion/ej2-react-grids": "*",
+    "@syncfusion/ej2-react-image-editor": "*",
+    "@syncfusion/ej2-react-inputs": "*",
+    "@syncfusion/ej2-react-layouts": "*",
+    "@syncfusion/ej2-react-lists": "*",
+    "@syncfusion/ej2-react-navigations": "*",
+    "@syncfusion/ej2-react-notifications": "*",
+    "@syncfusion/ej2-react-popups": "*",
+    "@syncfusion/ej2-react-richtexteditor": "*",
+    "@syncfusion/ej2-react-splitbuttons": "*"
+  },
+  "devDependencies": {}
+}

package/src/CheckboxGroup.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { FormComponent } from '../FormBuilder/types/FormSchema';
+import type { FormState } from './FormValidator';
+interface Props {
+    component: FormComponent;
+    formState?: FormState;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    optionRef?: (el: any, idx?: number) => void;
+}
+declare const CheckboxGroup: React.FC<Props>;
+export default CheckboxGroup;

package/src/CheckboxGroup.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
+const resolveAttributes = (attributes) => {
+    if (!attributes)
+        return {};
+    if (Array.isArray(attributes)) {
+        return attributes.reduce((acc, item) => {
+            if (item && item.key && item.value !== undefined) {
+                acc[item.key] = item.value;
+            }
+            return acc;
+        }, {});
+    }
+    return attributes;
+};
+const CheckboxGroup = ({ component, formState, value, onChange, optionRef }) => {
+    const resolvedValue = (formState ? formState.values[component.id] : (value ?? component.defaultValue));
+    const selectedItems = Array.isArray(resolvedValue) ? resolvedValue : [];
+    const handleCheckboxChange = (option, checked) => {
+        const newValue = checked ? [...selectedItems, option] : selectedItems.filter(i => i !== option);
+        if (formState) {
+            formState.onChange(component.id, { value: newValue });
+        }
+        else {
+            onChange?.(newValue);
+        }
+    };
+    const groupLabel = component.label && component.required ? `${component.label} *` : component.label;
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: component.layoutDirection === 'row' ? 'row' : 'column',
+        gap: component.gap || '8px',
+        alignItems: 'flex-start'
+    };
+    const itemsStyle = {
+        display: 'flex',
+        flexDirection: component.layoutDirection === 'row' ? 'row' : 'column',
+        gap: component.gap || '2px',
+        width: '100%'
+    };
+    const htmlAttrs = resolveAttributes(component.htmlAttributes);
+    return (_jsx("div", { className: `checkbox-group ${component.cssClass || ''}`, style: containerStyle, ...htmlAttrs, role: "group", "aria-label": groupLabel, title: component.tooltip, children: _jsx("div", { className: "checkbox-group-items", style: itemsStyle, children: (component.options || ['Option 1']).map((option, idx) => {
+                const optionValue = typeof option === 'string' ? option : (option.value ?? option.label ?? option.key);
+                const optionLabel = typeof option === 'string' ? option : (option.label ?? option.value ?? String(optionValue));
+                return (_jsx(CheckBoxComponent, { id: `${component.id}_${idx}`, label: optionLabel, checked: selectedItems.includes(optionValue), disabled: component.disabled, labelPosition: component.checkboxLabelPosition || 'After', change: (e) => handleCheckboxChange(optionValue, e.checked), cssClass: component.cssClass, htmlAttributes: htmlAttrs, ref: optionRef ? (el) => optionRef(el, idx) : undefined }, `${component.id}-${idx}`));
+            }) }) }, `form-checkboxgroup-${component.id}`));
+};
+export default CheckboxGroup;

package/src/CustomTabComponent.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface TabItem {
+    header: string;
+    content: React.ReactNode;
+}
+interface CustomTabComponentProps {
+    tabs: TabItem[];
+    selectedIndex?: number;
+    onTabSelect?: (index: number) => void;
+    className?: string;
+}
+export declare const CustomTabComponent: React.FC<CustomTabComponentProps>;
+export {};

package/src/CustomTabComponent.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+export const CustomTabComponent = ({ tabs, selectedIndex = 0, onTabSelect, className = '' }) => {
+    const [activeIndex, setActiveIndex] = useState(selectedIndex);
+    const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, right: 0 });
+    const tabRefs = useRef([]);
+    useEffect(() => {
+        setActiveIndex(selectedIndex);
+    }, [selectedIndex]);
+    useEffect(() => {
+        // Update indicator position
+        const activeTab = tabRefs.current[activeIndex];
+        if (activeTab) {
+            const container = activeTab.parentElement;
+            if (container) {
+                const containerWidth = container.offsetWidth;
+                const tabLeft = activeTab.offsetLeft;
+                const tabWidth = activeTab.offsetWidth;
+                setIndicatorStyle({
+                    left: tabLeft,
+                    right: containerWidth - tabLeft - tabWidth
+                });
+            }
+        }
+    }, [activeIndex, tabs]);
+    const handleTabClick = (index) => {
+        setActiveIndex(index);
+        onTabSelect?.(index);
+    };
+    return (_jsxs("div", { className: `form-tabs e-control e-tab e-lib e-keyboard ${className}`, "aria-disabled": "false", style: { width: '100%', height: 'auto' }, children: [_jsx("div", { className: "e-tab-header e-control e-toolbar e-lib e-keyboard", role: "tablist", "aria-disabled": "false", "aria-orientation": "horizontal", style: { height: 'auto', width: '100%' }, children: _jsxs("div", { className: "e-toolbar-items", "data-ripple": "true", children: [_jsx("div", { className: "e-indicator e-ignore", style: {
+                                left: `${indicatorStyle.left}px`,
+                                right: `${indicatorStyle.right}px`,
+                                transition: 'left 0.3s ease, right 0.3s ease'
+                            } }), tabs.map((tab, index) => (_jsx("div", { ref: el => { tabRefs.current[index] = el; }, className: `e-toolbar-item e-template ${activeIndex === index ? 'e-active' : ''}`, id: `e-item-tab_${index}`, "data-id": `tabitem_${index}`, children: _jsx("div", { className: "e-tab-wrap", tabIndex: activeIndex === index ? 0 : -1, "data-tabindex": "-1", role: "tab", "aria-selected": activeIndex === index, "aria-disabled": "false", "aria-controls": `e-content-tab_${index}`, onClick: () => handleTabClick(index), style: { cursor: 'pointer' }, children: _jsx("div", { className: "e-text-wrap", children: _jsx("div", { className: "e-tab-text", role: "presentation", children: tab.header }) }) }) }, index)))] }) }), _jsx("div", { className: "e-content e-lib e-touch", style: { height: 'auto' }, children: tabs.map((tab, index) => (_jsx("div", { className: `e-item ${activeIndex === index ? 'e-active' : ''}`, id: `e-content-tab_${index}`, role: "tabpanel", "aria-labelledby": `e-item-tab_${index}`, style: { display: activeIndex === index ? 'block' : 'none' }, children: _jsx("div", { children: tab.content }) }, index))) })] }));
+};

package/src/DataGridComponent.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { GridComponentSchema } from '../FormBuilder/types/FormSchema';
+/**
+ * DataGridRef: Public API exposed via forwardRef
+ * - getGridData(): Returns current grid data array for form submission
+ */
+export interface DataGridRef {
+    getGridData: () => Record<string, any>[];
+}
+/**
+ * DataGridComponentProps: Component props extending GridComponentSchema
+ * - onDataChange: Optional callback when grid data changes
+ * - isPreviewMode: Whether to refresh grid on column changes (for preview/renderer only)
+ */
+export interface DataGridComponentProps extends GridComponentSchema {
+    onDataChange?: (data: Record<string, any>[]) => void;
+    isPreviewMode?: boolean;
+}
+/**
+ * DataGridComponent: Wrapper around Syncfusion GridComponent
+ *
+ * Responsibilities:
+ * - Manages internal _currentData state (initialized from dataSource)
+ * - Exposes getGridData() via useImperativeHandle for form submission
+ * - Handles actionComplete events (add/edit/delete operations)
+ * - Maps GridColumn.validationRules to ColumnDirective.validationRules
+ * - Renders Syncfusion toolbar with CRUD actions based on allowAdding/Editing/Deleting
+ */
+export declare const DataGridComponent: React.ForwardRefExoticComponent<DataGridComponentProps & React.RefAttributes<DataGridRef>>;

package/src/DataGridComponent.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useImperativeHandle, useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, Edit, Page, Resize, Sort, } from '@syncfusion/ej2-react-grids';
+(() => {
+    try {
+        const filterPrefix = '[EJ2Grid.Warning]';
+        const _origWarn = console.warn;
+        const _origLog = console.log;
+        const _origError = console.error;
+        const makeFiltered = (orig) => (...args) => {
+            try {
+                const first = args[0];
+                if (typeof first === 'string' && first.includes(filterPrefix))
+                    return;
+            }
+            catch { }
+            orig.apply(console, args);
+        };
+        // Apply only once
+        if (!console.__ej2WarnsFiltered) {
+            console.warn = makeFiltered(_origWarn);
+            console.log = makeFiltered(_origLog);
+            console.error = makeFiltered(_origError);
+            console.__ej2WarnsFiltered = true;
+        }
+    }
+    catch { }
+})();
+/**
+ * DataGridComponent: Wrapper around Syncfusion GridComponent
+ *
+ * Responsibilities:
+ * - Manages internal _currentData state (initialized from dataSource)
+ * - Exposes getGridData() via useImperativeHandle for form submission
+ * - Handles actionComplete events (add/edit/delete operations)
+ * - Maps GridColumn.validationRules to ColumnDirective.validationRules
+ * - Renders Syncfusion toolbar with CRUD actions based on allowAdding/Editing/Deleting
+ */
+export const DataGridComponent = React.forwardRef(({ id, columns, dataSource = [], height = '200px', width = '100%', pageSize = 6, allowPaging = true, allowAdding = true, allowEditing = true, allowDeleting = true, onDataChange, isPreviewMode = false }, ref) => {
+    // Internal state: maintain current grid data
+    const [_currentData, setCurrentData] = useState(Array.isArray(dataSource) ? dataSource : []);
+    const gridRef = useRef(null);
+    /**
+     * Detect column definition changes and refresh grid
+     * This ensures that changes to headerText, type, width, etc. are immediately reflected
+     * Only enabled in preview mode to avoid issues in the main form builder view
+     */
+    useEffect(() => {
+        if (gridRef.current) {
+            if (columns && !(columns.length > 0)) {
+                gridRef.current.columns = [];
+            }
+            else if (gridRef.current.columns.length === 0 && columns && columns.length == 1) {
+                gridRef.current.columns = columns;
+            }
+            setTimeout(() => {
+                if (gridRef.current?.refresh) {
+                    gridRef.current.refresh();
+                }
+            }, 10);
+        }
+    }, [columns, allowAdding, allowDeleting, allowEditing, allowPaging, pageSize]);
+    useEffect(() => {
+        const normalized = Array.isArray(dataSource) ? dataSource : [];
+        if (gridRef.current && isPreviewMode) {
+            setCurrentData(normalized);
+            setTimeout(() => {
+                try {
+                    if (gridRef.current.dataSource !== normalized) {
+                        gridRef.current.dataSource = normalized;
+                    }
+                    setTimeout(() => {
+                        if (gridRef.current?.refresh) {
+                            gridRef.current.componentRefresh();
+                        }
+                    }, 10);
+                }
+                catch (e) {
+                }
+            }, 50);
+        }
+    }, [dataSource]);
+    /**
+     * Expose getGridData() via ref - returns current grid data for form submission
+     */
+    useImperativeHandle(ref, () => ({
+        getGridData: () => _currentData,
+        gridRef
+    }), [_currentData]);
+    /**
+     * Handle Syncfusion grid action events (add/edit/delete)
+     * Update _currentData state when rows are modified
+     */
+    const handleActionComplete = useCallback((args) => {
+        if (!gridRef.current)
+            return;
+        const eventType = args.requestType;
+        // Handle different action types
+        switch (eventType) {
+            case 'save':
+            case 'delete':
+            case 'add':
+                // After any data modification, sync grid data to state
+                // Use dataSource directly as it's the current working data in Syncfusion
+                if (gridRef.current.dataSource) {
+                    const updatedData = Array.isArray(gridRef.current.dataSource)
+                        ? gridRef.current.dataSource
+                        : [];
+                    setCurrentData(updatedData);
+                    onDataChange?.(updatedData);
+                }
+                break;
+            default:
+                break;
+        }
+    }, [onDataChange]);
+    /**
+     * Build toolbar array dynamically based on allowAdding/Editing/Deleting
+     * Default toolbar includes: Add, Edit, Delete, Update, Cancel, ExcelExport, Search
+     */
+    const buildToolbar = useCallback(() => {
+        const toolbarItems = [];
+        if (allowAdding) {
+            toolbarItems.push('Add');
+        }
+        if (allowEditing) {
+            toolbarItems.push('Edit');
+        }
+        if (allowDeleting) {
+            toolbarItems.push('Delete');
+        }
+        // Always include Update and Cancel for inline editing flow
+        toolbarItems.push('Update', 'Cancel');
+        return toolbarItems;
+    }, [allowAdding, allowEditing, allowDeleting]);
+    /**
+     * Map validation rules from GridColumn.validationRules to Syncfusion format
+     * Syncfusion ValidationRules type supports:
+     * - required: boolean
+     * - min/max: number (for numeric types)
+     * - minLength/maxLength: number (for string types)
+     */
+    const mapValidationRules = useCallback((col) => {
+        if (!col.validationRules) {
+            return undefined;
+        }
+        return col.validationRules;
+    }, []);
+    /**
+     * Memoize toolbar to prevent unnecessary re-renders
+     */
+    const toolbarConfig = useMemo(() => buildToolbar(), [buildToolbar]);
+    return (_jsx("div", { className: "datagrid-wrapper", style: { width, height: 'auto' }, children: _jsx("div", { className: "datagrid-grid", children: _jsxs(GridComponent, { ref: gridRef, id: id, dataSource: _currentData, allowPaging: allowPaging, pageSettings: { pageSize }, editSettings: {
+                    allowEditing,
+                    allowAdding,
+                    allowDeleting,
+                    mode: 'Normal',
+                }, toolbar: toolbarConfig, actionComplete: handleActionComplete, height: typeof height === 'string' ? height : `${height}px`, width: typeof width === 'string' ? width : `${width}px`, allowSorting: true, allowFiltering: false, allowSelection: true, children: [_jsx(ColumnsDirective, { children: columns && columns.length > 0 && columns.map((col) => (_jsx(ColumnDirective, { field: col.field, headerText: col.headerText, type: col.type || 'string', isPrimaryKey: col.isPrimaryKey || false, width: col.width, format: col.type === 'date' ? (col.format || 'MM/dd/yyyy') : col.format, editType: col.editType, validationRules: mapValidationRules(col) }, col.field))) }), _jsx(Inject, { services: [Edit, Toolbar, Page, Resize, Sort] })] }) }) }));
+});
+DataGridComponent.displayName = 'DataGridComponent';

package/src/FormRenderer.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Form Renderer Component
+ * Renders JSON-driven forms with React FormValidator
+ */
+import React from 'react';
+import { type FormSchema, type ButtonClickEventArgs } from './types/FormSchema';
+import { type LayoutNode, type UIField, type DataField } from './json-converter';
+export interface DataSchema {
+    version: string;
+    properties: Record<string, DataField>;
+}
+export interface UISchema {
+    properties: Record<string, UIField>;
+    layout: LayoutNode[];
+}
+export interface ChangeEventArgs {
+    field: string;
+    value: any;
+}
+export interface SubmitEventArgs {
+    data: Record<string, any>;
+    isValid: boolean;
+}
+/**
+ * Form layout options (only applies when UI schema is NOT provided)
+ */
+export declare const FormLayout: {
+    readonly SingleColumn: "single";
+    readonly TwoColumn: "twocolumn";
+    readonly ThreeColumn: "threecolumn";
+    readonly FourColumn: "fourcolumn";
+};
+export type FormLayout = typeof FormLayout[keyof typeof FormLayout];
+export interface FormRendererProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit' | 'onClick'> {
+    /**
+     * Data Schema - can be provided as:
+     * - JSON string (parsed with UniversalJsonParser)
+     * - FormSchema object (components converted to DataSchema)
+     * - DataSchema object (used directly)
+     */
+    dataSchema?: DataSchema | string | FormSchema | any;
+    /**
+     * UI Schema - can be provided as:
+     * - JSON string (validated and parsed)
+     * - UISchema object (used directly)
+     */
+    uiSchema?: UISchema | string;
+    onSubmit?: (args: SubmitEventArgs) => void;
+    onChange?: (args: ChangeEventArgs) => void;
+    onButtonClick?: (args: ButtonClickEventArgs) => void;
+    className?: string;
+    /**
+     * Form layout configuration (only applies when UI schema is NOT provided)
+     * @default FormLayout.SingleColumn
+     */
+    layout?: FormLayout;
+    /**
+     * Called when all form elements are rendered and ready
+     */
+    created?: () => void;
+}
+export declare const FormRenderer: React.ForwardRefExoticComponent<FormRendererProps & React.RefAttributes<any>>;
+export default FormRenderer;