import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from '@powerhousedao/design-system';
import { EnumField } from '../../enum-field/index.js';
import { Form } from '../../form/index.js';
const EnumFieldExample = () => {
    const onSubmit = async (data) => {
        // simulate a network request
        await new Promise((resolve) => setTimeout(resolve, 1000));
        // this is a test
        // eslint-disable-next-line no-alert
        alert(JSON.stringify(data, null, 2));
    };
    const genderOptions = [
        { label: 'Male', value: 'male' },
        { label: 'Female', value: 'female' },
        { label: 'Other', value: 'other' },
    ];
    const colorOptions = [
        { label: 'Red', value: 'red' },
        { label: 'Blue', value: 'blue' },
        { label: 'Green', value: 'green' },
        { label: 'Yellow', value: 'yellow' },
        { label: 'Purple', value: 'purple' },
        { label: 'Orange', value: 'orange' },
    ];
    return (_jsx(Form, { onSubmit: onSubmit, children: ({ formState: { isSubmitting } }) => (_jsxs("div", { className: "flex w-[400px] flex-col gap-4", children: [_jsx(EnumField, { name: "gender", label: "Gender", variant: "RadioGroup", options: genderOptions, required: true }), _jsx(EnumField, { name: "favoriteColor", label: "Favorite Color", description: "Choose your favorite color", variant: "Select", options: colorOptions, searchable: true, placeholder: "Select a color", required: true }), _jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? 'Submitting...' : 'Submit' })] })) }));
};
export default EnumFieldExample;
//# sourceMappingURL=enum-field-example.js.map