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 { StringField } from '../../string-field/index.js';
const SubmitChangesOnly = () => {
    return (_jsx(Form, { onSubmit: (data) => {
            // eslint-disable-next-line no-alert
            alert(JSON.stringify(data, null, 2));
        }, submitChangesOnly: true, defaultValues: {
            firstName: 'Jhon',
            lastName: 'Doe',
            bio: "I'm a software engineer",
        }, children: ({ reset }) => (_jsxs("div", { className: "flex w-full flex-col gap-2 md:w-96", children: [_jsx(StringField, { name: "firstName", placeholder: "Jhon", label: "First name", required: true }), _jsx(StringField, { name: "lastName", placeholder: "Doe", label: "Last name", required: true }), _jsx(StringField, { name: "bio", placeholder: "I'm a software engineer", label: "Bio", description: "If you leave this field empty, it will be submitted as null", multiline: true }), _jsx("div", { className: "text-sm text-gray-500", children: "After submitting the form, all form fields will be reset 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 SubmitChangesOnly;
export const DOCS_CODE = `
const SubmitChangesOnly = () => {
  return (
    <Form
      onSubmit={(data: FormData) => {
        alert(JSON.stringify(data, null, 2));
      }}
      submitChangesOnly
      defaultValues={{
        firstName: "Jhon",
        lastName: "Doe",
        bio: "I'm a software engineer",
      }}
    >
      {({ reset }) => (
        <div className="flex w-full flex-col gap-2 md:w-96">
          <StringField
            name="firstName"
            placeholder="Jhon"
            label="First name"
            required
          />
          <StringField
            name="lastName"
            placeholder="Doe"
            label="Last name"
            required
          />
          <StringField
            name="bio"
            placeholder="I'm a software engineer"
            label="Bio"
            description="If you leave this field empty, it will be submitted as null"
            multiline
          />

          <div className="text-sm text-gray-500">
            After submitting the form, all form fields will be reset to their
            initial values
          </div>

          <div className="flex gap-2">
            <Button
              className="w-full"
              color="light"
              type="reset"
              onClick={() => reset()}
            >
              Reset
            </Button>
            <Button className="w-full" type="submit">
              Submit
            </Button>
          </div>
        </div>
      )}
    </Form>
  );
};
`;
//# sourceMappingURL=submit-changes-only.js.map