Padrões

Além de componentes individuais, o Pulso define padrões de design — soluções recorrentes para problemas que aparecem em múltiplas superfícies.

Padrão de Status

Todo status no sistema segue o mesmo contrato:

Exemplo: uma crise pode estar “Monitoramento”, “Atenção”, “Em Crise”, “Em Execução”, “Resolvida” ou “Encerrado”.

Padrão de Métrica

Toda métrica segue a estrutura:

[Label]          ← text-support ou text-label, muted-foreground
[Valor]          ← mono, data-numeric, font-bold
[Delta]          ← DeltaChip com trend e token delta

Isso se aplica a MetricCards, tabelas e inline stats.

Padrão de Formulário

Todo formulário segue:

1. Label acima do campo
2. Placeholder como exemplo, não como label
3. Mensagem de erro abaixo do campo
4. Botão de ação alinhado à direita
5. Estado de loading no botão de submit

Padrão de Lista/Tabela

Toda lista segue:

1. Header com título e ação de criar/filtrar
2. Colunas com sort e filter quando relevante
3. Pagination quando > 50 itens
4. Empty state quando vazia
5. Loading state skeleton enquanto carrega

Padrão de Confirmação

Toda ação destrutiva segue:

1. Dialog de confirmação com título claro
2. Descrição da consequência
3. Botão cancel (primary visual) e confirm (destructive)
4. Toast de feedback após ação

Padrão de Navegação

1. Sidebar para navegação principal
2. Breadcrumbs para contexto de localização
3. Tabs para seções dentro de uma página
4. Command palette (⌘K) para acesso rápido