@esperanca-ui/componentes 2.8.3 → 2.13.0

package/COMPONENTS.md

@@ -43,6 +43,9 @@ Classes disponiveis:
 - `esp-shell-actions`: alinhamento padrao das acoes do topo
 - `esp-shell-content`: area principal abaixo do header
 - `esp-shell-container`: container centralizado com largura maxima
+- `esp-shell-density-compact`: reduz o espacamento geral do shell
+- `esp-shell-density-comfortable`: densidade equilibrada para dashboard
+- `esp-shell-density-spacious`: aumenta o respiro geral do shell
 
 Exemplo:
 
@@ -65,7 +68,7 @@ const sections = [
 export function WorkspaceShell() {
   return (
     <Background pattern="dots">
-      <div className="esp-shell">
+      <div className="esp-shell esp-shell-density-comfortable">
         <Sidebar
           surface="glass"
           pinned
@@ -111,6 +114,12 @@ export function WorkspaceShell() {
 }
 ```
 
+Se o app for mais denso, principalmente com tabela, agenda ou lista operacional, prefira:
+
+```tsx
+<div className="esp-shell esp-shell-density-compact">...</div>
+```
+
 ## Quick Actions Publicas
 
 O pacote publico tambem entrega classes `esp-*` para acoes rapidas de topo usando `Button`.
@@ -157,11 +166,14 @@ export function TopQuickActions() {
 
 - `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.
+- `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.
+- No desktop, o `Sidebar` se comporta como lateral fixa real; a docs aplica um override local so para manter os previews contidos na vitrine.
 - `TaskStatusBadge` e `TaskPriorityBadge` foram pensados como blocos base para agenda, cards de tarefa, timeline e Gantt.
 - Ambos aceitam presets prontos e tambem `name` + `colors` para cenarios customizados sem criar outro componente.
 - `TaskCard` e um wrapper de alto nivel sobre `Card`, herdando as mesmas variantes (`elevated`, `outlined`, `filled`, `glass`) e props visuais como `interactive`, `glassOpacity` e `glassBlur`.
 - `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.
 
 ## Componentes Publicos
 
@@ -172,7 +184,7 @@ export function TopQuickActions() {
 | `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" />` |
 | `Checkbox` | `import { Checkbox } from '@esperanca-ui/componentes'` | `<Checkbox label="Aceito os termos" />` |
-| `ComboBox` | `import { ComboBox } from '@esperanca-ui/componentes'` | `<ComboBox options={[...]} />` |
+| `ComboBox` | `import { ComboBox } from '@esperanca-ui/componentes'` | `<ComboBox options={[...]} />` ou `<ComboBox multiple values={[...]} onValuesChange={...} />` |
 | `ConfirmDialog` | `import { ConfirmDialog } from '@esperanca-ui/componentes'` | `<ConfirmDialog isOpen={open} onClose={...} onConfirm={...} />` |
 | `FormSidebar` | `import { FormSidebar } from '@esperanca-ui/componentes'` | `<FormSidebar isOpen={open} onClose={...}>...</FormSidebar>` |
 | `Grid` | `import { Grid } from '@esperanca-ui/componentes'` | `<Grid columns={{ base: 1, md: 2 }} gap={4}>...</Grid>` |
@@ -180,6 +192,7 @@ export function TopQuickActions() {
 | `Loading` | `import { Loading } from '@esperanca-ui/componentes'` | `<Loading variant="spinner" />` |
 | `Modal` | `import { Modal } from '@esperanca-ui/componentes'` | `<Modal isOpen={open} onClose={...}>...</Modal>` |
 | `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" />` |
 | `RadioGroup` | `import { RadioGroup } from '@esperanca-ui/componentes'` | `<RadioGroup name="status" options={[...]} />` |
@@ -188,7 +201,8 @@ export function TopQuickActions() {
 | `TaskPriorityBadge` | `import { TaskPriorityBadge } from '@esperanca-ui/componentes'` | `<TaskPriorityBadge priority="high" />` |
 | `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 />` |
-| `DataTable` | `import { DataTable } from '@esperanca-ui/componentes'` | `<DataTable columns={columns} data={data} />` |
+| `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 />` |
 | `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>` |