Form save bar

import { useState } from 'react';
import { SettingGroup, SettingRow } from '@arbol-ai/ui';
import { FormSaveBar, useAppForm } from '@arbol-ai/ui/form';

interface Clinic {
  name: string;
  greeting: string;
}

const ClinicSettings = () => {
  const [isSaved, setIsSaved] = useState(false);
  const form = useAppForm({
    defaultValues: { name: 'Clínica Norte', greeting: 'Hi, this is Clínica Norte.' } satisfies Clinic,
    onSubmit: ({ value }) => {
      // What was saved becomes the form's defaults, so the bar steps aside.
      form.reset(value);
      setIsSaved(true);
    },
  });
  return (
    <form.AppForm>
      <form.Form aria-label="Clinic settings" className="max-w-xl gap-6">
        <SettingGroup title="Clinic">
          <SettingRow label="Name" layout="stacked">
            <form.AppField name="name">{(field) => <field.TextField aria-label="Name" />}</form.AppField>
          </SettingRow>
          <SettingRow label="Greeting" layout="stacked">
            <form.AppField name="greeting">
              {(field) => <field.TextField aria-label="Greeting" multiline />}
            </form.AppField>
          </SettingRow>
        </SettingGroup>
        <FormSaveBar idle={isSaved ? 'All changes saved.' : undefined} />
      </form.Form>
    </form.AppForm>
  );
};

<ClinicSettings />