@esperanca-ui/componentes 2.14.17 → 2.14.19

package/COMPONENTS.md

@@ -67,7 +67,7 @@ const sections = [
 
 export function WorkspaceShell() {
   return (
-    <Background pattern="dots">
+    <Background variant="solid" pattern="dots">
       <div className="esp-shell esp-shell-density-comfortable">
         <Sidebar
           surface="glass"
@@ -134,6 +134,7 @@ 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:
 
@@ -145,16 +146,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="sm" className="esp-quick-action esp-quick-action-expand" aria-label="Buscar">
+      <Button variant="ghost" size="xs" 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">
+      <Button variant="ghost" size="xs" 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">
+      <Button variant="ghost" size="xs" className="esp-quick-action esp-quick-action-soft" aria-label="Notificacoes">
         <FiBell />
       </Button>
     </div>
@@ -164,8 +165,9 @@ export function TopQuickActions() {
 
 ## 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.
+- `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.
 - `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.
@@ -187,7 +189,7 @@ export function TopQuickActions() {
 
 | Componente | Import | Uso minimo |
 | --- | --- | --- |
-| `Background` | `import { Background } from '@esperanca-ui/componentes'` | `<Background pattern="dots" />` |
+| `Background` | `import { Background } from '@esperanca-ui/componentes'` | `<Background variant="solid" 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" />` |
@@ -202,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" />` |
+| `PageHeader` | `import { PageHeader } from '@esperanca-ui/componentes'` | `<PageHeader title="Clientes" />` ou `<PageHeader variant="section" title="Filtros" />` |
 | `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" />` |

package/dist/componentes-esperanca.es.js

@@ -19815,7 +19815,7 @@ function x2({
   return /* @__PURE__ */ m("div", { className: "dt-root", children: /* @__PURE__ */ U("div", { className: `dt-panel${n === "glass" ? " dt-glass" : ""}`, children: [
     /* @__PURE__ */ U("div", { className: "dt-header", children: [
       /* @__PURE__ */ U("div", { className: "dt-search", children: [
-        /* @__PURE__ */ m(ko, { className: "dt-search-icon" }),
+        /* @__PURE__ */ m("span", { className: "dt-search-icon", "aria-hidden": "true", children: /* @__PURE__ */ m(ko, {}) }),
         /* @__PURE__ */ m("input", { type: "text", placeholder: "Pesquisar...", value: k, onChange: (Q) => W(Q.target.value), className: "dt-search-input" })
       ] }),
       /* @__PURE__ */ U("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
@@ -20658,45 +20658,47 @@ const y2 = bt(function({
 const S2 = ({
   title: e,
   description: t,
-  inverted: r = !1,
-  actions: n,
-  breadcrumbs: a,
-  tabs: i,
-  sticky: s = !1,
-  className: o,
-  style: c,
-  ...l
+  variant: r = "page",
+  inverted: n = !1,
+  actions: a,
+  breadcrumbs: i,
+  tabs: s,
+  sticky: o = !1,
+  className: c,
+  style: l,
+  ...f
 }) => {
-  const f = Pe(null), [u, h] = Oe(!1);
+  const u = Pe(null), [h, p] = Oe(!1);
   return Fe(() => {
-    if (!s)
+    if (!o)
       return;
-    const p = () => {
-      h(window.scrollY > 0);
+    const g = () => {
+      p(window.scrollY > 0);
     };
-    return window.addEventListener("scroll", p, { passive: !0 }), () => window.removeEventListener("scroll", p);
-  }, [s]), /* @__PURE__ */ U(
+    return window.addEventListener("scroll", g, { passive: !0 }), () => window.removeEventListener("scroll", g);
+  }, [o]), /* @__PURE__ */ U(
     "header",
     {
-      ref: f,
+      ref: u,
       className: Ae(
         "esp-page-header",
-        s && "esp-page-header-sticky",
-        u && "esp-page-header-scrolled",
-        o
+        `esp-page-header-variant-${r}`,
+        o && "esp-page-header-sticky",
+        h && "esp-page-header-scrolled",
+        c
       ),
-      style: c,
-      ...l,
+      style: l,
+      ...f,
       children: [
-        a && /* @__PURE__ */ m("div", { className: "esp-page-header-breadcrumbs", children: a }),
+        i && /* @__PURE__ */ m("div", { className: "esp-page-header-breadcrumbs", children: i }),
         /* @__PURE__ */ U("div", { className: "esp-page-header-row", children: [
-          /* @__PURE__ */ U("div", { className: Ae("esp-page-header-content", r && "esp-page-header-inverted"), children: [
+          /* @__PURE__ */ U("div", { className: Ae("esp-page-header-content", n && "esp-page-header-inverted"), children: [
             /* @__PURE__ */ m("h1", { className: "esp-page-header-title", children: e }),
             t && /* @__PURE__ */ m("p", { className: "esp-page-header-description", children: t })
           ] }),
-          n && /* @__PURE__ */ m("div", { className: "esp-page-header-actions", children: n })
+          a && /* @__PURE__ */ m("div", { className: "esp-page-header-actions", children: a })
         ] }),
-        i && /* @__PURE__ */ m("div", { className: "esp-page-header-tabs", children: i })
+        s && /* @__PURE__ */ m("div", { className: "esp-page-header-tabs", children: s })
       ]
     }
   );
@@ -22965,20 +22967,21 @@ const t2 = 24 * 60 * 60 * 1e3, r2 = (e) => /^\d{4}-\d{2}-\d{2}$/.test(e), ra = (
 });
 function k2({
   theme: e,
-  gradient: t,
-  pattern: r = "none",
-  opacity: n,
-  blendMode: a,
-  fullScreen: i = !0,
-  children: s,
-  className: o,
-  style: c
+  variant: t = "decorated",
+  gradient: r,
+  pattern: n = "none",
+  opacity: a,
+  blendMode: i,
+  fullScreen: s = !0,
+  children: o,
+  className: c,
+  style: l
 }) {
-  const l = {
-    ...c,
-    ...t ? { background: t } : {},
-    ...n !== void 0 ? { opacity: n } : {},
-    ...a ? { mixBlendMode: a } : {}
+  const f = {
+    ...l,
+    ...r ? { background: r } : {},
+    ...a !== void 0 ? { opacity: a } : {},
+    ...i ? { mixBlendMode: i } : {}
   };
   return /* @__PURE__ */ m(
     "div",
@@ -22986,12 +22989,13 @@ function k2({
       className: Ae(
         "bg-wrap",
         e && `bg-wrap--${e}`,
-        !i && "bg-wrap--auto",
-        r !== "none" && `bg-pattern-${r}`,
-        o
+        t === "solid" && "bg-wrap--solid",
+        !s && "bg-wrap--auto",
+        n !== "none" && `bg-pattern-${n}`,
+        c
       ),
-      style: l,
-      children: s
+      style: f,
+      children: o
     }
   );
 }