Componentes
Janela de compromisso
A janela que cria um compromisso tem duas peles (a bolha do arrasto e a folha por cima) e uma gramática só. Três peças nasceram com ela e valem fora da Agenda: a linha com ícone que acende, a família de cor por tipo e o painel de aviso âmbar.
agenda/janela-linha.tsxagenda/campos-compromisso.tsxagenda/campo-titulo.tsx
A linha que acende
Ícone à esquerda, campo à direita. Na folha grande e nas de corrigir, a caixa do ícone é o termômetro do preenchimento: acesa quando a linha resolveu, contorno tracejado quando falta, neutra quando a linha não é campo. Na caixinha de criar o termômetro desliga: todo ícone na mesma tinta cinza, como as linhas do Google.
Serviço · aceso
Repete · falta
Observação · neutro
- 1Caixa do íconesize-7 · rounded-md
- 2Íconesize-4 · Lucide stroke 2
- 3Vão até o campogap-3
- 4Recuo de texto soltoRECUO_DA_LINHA = pl-10 (28 + 12)
Armadilha já paga`aceso` tem três valores, não dois
undefined é o estado NEUTRO e existe pra linha que não é campo (o telefone no cartão de detalhe): pintá-la de verde diria que alguém cumpriu uma etapa que nunca existiu.NotaA caixinha desliga o termômetro no Provider
FamiliaDaJanelaProvider termometro={false} pinta todo ícone que tem estado em text-fg-subtle, sem caixa acesa nem tracejada. É a etiqueta da linha, não enfeite: por isso fg-subtle, que passa dos 3:1, e não o ink-400 do neutro. Na janela pequena a cor do tipo mora no cabeçalho e na aba. O leitor de tela segue ouvindo o estado ("Serviço: falta preencher"): só a pintura saiu. A folha aberta pelo "Mais opções" tem o próprio Provider, que liga o termômetro de volta.NotaO horário da caixinha tem duas linhas
A data e as horas em cima; embaixo, em letra pequena, a repetição (no bloqueio, a duração).
Linha topo põe o ícone na altura da primeira linha, como no Google; corrigindo as horas, os campos são uma linha só e o ícone volta pro meio.Armadilha já pagaQuem nomeia a linha é a caixa do ícone
Quando a linha tem estado, a caixa vira
role="img" com aria-label="Serviço: preenchido". O sr-only solto sai — todo controle das linhas já tem aria-label próprio, e os dois juntos faziam o leitor anunciar a linha duas vezes.<Linha icone={Stethoscope} rotulo="Serviço" aceso={escolhido !== undefined}>
{/* Só serviço cadastrado: digita pra buscar, a lista flutua por cima. */}
<CaixaDeLista rotulo="Serviço" placeholder="Escolher o serviço" className={cn(FANTASMA, "min-w-0 flex-1 text-sm")} … />
</Linha>Família de cor por tipo
A janela inteira responde à aba ativa sem que nenhuma peça saia do lugar. Na caixinha de criar, o cabeçalho diz o tipo (bolha com o ícone dele e o título por extenso), a aba acende e o botão diz o verbo. Na folha grande a família mora na aba e nos ícones acesos.
Novo agendamento
Agendamentobotão: Agendar
Novo encaixe
Encaixebotão: Encaixar
Novo bloqueio
Bloqueiobotão: Bloquear
| Família | Tipo | Cabeçalho | Verbo | Aceso (bolha, ícone e aba) |
|---|---|---|---|---|
| brand | Agendamento | Novo agendamento | Agendar | bg-brand-muted text-brand-strong |
| warning | Encaixe | Novo encaixe | Encaixar | bg-warning-soft text-warning-strong |
| ink | Bloqueio | Novo bloqueio | Bloquear | bg-secondary text-secondary-foreground |
NotaÍcone, título e verbo têm um dono
TIPO_NA_JANELA, em janela-linha.tsx: a caixinha e a folha por cima são a mesma criação, e o botão de uma não pode dizer Agendar enquanto o da outra diz Encaixar.NotaUm par aceso só, e ele é exportado
O par aceso é um só, exportado de
ACESO_DA_FAMILIA. Duas definições da mesma família (uma pro ícone, outra pra aba) divergiram no primeiro dia, e uma janela com duas leituras da mesma cor lê como tela remendada.NuncaA escala ink no lugar do token de papel
O neutro aceso é
secondary, e a aba neutra sobe pro bg-ink-200 porque seleção não pode ser igual ao hover das outras. ink-400 fica de fora de qualquer coisa que diga o tipo ou o estado: é dot decorativo e não chega nos 3:1. Por isso o ícone sem termômetro é text-fg-subtle, não ink-400.Sim
O CTA fica no Button do canon, nos três tipos.
A identidade do tipo mora no cabeçalho, na aba e na palavra do botão. Isso basta: a janela inteira já mudou quando a aba mudou.
Não
bg-warning-strong text-warning-fg · bg-fg text-surface
Tinta de TEXTO virando preenchimento, e um par que é preto no claro e branco puro nos escuros. Cor nova entra por globals.css, nos cinco temas, e aparece na página de Cor.
Painel de aviso âmbar
A mesma receita do FormAlert, na família de atenção: raio md, text-sm e o par soft/strong. Ele diz o que está no caminho e o que continua valendo.
Pedro Lima já está das 15:15 às 16:00 nesta coluna. Dá pra marcar assim mesmo: os dois ficam lado a lado.
NotaÂmbar sempre diz o que continua valendo
Âmbar aqui NÃO é "funciona pela metade": é atenção que segue valendo. Todo aviso âmbar termina dizendo o que continua valendo — aqui, que marcar por cima é um gesto legítimo e o botão continua verde.
Armadilha já pagaA região viva nasce antes do texto
A região viva mora fora do painel e nunca desmonta: um
p role="status" em sr-only com a frase. Inserir o nó e o texto no mesmo quadro é o caso que várias duplas navegador/leitor perdem, e live region com botão dentro faz o leitor reanunciar a ação a cada mudança.O selo neutro do convidado avulso
Compromisso de gente sem ficha é uma escolha legítima, não um defeito. O selo diz o que ele não vai ter, na badge neutra do canon.
Convidado avulso, sem ficha
NotaA receita tem UM dono, e não é esta página
É a badge genérica neutra do canon, documentada em Componentes ◊ Status & selos. Aqui mora só a instância: neutra porque nada quebrou (âmbar diria "funciona pela metade"), e em sentence case, como todo rótulo.
A palavra é paciente
O vocabulário do produto chama o banco de pessoas de Cadastros, e cada linha dele de paciente ou pessoa.
| Superfície | Diga | Não diga |
|---|---|---|
| Placeholder do campo grande da caixinha | Adicionar paciente | Adicionar contato |
| Placeholder do campo da folha grande | Buscar ou digitar um nome | Buscar contato |
| Última linha da lista que se digita | Ver todos os cadastros | Ver todos os contatos |
| Botão que abre a lista | Escolher dos cadastros | Lista de contatos |
| Título do modal | Escolher o paciente | Escolher o contato |
| Rótulo da listbox | Pacientes encontrados | Contatos encontrados |