@sbkbs/ui 1.0.5 → 1.0.6

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>;

package/dist/components/Header/Header.js

@@ -1,114 +1,174 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { useState as u, useEffect as x } from "react";
-const v = () => typeof document > "u" ? "light" : document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light", M = ({
-  logoSrc: h,
-  logoDarkSrc: i,
-  logoAlt: p = "Logo",
-  title: l,
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as y, useEffect as N } from "react";
+import { cn as o } from "../../utils/cn.js";
+const p = () => typeof document > "u" ? "light" : document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light", z = ({ height: n = 36 }) => {
+  const l = Math.round(n * 2.098961562306262);
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      "aria-label": "SBK",
+      height: n,
+      viewBox: "39.15 180.84 541.7 258.08",
+      width: l,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ e("g", { transform: "translate(-49, 122)", children: /* @__PURE__ */ t("g", { children: [
+        /* @__PURE__ */ t("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: "#ffffff",
+              stroke: "#ffffff",
+              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: "#ffffff",
+              fillRule: "evenodd",
+              stroke: "#ffffff",
+              strokeMiterlimit: 10,
+              strokeWidth: 2
+            }
+          ),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              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: "#ffffff",
+              stroke: "#ffffff",
+              strokeMiterlimit: 10,
+              strokeWidth: 2
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("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: "#ffffff"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              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: "#ffffff"
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}, M = ({ onClick: n }) => /* @__PURE__ */ t(
+  "button",
+  {
+    "aria-label": "Abrir menu",
+    onClick: n,
+    type: "button",
+    className: o(
+      "flex flex-col gap-1 shrink-0 bg-transparent border-none p-1.5",
+      n ? "cursor-pointer" : "cursor-default"
+    ),
+    children: [
+      /* @__PURE__ */ e("span", { className: "block w-5 h-0.5 bg-sbk-verde-vibrante rounded-[2px]" }),
+      /* @__PURE__ */ e("span", { className: "block w-5 h-0.5 bg-sbk-verde-vibrante rounded-[2px]" }),
+      /* @__PURE__ */ e("span", { className: "block w-5 h-0.5 bg-sbk-verde-vibrante rounded-[2px]" })
+    ]
+  }
+), j = ({
+  logoSrc: n,
+  logoDarkSrc: f,
+  logoAlt: l = "SBK",
+  title: i,
   subtitle: d,
-  theme: s,
-  onLogoClick: e,
-  rightContent: m,
-  className: b = ""
+  theme: a,
+  onLogoClick: r,
+  onMenuClick: b,
+  rightContent: v,
+  showMenuIcon: x = !0,
+  userInitials: c,
+  className: g = ""
 }) => {
-  const [o, w] = u(!1), [y, c] = u(() => s ?? v()), f = y === "dark" && i ? i : h;
-  x(() => {
-    const t = () => w(window.scrollY > 10);
-    return window.addEventListener("scroll", t, { passive: !0 }), () => window.removeEventListener("scroll", t);
-  }, []), x(() => {
-    if (s) {
-      c(s);
+  const [k, m] = y(() => a ?? p()), h = k === "dark" && f ? f : n;
+  N(() => {
+    if (a) {
+      m(a);
       return;
     }
-    const t = () => c(v());
-    if (t(), typeof MutationObserver > "u")
-      return;
-    const n = new MutationObserver(t);
-    return n.observe(document.documentElement, {
-      attributes: !0,
-      attributeFilter: ["data-theme"]
-    }), () => n.disconnect();
-  }, [s]);
-  const N = () => e == null ? void 0 : e(), E = (t) => {
-    t.key === "Enter" && (e == null || e());
+    const s = () => m(p());
+    if (s(), typeof MutationObserver > "u") return;
+    const u = new MutationObserver(s);
+    return u.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => u.disconnect();
+  }, [a]);
+  const w = (s) => {
+    s.key === "Enter" && (r == null || r());
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ t(
     "header",
     {
-      className: ["fixed inset-x-0 top-0 z-[1000] w-full backdrop-blur-[12px]", b].filter(Boolean).join(" "),
+      className: o(
+        "sticky top-0 z-[1000] w-full h-16 shrink-0 box-border",
+        "bg-sbk-verde-profundo",
+        "flex items-center justify-between",
+        "px-14",
+        g
+      ),
       children: [
-        /* @__PURE__ */ r("div", { className: "h-0.5 w-full bg-[var(--md-primary)]" }),
-        /* @__PURE__ */ a(
-          "div",
-          {
-            className: "flex items-center justify-between px-6 py-2 shadow-[var(--shadow-sm)] max-md:flex-col max-md:gap-3 max-md:px-4 max-md:py-3",
-            style: {
-              color: "var(--md-on-surface)",
-              background: `color-mix(in srgb, var(--md-surface) ${o ? "14%" : "18%"}, transparent)`,
-              borderBottom: `1px solid color-mix(in srgb, var(--md-outline-variant) ${o ? "22%" : "30%"}, transparent)`
-            },
-            children: [
-              /* @__PURE__ */ a(
-                "div",
-                {
-                  className: "flex cursor-pointer items-center gap-3 transition-opacity duration-200 ease-in-out hover:opacity-80",
-                  onClick: e ? N : void 0,
-                  onKeyDown: e ? E : void 0,
-                  role: e ? "button" : void 0,
-                  tabIndex: e ? 0 : void 0,
-                  children: [
-                    f && /* @__PURE__ */ a("div", { className: "flex h-16 w-16 shrink-0 items-center justify-center", children: [
-                      /* @__PURE__ */ r(
-                        "img",
-                        {
-                          alt: p,
-                          className: "h-full w-full object-contain",
-                          onError: (t) => {
-                            t.target.style.display = "none";
-                            const n = t.target.nextElementSibling;
-                            n && (n.style.display = "block");
-                          },
-                          src: f
-                        }
-                      ),
-                      /* @__PURE__ */ a(
-                        "svg",
-                        {
-                          className: "hidden h-full w-full",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          viewBox: "0 0 24 24",
-                          children: [
-                            /* @__PURE__ */ r("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
-                            /* @__PURE__ */ r("path", { d: "M2 17l10 5 10-5M2 12l10 5 10-5" })
-                          ]
-                        }
-                      )
-                    ] }),
-                    (l || d) && /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
-                      l && /* @__PURE__ */ r(
-                        "h1",
-                        {
-                          className: "m-0 inline-flex items-baseline text-[1.375rem] font-bold leading-[1.2] tracking-[0.05em] text-[var(--md-on-surface)] max-md:text-xl",
-                          style: { fontFamily: "var(--font-logo)" },
-                          children: l
-                        }
-                      ),
-                      d && /* @__PURE__ */ r("p", { className: "m-0 text-[0.8125rem] font-normal text-[var(--md-on-surface-variant)] max-md:text-xs", children: d })
-                    ] })
-                  ]
-                }
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-3 min-w-0", children: [
+          x && /* @__PURE__ */ e(M, { onClick: b }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              onClick: r,
+              onKeyDown: r ? w : void 0,
+              role: r ? "button" : void 0,
+              className: o(
+                "flex items-center gap-2.5 select-none",
+                r ? "cursor-pointer" : "cursor-default"
               ),
-              m && /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-3 max-md:w-full max-md:flex-wrap max-md:justify-between", children: m })
-            ]
-          }
-        )
+              tabIndex: r ? 0 : void 0,
+              children: [
+                h ? /* @__PURE__ */ e(
+                  "img",
+                  {
+                    alt: l,
+                    onError: (s) => {
+                      s.target.style.display = "none";
+                    },
+                    src: h,
+                    className: "h-9 w-auto object-contain shrink-0"
+                  }
+                ) : /* @__PURE__ */ e(z, { height: 36 }),
+                (i || d) && /* @__PURE__ */ t("div", { className: "flex flex-col gap-[1px]", children: [
+                  i && /* @__PURE__ */ e("span", { className: "font-logo text-[1.125rem] font-semibold text-white leading-[1.2] tracking-[0.02em]", children: i }),
+                  d && /* @__PURE__ */ e("span", { className: "font-primary text-[11px] font-normal text-white/45 leading-[1.3]", children: d })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 shrink-0", children: [
+          v,
+          c && /* @__PURE__ */ e(
+            "div",
+            {
+              "aria-label": `Usuário: ${c}`,
+              className: "w-9 h-9 rounded-full bg-sbk-verde-vibrante flex items-center justify-center text-white font-primary font-semibold text-[13px] shrink-0 select-none",
+              children: c
+            }
+          )
+        ] })
       ]
     }
   );
 };
+j.displayName = "Header";
 export {
-  M as Header
+  j as Header
 };
 //# sourceMappingURL=Header.js.map

package/dist/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport type { Theme } from '../../theme/ThemeProvider';\n\nexport interface HeaderProps {\n  /** Classe CSS adicional */\n  className?: string;\n  /** Texto alternativo do logo */\n  logoAlt?: string;\n  /** URL da imagem do logo (tema escuro). Se não informado, usa logoSrc. */\n  logoDarkSrc?: string;\n  /** URL da imagem do logo (tema claro) */\n  logoSrc?: string;\n  /** Callback ao clicar na área do logo/título */\n  onLogoClick?: () => void;\n  /** Conteúdo da área direita (ex.: seletor de idioma, toggle tema, menu usuário) */\n  rightContent?: React.ReactNode;\n  /** Subtítulo abaixo do título */\n  subtitle?: React.ReactNode;\n  /** Tema opcional para escolher o logo correto sem depender do ThemeProvider do UI */\n  theme?: Theme;\n  /** Título exibido ao lado do logo (ex.: \"OFÍCIO.IA\") */\n  title?: React.ReactNode;\n}\n\nconst detectTheme = (): Theme => {\n  if (typeof document === 'undefined') {\n    return 'light';\n  }\n\n  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';\n};\n\nexport const Header: React.FC<HeaderProps> = ({\n  logoSrc,\n  logoDarkSrc,\n  logoAlt = 'Logo',\n  title,\n  subtitle,\n  theme,\n  onLogoClick,\n  rightContent,\n  className = '',\n}) => {\n  const [isScrolled, setIsScrolled] = useState(false);\n  const [resolvedTheme, setResolvedTheme] = useState<Theme>(() => theme ?? detectTheme());\n\n  const logoSrcResolved = resolvedTheme === 'dark' && logoDarkSrc ? logoDarkSrc : logoSrc;\n\n  useEffect(() => {\n    const handleScroll = () => setIsScrolled(window.scrollY > 10);\n    window.addEventListener('scroll', handleScroll, { passive: true });\n    return () => window.removeEventListener('scroll', handleScroll);\n  }, []);\n\n  useEffect(() => {\n    if (theme) {\n      setResolvedTheme(theme);\n      return;\n    }\n\n    const syncTheme = () => setResolvedTheme(detectTheme());\n    syncTheme();\n\n    if (typeof MutationObserver === 'undefined') {\n      return;\n    }\n\n    const observer = new MutationObserver(syncTheme);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme'],\n    });\n\n    return () => observer.disconnect();\n  }, [theme]);\n\n  const handleClick = () => onLogoClick?.();\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      onLogoClick?.();\n    }\n  };\n\n  return (\n    <header\n      className={['fixed inset-x-0 top-0 z-[1000] w-full backdrop-blur-[12px]', className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"h-0.5 w-full bg-[var(--md-primary)]\" />\n      <div\n        className=\"flex items-center justify-between px-6 py-2 shadow-[var(--shadow-sm)] max-md:flex-col max-md:gap-3 max-md:px-4 max-md:py-3\"\n        style={{\n          color: 'var(--md-on-surface)',\n          background: `color-mix(in srgb, var(--md-surface) ${\n            isScrolled ? '14%' : '18%'\n          }, transparent)`,\n          borderBottom: `1px solid color-mix(in srgb, var(--md-outline-variant) ${\n            isScrolled ? '22%' : '30%'\n          }, transparent)`,\n        }}\n      >\n        <div\n          className=\"flex cursor-pointer items-center gap-3 transition-opacity duration-200 ease-in-out hover:opacity-80\"\n          onClick={onLogoClick ? handleClick : undefined}\n          onKeyDown={onLogoClick ? handleKeyDown : undefined}\n          role={onLogoClick ? 'button' : undefined}\n          tabIndex={onLogoClick ? 0 : undefined}\n        >\n          {logoSrcResolved && (\n            <div className=\"flex h-16 w-16 shrink-0 items-center justify-center\">\n              <img\n                alt={logoAlt}\n                className=\"h-full w-full object-contain\"\n                onError={(e) => {\n                  (e.target as HTMLImageElement).style.display = 'none';\n                  const next = (e.target as HTMLElement).nextElementSibling as HTMLElement;\n                  if (next) {\n                    next.style.display = 'block';\n                  }\n                }}\n                src={logoSrcResolved}\n              />\n              <svg\n                className=\"hidden h-full w-full\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\" />\n                <path d=\"M2 17l10 5 10-5M2 12l10 5 10-5\" />\n              </svg>\n            </div>\n          )}\n          {(title || subtitle) && (\n            <div className=\"flex flex-col gap-1\">\n              {title && (\n                <h1\n                  className=\"m-0 inline-flex items-baseline text-[1.375rem] font-bold leading-[1.2] tracking-[0.05em] text-[var(--md-on-surface)] max-md:text-xl\"\n                  style={{ fontFamily: 'var(--font-logo)' }}\n                >\n                  {title}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"m-0 text-[0.8125rem] font-normal text-[var(--md-on-surface-variant)] max-md:text-xs\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n          )}\n        </div>\n        {rightContent && (\n          <div className=\"flex shrink-0 items-center gap-3 max-md:w-full max-md:flex-wrap max-md:justify-between\">\n            {rightContent}\n          </div>\n        )}\n      </div>\n    </header>\n  );\n};\n"],"names":["detectTheme","Header","logoSrc","logoDarkSrc","logoAlt","title","subtitle","theme","onLogoClick","rightContent","className","isScrolled","setIsScrolled","useState","resolvedTheme","setResolvedTheme","logoSrcResolved","useEffect","handleScroll","syncTheme","observer","handleClick","handleKeyDown","e","jsxs","jsx","next"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport type { Theme } from '../../theme/ThemeProvider';\n\nexport interface HeaderProps {\n  /** Classe CSS adicional */\n  className?: string;\n  /** Texto alternativo do logo */\n  logoAlt?: string;\n  /** URL de imagem para substituir o logo SVG padrão (tema escuro) */\n  logoDarkSrc?: string;\n  /** URL de imagem para substituir o logo SVG padrão (tema claro) */\n  logoSrc?: string;\n  /** Callback ao clicar no ícone de menu (hamburger) */\n  onMenuClick?: () => void;\n  /** Callback ao clicar na área do logo/título */\n  onLogoClick?: () => void;\n  /** Conteúdo da área direita (pills de idioma/tema, etc.) */\n  rightContent?: React.ReactNode;\n  /** Exibe o ícone hamburger à esquerda — padrão: true */\n  showMenuIcon?: boolean;\n  /** Subtítulo abaixo do título */\n  subtitle?: React.ReactNode;\n  /** Tema opcional para escolher o logo correto sem depender do ThemeProvider */\n  theme?: Theme;\n  /** Título exibido ao lado do logo */\n  title?: React.ReactNode;\n  /** Iniciais do usuário no avatar circular turquesa (ex.: \"CF\") */\n  userInitials?: string;\n}\n\nconst detectTheme = (): Theme => {\n  if (typeof document === 'undefined') return 'light';\n  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';\n};\n\nconst SbkLogoWhite: React.FC<{ height?: number }> = ({ height = 36 }) => {\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      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=\"#ffffff\"\n              stroke=\"#ffffff\"\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=\"#ffffff\"\n              fillRule=\"evenodd\"\n              stroke=\"#ffffff\"\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=\"#ffffff\"\n              stroke=\"#ffffff\"\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=\"#ffffff\"\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=\"#ffffff\"\n            />\n          </g>\n        </g>\n      </g>\n    </svg>\n  );\n};\n\nconst HamburgerIcon: React.FC<{ onClick?: () => void }> = ({ onClick }) => (\n  <button\n    aria-label=\"Abrir menu\"\n    onClick={onClick}\n    type=\"button\"\n    className={cn(\n      'flex flex-col gap-1 shrink-0 bg-transparent border-none p-1.5',\n      onClick ? 'cursor-pointer' : 'cursor-default',\n    )}\n  >\n    <span className=\"block w-5 h-0.5 bg-sbk-verde-vibrante rounded-[2px]\" />\n    <span className=\"block w-5 h-0.5 bg-sbk-verde-vibrante rounded-[2px]\" />\n    <span className=\"block w-5 h-0.5 bg-sbk-verde-vibrante rounded-[2px]\" />\n  </button>\n);\n\nexport const Header: React.FC<HeaderProps> = ({\n  logoSrc,\n  logoDarkSrc,\n  logoAlt = 'SBK',\n  title,\n  subtitle,\n  theme,\n  onLogoClick,\n  onMenuClick,\n  rightContent,\n  showMenuIcon = true,\n  userInitials,\n  className = '',\n}) => {\n  const [resolvedTheme, setResolvedTheme] = useState<Theme>(() => theme ?? detectTheme());\n\n  const logoSrcResolved = resolvedTheme === 'dark' && logoDarkSrc ? logoDarkSrc : logoSrc;\n\n  useEffect(() => {\n    if (theme) {\n      setResolvedTheme(theme);\n      return;\n    }\n    const syncTheme = () => setResolvedTheme(detectTheme());\n    syncTheme();\n    if (typeof MutationObserver === 'undefined') return;\n    const observer = new MutationObserver(syncTheme);\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });\n    return () => observer.disconnect();\n  }, [theme]);\n\n  const handleLogoKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter') onLogoClick?.();\n  };\n\n  return (\n    <header\n      className={cn(\n        'sticky top-0 z-[1000] w-full h-16 shrink-0 box-border',\n        'bg-sbk-verde-profundo',\n        'flex items-center justify-between',\n        'px-14',\n        className,\n      )}\n    >\n      {/* ── Esquerda: hamburger + logo ── */}\n      <div className=\"flex items-center gap-3 min-w-0\">\n        {showMenuIcon && <HamburgerIcon onClick={onMenuClick} />}\n\n        <div\n          onClick={onLogoClick}\n          onKeyDown={onLogoClick ? handleLogoKeyDown : undefined}\n          role={onLogoClick ? 'button' : undefined}\n          className={cn(\n            'flex items-center gap-2.5 select-none',\n            onLogoClick ? 'cursor-pointer' : 'cursor-default',\n          )}\n          tabIndex={onLogoClick ? 0 : undefined}\n        >\n          {logoSrcResolved ? (\n            <img\n              alt={logoAlt}\n              onError={(e) => {\n                (e.target as HTMLImageElement).style.display = 'none';\n              }}\n              src={logoSrcResolved}\n              className=\"h-9 w-auto object-contain shrink-0\"\n            />\n          ) : (\n            <SbkLogoWhite height={36} />\n          )}\n\n          {(title || subtitle) && (\n            <div className=\"flex flex-col gap-[1px]\">\n              {title && (\n                <span className=\"font-logo text-[1.125rem] font-semibold text-white leading-[1.2] tracking-[0.02em]\">\n                  {title}\n                </span>\n              )}\n              {subtitle && (\n                <span className=\"font-primary text-[11px] font-normal text-white/45 leading-[1.3]\">\n                  {subtitle}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* ── Direita: pills + avatar ── */}\n      <div className=\"flex items-center gap-2 shrink-0\">\n        {rightContent}\n        {userInitials && (\n          <div\n            aria-label={`Usuário: ${userInitials}`}\n            className=\"w-9 h-9 rounded-full bg-sbk-verde-vibrante flex items-center justify-center text-white font-primary font-semibold text-[13px] shrink-0 select-none\"\n          >\n            {userInitials}\n          </div>\n        )}\n      </div>\n    </header>\n  );\n};\n\nHeader.displayName = 'Header';\n"],"names":["detectTheme","SbkLogoWhite","height","width","jsx","jsxs","HamburgerIcon","onClick","cn","Header","logoSrc","logoDarkSrc","logoAlt","title","subtitle","theme","onLogoClick","onMenuClick","rightContent","showMenuIcon","userInitials","className","resolvedTheme","setResolvedTheme","useState","logoSrcResolved","useEffect","syncTheme","observer","handleLogoKeyDown","e"],"mappings":"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"}

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Label descritivo para leitores de tela. */
+    label?: string;
+    /** Valor atual (0–100). */
+    value: number;
+    size?: 'sm' | 'md' | 'lg';
+    tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+    /** Exibe o percentual como texto ao lado da barra. */
+    showValue?: boolean;
+}
+export declare const ProgressBar: React.FC<ProgressBarProps>;

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+    /** Texto anunciado para leitores de tela. Padrão: 'Carregando...' */
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+export declare const Spinner: React.FC<SpinnerProps>;