Entrar, criar conta, recuperar a senha e confirmar o e-mail usam a mesma família Access*. Ela monta um cartão central com marca, título, formulário e uma faixa de resposta, e entrega o formulário pronto para acessibilidade: erros anunciados, estado de processamento e o único h1 da rota. As peças nascem no @rastreio-x/ui (não vêm do HeroUI) e dependem dos estilos rx-access-* da fachada.

import {
  AccessButton,
  AccessCheckbox,
  AccessFeedback,
  AccessField,
  AccessModeSwitch,
  AccessNotice,
  AccessPage,
  AccessSection,
  AccessSubmit,
  AuthDashboardPreview,
} from "@rastreio-x/ui";

Composição da tela

A tela de login em miniatura: título, dois campos, envio e a faixa de resposta. Aqui está montada com AccessSection, que não traz main nem a marca; na rota real, o AccessPage faz as duas coisas.

AccessPage

AccessPage é a página inteira: um main com o cartão centrado, a marca, o alternador opcional (modeSwitch) e o painel decorativo aside, que aparece ao lado do cartão a partir de 1100 px. Como ocupa a janela, esta página mostra só o esquema; veja a rota /login do Admin para vê-la inteira.

<AccessPage
  description="Bem-vindo de volta. Acesse sua área de operação."
  modeSwitch={<AccessModeSwitch onChange={goToSignup} value="login" />}
  title="Entrar"
  titleTone="welcome"
>
  <form className="rx-access-form">…</form>
</AccessPage>

AccessField

Campo de texto com rótulo, dica e erro. labelAction coloca uma ação ao lado do rótulo, como "Esqueci minha senha". O rótulo continua sendo o nome acessível do campo, e o * de obrigatório vem de required.

Com erro

Com invalid e error, a mensagem aparece sob o campo e é repetida numa região role="alert" oculta para o leitor de tela anunciar na hora.

AccessSubmit

O botão primário de envio do formulário (type="submit"). disabled bloqueia; processing anuncia "Processando. Aguarde." numa região status. Troque o rótulo para o gerúndio enquanto envia.

AccessButton

Ação fora do envio do formulário. Recebe onPress (nunca onClick) e as variantes do botão; o padrão é secondary.

AccessCheckbox

Caixa de aceite do cadastro, com o texto ao lado. Com invalid, aponte o aviso por describedBy: o texto do erro vive na faixa de resposta, não dentro da caixa.

AccessNotice

Mensagem de resposta em três tons: error, success e o neutro. O papel decide o anúncio: alert interrompe, status (padrão) espera a vez.

AccessFeedback

A faixa reservada da resposta. Ela já existe, vazia, antes do envio, com altura mínima de três linhas, então o aviso entra sem empurrar o cartão. Clique em "Simular Erro" e observe que nada ao redor se mexe.

AccessModeSwitch

O alternador Entrar | Criar conta do topo do cartão. É navegação real (uma rota por modo): value reflete a rota atual e onChange só dispara ao escolher o outro modo.

AuthDashboardPreview

O painel de exemplo do cadastro e do onboarding: um dashboard em SVG, sem dado real. focus aproxima o quadro de um item (store ou person), com máscara radial que dissolve as bordas. É decorativo (aria-hidden), então o conteúdo da tela nunca depende dele. Passe accent (hex da marca) e carrierName para refletir a escolha da pessoa.

Anatomia

Propriedades

Página (AccessPage):

Seção (AccessSection):

Alternador (AccessModeSwitch):

Campo (AccessField):

Caixa de aceite (AccessCheckbox):

Envio (AccessSubmit):

Botão (AccessButton):

Aviso (AccessNotice):

Faixa de resposta (AccessFeedback):

Painel de exemplo (AuthDashboardPreview):

Animações

Há dois movimentos. Na troca entre Entrar e Criar conta, o cartão desliza 21,5 rem e o painel lateral entra ou sai em fade (0,5 s com curva de saída suave); isso só ocorre a partir de 1100 px de largura. No AuthDashboardPreview, o quadro aproxima do item em foco com uma mola, animando o viewBox do SVG e a máscara. Com prefers-reduced-motion, o cartão não desliza e o zoom do painel dura 0,01 s: a troca é imediata. O restante (campos, avisos) não anima.

Acessibilidade

• O cartão é uma região nomeada pelo h1, e há um único h1 e um único main por rota.
• AccessField liga rótulo, dica e erro ao campo; o erro também vai a uma região alert oculta, para ser lido ao aparecer.
• AccessSubmit anuncia "Processando. Aguarde." durante o envio; disabled impede reenvio.
• AccessFeedback reserva o espaço antes da resposta, para a página não pular e o foco não se perder.
• O painel aside é aria-hidden: nada essencial vive nele.
• Nunca informe erro só por cor: o AccessNotice sempre traz o texto.

Boas práticas

• Um AccessPage por rota de acesso; o conteúdo vai dentro de um form com a classe rx-access-form.
• Mantenha a resposta dentro de AccessFeedback, e dê role="alert" só ao que exige ação imediata.
• Nunca guarde a senha no estado depois do envio: limpe o campo antes da chamada.
• Rótulos de envio em Title Case curto, no gerúndio enquanto processa: "Entrar", "Entrando…".
• Use AccessSection quando a tela vive dentro do Shell (ex.: confirmar identidade).

Relacionados

• Button para as variantes que o AccessButton aceita.
• Checkbox sobre o qual o aceite é montado.
• TextField sobre o qual o campo é montado.
• Segment usado pelo alternador de modo.