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. 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.
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.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}>
<SelectNative aria-label="Serviço" className={cn(FANTASMA, "w-auto min-w-0 text-sm")} … />
</Linha>Família de cor por tipo
A janela inteira responde à aba ativa sem que nenhuma peça saia do lugar: o fio no topo, a aba escolhida e os ícones acesos vestem a mesma família.
Agendamento
Encaixe
Bloqueio
| Família | Tipo | Fio | Aceso (ícone e aba) |
|---|---|---|---|
| brand | Agendamento | bg-brand | bg-brand-muted text-brand-strong |
| warning | Encaixe | bg-warning | bg-warning-soft text-warning-strong |
| ink | Bloqueio | bg-fg-subtle | bg-secondary text-secondary-foreground |
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.Nuncaink-400 e ink-100 carregando significado
O neutro é
bg-fg-subtle no fio e secondary no aceso. ink-400 e ink-100 ficam de fora: o primeiro é dot decorativo e não chega nos 3:1 quando vira o único sinal de "isto é um bloqueio"; o segundo é um degrau só sobre a superfície, e o ícone que acende mal acendia.Sim
O CTA fica no Button do canon, nos três tipos.
A identidade do tipo mora no fio, na aba e nos ícones. Isso basta: a janela inteira já mudou de cor 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 | Adicionar título ou @paciente… | @contato |
| 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 |