@esperanca-ui/componentes 2.1.4 → 2.8.1

package/COMPONENTS.md

@@ -31,6 +31,58 @@ export function Example() {
 }
 ```
 
+## Quick Actions Publicas
+
+O pacote publico tambem entrega classes `esp-*` para acoes rapidas de topo usando `Button`.
+
+Classes disponiveis:
+
+- `esp-quick-action`: base quadrada para acao rapida
+- `esp-quick-action-expand`: icone compacto que expande o nome no hover
+- `esp-quick-action-outline`: variacao com borda arredondada
+- `esp-quick-action-soft`: variacao com fundo suave
+- `esp-quick-action-glass`: variacao translúcida
+- `esp-quick-action-text`: texto que participa da expansao no hover
+
+Essas classes cuidam do visual do botao. O alinhamento do grupo no topo continua sendo responsabilidade do layout da aplicacao.
+
+Exemplo:
+
+```tsx
+import { Button } from '@esperanca-ui/componentes';
+import '@esperanca-ui/componentes/style.css';
+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="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="sm" className="esp-quick-action esp-quick-action-outline" aria-label="Novo projeto">
+        <FiPlus />
+      </Button>
+
+      <Button variant="ghost" size="sm" className="esp-quick-action esp-quick-action-soft" aria-label="Notificacoes">
+        <FiBell />
+      </Button>
+    </div>
+  );
+}
+```
+
+## Notas de Integracao
+
+- `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.
+- `Sidebar` agora expõe `surface="default" | "soft" | "glass"` como API publica para definir a superficie do menu lateral.
+- `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.
+
 ## Componentes Publicos
 
 | Componente | Import | Uso minimo |
@@ -51,7 +103,11 @@ export function Example() {
 | `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={[...]} />` |
-| `Sidebar` | `import { Sidebar } from '@esperanca-ui/componentes'` | `<Sidebar sections={[...]} />` |
+| `Sidebar` | `import { Sidebar } from '@esperanca-ui/componentes'` | `<Sidebar sections={[...]} surface="glass" />` |
+| `TaskStatusBadge` | `import { TaskStatusBadge } from '@esperanca-ui/componentes'` | `<TaskStatusBadge status="in_progress" />` |
+| `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} />` |
 | `Textarea` | `import { Textarea } from '@esperanca-ui/componentes'` | `<Textarea label="Descricao" />` |
 | `ThemeProvider` | `import { ThemeProvider } from '@esperanca-ui/componentes'` | `<ThemeProvider defaultTheme="system"><App /></ThemeProvider>` |

package/README.md

@@ -109,6 +109,14 @@ import { DataTable, Sidebar, FormSidebar, Input, ComboBox, Checkbox, Radio, Radi
 import '@esperanca-ui/componentes/style.css';
 ```
 
+Tambem inclui componentes para gestao de projetos, como `TaskStatusBadge`, `TaskPriorityBadge`, `TaskCard` e `TaskCalendar`.
+
+## Quick Actions de Topo
+
+O CSS publico tambem inclui classes `esp-*` para acoes rapidas com `Button`, como `esp-quick-action`, `esp-quick-action-expand`, `esp-quick-action-outline`, `esp-quick-action-soft` e `esp-quick-action-glass`.
+
+O exemplo completo esta em `COMPONENTS.md`.
+
 ## Verificacao rapida
 ```bash
 npm run build
@@ -119,4 +127,5 @@ npm run build-storybook
 - Wiki tecnica: `docs/wiki-componentes-react.md`
 - Funcoes/exports: `docs/functions.md`
 - Componentes: `docs/components.md`
+- Roadmap de gestao de projetos: `docs/componentes-gestao-projetos.md`
 - Tutorial de instalacao em outro projeto: `docs/tutorial-instalacao-pacote-npm-gitlab.md`