Fundações e biblioteca de componentes do Next Running

• Movimento: hierarquia visual que guia o olhar como um percurso.
• Desempenho: interfaces rápidas de ler, sem ruído visual.
• Clareza: contraste e tipografia legíveis em qualquer contexto.
• Segurança: estados nunca dependem só de cor.
• Proximidade: linguagem direta, próxima de quem corre e organiza.
• Energia: uma cor de marca vibrante, usada com intenção — não em excesso.

Tipografia

Fonte principal: Plus Jakarta Sans (variável, carregada via next/font/google). Escala semântica definida em globals.css (--text-*) — cada nível empacota tamanho, altura de linha e peso num único utilitário.

Superfícies

• background
• surface
• surface elevada
• surface muted
• card
• muted
• popover

Paleta da marca

• primary
• secondary
• accent

Estados semânticos

Cada estado combina cor, ícone e texto — nenhum depende só da cor para ser compreendido.

• SucessoInscrição confirmada.
• AvisoPrazo se aproximando.
• InformaçãoNovo percurso disponível.
• ErroFalha ao salvar os dados.

Bordas e raios

• sm
• md
• lg
• xl

Ícones

• Ritmo
• Tempo
• Percurso
• Conquistas

Foco e navegação por teclado

Use a tecla Tab para navegar até os controles abaixo e observe o anel de foco visível. A animação de pulso respeita a preferência de redução de movimento do sistema.

Botões

Seis variantes, quatro tamanhos de texto, tamanhos somente ícone, estado de carregamento acessível (aria-busy, sem esconder o texto) e estado desabilitado.

Label longo — o grupo de botões quebra linha (flex-wrap) em vez de estourar a viewport ou cortar o texto.

Badges e estados

Campos de formulário

Primitivas isoladas, sem validação — o formulário de demonstração ao final da página valida campos equivalentes com Zod.

Composição CampoTexto — label, texto auxiliar e mensagem de erro já associados via aria-describedby e aria-invalid.

Seleção, checkbox, radio e switch

Composição CampoSelecao — estados de erro, desabilitado e "sem opções disponíveis".

Alertas

Mensagem persistente numa área da interface — diferente do toast (retorno temporário de uma ação) e do InlineFeedback (feedback compacto dentro de um fluxo). Cada variante combina cor, ícone e texto.

Cards

Tabela

Estrutura semântica (table/thead/tbody), com rolagem horizontal própria e coluna de ações com nomes acessíveis — nenhum comportamento interativo é adicionado às linhas automaticamente.

Linha selecionada (data-state="selected") — preparado para composição futura com seleção real de linhas.

Tabela larga — mais colunas do que cabem em 320px de largura. O contêiner interno de Table rola horizontalmente; a página em volta não.

Tabela vazia — o corpo compõe EmptyState (variante compacta) numa única célula, em vez de duplicar o estado "vazio" da aplicação.

Skeleton e progresso

Tooltip, dialog, sheet, menu e avatar

Dialog e sheet fecham com Esc, clique fora ou pelo botão de fechar, e devolvem o foco ao controle que os abriu.

Confirmação de ação

ConfirmDialog — composição sobre Dialog para confirmar uma única ação. A confirmação destrutiva não fecha sozinha enquanto a ação simulada está em andamento (loading).

Toast

Mecanismo de feedback acessível (Sonner) para confirmações e avisos pontuais.

Carregamento estrutural (skeleton)

Skeletons estruturais reservam o espaço aproximado do conteúdo final e evitam layout shift. Toda a estrutura fica oculta de leitores de tela — um único texto (sr-only) é anunciado por composição, nunca célula a célula.

Estados de interface

Estados reutilizáveis para carregamento, vazio, erro recuperável e indisponibilidade — nenhum depende só de cor para ser compreendido.

Atualização em segundo plano e retry

Query real do TanStack Query (sem chamada HTTP — dados simulados localmente), demonstrando: carregamento inicial sem dados, dados preservados durante uma atualização em segundo plano, erro sem dados, erro de atualização preservando os últimos dados válidos e sucesso vazio.

Formulário de demonstração

Validado no cliente com React Hook Form e Zod. Coleta apenas dados fictícios e técnicos — nunca dado pessoal. O envio é uma simulação local — não há chamada HTTP, nem persistência em backend ou localStorage.

Erro geral de formulário vs. erro de campo

Usa traduzirErroHttp para decidir entre associar o erro a um campo específico (FormFieldMessage, via CampoTexto) ou exibir um alerta geral (Alert) quando não há campo correspondente. O valor digitado nunca é apagado após uma falha, e o envio simulado é local — sem chamada HTTP.

Página não encontrada (referência visual)

Ilustração do conteúdo real de not-found.tsx — não é um link para lá nem duplica a rota; serve apenas de referência visual nesta galeria.