@esperanca-ui/componentes 2.14.17 → 2.14.18

package/COMPONENTS.md

@@ -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>
@@ -166,6 +167,7 @@ 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.
+- `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.
@@ -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 })
       ]
     }
   );