Campos de formulário

<Field
  name="telefone" // pesca errors["telefone"] sozinho
  label="Telefone"
  errors={state?.errors} // o objeto INTEIRO da server action
  hint="Com DDD. É por aqui que o paciente recebe a confirmação."
/>

// id só quando precisa diferir do name (o mesmo form aberto várias vezes
// na página, com useId por instância).

<SeletorHora rotulo="Começa às" valor={hhmm} onValor={setHhmm} />

// Expediente da clínica e grade do profissional: passo de 5.
// Não é gosto — é o CHECK operating_hours_passo_de_cinco no banco.
<SeletorHora rotulo="Abre às" passoDoMinuto={5} valor={hhmm} onValor={setHhmm} />

// Data em três colunas: dia, mês, ano. Quem precisa do dia da SEMANA usa o
// calendário grande da Agenda, que é outra ferramenta.
<SeletorDia rotulo="Dia" valor={ymd} onValor={setYmd} />

// Campo que aceita ficar vazio ganha a terceira saída no rodapé do modal,
// numa linha inteira em cima de Voltar e OK (espremida em três, cortava):
<SeletorDia rotulo="Vale a partir de" textoDoLimpar="Valer agora" … />

// Onde a tela pede as DUAS coisas (remarcar, agendar da ficha do paciente):
// cinco colunas num modal só, data e hora separadas por uma divisória.
<SeletorDiaHora rotulo="Remarcar para" ymd={ymd} hhmm={hhmm} onValor={(d, h) => …} />

// O gatilho é um BUTTON, não um input: montado à mão dentro de um campo, ele
// precisa na mão dos três fios que o `Field` amarra sozinho — `id` pro
// `htmlFor` de um rótulo IRMÃO (rótulo envolvente já encaminha o clique
// sozinho), `descritoPor` com o erro e a dica, nessa ordem (o erro é o que
// precisa ser ouvido antes), e `invalido`, que pinta o vermelho por
// `data-` — `aria-invalid` não vale em `role="button"`. As três peças
// (`SeletorDia`, `SeletorHora`, `SeletorDiaHora`) aceitam os três.
<Label htmlFor="nascimento-gatilho">Nascimento</Label>
<SeletorDia
  rotulo="Nascimento"
  id="nascimento-gatilho"
  descritoPor="nascimento-error nascimento-hint"
  …
/>

// `abreEm`: onde a roleta abre com o campo VAZIO, quando "hoje" não é a
// pergunta. "Agendar retorno" conta os atalhos "em 7/30/90 dias" a partir do
// dia do COMPROMISSO — sem isto o calendário ao lado deles partia de hoje, e
// dois controles vizinhos tinham dois pontos de partida. Segue preso em
// min/max: abrir num dia que o próprio OK recusa não serve.
<SeletorDia rotulo="Ou escolher o dia" min={ymd} abreEm={ymd} … />

<Regua
  min={100}
  max={500}
  step={10}
  value={valor}
  onValue={setValor}
  aria-label="Simular preço"
/>

<Regua
  min={60}
  max={300}
  step={10}
  value={valor}
  onValue={setValor}
  aria-label="Simular preço"
  aria-valuetext={formatBRL(valor)}
  rotuloDoPolegar="você"
  zonas={[
    { ate: 110, tom: "negativo" },
    { ate: 170, tom: "atencao" },
    { ate: 300, tom: "positivo" },
  ]}
  marcas={[
    { valor: 110, rotulo: "mínimo", detalhe: "R$ 110,00" },
    { valor: 170, rotulo: "recomendado", detalhe: "R$ 170,00" },
  ]}
/>

// Grade: uma coluna no celular, duas a partir de sm.
<div className="grid gap-6 sm:grid-cols-2">
  <Field name="nome" label="Nome" />
  <Field name="telefone" label="Telefone" />
  <TextareaField name="obs" label="Observação" className="sm:col-span-2" />
</div>

// Dentro do Field: space-y-2 entre rótulo, controle, dica e erro.
// Entre blocos de um formulário longo: space-y-phi-3.