import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from '../../../../ui/components/button/index.js';
import { Form } from '../../form/index.js';
import { NumberField } from '../../number-field/index.js';
import { StringField } from '../../string-field/index.js';
const FormWithResetButton = () => {
    return (_jsx(Form, { onSubmit: (data) => {
            // eslint-disable-next-line no-alert
            alert(JSON.stringify(data, null, 2));
        }, children: ({ reset }) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(StringField, { name: "example", minLength: 3, maxLength: 6, label: "Field example", required: true }), _jsx(NumberField, { name: "number", label: "Number", required: true }), _jsx("div", { className: "w-72 text-sm text-gray-500", children: "Clicking reset will restore all form fields and validation states to their initial values" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { className: "flex-1", variant: "secondary", type: "reset", onClick: reset, children: "Reset" }), _jsx(Button, { className: "flex-1", type: "submit", children: "Submit" })] })] })) }));
};
export default FormWithResetButton;
//# sourceMappingURL=reset-button.js.map