OverlayActions

import { useId, useState } from 'react';
import { Button, Field, OverlayActions, OverlayLayout, OverlayTrigger, nativeFieldBox } from '@arbol-ai/ui';

const PayerExample = () => {
  const formId = useId();
  const [kind, setKind] = useState('EPS');
  const [added, setAdded] = useState('');
  return (
    <div className="flex items-center gap-3">
      <OverlayTrigger>
        <Button variant="outline">New payer</Button>
        <OverlayLayout footer={<OverlayActions form={formId} submitLabel="Add payer" />} title="New payer">
          {(_close, leave) => (
            <form
              className="grid gap-4"
              id={formId}
              onSubmit={(event) => {
                event.preventDefault();
                event.stopPropagation();
                setAdded(kind);
                leave();
              }}
            >
              <Field id={`${formId}-kind`} label="Kind">
                <select
                  className={nativeFieldBox()}
                  id={`${formId}-kind`}
                  onChange={(event) => {
                    setKind(event.target.value);
                  }}
                  value={kind}
                >
                  <option value="EPS">EPS</option>
                  <option value="Prepaid medicine">Prepaid medicine</option>
                </select>
              </Field>
              <Field id={`${formId}-notes`} label="Notes">
                <textarea className={nativeFieldBox({ control: 'textarea' })} id={`${formId}-notes`} />
              </Field>
            </form>
          )}
        </OverlayLayout>
      </OverlayTrigger>
      <output className="text-muted-foreground text-sm">
        {added === '' ? null : `${added} payer added.`}
      </output>
    </div>
  );
};

<PayerExample />