@sbkbs/ui 1.0.4 → 1.0.6

package/README.md

@@ -1,115 +1,115 @@
-# @sbkbs/ui
-
-Biblioteca de componentes UI e tema global para manter o mesmo padrão visual entre projetos SBK BS.
-
-## Conteúdo
-
-- **Tema**: variáveis CSS (Material Design 3) light/dark + **Guia de marca SBK** (cores e tipografia Jakarta) em `theme/theme.css` + `ThemeProvider` React.
-- **Componentes**: `Button`, `Card`, `Input`, `Modal`, `Title`, `Subtitle`, `Paragraph`, `Header`, `Footer`.
-- **Paletas de botão**: escolha a cor do botão primary via prop `palette` ou `data-button-palette` no pai (`verde-vibrante`, `grafite-azulado`, etc.).
-
-## Uso em outro projeto
-
-### 1. Instalar no monorepo
-
-No `package.json` do app (ex.: frontend), adicione:
-
-```json
-"dependencies": {
-  "@sbkbs/ui": "^1.0.2"
-}
-```
-
-Rode `npm install` na raiz do monorepo.
-
-### 2. Tema (variáveis CSS)
-
-Os componentes usam variáveis CSS (`--md-surface`, `--primary-color`, etc.). O consumidor pode:
-
-- Usar o tema da lib: `import '@sbkbs/ui/theme.css';` no entry (ex.: `main.tsx`), ou
-- Definir as mesmas variáveis no próprio CSS do projeto (o frontend OFICIO.IA já tem `theme.css` próprio).
-
-### 3. ThemeProvider (opcional)
-
-Para light/dark com toggle e persistência em `localStorage`:
-
-```tsx
-import { ThemeProvider } from '@sbkbs/ui';
-
-root.render(
-  <ThemeProvider defaultTheme="light">
-    <App />
-  </ThemeProvider>
-);
-```
-
-### 4. Componentes
-
-```tsx
-import { Button, Card, Input, Modal, Title, Subtitle, Paragraph, Header, Footer } from '@sbkbs/ui';
-
-<Button variant="primary" size="md" palette="verde-vibrante">Salvar</Button>
-<Card variant="elevated" padding="lg" hoverable>...</Card>
-<Input label="E-mail" size="md" />
-<Modal isOpen={open} onClose={() => setOpen(false)} title="Título">...</Modal>
-<Title size="2xl" weight="bold">Título</Title>
-<Subtitle size="md" muted>Subtítulo</Subtitle>
-<Paragraph size="md">Texto.</Paragraph>
-
-<Header
-  logoSrc="/logo.png"
-  logoDarkSrc="/logo-dark.png"
-  title="OFÍCIO.IA"
-  subtitle="Subtítulo"
-  onLogoClick={() => navigate('/home')}
-  rightContent={<>
-    <LanguageSelector />
-    <ThemeToggle />
-    <UserMenu />
-  </>}
-/>
-<Footer poweredByText="Powered by" logoSrc="/logo.png" logoFallbackText="SBK" />
-```
-
-### Guia de marca (tema)
-
-Cores disponíveis como variáveis CSS: `--brand-verde-vibrante`, `--brand-grafite-azulado`, `--brand-verde-profundo`, `--brand-azul-acinzentado`, `--brand-cinza-medio`, `--brand-cinza-escuro`, `--brand-off-white`, e paleta "O Criador" (`--brand-azul-intenso`, `--brand-verde-lima`, etc.). Tipografia: `--font-primary` / `--font-heading` = Plus Jakarta Sans (Google Fonts).
-
-Paletas de botão (prop `palette` ou `data-button-palette` no pai): `verde-vibrante` | `verde-profundo` | `grafite-azulado` | `azul-acinzentado` | `cinza-medio` | `cinza-escuro` | `off-white`.
-
-## Compartilhar com outro projeto
-
-- **Mesmo monorepo:** adicione o app em `workspaces` e use `"@sbkbs/ui": "*"` nas dependências; depois `npm install` na raiz.
-- **Outro repositório:** use dependência por Git (`"@sbkbs/ui": "git+https://..."`) ou publique em um registry npm e instale com `npm install @sbkbs/ui`.
-
-Guia completo: [docs/COMPARTILHAR_LIB_UI.md](../docs/COMPARTILHAR_LIB_UI.md).
-
-## Desenvolvimento
-
-- **Build**: `npm run build` dentro de `ui`.
-- **Watch**: `npm run dev` dentro de `ui`.
-- **Playground**: `npm run playground`
-- **Storybook**: `npm run storybook`
-- **Testes**: `npm run test`
-
-## Estrutura
-
-```
-ui/
-  src/
-    index.ts
-    theme/
-      theme.css
-      ThemeProvider.tsx
-    components/
-      Button/
-      Card/
-      Input/
-      Modal/
-      Title/
-      Subtitle/
-      Paragraph/
-      Header/
-      Footer/
-  dist/
-```
+# @sbkbs/ui
+
+Biblioteca de componentes UI e tema global para manter o mesmo padrão visual entre projetos SBK BS.
+
+## Conteúdo
+
+- **Tema**: variáveis CSS (Material Design 3) light/dark + **Guia de marca SBK** (cores e tipografia Jakarta) em `theme/theme.css` + `ThemeProvider` React.
+- **Componentes**: `Button`, `Card`, `Input`, `Modal`, `Title`, `Subtitle`, `Paragraph`, `Header`, `Footer`.
+- **Paletas de botão**: escolha a cor do botão primary via prop `palette` ou `data-button-palette` no pai (`verde-vibrante`, `grafite-azulado`, etc.).
+
+## Uso em outro projeto
+
+### 1. Instalar no monorepo
+
+No `package.json` do app (ex.: frontend), adicione:
+
+```json
+"dependencies": {
+  "@sbkbs/ui": "^1.0.2"
+}
+```
+
+Rode `npm install` na raiz do monorepo.
+
+### 2. Tema (variáveis CSS)
+
+Os componentes usam variáveis CSS (`--md-surface`, `--primary-color`, etc.). O consumidor pode:
+
+- Usar o tema da lib: `import '@sbkbs/ui/theme.css';` no entry (ex.: `main.tsx`), ou
+- Definir as mesmas variáveis no próprio CSS do projeto (o frontend OFICIO.IA já tem `theme.css` próprio).
+
+### 3. ThemeProvider (opcional)
+
+Para light/dark com toggle e persistência em `localStorage`:
+
+```tsx
+import { ThemeProvider } from '@sbkbs/ui';
+
+root.render(
+  <ThemeProvider defaultTheme="light">
+    <App />
+  </ThemeProvider>
+);
+```
+
+### 4. Componentes
+
+```tsx
+import { Button, Card, Input, Modal, Title, Subtitle, Paragraph, Header, Footer } from '@sbkbs/ui';
+
+<Button variant="primary" size="md" palette="verde-vibrante">Salvar</Button>
+<Card variant="elevated" padding="lg" hoverable>...</Card>
+<Input label="E-mail" size="md" />
+<Modal isOpen={open} onClose={() => setOpen(false)} title="Título">...</Modal>
+<Title size="2xl" weight="bold">Título</Title>
+<Subtitle size="md" muted>Subtítulo</Subtitle>
+<Paragraph size="md">Texto.</Paragraph>
+
+<Header
+  logoSrc="/logo.png"
+  logoDarkSrc="/logo-dark.png"
+  title="OFÍCIO.IA"
+  subtitle="Subtítulo"
+  onLogoClick={() => navigate('/home')}
+  rightContent={<>
+    <LanguageSelector />
+    <ThemeToggle />
+    <UserMenu />
+  </>}
+/>
+<Footer poweredByText="Powered by" logoSrc="/logo.png" logoFallbackText="SBK" />
+```
+
+### Guia de marca (tema)
+
+Cores disponíveis como variáveis CSS: `--brand-verde-vibrante`, `--brand-grafite-azulado`, `--brand-verde-profundo`, `--brand-azul-acinzentado`, `--brand-cinza-medio`, `--brand-cinza-escuro`, `--brand-off-white`, e paleta "O Criador" (`--brand-azul-intenso`, `--brand-verde-lima`, etc.). Tipografia: `--font-primary` / `--font-heading` = Plus Jakarta Sans (Google Fonts).
+
+Paletas de botão (prop `palette` ou `data-button-palette` no pai): `verde-vibrante` | `verde-profundo` | `grafite-azulado` | `azul-acinzentado` | `cinza-medio` | `cinza-escuro` | `off-white`.
+
+## Compartilhar com outro projeto
+
+- **Mesmo monorepo:** adicione o app em `workspaces` e use `"@sbkbs/ui": "*"` nas dependências; depois `npm install` na raiz.
+- **Outro repositório:** use dependência por Git (`"@sbkbs/ui": "git+https://..."`) ou publique em um registry npm e instale com `npm install @sbkbs/ui`.
+
+Guia completo: [docs/COMPARTILHAR_LIB_UI.md](../docs/COMPARTILHAR_LIB_UI.md).
+
+## Desenvolvimento
+
+- **Build**: `npm run build` dentro de `ui`.
+- **Watch**: `npm run dev` dentro de `ui`.
+- **Playground**: `npm run playground`
+- **Storybook**: `npm run storybook`
+- **Testes**: `npm run test`
+
+## Estrutura
+
+```
+ui/
+  src/
+    index.ts
+    theme/
+      theme.css
+      ThemeProvider.tsx
+    components/
+      Button/
+      Card/
+      Input/
+      Modal/
+      Title/
+      Subtitle/
+      Paragraph/
+      Header/
+      Footer/
+  dist/
+```

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Texto alternativo / label acessível para a imagem ou iniciais. */
+    alt: string;
+    /** URL da imagem. Se ausente ou falhar no carregamento, exibe as iniciais. */
+    src?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Formato do avatar. Padrão: 'circle' */
+    shape?: 'circle' | 'square';
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/Footer/Footer.d.ts

@@ -4,9 +4,9 @@ export interface FooterProps {
     className?: string;
     /** Texto alternativo do logo */
     logoAlt?: string;
-    /** Texto exibido se a imagem do logo falhar (ex.: "SBK") */
+    /** Fallback textual — não utilizado no design padrão, mantido por compatibilidade */
     logoFallbackText?: string;
-    /** URL da imagem do logo */
+    /** URL de imagem para substituir o logo SVG padrão */
     logoSrc?: string;
     /** Texto antes do logo (ex.: "Powered by") */
     poweredByText?: string;

package/dist/components/Footer/Footer.js

@@ -1,54 +1,119 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { useState as c } from "react";
-const p = ({
-  poweredByText: t = "Powered by",
-  logoSrc: e,
-  logoAlt: i = "Logo",
-  logoFallbackText: s,
-  className: o = ""
-}) => {
-  const [a, l] = c(!0);
-  return /* @__PURE__ */ r(
-    "footer",
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useState as h, useEffect as f } from "react";
+import { cn as u } from "../../utils/cn.js";
+const d = () => typeof document > "u" ? "light" : document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light", p = ({ color: t, height: r = 28, opacity: s = 1 }) => {
+  const n = Math.round(r * 2.098961562306262);
+  return /* @__PURE__ */ e(
+    "svg",
     {
-      className: [
-        "relative z-[1] flex w-full shrink-0 items-center justify-center border-t border-[var(--border-color)] bg-[var(--bg-secondary)] px-[var(--spacing-2xl)] py-[var(--spacing-lg)]",
-        o
-      ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ n("div", { className: "flex items-center gap-[var(--spacing-md)]", children: [
-        t && /* @__PURE__ */ r("span", { className: "text-[0.95rem] font-normal text-[var(--text-secondary)]", children: t }),
-        (e || s) && /* @__PURE__ */ n("div", { className: "flex items-center", children: [
-          e && a && /* @__PURE__ */ r(
-            "img",
+      "aria-label": "SBK",
+      height: r,
+      style: { opacity: s },
+      viewBox: "39.15 180.84 541.7 258.08",
+      width: n,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ e("g", { transform: "translate(-49, 122)", children: /* @__PURE__ */ i("g", { children: [
+        /* @__PURE__ */ i("g", { children: [
+          /* @__PURE__ */ e(
+            "path",
+            {
+              d: "m225.13 266.26c-27.48 0-47.67-12.07-50.38-41.01h14.16c0.62 21.44 17.69 29.56 36.85 29.56 18.11 0 39.14-7.91 39.14-29.14 0-16.24-13.12-23.74-32.48-29.99l-11.03-3.53c-24.36-7.71-42.27-16.66-42.27-40.19 0-28.1 24.78-39.97 49.76-39.97 22.9 0 46.64 8.54 47.05 35.18h-13.95c-1.87-18.32-15.82-23.94-32.47-23.94-17.29 0-36.65 7.71-36.65 27.69 0 14.78 11.04 22.28 34.36 29.77l12.49 3.96c24.36 7.7 38.3 15.82 38.93 38.73 0 30.18-26.65 42.88-53.51 42.88z",
+              fill: t,
+              stroke: t,
+              strokeMiterlimit: 10,
+              strokeWidth: 2
+            }
+          ),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              d: "m351.42 264.39h-41.43v-150.53h41.43c8.53 0 17.9-0.2 26.23 2.09 16.24 4.58 27.48 17.9 27.48 35.18 0 18.74-10.41 29.98-27.9 34.56 20.82 2.71 34.15 15.2 34.15 36.85 0 34.56-31.86 41.85-59.96 41.85zm8.12-138.45h-36.02v56.49h32.06c19.16 0 34.98-8.81 34.98-30.26 0-18.74-14.16-26.23-31.02-26.23zm-1.46 63.19h-34.56v63.18h26.65c21.86 0 46.84-1.45 46.84-29.98 0-24.77-18.11-33.2-38.93-33.2z",
+              fill: t,
+              fillRule: "evenodd",
+              stroke: t,
+              strokeMiterlimit: 10,
+              strokeWidth: 2
+            }
+          ),
+          /* @__PURE__ */ e(
+            "path",
             {
-              alt: i,
-              className: "h-6 w-auto object-contain",
-              onError: (m) => {
-                l(!1);
-              },
-              src: e,
-              style: {
-                filter: "brightness(0)"
-              }
+              d: "m443.77 264.39v-150.53h13.53v150.53zm88.07 0l-73.7-81.61 67.03-68.92h18.12l-68.91 67.88 75.99 82.65z",
+              fill: t,
+              stroke: t,
+              strokeMiterlimit: 10,
+              strokeWidth: 2
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("g", { children: [
+          /* @__PURE__ */ e(
+            "path",
+            {
+              d: "m99.09 118.17l-0.21 57.98-9.73 0.24 0.56-62.81c0.26-29.03 26.91-53.16 56.3-53.26l151.74-0.48c0.62 3.58 0.63 6.35 0.05 9.92l-150.35 0.22c-26.28 0.04-48.26 21.9-48.36 48.19z",
+              fill: t
             }
           ),
-          s && /* @__PURE__ */ r(
-            "span",
+          /* @__PURE__ */ e(
+            "path",
             {
-              className: "flex items-center text-base font-bold tracking-[0.1em] text-[var(--md-primary)]",
-              style: {
-                display: e && a ? "none" : "flex",
-                fontFamily: '"Orbitron", sans-serif'
-              },
-              children: s
+              d: "m419.9 315.79l0.22-9.33 149.3-0.15c25.73-0.02 48.97-20.27 49.14-45.96l0.4-60.49q4.64-0.28 9.57-0.07l0.32 52.61c0.21 33.16-23.62 63.29-57.93 63.33l-135.88 0.19z",
+              fill: t
             }
           )
         ] })
+      ] }) })
+    }
+  );
+}, b = ({
+  poweredByText: t = "Powered by",
+  logoSrc: r,
+  logoAlt: s = "SBK",
+  className: o = ""
+}) => {
+  const [n, m] = h(() => d());
+  f(() => {
+    const a = () => m(d());
+    if (a(), typeof MutationObserver > "u") return;
+    const c = new MutationObserver(a);
+    return c.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => c.disconnect();
+  }, []);
+  const l = n === "dark";
+  return /* @__PURE__ */ e(
+    "footer",
+    {
+      className: u(
+        "relative z-[1] w-full shrink-0 box-border",
+        "flex items-center justify-center",
+        "py-5 px-14",
+        "border-t border-[var(--border-color)]",
+        "bg-[var(--bg-secondary)]",
+        o
+      ),
+      children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2.5", children: [
+        t && /* @__PURE__ */ e("span", { className: "font-primary text-xs font-normal text-[var(--text-muted)]", children: t }),
+        r ? /* @__PURE__ */ e(
+          "img",
+          {
+            alt: s,
+            src: r,
+            className: "h-7 w-auto object-contain",
+            style: { opacity: l ? 0.65 : 0.75 }
+          }
+        ) : /* @__PURE__ */ e(
+          p,
+          {
+            color: l ? "#ffffff" : "#1F3A3A",
+            height: 28,
+            opacity: l ? 0.65 : 0.75
+          }
+        )
       ] })
     }
   );
 };
+b.displayName = "Footer";
 export {
-  p as Footer
+  b as Footer
 };
 //# sourceMappingURL=Footer.js.map

package/dist/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nexport interface FooterProps {\n  /** Classe CSS adicional */\n  className?: string;\n  /** Texto alternativo do logo */\n  logoAlt?: string;\n  /** Texto exibido se a imagem do logo falhar (ex.: \"SBK\") */\n  logoFallbackText?: string;\n  /** URL da imagem do logo */\n  logoSrc?: string;\n  /** Texto antes do logo (ex.: \"Powered by\") */\n  poweredByText?: string;\n}\n\nexport const Footer: React.FC<FooterProps> = ({\n  poweredByText = 'Powered by',\n  logoSrc,\n  logoAlt = 'Logo',\n  logoFallbackText,\n  className = '',\n}) => {\n  const [logoVisible, setLogoVisible] = useState(true);\n  return (\n    <footer\n      className={[\n        'relative z-[1] flex w-full shrink-0 items-center justify-center border-t border-[var(--border-color)] bg-[var(--bg-secondary)] px-[var(--spacing-2xl)] py-[var(--spacing-lg)]',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"flex items-center gap-[var(--spacing-md)]\">\n        {poweredByText && (\n          <span className=\"text-[0.95rem] font-normal text-[var(--text-secondary)]\">\n            {poweredByText}\n          </span>\n        )}\n        {(logoSrc || logoFallbackText) && (\n          <div className=\"flex items-center\">\n            {logoSrc && logoVisible && (\n              <img\n                alt={logoAlt}\n                className=\"h-6 w-auto object-contain\"\n                onError={(_e) => {\n                  setLogoVisible(false);\n                }}\n                src={logoSrc}\n                style={{\n                  filter: 'brightness(0)',\n                }}\n              />\n            )}\n            {logoFallbackText && (\n              <span\n                className=\"flex items-center text-base font-bold tracking-[0.1em] text-[var(--md-primary)]\"\n                style={{\n                  display: logoSrc && logoVisible ? 'none' : 'flex',\n                  fontFamily: '\"Orbitron\", sans-serif',\n                }}\n              >\n                {logoFallbackText}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    </footer>\n  );\n};\n"],"names":["Footer","poweredByText","logoSrc","logoAlt","logoFallbackText","className","logoVisible","setLogoVisible","useState","jsx","jsxs","_e"],"mappings":";;AAgBO,MAAMA,IAAgC,CAAC;AAAA,EAC5C,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,kBAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAI;AACnD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,6CACZ,UAAA;AAAA,QAAAT,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,2DACb,UAAAR,GACH;AAAA,SAEAC,KAAWE,MACX,gBAAAM,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,UAAAR,KAAWI,KACV,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKN;AAAA,cACL,WAAU;AAAA,cACV,SAAS,CAACQ,MAAO;AACf,gBAAAJ,EAAe,EAAK;AAAA,cACtB;AAAA,cACA,KAAKL;AAAA,cACL,OAAO;AAAA,gBACL,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UAAA;AAAA,UAGHE,KACC,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,SAASP,KAAWI,IAAc,SAAS;AAAA,gBAC3C,YAAY;AAAA,cAAA;AAAA,cAGb,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Footer.js","sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface FooterProps {\n  /** Classe CSS adicional */\n  className?: string;\n  /** Texto alternativo do logo */\n  logoAlt?: string;\n  /** Fallback textual — não utilizado no design padrão, mantido por compatibilidade */\n  logoFallbackText?: string;\n  /** URL de imagem para substituir o logo SVG padrão */\n  logoSrc?: string;\n  /** Texto antes do logo (ex.: \"Powered by\") */\n  poweredByText?: string;\n}\n\nconst detectTheme = () => {\n  if (typeof document === 'undefined') return 'light';\n  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';\n};\n\ninterface SbkLogoProps {\n  color: string;\n  height?: number;\n  opacity?: number;\n}\n\nconst SbkLogo: React.FC<SbkLogoProps> = ({ color, height = 28, opacity = 1 }) => {\n  const aspect = 541.7 / 258.08;\n  const width = Math.round(height * aspect);\n  return (\n    <svg\n      aria-label=\"SBK\"\n      height={height}\n      style={{ opacity }}\n      viewBox=\"39.15 180.84 541.7 258.08\"\n      width={width}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g transform=\"translate(-49, 122)\">\n        <g>\n          <g>\n            {/* S */}\n            <path\n              d=\"m225.13 266.26c-27.48 0-47.67-12.07-50.38-41.01h14.16c0.62 21.44 17.69 29.56 36.85 29.56 18.11 0 39.14-7.91 39.14-29.14 0-16.24-13.12-23.74-32.48-29.99l-11.03-3.53c-24.36-7.71-42.27-16.66-42.27-40.19 0-28.1 24.78-39.97 49.76-39.97 22.9 0 46.64 8.54 47.05 35.18h-13.95c-1.87-18.32-15.82-23.94-32.47-23.94-17.29 0-36.65 7.71-36.65 27.69 0 14.78 11.04 22.28 34.36 29.77l12.49 3.96c24.36 7.7 38.3 15.82 38.93 38.73 0 30.18-26.65 42.88-53.51 42.88z\"\n              fill={color}\n              stroke={color}\n              strokeMiterlimit={10}\n              strokeWidth={2}\n            />\n            {/* B */}\n            <path\n              d=\"m351.42 264.39h-41.43v-150.53h41.43c8.53 0 17.9-0.2 26.23 2.09 16.24 4.58 27.48 17.9 27.48 35.18 0 18.74-10.41 29.98-27.9 34.56 20.82 2.71 34.15 15.2 34.15 36.85 0 34.56-31.86 41.85-59.96 41.85zm8.12-138.45h-36.02v56.49h32.06c19.16 0 34.98-8.81 34.98-30.26 0-18.74-14.16-26.23-31.02-26.23zm-1.46 63.19h-34.56v63.18h26.65c21.86 0 46.84-1.45 46.84-29.98 0-24.77-18.11-33.2-38.93-33.2z\"\n              fill={color}\n              fillRule=\"evenodd\"\n              stroke={color}\n              strokeMiterlimit={10}\n              strokeWidth={2}\n            />\n            {/* K */}\n            <path\n              d=\"m443.77 264.39v-150.53h13.53v150.53zm88.07 0l-73.7-81.61 67.03-68.92h18.12l-68.91 67.88 75.99 82.65z\"\n              fill={color}\n              stroke={color}\n              strokeMiterlimit={10}\n              strokeWidth={2}\n            />\n          </g>\n          <g>\n            {/* Arco superior */}\n            <path\n              d=\"m99.09 118.17l-0.21 57.98-9.73 0.24 0.56-62.81c0.26-29.03 26.91-53.16 56.3-53.26l151.74-0.48c0.62 3.58 0.63 6.35 0.05 9.92l-150.35 0.22c-26.28 0.04-48.26 21.9-48.36 48.19z\"\n              fill={color}\n            />\n            {/* Arco inferior */}\n            <path\n              d=\"m419.9 315.79l0.22-9.33 149.3-0.15c25.73-0.02 48.97-20.27 49.14-45.96l0.4-60.49q4.64-0.28 9.57-0.07l0.32 52.61c0.21 33.16-23.62 63.29-57.93 63.33l-135.88 0.19z\"\n              fill={color}\n            />\n          </g>\n        </g>\n      </g>\n    </svg>\n  );\n};\n\nexport const Footer: React.FC<FooterProps> = ({\n  poweredByText = 'Powered by',\n  logoSrc,\n  logoAlt = 'SBK',\n  className = '',\n}) => {\n  const [theme, setTheme] = useState<'light' | 'dark'>(() => detectTheme() as 'light' | 'dark');\n\n  useEffect(() => {\n    const sync = () => setTheme(detectTheme() as 'light' | 'dark');\n    sync();\n    if (typeof MutationObserver === 'undefined') return;\n    const observer = new MutationObserver(sync);\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });\n    return () => observer.disconnect();\n  }, []);\n\n  const isDark = theme === 'dark';\n\n  return (\n    <footer\n      className={cn(\n        'relative z-[1] w-full shrink-0 box-border',\n        'flex items-center justify-center',\n        'py-5 px-14',\n        'border-t border-[var(--border-color)]',\n        'bg-[var(--bg-secondary)]',\n        className,\n      )}\n    >\n      <div className=\"flex items-center gap-2.5\">\n        {poweredByText && (\n          <span className=\"font-primary text-xs font-normal text-[var(--text-muted)]\">\n            {poweredByText}\n          </span>\n        )}\n\n        {logoSrc ? (\n          <img\n            alt={logoAlt}\n            src={logoSrc}\n            className=\"h-7 w-auto object-contain\"\n            style={{ opacity: isDark ? 0.65 : 0.75 }}\n          />\n        ) : (\n          <SbkLogo\n            color={isDark ? '#ffffff' : '#1F3A3A'}\n            height={28}\n            opacity={isDark ? 0.65 : 0.75}\n          />\n        )}\n      </div>\n    </footer>\n  );\n};\n\nFooter.displayName = 'Footer';\n"],"names":["detectTheme","SbkLogo","color","height","opacity","width","jsx","jsxs","Footer","poweredByText","logoSrc","logoAlt","className","theme","setTheme","useState","useEffect","sync","observer","isDark","cn"],"mappings":"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"}

package/dist/components/Header/Header.d.ts

@@ -5,19 +5,25 @@ export interface HeaderProps {
     className?: string;
     /** Texto alternativo do logo */
     logoAlt?: string;
-    /** URL da imagem do logo (tema escuro). Se não informado, usa logoSrc. */
+    /** URL de imagem para substituir o logo SVG padrão (tema escuro) */
     logoDarkSrc?: string;
-    /** URL da imagem do logo (tema claro) */
+    /** URL de imagem para substituir o logo SVG padrão (tema claro) */
     logoSrc?: string;
+    /** Callback ao clicar no ícone de menu (hamburger) */
+    onMenuClick?: () => void;
     /** Callback ao clicar na área do logo/título */
     onLogoClick?: () => void;
-    /** Conteúdo da área direita (ex.: seletor de idioma, toggle tema, menu usuário) */
+    /** Conteúdo da área direita (pills de idioma/tema, etc.) */
     rightContent?: React.ReactNode;
+    /** Exibe o ícone hamburger à esquerda — padrão: true */
+    showMenuIcon?: boolean;
     /** Subtítulo abaixo do título */
     subtitle?: React.ReactNode;
-    /** Tema opcional para escolher o logo correto sem depender do ThemeProvider do UI */
+    /** Tema opcional para escolher o logo correto sem depender do ThemeProvider */
     theme?: Theme;
-    /** Título exibido ao lado do logo (ex.: "OFÍCIO.IA") */
+    /** Título exibido ao lado do logo */
     title?: React.ReactNode;
+    /** Iniciais do usuário no avatar circular turquesa (ex.: "CF") */
+    userInitials?: string;
 }
 export declare const Header: React.FC<HeaderProps>;