Componentes
O Arenito possui 68 componentes organizados em 6 categorias.
Categorias
Entrada
Campos de formulário e controles de entrada.
| Componente | CSS | JS | Descrição |
|---|---|---|---|
| Button | button.css | - | Botões com 9 variantes e 4 tamanhos |
| Input | input.css | - | Campos de texto, email, password, number |
| Select | select.css | - | Select single, multiple, searchable |
| Checkbox | checkbox.css | - | Checkbox com indeterminate |
| Radio | radio.css | - | Radio buttons e groups |
| Switch | switch.css | - | Toggle on/off |
| Textarea | textarea.css | - | Textarea resizable e auto-grow |
| Input Search | input-search.css | input-search.js | Autocomplete com debounce |
| Input Date | input-date.css | - | Date/datetime/time (Flatpickr) |
| Input Date Range | input-date-range.css | - | Período com dois calendários |
| Input Tag | input-tag.css | - | Seleção múltipla de tags |
Layout
Estrutura de formulários e páginas.
| Componente | Descrição |
|---|---|
| Form | Grid de formulário 12 colunas |
| Fieldset | Agrupamento de campos |
| Form Search | Formulário de pesquisa JSON-driven |
| Listar | Layout de listagem com sidebar |
| Card | Cards com variantes dark, hover, shadow |
| Card Grid | Grid responsivo de cards |
| Info Card | Cards de informação com seções |
Feedback
Componentes de retorno visual ao usuário.
| Componente | Descrição |
|---|---|
| Alert | Alertas info, success, warning, error |
| Toast | Notificações flutuantes auto-dismiss |
| Badge | Badges com 9 variantes |
| Status | Pills de status ativo/inativo |
| Tooltip | 7 estilos, 4 posições, auto-positioning |
| Loader | Spinner e relógio animado |
| Skeleton | Placeholder de carregamento |
| Progress | Barra de progresso linear e circular |
Navegação
Componentes de navegação e orientação.
| Componente | Descrição |
|---|---|
| Navbar | Barra de navegação com 4 variantes |
| Sidebar | Menu lateral com modos docked, overlay, mini |
| Breadcrumb | 6 tipos de separador, colapsável |
| Tabs | Underline, contained, pills, vertical |
| Accordion | Simples, múltiplo, ghost, bordered |
| Dropdown | Menu, split button, aninhado |
| Pagination | Padrão, compacto, outline |
| Avatar | Iniciais, imagem, com status |
| Stepper | Wizard multi-step com validação |
Overlay
Modais, drawers e painéis sobrepostos.
| Componente | Descrição |
|---|---|
| Modal | 5 tamanhos, backdrop blur, focus trap |
| Modal Alert | Modais de confirmação/alerta |
| Drawer | Painel lateral deslizante |
Dados
Exibição e manipulação de dados.
| Componente | Descrição |
|---|---|
| Table | Sticky header, sorting, selection |
| Detail | Layout de detalhamento com tabs |
| Resumo | Exibição read-only com validação |
| Filter | Sistema de filtros com presets |