import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from "@powerhousedao/design-system";
import { BooleanField } from "../../boolean-field/index.js";
import { Form } from "../../form/index.js";
import { RadioGroupField } from "../../fragments/radio-group-field/index.js";
import { NumberField } from "../../number-field/index.js";
import { StringField } from "../../string-field/index.js";
const MultipleFieldsWithComplexLayout = () => {
    const onSubmit = async (data) => {
        // simulate a slow network request
        await new Promise((resolve) => setTimeout(resolve, 2000));
        alert(JSON.stringify(data, null, 2));
    };
    return (_jsx(Form, { onSubmit: onSubmit, defaultValues: {
            name: "",
            email: "",
            bio: "",
            phone: "",
            age: 0,
            notifications: true,
            gender: "",
            subscribe: true,
            termsAndConditions: false,
        }, children: ({ formState: { isSubmitting } }) => (_jsxs("div", { className: "flex w-[700px] flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(StringField, { name: "name", label: "First Name", placeholder: "John", required: true, maxLength: 50 }), _jsx(NumberField, { name: "age", label: "Age", placeholder: "25", required: true, precision: 0, showErrorOnBlur: true }), _jsx(NumberField, { showErrorOnBlur: true, name: "height", label: "Height (cm)", placeholder: "180", required: true, precision: 2, trailingZeros: true }), _jsx(StringField, { name: "email", label: "Email", placeholder: "john@doe.com", required: true, pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i }), _jsx(StringField, { name: "phone", label: "Phone", placeholder: "(123) 456-7890", pattern: /^\(\d{3}\)\s\d{3}-\d{4}$/, description: "Enter your phone number. Format: (000) 000-0000" })] }), _jsx(StringField, { name: "bio", label: "Bio (length: 20-100 characters, pattern: letters, numbers and spaces)", placeholder: "I am a software engineer...", minLength: 20, maxLength: 100, multiline: true, pattern: /^[a-zA-Z0-9 ]+$/, required: true, showErrorOnChange: true }), _jsx(RadioGroupField, { name: "gender", label: "Gender", options: [
                        { label: "Male", value: "male" },
                        { label: "Female", value: "female" },
                        { label: "Other", value: "other" },
                    ], required: true }), _jsx(BooleanField, { name: "notifications", label: "Receive notifications", description: "Receive notifications about your account activity", isToggle: true }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(BooleanField, { name: "subscribe", label: "Subscribe to newsletter" }), _jsx(BooleanField, { name: "termsAndConditions", label: _jsxs("div", { children: ["Accept", " ", _jsx("a", { href: "#", className: "font-bold text-blue-500", children: "terms and conditions" })] }), required: true })] }), _jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : "Submit" })] })) }));
};
export default MultipleFieldsWithComplexLayout;
//# sourceMappingURL=multiple-fields-with-complex-layout.js.map