@esperanca-ui/componentes 2.14.24 → 2.16.0

package/COMPONENTS.md

@@ -67,7 +67,7 @@ const sections = [
 
 export function WorkspaceShell() {
   return (
-    <Background variant="solid" pattern="dots">
+    <Background pattern="dots">
       <div className="esp-shell esp-shell-density-comfortable">
         <Sidebar
           surface="glass"
@@ -134,7 +134,6 @@ Classes disponiveis:
 - `esp-quick-action-text`: texto que participa da expansao no hover
 
 Essas classes cuidam do visual do botao. Para o layout do topo, prefira usar as classes publicas `esp-shell-actions` e `esp-shell-header`.
-Para headers mais densos, `Button size="xs"` reduz quick actions e botoes de texto sem criar outra variante de componente.
 
 Exemplo:
 
@@ -146,16 +145,16 @@ import { FiBell, FiPlus, FiSearch } from 'react-icons/fi';
 export function TopQuickActions() {
   return (
     <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-      <Button variant="ghost" size="xs" className="esp-quick-action esp-quick-action-expand" aria-label="Buscar">
+      <Button variant="ghost" size="sm" className="esp-quick-action esp-quick-action-expand" aria-label="Buscar">
         <FiSearch />
         <span className="esp-quick-action-text">Buscar</span>
       </Button>
 
-      <Button variant="ghost" size="xs" className="esp-quick-action esp-quick-action-outline" aria-label="Novo projeto">
+      <Button variant="ghost" size="sm" className="esp-quick-action esp-quick-action-outline" aria-label="Novo projeto">
         <FiPlus />
       </Button>
 
-      <Button variant="ghost" size="xs" className="esp-quick-action esp-quick-action-soft" aria-label="Notificacoes">
+      <Button variant="ghost" size="sm" className="esp-quick-action esp-quick-action-soft" aria-label="Notificacoes">
         <FiBell />
       </Button>
     </div>
@@ -165,9 +164,8 @@ export function TopQuickActions() {
 
 ## Notas de Integracao
 
-- `Background` entrega a superficie e os patterns. Use `variant="solid"` quando quiser um fundo neutro, sem blooms nem gradientes decorativos do preset. Blobs borrados, cards glass e outros adornos dos exemplos continuam sendo estilos da aplicacao consumidora.
+- `Background` entrega a superficie e os patterns. Blobs borrados, cards glass e outros adornos dos exemplos continuam sendo estilos da aplicacao consumidora.
 - `PageHeader` aceita qualquer `actions`, mas o layout do grupo de acoes continua sendo responsabilidade do app.
-- `PageHeader` agora aceita `variant="page" | "section"` para trocar a escala do titulo e da descricao sem criar outro componente para subtitulos de area.
 - `Tabs` foi pensado para dois niveis: navegacao contextual (`Resumo`, `Timeline`, `Gantt`, `Calendario`) e troca de modo (`Dia`, `Semana`, `Mes`).
 - `Sidebar` agora expõe `surface="default" | "soft" | "glass"` como API publica para definir a superficie do menu lateral.
 - Itens do `Sidebar` aceitam `children` para submenu nativo. Em desktop o grupo abre no hover; em mobile o mesmo item funciona como toggle por clique.
@@ -180,16 +178,18 @@ export function TopQuickActions() {
 - Para ajustar dashboards mais densos sem CSS manual, os charts tambem aceitam `axisFontSize`, `axisTitleFontSize`, `legendFontSize`, `valueLabelFontSize`, `valueLabelFontWeight` e `fontFamily`; no `LineChart`, `lineWidth` controla a espessura da linha.
 - No `LineChart`, os labels de valor acompanham a ordem vertical das series em cada ponto: linha mais alta com valor acima, linha mais baixa com valor abaixo; quando cruzam, o lado do rotulo troca junto.
 - Quando `enableUserPreferences` estiver ativo, o proprio usuario pode ajustar itens como titulo, legenda, nomes dos eixos, valores sobre os dados e orientacao do eixo X. Se `preferencesStorageKey` for informado, isso fica salvo em `localStorage`.
-- `TaskCalendar` usa o mesmo contrato visual do `Card` e agora suporta `month`, `week` e `day`. No mes o padrao virou chip resumido empilhado, com espaco para responsavel, tarefa, projeto e horas; se precisar manter o visual antigo, use `monthTaskVariant="badge"`. Quando um dia passa de `maxVisibleTasks`, o `+N mais` expande a celula inline. `dayHighlights` colore dias ou faixas para feriados, freezes e janelas especiais. Nos modos `month` e `week`, o overflow horizontal tambem aceita arraste com mouse/toque via `dragToScroll`.
-- `GanttChart` fecha a visao horizontal de planejamento e usa `groups` como primeiro nivel. Assim, o mesmo componente serve para agrupar por projeto ou por responsavel. `dayHighlights` pinta cabecalho e grade da timeline para destacar feriados, manutencoes e bloqueios operacionais sem alterar os itens do cronograma.
+- `TaskCalendar` usa o mesmo contrato visual do `Card` e agora suporta `month`, `week` e `day`. No mes as tarefas ficam pequenas como badges; em semana e dia o padrao vira card com mais contexto.
+- `GanttChart` fecha a visao horizontal de planejamento e usa `groups` como primeiro nivel. Assim, o mesmo componente serve para agrupar por projeto ou por responsavel.
 - `LineChart` e `StepLineChart` aceitam `yStartAtZero` para forcar o eixo Y a comecar em 0, `yMin` e `yMax` para definir limites customizados do eixo Y. Se nenhum for informado, o eixo e calculado automaticamente.
 - `DataTable` agora suporta ordenacao por coluna. Colunas com `sortable: true` exibem indicador de ordenacao clicavel (none → asc → desc → none). Dois modos: **local** (sem `onSortChange`, ordena os dados automaticamente) e **controlado/server-side** (com `onSortChange`, o consumidor controla a ordenacao via API). Props: `sortKey`, `sortDirection`, `onSortChange`. Tipo `SortDirection` exportado como `'asc' | 'desc'`.
+- `DataTable` agora suporta densidade de linhas. O botao na toolbar alterna entre `compact`, `comfortable` e `spacious` — mesma escala de `esp-shell-density-*` — reduzindo/aumentando o padding das celulas (e dos cards no mobile). Padrao: `comfortable`. Sem a prop `density` o componente controla e persiste sozinho no `localStorage`; com ela, o consumidor controla via `onDensityChange`. Props: `density`, `onDensityChange`, `densityStorageKey`. Tipo `TableDensity` exportado como `'compact' | 'comfortable' | 'spacious'`.
+- `DataTable` agora aceita `maxHeight` (numero em px ou string CSS como `'60vh'`/`'calc(100vh - 240px)'`). Com ela a area de linhas ganha altura maxima e scroll vertical proprio, com o cabecalho fixo no topo — em vez de a tabela crescer e a pagina inteira rolar. Sem a prop, o comportamento continua o de antes.
 
 ## Componentes Publicos
 
 | Componente | Import | Uso minimo |
 | --- | --- | --- |
-| `Background` | `import { Background } from '@esperanca-ui/componentes'` | `<Background variant="solid" pattern="dots" />` |
+| `Background` | `import { Background } from '@esperanca-ui/componentes'` | `<Background pattern="dots" />` |
 | `Button` | `import { Button } from '@esperanca-ui/componentes'` | `<Button>Salvar</Button>` |
 | `Card` | `import { Card } from '@esperanca-ui/componentes'` | `<Card><Card.Body>Conteudo</Card.Body></Card>` |
 | `MetricCard` | `import { MetricCard } from '@esperanca-ui/componentes'` | `<MetricCard value="42" title="Ativos" />` |
@@ -204,7 +204,7 @@ export function TopQuickActions() {
 | `BarChart` | `import { BarChart } from '@esperanca-ui/componentes'` | `<BarChart data={data} series={series} xAxisLabel="Mes" yAxisLabel="Valor" yAxisTickWidth={112} axisFontSize={11} valueLabelFontSize={10} valueLabelFontWeight={600} showValueLabels enableUserPreferences />` |
 | `Loading` | `import { Loading } from '@esperanca-ui/componentes'` | `<Loading variant="spinner" />` ou `<Loading fullScreen text="Validando acesso" />` |
 | `Modal` | `import { Modal } from '@esperanca-ui/componentes'` | `<Modal isOpen={open} onClose={...}>...</Modal>` |
-| `PageHeader` | `import { PageHeader } from '@esperanca-ui/componentes'` | `<PageHeader title="Clientes" />` ou `<PageHeader variant="section" title="Filtros" />` |
+| `PageHeader` | `import { PageHeader } from '@esperanca-ui/componentes'` | `<PageHeader title="Clientes" />` |
 | `Tabs` | `import { Tabs } from '@esperanca-ui/componentes'` | `<Tabs items={items} variant="underline" />` |
 | `Portal` | `import { Portal } from '@esperanca-ui/componentes'` | `<Portal><div>Overlay</div></Portal>` |
 | `Radio` | `import { Radio } from '@esperanca-ui/componentes'` | `<Radio label="Opcao A" />` |
@@ -215,7 +215,7 @@ export function TopQuickActions() {
 | `TaskCard` | `import { TaskCard } from '@esperanca-ui/componentes'` | `<TaskCard title="Revisar agenda" status="in_progress" />` |
 | `TaskCalendar` | `import { TaskCalendar } from '@esperanca-ui/componentes'` | `<TaskCalendar tasks={tasks} defaultDate="2026-03-01" showViewSwitcher />` |
 | `GanttChart` | `import { GanttChart } from '@esperanca-ui/componentes'` | `<GanttChart groups={groups} defaultView="month" />` |
-| `DataTable` | `import { DataTable } from '@esperanca-ui/componentes'` | `<DataTable columns={columns} data={data} layoutMode="scroll" dragToScroll />` |
+| `DataTable` | `import { DataTable } from '@esperanca-ui/componentes'` | `<DataTable columns={columns} data={data} density="compact" layoutMode="scroll" dragToScroll />` |
 | `Textarea` | `import { Textarea } from '@esperanca-ui/componentes'` | `<Textarea label="Descricao" />` |
 | `ThemeProvider` | `import { ThemeProvider } from '@esperanca-ui/componentes'` | `<ThemeProvider defaultTheme="system"><App /></ThemeProvider>` |
 | `ToastProvider` + `useToast` | `import { ToastProvider, useToast } from '@esperanca-ui/componentes'` | `<ToastProvider><App /></ToastProvider>` |

package/README.md

@@ -26,12 +26,11 @@ Biblioteca de componentes React com estilos em CSS puro, build com Vite e um sit
 ├── docs-site/          # app de documentacao
 ├── docker/             # imagens e configuracao nginx
 ├── docs/               # guias de uso/publicacao
-├── scripts/            # wrappers Node para tarefas locais das docs
 ├── src/                # biblioteca publicada
 ├── .gitlab-ci.yml      # validacao + publicacao
 ├── package.json        # scripts e metadados do pacote
-├── vite.config.ts       # build da biblioteca
-└── vite.config.docs.mjs # build das docs
+├── vite.config.ts      # build da biblioteca
+└── vite.config.docs.ts # build das docs
 ```
 
 ## Configuracao (.env)