Text Input✓
Campo de texto curto com máscaras (CPF/CNPJ/CNJ) e validação inline.
Componentes
Galeria canônica de componentes do v6 Light Brass. Cada componente tem anatomia, estados, variantes, microinterações, validação, código copiável e regras do/don't. Esta é a única referência que os agentes ui-implementer e ui-quality-reviewer consultam.
Componentes
40
Prontos
40
Charts (SVG)
9
Inputs
Captura de texto, número, seleção, data, arquivos.
Textarea✓
Texto longo com auto-resize e contador de caracteres.
Number Input✓
Numérico com stepper +/-, máscara monetária BRL e unidades.
Search Input✓
Busca com debounce, clear button e atalho ⌘K.
Select✓
Escolha 1 de N opções fixas (dropdown).
Combobox✓
Select com busca, async, multi e highlight de termo.
Date Picker✓
Calendário visual com range, min/max e feriados.
Date Input✓
Input dd/mm/aaaa com máscara e sugestão de correção.
File Input✓
Upload com drag-and-drop, preview e validação de tipo/tamanho.
Tags Input✓
Cria chips ao Enter/vírgula, suporta sugestões.
Checkbox✓
Marcar 0 ou mais opções, com indeterminate.
Radio✓
Marcar 1 de N (vertical, horizontal, cards).
Toggle✓
Switch on/off com aplicação imediata.
Slider✓
Range numérico com single ou 2 thumbs.
Ações
Botões e gatilhos de ação.
Display
Apresentação de dados e identidade visual.
Avatar✓
Foto ou iniciais com cor determinística, status e group.
Badge✓
Selo curto estático (status, contador) com 5 cores funcionais.
Chip✓
Tag clicável e/ou removível, selecionável.
Card✓
Container com elevation 1/2/3, outline e interactive.
Hero✓
Cabeçalho display com Source Serif italic + brass accent.
Table✓
Tabela com sort, hover, seleção múltipla, ações por linha.
Stat✓
KPI display com count-up, delta, sparkline.
Timeline✓
Sequência cronológica vertical de eventos.
Estados
Estados visuais de carregamento, vazio e feedback.
Skeleton✓
Placeholder shimmer durante loading.
Empty State✓
Mensagem amigável com 4 variantes contextuais e CTA.
Spinner✓
Loader circular indeterminate, 5 tamanhos.
Progress Bar✓
Linear determinate/indeterminate, com counter e stacked.
Toast✓
Feedback efêmero (success/error/info) com action e queue.
Alert✓
Banner persistente (info/success/warning/error/brass).
Navegação
Navegação entre seções e listagens.
Overlays
Camadas sobrepostas (drawer, modal, popover).
Charts
Visualizações de dados em SVG nativo. 9 tipos: Line, Bar, Area, Donut, Gauge, Stacked Bar, Heatmap, Progress Ring, Sparkline.