Drawer form

export const Default = () => (
  <Stage>
    <ContactForm prefill="Jan Novák" />
  </Stage>
);

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="create form — the primary action carries the verb („Vytvořit“), not „OK“">
      <Stage h={400}>
        <ContactForm prefill="Jan Novák" />
      </Stage>
    </Labeled>
    <Labeled text="short form — the drawer keeps its width whatever the number of fields">
      <Stage h={300}>
        <DrawerForm
          title="Nový štítek"
          icon="tag"
          submitLabel="Přidat"
          canSubmit
          pending={false}
          onClose={() => {}}
          onSubmit={() => {}}
        >
          <DrawerField label="Název">
            <Input autoFocus defaultValue="Investoři" />
          </DrawerField>
        </DrawerForm>
      </Stage>
    </Labeled>
  </div>
);

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="not ready — the form is empty, so the primary action is off (type a name and it turns on)">
      <Stage h={400}>
        <ContactForm />
      </Stage>
    </Labeled>
    <Labeled text="saving — the primary action shows „Ukládám…“ and is not clickable again">
      <Stage h={400}>
        <ContactForm prefill="Jan Novák" pending />
      </Stage>
    </Labeled>
    <Labeled text="failed — one sentence at the end of the form; everything the user typed stays where it was">
      <Stage h={400}>
        <ContactForm prefill="Jan Novák" error />
      </Stage>
    </Labeled>
  </div>
);

export const Composition = () => (
  <div
    style={{
      display: 'grid',
      gridTemplateColumns: '1fr auto',
      height: 420,
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      overflow: 'hidden',
      background: 'var(--bg-canvas)',
    }}
  >
    <div style={{ padding: 'var(--sp-5)', color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Výpis kontaktů — the drawer takes the right-hand slot of the app shell (`.as-drawer`); the
      list stays readable next to it instead of being covered by a modal.
    </div>
    <ContactForm prefill="Jan Novák" />
  </div>
);