@akinon/akiform-builder 0.8.0 → 1.0.1

package/dist/cjs/__tests__/akiform-builder.test.js

@@ -0,0 +1,1432 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const akiform_1 = require("@akinon/akiform");
+const akival_1 = require("@akinon/akival");
+const utils_1 = require("@akinon/utils");
+const React = require("react");
+const react_1 = require("react");
+const akiform_builder_1 = require("../src/akiform-builder");
+const field_builder_1 = require("../src/field-builder");
+describe('AkiformBuilder', () => {
+    const mockOnSubmit = vi.fn();
+    const mockOnReset = vi.fn();
+    const mockOnValueChange = vi.fn();
+    const expandCollapsable = () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = utils_1.userEvent.setup();
+        const expandIcons = (yield utils_1.screen.findAllByRole('button')).filter(el => el.className.includes('akinon-collapse-expand-icon'));
+        for (const expandIcon of expandIcons) {
+            yield user.click(expandIcon);
+        }
+    });
+    const defaultFields = [
+        {
+            key: 'name',
+            label: 'Name',
+            type: 'text',
+            placeholder: 'Enter your name'
+        },
+        {
+            key: 'age',
+            label: 'Age',
+            type: 'number',
+            placeholder: 'Enter your age',
+            help: 'Description text 2'
+        }
+    ];
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('AkiformBuilder in uncontrolled mode', () => {
+        it('renders form fields correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            const newDefaultFields = defaultFields.map((field, key) => (Object.assign(Object.assign({}, field), { help: `Description text ${key}`, labelDescription: `Label description text ${key}` })));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: newDefaultFields, onSubmit: mockOnSubmit }));
+            }));
+            for (const field of newDefaultFields) {
+                if (field.label) {
+                    expect(utils_1.screen.getByText(field.label)).toBeInTheDocument();
+                }
+                if (field.placeholder) {
+                    expect(utils_1.screen.getByPlaceholderText(field.placeholder)).toBeInTheDocument();
+                }
+                expect(utils_1.screen.getByText(field.help)).toBeInTheDocument();
+                expect(utils_1.screen.getByText(field.labelDescription)).toBeInTheDocument();
+            }
+        }));
+        it('renders form fields correctly with row and column fields', () => __awaiter(void 0, void 0, void 0, function* () {
+            const newDefaultFields = [
+                {
+                    type: 'row',
+                    key: 'mainrow',
+                    rowProps: {
+                        align: 'middle'
+                    },
+                    columnFields: [
+                        {
+                            type: 'column',
+                            key: 'col1',
+                            columnProps: {
+                                span: '24'
+                            },
+                            fields: [
+                                {
+                                    type: 'row',
+                                    key: 'row1',
+                                    columnFields: [
+                                        {
+                                            type: 'column',
+                                            key: 'col1_1',
+                                            fields: [
+                                                {
+                                                    type: 'text',
+                                                    key: 'test1',
+                                                    label: 'Test Field 1'
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                },
+                                {
+                                    type: 'row',
+                                    key: 'row2',
+                                    columnFields: [
+                                        {
+                                            type: 'column',
+                                            key: 'col2_1',
+                                            fields: [
+                                                {
+                                                    type: 'text',
+                                                    key: 'test2',
+                                                    label: 'Test Field 2'
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            type: 'column',
+                                            key: 'col2_2',
+                                            fields: [
+                                                {
+                                                    type: 'text',
+                                                    key: 'test3',
+                                                    label: 'Test Field 3'
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: newDefaultFields, onSubmit: mockOnSubmit }));
+            }));
+            // Check fields
+            expect(utils_1.screen.getByLabelText('Test Field 1')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Test Field 2')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Test Field 3')).toBeInTheDocument();
+            // Check row and column count
+            expect(document.querySelectorAll('.akinon-col')).toHaveLength(11);
+            expect(document.querySelectorAll('.akinon-row')).toHaveLength(7);
+            // Check props
+            expect(document.querySelector('.akinon-row-middle')).toBeInTheDocument();
+            expect(document.querySelector('.akinon-col-24')).toBeInTheDocument();
+        }));
+        it('handles form with custom field and onChange', () => __awaiter(void 0, void 0, void 0, function* () {
+            const CustomComponent = ({ field, control }) => {
+                const { field: controllerField } = (0, akiform_1.useController)({
+                    name: field.key,
+                    control
+                });
+                return React.createElement("input", Object.assign({ "data-testid": "custom-input" }, controllerField));
+            };
+            const fields = [
+                {
+                    key: 'customField',
+                    label: 'Custom Field',
+                    type: 'custom',
+                    render: ({ field, formValues, control }) => (React.createElement(CustomComponent, { field: field, formValues: formValues, control: control }))
+                }
+            ];
+            const onValueChangeMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit, onValueChange: onValueChangeMock }));
+            }));
+            const customInput = utils_1.screen.getByTestId('custom-input');
+            expect(customInput).toBeInTheDocument();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                yield utils_1.userEvent.type(customInput, 'test value');
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(onValueChangeMock).toHaveBeenCalledWith(expect.objectContaining({
+                    customField: 'test value'
+                }));
+            });
+        }));
+        it('resets form when reset button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onReset: mockOnReset, showResetButton: true }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                    target: { value: 'John Doe' }
+                });
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Age'), {
+                    target: { value: '30' }
+                });
+                utils_1.fireEvent.click(utils_1.screen.getByText('RESET'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(mockOnReset).toHaveBeenCalled();
+                expect(utils_1.screen.getByLabelText('Name')).toHaveValue('');
+                expect(utils_1.screen.getByLabelText('Age')).toHaveValue('');
+            });
+        }));
+        it('exposes reset method through ref', () => __awaiter(void 0, void 0, void 0, function* () {
+            const ref = React.createRef();
+            const onResetMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { ref: ref, fields: defaultFields, onSubmit: mockOnSubmit, onReset: onResetMock }));
+            }));
+            // Fill in some values
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                    target: { value: 'John Doe' }
+                });
+            }));
+            // Call reset through ref
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset();
+            }));
+            // Check if form is reset and onReset is called
+            expect(utils_1.screen.getByLabelText('Name')).toHaveValue('');
+            expect(onResetMock).toHaveBeenCalled();
+            // Test partial reset
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                    target: { value: 'John Doe' }
+                });
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Age'), {
+                    target: { value: '30' }
+                });
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset({ name: 'Jane Doe' });
+            }));
+            expect(utils_1.screen.getByLabelText('Name')).toHaveValue('Jane Doe');
+            expect(utils_1.screen.getByLabelText('Age')).toHaveValue('30');
+        }));
+        it('calls onValueChange when form values change in uncontrolled mode', () => __awaiter(void 0, void 0, void 0, function* () {
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onValueChange: mockOnValueChange }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                    target: { value: 'John Doe' }
+                });
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(mockOnValueChange).toHaveBeenCalledWith(expect.objectContaining({
+                    name: 'John Doe'
+                }));
+            });
+        }));
+        it('applies throttling in uncontrolled mode', () => __awaiter(void 0, void 0, void 0, function* () {
+            vi.useFakeTimers();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onValueChange: mockOnValueChange }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                    target: { value: 'John Doe' }
+                });
+            }));
+            expect(mockOnValueChange).not.toHaveBeenCalled();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                vi.advanceTimersByTime(akiform_builder_1.THROTTLE_DELAY);
+            }));
+            expect(mockOnValueChange).toHaveBeenCalledWith(expect.objectContaining({ name: 'John Doe' }));
+            vi.useRealTimers();
+        }));
+        it('renders different field types correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                {
+                    key: 'name',
+                    label: 'Name',
+                    type: 'text',
+                    help: 'Help text',
+                    labelDescription: 'Label description text',
+                    placeholder: 'Enter your name'
+                },
+                { key: 'age', label: 'Age', type: 'number' },
+                {
+                    key: 'gender',
+                    label: 'Gender',
+                    type: 'select',
+                    options: [
+                        { value: 'male', label: 'Male' },
+                        { value: 'female', label: 'Female' }
+                    ]
+                },
+                { key: 'subscribe', label: 'Subscribe', type: 'checkbox' },
+                { key: 'birthdate', label: 'Birth Date', type: 'date' },
+                { key: 'bio', label: 'Biography', type: 'textarea' }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
+            }));
+            expect(utils_1.screen.getByPlaceholderText('Enter your name')).toHaveAttribute('type', 'text');
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Age')).toHaveClass('akinon-input-number-input');
+            expect(utils_1.screen.getByLabelText('Gender')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Subscribe')).toHaveAttribute('type', 'checkbox');
+            expect(utils_1.screen.getByLabelText('Birth Date')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Biography')).toBeInTheDocument();
+        }));
+        it('renders field array correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('addresses')
+                    .label('Addresses')
+                    .type('fieldArray')
+                    .defaultExpanded(true)
+                    .fields([
+                    (0, field_builder_1.field)()
+                        .key('street')
+                        .label('Street')
+                        .type('text')
+                        .help('Help text')
+                        .labelDescription('Label description text')
+                        .build(),
+                    (0, field_builder_1.field)().key('city').label('City').type('text').build()
+                ])
+                    .build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
+            }));
+            expect(utils_1.screen.getByText('Add Addresses')).toBeInTheDocument();
+            yield user.click(utils_1.screen.getByTestId('addresses-add-button'));
+            yield expandCollapsable();
+            expect(utils_1.screen.getAllByText('Street')).toHaveLength(1);
+            expect(utils_1.screen.getAllByText('City')).toHaveLength(1);
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
+        }));
+        it('handles form with field array and nested validation', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
+            const fields = [
+                {
+                    key: 'items',
+                    label: 'Items',
+                    type: 'fieldArray',
+                    fields: [
+                        {
+                            key: 'name',
+                            label: 'Item Name',
+                            type: 'text',
+                            validation: akival_1.akival.string().required('Item name is required')
+                        },
+                        {
+                            key: 'quantity',
+                            label: 'Quantity',
+                            type: 'number',
+                            validation: akival_1.akival.number().min(1, 'Quantity must be at least 1')
+                        }
+                    ]
+                }
+            ];
+            const onSubmitMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
+            }));
+            // Add an item
+            yield user.click(utils_1.screen.getByTestId('items-add-button'));
+            // Try to submit without filling required fields
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(utils_1.screen.getByText('An error occurred in here')).toBeInTheDocument();
+                expect(onSubmitMock).not.toHaveBeenCalled();
+            });
+            yield expandCollapsable();
+            // Fill in valid data
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                const nameInput = utils_1.screen.getByRole('textbox', { name: /item name/i });
+                const quantityInput = utils_1.screen.getByRole('spinbutton', {
+                    name: /quantity/i
+                });
+                yield utils_1.userEvent.type(nameInput, 'Test Item');
+                yield utils_1.userEvent.type(quantityInput, '2');
+            }));
+            // Submit the form
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
+                    items: [{ name: 'Test Item', quantity: 2 }]
+                }), expect.anything());
+            });
+        }));
+        it('handles field array operations correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
+            const fields = [
+                {
+                    key: 'items',
+                    label: 'Items',
+                    type: 'fieldArray',
+                    fields: [
+                        { key: 'name', label: 'Item Name', type: 'text' },
+                        { key: 'quantity', label: 'Quantity', type: 'number' }
+                    ]
+                }
+            ];
+            const TestComponent = () => {
+                const [formValues, setFormValues] = React.useState({});
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit, onValueChange: values => {
+                            setFormValues(values);
+                        } }),
+                    React.createElement("div", { "data-testid": "form-values" }, JSON.stringify(formValues))));
+            };
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(TestComponent, null));
+            }));
+            // Add an item
+            yield user.click(utils_1.screen.getByTestId('items-add-button'));
+            yield expandCollapsable();
+            // Fill in the fields
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Item Name'), {
+                    target: { value: 'Test Item' }
+                });
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Quantity'), {
+                    target: { value: '5' }
+                });
+            }));
+            // Wait for the form values to update
+            yield (0, utils_1.waitFor)(() => {
+                const formValuesElement = utils_1.screen.getByTestId('form-values');
+                const formValues = JSON.parse(formValuesElement.textContent || '{}');
+                expect(formValues).toEqual(expect.objectContaining({
+                    items: [{ name: 'Test Item', quantity: 5 }]
+                }));
+            });
+            // Submit the form
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            // Check the submitted values
+            yield (0, utils_1.waitFor)(() => {
+                expect(mockOnSubmit).toHaveBeenCalledWith(expect.objectContaining({
+                    items: [{ name: 'Test Item', quantity: 5 }]
+                }), expect.anything());
+            });
+        }));
+        it('applies layout options correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, layout: "horizontal", layoutOptions: { labelCol: { span: 8 }, wrapperCol: { span: 16 } } }));
+            }));
+            const form = utils_1.screen.getByTestId('akiform-builder');
+            expect(form).toHaveClass('akinon-form-horizontal');
+        }));
+        it('conditionally renders and disables fields', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                { key: 'showField', label: 'Show Field', type: 'checkbox' },
+                {
+                    key: 'conditionalField',
+                    label: 'Conditional Field',
+                    type: 'text',
+                    config: { visible: values => values.showField }
+                },
+                { key: 'enableField', label: 'Enable Field', type: 'checkbox' },
+                {
+                    key: 'disableableField',
+                    label: 'Disableable Field',
+                    type: 'text',
+                    config: { disabled: values => !values.enableField }
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
+            }));
+            expect(utils_1.screen.queryByLabelText('Conditional Field')).not.toBeInTheDocument();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.click(utils_1.screen.getByLabelText('Show Field'));
+            }));
+            expect(utils_1.screen.getByLabelText('Conditional Field')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Disableable Field')).toBeDisabled();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.click(utils_1.screen.getByLabelText('Enable Field'));
+            }));
+            expect(utils_1.screen.getByLabelText('Disableable Field')).not.toBeDisabled();
+        }));
+        it('applies custom validation', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                {
+                    key: 'email',
+                    label: 'Email',
+                    type: 'text',
+                    validation: akival_1.akival.string().email('Invalid email format')
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByRole('textbox', { name: /email/i }), {
+                    target: { value: 'invalid-email' }
+                });
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(utils_1.screen.getByText('Invalid email format')).toBeInTheDocument();
+            });
+        }));
+        it('resets form using ref', () => __awaiter(void 0, void 0, void 0, function* () {
+            const ref = React.createRef();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { ref: ref, fields: defaultFields, onSubmit: mockOnSubmit }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                    target: { value: 'John Doe' }
+                });
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Age'), {
+                    target: { value: '30' }
+                });
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset();
+            }));
+            expect(utils_1.screen.getByLabelText('Name')).toHaveValue('');
+            expect(utils_1.screen.getByLabelText('Age')).toHaveValue('');
+        }));
+        it('displays error states', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                {
+                    key: 'name',
+                    label: 'Name',
+                    type: 'text',
+                    validation: akival_1.akival.string().required('Name is required')
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(utils_1.screen.getByText('Name is required')).toBeInTheDocument();
+            });
+        }));
+        it('handles form submission', () => __awaiter(void 0, void 0, void 0, function* () {
+            const onSubmit = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: onSubmit }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                    target: { value: 'John Doe' }
+                });
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Age'), {
+                    target: { value: '30' }
+                });
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+                    name: 'John Doe',
+                    age: 30
+                }), expect.anything());
+            });
+        }));
+        it('handles form submission with errors', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                {
+                    key: 'name',
+                    label: 'Name',
+                    type: 'text',
+                    validation: akival_1.akival.string().required('Name is required')
+                }
+            ];
+            const onSubmit = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmit }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(utils_1.screen.getByText('Name is required')).toBeInTheDocument();
+                expect(onSubmit).not.toHaveBeenCalled();
+            });
+        }));
+        it('handles form with initial values', () => __awaiter(void 0, void 0, void 0, function* () {
+            const initialValues = { name: 'John Doe', age: 30 };
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, initialValues: initialValues }));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(utils_1.screen.getByLabelText('Name')).toHaveValue('John Doe');
+                expect(utils_1.screen.getByLabelText('Age')).toHaveValue('30');
+            });
+        }));
+        it('handles form with custom layout', () => __awaiter(void 0, void 0, void 0, function* () {
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, layout: "vertical" }));
+            }));
+            const form = utils_1.screen.getByTestId('akiform-builder');
+            expect(form).toHaveClass('akinon-form-vertical');
+        }));
+        it('renders custom field correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+            const CustomComponent = ({ field }) => (React.createElement("div", { "data-testid": "custom-field" }, field.label));
+            const fields = [
+                {
+                    key: 'customField',
+                    label: 'Custom Field',
+                    type: 'custom',
+                    help: 'Help text',
+                    labelDescription: 'Label description text',
+                    render: ({ field }) => (React.createElement(CustomComponent, { field: field }))
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            expect(utils_1.screen.getByTestId('custom-field')).toHaveTextContent('Custom Field');
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
+        }));
+        it('cleans up throttle timeout on unmount', () => __awaiter(void 0, void 0, void 0, function* () {
+            vi.useFakeTimers();
+            const { unmount } = (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onValueChange: mockOnValueChange }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                    target: { value: 'John Doe' }
+                });
+            }));
+            unmount();
+            // Advance timers and ensure onValueChange is not called
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                vi.advanceTimersByTime(akiform_builder_1.THROTTLE_DELAY + 100);
+            }));
+            expect(mockOnValueChange).not.toHaveBeenCalled();
+            vi.useRealTimers();
+        }));
+        it('handles custom field with undefined render prop', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                {
+                    key: 'customField',
+                    label: 'Custom Field',
+                    type: 'custom',
+                    render: undefined
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            // The custom field should not be rendered, but the form should not crash
+            expect(utils_1.screen.queryByLabelText('Custom Field')).not.toBeInTheDocument();
+            // The form should still be rendered
+            expect(utils_1.screen.getByTestId('akiform-builder')).toBeInTheDocument();
+        }));
+        it('renders custom submit and reset button props', () => __awaiter(void 0, void 0, void 0, function* () {
+            const submitButtonProps = {
+                className: 'custom-submit-btn',
+                children: 'submit button'
+            };
+            const resetButtonProps = {
+                className: 'custom-reset-btn',
+                children: 'reset button'
+            };
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, showResetButton: true, onReset: mockOnReset, submitButtonProps: submitButtonProps, resetButtonProps: resetButtonProps }));
+            }));
+            const submitButton = utils_1.screen
+                .getByText(submitButtonProps.children)
+                .closest('button');
+            const resetButton = utils_1.screen
+                .getByText(resetButtonProps.children)
+                .closest('button');
+            expect(submitButton).toBeInTheDocument();
+            expect(resetButton).toBeInTheDocument();
+            expect(submitButton).toHaveClass(submitButtonProps.className);
+            expect(resetButton).toHaveClass(resetButtonProps.className);
+            yield utils_1.userEvent.click(resetButton);
+            expect(mockOnReset).toHaveBeenCalled();
+            yield utils_1.userEvent.click(submitButton);
+            expect(mockOnSubmit).toHaveBeenCalled();
+        }));
+    });
+    describe('AkiformBuilder in controlled mode', () => {
+        it('uses provided values in controlled mode', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                { key: 'name', label: 'Name', type: 'text' },
+                { key: 'age', label: 'Age', type: 'number' }
+            ];
+            const controlledValues = { name: 'John Doe', age: 30 };
+            const onChangeMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn(), controlled: true, values: controlledValues, onValueChange: onChangeMock }));
+            }));
+            expect(utils_1.screen.getByLabelText('Name')).toHaveValue('John Doe');
+            expect(utils_1.screen.getByLabelText('Age')).toHaveValue('30');
+        }));
+        it('calls onValueChange when form values change in controlled mode', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                { key: 'name', label: 'Name', type: 'text' }
+            ];
+            const onChangeMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn(), controlled: true, values: { name: '' }, onValueChange: onChangeMock }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Name'), {
+                    target: { value: 'Jane Doe' }
+                });
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(onChangeMock).toHaveBeenCalledWith(expect.objectContaining({ name: 'Jane Doe' }));
+            });
+        }));
+        it('calls onValueChange immediately in controlled mode', () => __awaiter(void 0, void 0, void 0, function* () {
+            const onValueChangeMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, controlled: true, values: { name: 'John Doe', age: 30 }, onValueChange: onValueChangeMock }));
+            }));
+            expect(onValueChangeMock).toHaveBeenCalledWith(expect.objectContaining({ name: 'John Doe', age: 30 }));
+        }));
+        it('handles conditional rendering and disabling of fields', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                { key: 'showField', label: 'Show Field', type: 'checkbox' },
+                {
+                    key: 'conditionalField',
+                    label: 'Conditional Field',
+                    type: 'text',
+                    config: { visible: values => values.showField }
+                },
+                { key: 'enableField', label: 'Enable Field', type: 'checkbox' },
+                {
+                    key: 'disableableField',
+                    label: 'Disableable Field',
+                    type: 'text',
+                    config: { disabled: values => !values.enableField }
+                }
+            ];
+            const onValueChangeMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn(), controlled: true, values: { showField: false, enableField: false }, onValueChange: onValueChangeMock }));
+            }));
+            expect(utils_1.screen.queryByLabelText('Conditional Field')).not.toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Disableable Field')).toBeDisabled();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.click(utils_1.screen.getByLabelText('Show Field'));
+                utils_1.fireEvent.click(utils_1.screen.getByLabelText('Enable Field'));
+            }));
+            expect(utils_1.screen.getByLabelText('Conditional Field')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Disableable Field')).not.toBeDisabled();
+            expect(onValueChangeMock).toHaveBeenCalledWith(expect.objectContaining({
+                showField: true,
+                enableField: true
+            }));
+        }));
+    });
+    describe('FieldArrayComponent', () => {
+        it('renders field array with initial values', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                {
+                    key: 'items',
+                    label: 'Items',
+                    type: 'fieldArray',
+                    fields: [
+                        { key: 'name', label: 'Item Name', type: 'text' },
+                        { key: 'quantity', label: 'Quantity', type: 'number' }
+                    ]
+                }
+            ];
+            const initialValues = {
+                items: [
+                    { name: 'Item 1', quantity: 1 },
+                    { name: 'Item 2', quantity: 2 }
+                ]
+            };
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn(), initialValues: initialValues }));
+            }));
+            yield expandCollapsable();
+            expect(utils_1.screen.getAllByLabelText('Item Name')).toHaveLength(2);
+            expect(utils_1.screen.getAllByLabelText('Quantity')).toHaveLength(2);
+        }));
+        it('adds and removes field array items', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
+            const fields = [
+                {
+                    key: 'items',
+                    label: 'Items',
+                    type: 'fieldArray',
+                    fields: [{ key: 'name', label: 'Item Name', type: 'text' }]
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            // Add an item
+            yield user.click(utils_1.screen.getByTestId('items-add-button'));
+            yield expandCollapsable();
+            expect(utils_1.screen.getByLabelText('Item Name')).toBeInTheDocument();
+            // Add another item
+            yield user.click(utils_1.screen.getByLabelText('Add Items'));
+            yield expandCollapsable();
+            expect(utils_1.screen.getAllByLabelText('Item Name')).toHaveLength(2);
+            // Remove an item
+            yield user.click(utils_1.screen.getAllByLabelText('Remove Items')[0]);
+            yield expandCollapsable();
+            expect(utils_1.screen.getAllByLabelText('Item Name')).toHaveLength(1);
+        }));
+        it('handles field array with conditional fields', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
+            const fields = [
+                {
+                    key: 'items',
+                    label: 'Items',
+                    type: 'fieldArray',
+                    fields: [
+                        { key: 'name', label: 'Item Name', type: 'text' },
+                        {
+                            key: 'description',
+                            label: 'Description',
+                            type: 'text',
+                            config: {
+                                visible: values => values.name && values.name.length > 5
+                            }
+                        }
+                    ]
+                }
+            ];
+            const { rerender } = (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            yield expandCollapsable();
+            // Add an item
+            yield user.click(utils_1.screen.getByLabelText('Add Items'));
+            yield expandCollapsable();
+            // Description should not be visible initially
+            expect(utils_1.screen.queryByLabelText('Description')).not.toBeInTheDocument();
+            // Enter a name longer than 5 characters
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('Item Name'), {
+                    target: { value: 'Long Name' }
+                });
+            }));
+            // Force a re-render to trigger the conditional rendering
+            rerender(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            // Description should now be visible
+            yield (0, utils_1.waitFor)(() => {
+                expect(utils_1.screen.getByLabelText('Description')).toBeInTheDocument();
+            });
+        }));
+    });
+    describe('Edge cases and uncovered scenarios', () => {
+        it('handles field array with no fields', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                {
+                    key: 'emptyFieldArray',
+                    label: 'Empty Field Array',
+                    type: 'fieldArray',
+                    fields: []
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            // The field array should be rendered with an "Add" button
+            expect(utils_1.screen.getByTestId('emptyFieldArray-add-button')).toBeInTheDocument();
+        }));
+        it('handles form submission with field array', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
+            const fields = [
+                {
+                    key: 'items',
+                    label: 'Items',
+                    type: 'fieldArray',
+                    fields: [
+                        { key: 'name', label: 'Item Name', type: 'text' },
+                        { key: 'quantity', label: 'Quantity', type: 'number' }
+                    ]
+                }
+            ];
+            const onSubmitMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
+            }));
+            // Add two items
+            yield user.click(utils_1.screen.getByTestId('items-add-button'));
+            yield user.click(utils_1.screen.getByLabelText('Add Items'));
+            yield expandCollapsable();
+            // Fill in the fields
+            const itemNames = utils_1.screen.getAllByLabelText('Item Name');
+            const quantities = utils_1.screen.getAllByLabelText('Quantity');
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(itemNames[0], { target: { value: 'Item 1' } });
+                utils_1.fireEvent.change(quantities[0], { target: { value: '5' } });
+                utils_1.fireEvent.change(itemNames[1], { target: { value: 'Item 2' } });
+                utils_1.fireEvent.change(quantities[1], { target: { value: '10' } });
+            }));
+            // Submit the form
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
+                    items: [
+                        { name: 'Item 1', quantity: 5 },
+                        { name: 'Item 2', quantity: 10 }
+                    ]
+                }), expect.anything());
+            });
+        }));
+        it('handles form with all field types', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                { key: 'text', label: 'Text', type: 'text' },
+                { key: 'number', label: 'Number', type: 'number' },
+                {
+                    key: 'select',
+                    label: 'Select',
+                    type: 'select',
+                    options: [{ value: 'option1', label: 'Option 1' }]
+                },
+                { key: 'checkbox', label: 'Checkbox', type: 'checkbox' },
+                { key: 'date', label: 'Date', type: 'date' },
+                { key: 'textarea', label: 'Textarea', type: 'textarea' },
+                {
+                    key: 'fieldArray',
+                    label: 'Field Array',
+                    type: 'fieldArray',
+                    fields: [{ key: 'subfield', label: 'Subfield', type: 'text' }]
+                },
+                {
+                    key: 'custom',
+                    label: 'Custom',
+                    type: 'custom',
+                    render: () => React.createElement("div", { "data-testid": "custom-field" }, "Custom Field")
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            expect(utils_1.screen.getByLabelText('Text')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Number')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Select')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Checkbox')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Date')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Textarea')).toBeInTheDocument();
+            expect(utils_1.screen.getByTestId('fieldArray-add-button')).toBeInTheDocument(); // For field array
+            expect(utils_1.screen.getByTestId('custom-field')).toBeInTheDocument();
+        }));
+        it('handles form with inline layout', () => __awaiter(void 0, void 0, void 0, function* () {
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: vi.fn(), layout: "inline" }));
+            }));
+            const form = utils_1.screen.getByTestId('akiform-builder');
+            expect(form).toHaveClass('akinon-form-inline');
+        }));
+        it('handles form reset with custom reset handler', () => __awaiter(void 0, void 0, void 0, function* () {
+            const onResetMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: defaultFields, onSubmit: vi.fn(), onReset: onResetMock, showResetButton: true }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.click(utils_1.screen.getByText('RESET'));
+            }));
+            expect(onResetMock).toHaveBeenCalled();
+        }));
+    });
+    describe('AkiformBuilder with FieldBuilder', () => {
+        it('renders form fields created with FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('name')
+                    .label('Name')
+                    .type('text')
+                    .placeholder('Enter your name')
+                    .help('Help text')
+                    .labelDescription('Label description text')
+                    .build(),
+                (0, field_builder_1.field)()
+                    .key('age')
+                    .label('Age')
+                    .type('number')
+                    .placeholder('Enter your age')
+                    .build(),
+                (0, field_builder_1.field)()
+                    .key('country')
+                    .label('Country')
+                    .type('select')
+                    .options([
+                    { value: 'us', label: 'United States' },
+                    { value: 'ca', label: 'Canada' }
+                ])
+                    .build(),
+                (0, field_builder_1.field)()
+                    .key('subscribe')
+                    .label('Subscribe to newsletter')
+                    .type('checkbox')
+                    .build(),
+                (0, field_builder_1.field)().key('birthdate').label('Birth Date').type('date').build(),
+                (0, field_builder_1.field)().key('description').label('Description').type('textarea').build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            expect(utils_1.screen.getByText('Name')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Age')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Country')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Subscribe to newsletter')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Birth Date')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Description')).toBeInTheDocument();
+        }));
+        it('handles form submission with fields created by FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('name')
+                    .label('Name')
+                    .type('text')
+                    .validation(akival_1.akival.string().required('Name is required'))
+                    .build(),
+                (0, field_builder_1.field)()
+                    .key('age')
+                    .label('Age')
+                    .type('number')
+                    .validation(akival_1.akival.number().min(18, 'Must be at least 18'))
+                    .build()
+            ];
+            const onSubmitMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
+            }));
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByRole('textbox', { name: /name/i }), {
+                    target: { value: 'John Doe' }
+                });
+                utils_1.fireEvent.change(utils_1.screen.getByRole('spinbutton', { name: /age/i }), {
+                    target: { value: '25' }
+                });
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
+                    name: 'John Doe',
+                    age: 25
+                }), expect.anything());
+            });
+        }));
+        it('handles form with custom field created by FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+            const CustomComponent = ({ field }) => (React.createElement("div", { "data-testid": "custom-field" }, field.label));
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('customField')
+                    .label('Custom Field')
+                    .type('custom')
+                    .help('Help text')
+                    .labelDescription('Label description text')
+                    .render(({ field }) => React.createElement(CustomComponent, { field: field }))
+                    .build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            expect(utils_1.screen.getByTestId('custom-field')).toHaveTextContent('Custom Field');
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
+        }));
+        it('handles form with field array created by FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('addresses')
+                    .label('Addresses')
+                    .type('fieldArray')
+                    .fields([
+                    (0, field_builder_1.field)()
+                        .key('street')
+                        .label('Street')
+                        .type('text')
+                        .help('Help text')
+                        .labelDescription('Label description text')
+                        .placeholder('Enter your street')
+                        .build(),
+                    (0, field_builder_1.field)().key('city').label('City').type('text').build()
+                ])
+                    .build()
+            ];
+            const onSubmitMock = vi.fn();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
+            }));
+            // Add an address
+            yield user.click(utils_1.screen.getByTestId('addresses-add-button'));
+            yield expandCollapsable();
+            //Check rendered fields
+            expect(utils_1.screen.getByText('Street')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('City')).toBeInTheDocument();
+            // Fill in the fields
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.change(utils_1.screen.getByPlaceholderText('Enter your street'), {
+                    target: { value: '123 Main St' }
+                });
+                utils_1.fireEvent.change(utils_1.screen.getByLabelText('City'), {
+                    target: { value: 'Anytown' }
+                });
+            }));
+            // Submit the form
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.submit(utils_1.screen.getByTestId('akiform-builder'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
+                    addresses: [{ street: '123 Main St', city: 'Anytown' }]
+                }), expect.anything());
+            });
+        }));
+        it('handles conditional rendering with FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                (0, field_builder_1.field)().key('showField').label('Show Field').type('checkbox').build(),
+                (0, field_builder_1.field)()
+                    .key('conditionalField')
+                    .label('Conditional Field')
+                    .type('text')
+                    .config({ visible: (values) => values.showField })
+                    .build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            expect(utils_1.screen.queryByLabelText('Conditional Field')).not.toBeInTheDocument();
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.click(utils_1.screen.getByLabelText('Show Field'));
+            }));
+            expect(utils_1.screen.getByLabelText('Conditional Field')).toBeInTheDocument();
+        }));
+        it('handles disabled fields with FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('disabledField')
+                    .label('Disabled Field')
+                    .type('text')
+                    .config({ disabled: true })
+                    .build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            expect(utils_1.screen.getByLabelText('Disabled Field')).toBeDisabled();
+        }));
+    });
+    describe('Accessibility features', () => {
+        it('renders form with proper ARIA attributes', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                {
+                    key: 'name',
+                    label: 'Name',
+                    type: 'text',
+                    validation: akival_1.akival.string().required()
+                },
+                { key: 'age', label: 'Age', type: 'number' }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            const form = utils_1.screen.getByRole('form');
+            expect(form).toHaveAttribute('aria-label', 'Form');
+            const nameInput = utils_1.screen.getByRole('textbox', { name: /name/i });
+            expect(nameInput).toHaveAttribute('aria-required', 'true');
+            expect(nameInput).toHaveAttribute('aria-invalid', 'false');
+            const ageInput = utils_1.screen.getByRole('spinbutton', { name: /age/i });
+            expect(ageInput).toHaveAttribute('aria-required', 'false');
+            expect(ageInput).toHaveAttribute('aria-invalid', 'false');
+        }));
+        it('updates aria-invalid attribute when form is submitted with errors', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                {
+                    key: 'name',
+                    label: 'Name',
+                    type: 'text',
+                    validation: akival_1.akival.string().required('Name is required')
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            const nameInput = utils_1.screen.getByRole('textbox', { name: /name/i });
+            expect(nameInput).toHaveAttribute('aria-invalid', 'false');
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.submit(utils_1.screen.getByRole('form'));
+            }));
+            yield (0, utils_1.waitFor)(() => {
+                expect(nameInput).toHaveAttribute('aria-invalid', 'true');
+                expect(utils_1.screen.getByText('Name is required')).toBeInTheDocument();
+            });
+        }));
+        it('renders field array with proper ARIA attributes', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
+            const fields = [
+                {
+                    key: 'addresses',
+                    label: 'Addresses',
+                    type: 'fieldArray',
+                    fields: [
+                        { key: 'street', label: 'Street', type: 'text' },
+                        { key: 'city', label: 'City', type: 'text' }
+                    ]
+                }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            yield user.click(utils_1.screen.getByTestId('addresses-add-button'));
+            yield expandCollapsable();
+            const fieldArrayGroup = utils_1.screen.getByRole('group', { name: 'Addresses' });
+            expect(fieldArrayGroup).toBeInTheDocument();
+            const addButton = utils_1.screen.getByLabelText('Add Addresses');
+            expect(addButton).toBeInTheDocument();
+            yield user.click(addButton);
+            yield expandCollapsable();
+            const removeButton = utils_1.screen.getAllByLabelText('Remove Addresses')[1];
+            expect(removeButton).toBeInTheDocument();
+        }));
+        it('supports keyboard navigation', () => __awaiter(void 0, void 0, void 0, function* () {
+            const user = utils_1.userEvent.setup();
+            const fields = [
+                { key: 'name', label: 'Name', type: 'text' },
+                { key: 'age', label: 'Age', type: 'number' }
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn(), showResetButton: true }));
+            }));
+            const nameInput = utils_1.screen.getByLabelText('Name');
+            const ageInput = utils_1.screen.getByLabelText('Age');
+            const submitButton = utils_1.screen.getByRole('button', { name: 'SUBMIT' });
+            const resetButton = utils_1.screen.getByRole('button', { name: 'RESET' });
+            yield user.tab();
+            expect(document.activeElement).toBe(nameInput);
+            yield user.tab();
+            expect(document.activeElement).toBe(ageInput);
+            yield user.tab();
+            expect(document.activeElement).toBe(submitButton);
+            yield user.tab();
+            expect(document.activeElement).toBe(resetButton);
+        }));
+    });
+    describe('AkiformBuilder with sections', () => {
+        it('renders form with sections', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('personalInfo')
+                    .label('Personal Information')
+                    .type('section')
+                    .fields([
+                    (0, field_builder_1.field)()
+                        .key('name')
+                        .label('Name')
+                        .type('text')
+                        .help('Help text')
+                        .labelDescription('Label description text')
+                        .build(),
+                    (0, field_builder_1.field)().key('age').label('Age').type('number').build()
+                ])
+                    .collapsible(true)
+                    .defaultExpanded(true)
+                    .build(),
+                (0, field_builder_1.field)()
+                    .key('contactInfo')
+                    .label('Contact Information')
+                    .type('section')
+                    .collapsible(true)
+                    .defaultExpanded(false)
+                    .fields([
+                    (0, field_builder_1.field)().key('email').label('Email').type('text').build(),
+                    (0, field_builder_1.field)().key('phone').label('Phone').type('text').build()
+                ])
+                    .build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            expect(utils_1.screen.getByText('Personal Information')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Contact Information')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Name')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Help text')).toBeInTheDocument();
+            expect(utils_1.screen.getByText('Label description text')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Age')).toBeInTheDocument();
+            // Check if the first section is expanded by default
+            expect(utils_1.screen.getByText('Name').closest('label')).toBeVisible();
+            // Check if the second section is collapsed by default
+            expect(utils_1.screen.queryByLabelText('Email')).not.toBeInTheDocument();
+            // Expand the second section
+            const contactInfoSection = utils_1.screen.getByText('Contact Information');
+            yield utils_1.userEvent.click(contactInfoSection);
+            // Wait for the section to expand
+            yield (0, utils_1.waitFor)(() => {
+                expect(utils_1.screen.getByLabelText('Email')).toBeInTheDocument();
+            });
+            // Check if the Email field is now visible
+            // const emailInput = screen.getByLabelText('Email');
+            // expect(emailInput).toBeVisible();
+            // Additional debug information
+            // if (!emailInput.isConnected) {
+            //   console.error('Email input is not connected to the DOM');
+            // }
+            // console.log(
+            //   'Email input visibility:',
+            //   window.getComputedStyle(emailInput).display
+            // );
+        }));
+        it('handles form submission with sections', () => __awaiter(void 0, void 0, void 0, function* () {
+            const onSubmitMock = vi.fn();
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('personalInfo')
+                    .label('Personal Information')
+                    .type('section')
+                    .fields([
+                    (0, field_builder_1.field)().key('name').label('Name').type('text').build(),
+                    (0, field_builder_1.field)().key('age').label('Age').type('number').build()
+                ])
+                    .build(),
+                (0, field_builder_1.field)()
+                    .key('contactInfo')
+                    .label('Contact Information')
+                    .type('section')
+                    .fields([(0, field_builder_1.field)().key('email').label('Email').type('text').build()])
+                    .build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
+            }));
+            // Expand both sections
+            yield utils_1.userEvent.click(utils_1.screen.getByText('Personal Information'));
+            yield utils_1.userEvent.click(utils_1.screen.getByText('Contact Information'));
+            // Fill in the form
+            yield utils_1.userEvent.type(utils_1.screen.getByLabelText('Name'), 'John Doe', {
+                delay: 1
+            });
+            yield utils_1.userEvent.type(utils_1.screen.getByLabelText('Age'), '30', { delay: 1 });
+            yield utils_1.userEvent.type(utils_1.screen.getByLabelText('Email'), 'john@example.com', {
+                delay: 1
+            });
+            // Wait for submit button to become interactable
+            const submitButton = utils_1.screen.getByRole('button', { name: /submit/i });
+            yield (0, utils_1.waitFor)(() => {
+                expect(submitButton).toBeEnabled();
+            });
+            // Submit the form
+            yield utils_1.userEvent.click(submitButton);
+            // Validate submission
+            expect(onSubmitMock).toHaveBeenCalledWith({
+                name: 'John Doe',
+                age: 30,
+                email: 'john@example.com'
+            }, expect.anything());
+        }));
+        it('handles conditional rendering within sections', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('personalInfo')
+                    .label('Personal Information')
+                    .type('section')
+                    .fields([
+                    (0, field_builder_1.field)().key('name').label('Name').type('text').build(),
+                    (0, field_builder_1.field)().key('showAge').label('Show Age').type('checkbox').build(),
+                    (0, field_builder_1.field)()
+                        .key('age')
+                        .label('Age')
+                        .type('number')
+                        .config({ visible: (values) => values.showAge })
+                        .build()
+                ])
+                    .defaultExpanded(true)
+                    .build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            expect(utils_1.screen.getByLabelText('Name')).toBeInTheDocument();
+            expect(utils_1.screen.getByLabelText('Show Age')).toBeInTheDocument();
+            expect(utils_1.screen.queryByLabelText('Age')).not.toBeInTheDocument();
+            yield utils_1.userEvent.click(utils_1.screen.getByLabelText('Show Age'));
+            expect(yield utils_1.screen.findByLabelText('Age')).toBeInTheDocument();
+        }));
+    });
+    describe('AkiformBuilder with tooltip', () => {
+        it('renders form field with tooltip as TooltipProps', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('name')
+                    .label('Name')
+                    .type('text')
+                    .tooltip({ title: 'Enter your full name', defaultOpen: true })
+                    .build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            const tooltipTrigger = utils_1.screen.getByLabelText('Name');
+            expect(tooltipTrigger).toBeInTheDocument();
+            // Simulate hovering over the field to show the tooltip
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.mouseEnter(tooltipTrigger);
+            }));
+            // Wait for the tooltip to appear
+            yield (0, utils_1.waitFor)(() => {
+                expect(utils_1.screen.getByText('Enter your full name')).toBeInTheDocument();
+            });
+        }));
+        it('renders form field with tooltip as string', () => __awaiter(void 0, void 0, void 0, function* () {
+            const fields = [
+                (0, field_builder_1.field)()
+                    .key('email')
+                    .label('Email')
+                    .type('text')
+                    .tooltip({ title: 'Enter your full name', defaultOpen: true })
+                    .build()
+            ];
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                (0, utils_1.render)(React.createElement(akiform_builder_1.AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
+            }));
+            const tooltipTrigger = utils_1.screen.getByLabelText('Email');
+            expect(tooltipTrigger).toBeInTheDocument();
+            // Simulate hovering over the field to show the tooltip
+            yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+                utils_1.fireEvent.mouseEnter(tooltipTrigger);
+            }));
+            // Wait for the tooltip to appear
+            yield (0, utils_1.waitFor)(() => {
+                expect(utils_1.screen.getByText('Enter your full name')).toBeInTheDocument();
+            });
+        }));
+    });
+});