@sbkbs/ui 1.0.6 → 2.0.0-beta.0

package/dist/components/Header/Header.js

@@ -1,165 +1,105 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useState as y, useEffect as N } from "react";
+import { jsxs as t, jsx as e, Fragment as M } from "react/jsx-runtime";
+import { useState as C, useEffect as F } from "react";
+import { Menu as H } from "lucide-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: a,
-  onLogoClick: r,
-  onMenuClick: b,
-  rightContent: v,
-  showMenuIcon: x = !0,
-  userInitials: c,
-  className: g = ""
+import { focusRing as p, buttonReset as x, inverseScope as L } from "../../utils/styles.js";
+import { Logo as O } from "../Logo/Logo.js";
+const g = () => typeof document < "u" && document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light", S = {
+  solid: L,
+  light: "border-b border-sbk-line bg-sbk-surface text-sbk-fg",
+  glass: "sbk-glass rounded-none border-x-0 border-t-0 text-sbk-fg"
+}, B = ({
+  logoSrc: k,
+  logoDarkSrc: s,
+  logoAlt: N = "SBK",
+  logoVariant: v = "sbk",
+  title: r,
+  subtitle: i,
+  theme: n,
+  navigation: c,
+  onLogoClick: d,
+  onMenuClick: y,
+  menuExpanded: w,
+  menuLabel: j = "Abrir menu",
+  rightContent: z,
+  showMenuIcon: A = !0,
+  sticky: R = !0,
+  userInitials: a,
+  variant: l = "solid",
+  className: T
 }) => {
-  const [k, m] = y(() => a ?? p()), h = k === "dark" && f ? f : n;
-  N(() => {
-    if (a) {
-      m(a);
+  const [E, m] = C(() => n ?? g());
+  F(() => {
+    if (n) {
+      m(n);
       return;
     }
-    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());
-  };
+    if (!s || typeof MutationObserver > "u") return;
+    const f = () => m(g());
+    f();
+    const h = new MutationObserver(f);
+    return h.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["data-theme"]
+    }), () => h.disconnect();
+  }, [n, s]);
+  const u = E === "dark" && s ? s : k, b = /* @__PURE__ */ t(M, { children: [
+    u ? /* @__PURE__ */ e("img", { alt: N, className: "h-8 w-auto shrink-0 object-contain", src: u }) : /* @__PURE__ */ e(O, { color: l === "solid" ? "white" : "auto", height: 28, variant: v }),
+    (r || i) && /* @__PURE__ */ t("span", { className: "grid min-w-0 gap-px text-left", children: [
+      r && /* @__PURE__ */ e("span", { className: "truncate text-base font-semibold leading-tight text-sbk-fg-heading", children: r }),
+      i && /* @__PURE__ */ e("span", { className: "truncate text-xs font-light leading-tight text-sbk-fg-muted", children: i })
+    ] })
+  ] });
   return /* @__PURE__ */ t(
     "header",
     {
       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
+        "z-[var(--sbk-z-sticky)] box-border flex h-16 w-full shrink-0 items-center justify-between gap-4 px-4 md:px-8",
+        R && "sticky top-0",
+        S[l],
+        T
       ),
       children: [
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-3 min-w-0", children: [
-          x && /* @__PURE__ */ e(M, { onClick: b }),
-          /* @__PURE__ */ t(
-            "div",
+        /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-3", children: [
+          A && /* @__PURE__ */ e(
+            "button",
             {
-              onClick: r,
-              onKeyDown: r ? w : void 0,
-              role: r ? "button" : void 0,
+              "aria-expanded": w,
+              "aria-label": j,
               className: o(
-                "flex items-center gap-2.5 select-none",
-                r ? "cursor-pointer" : "cursor-default"
+                x,
+                "inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sbk-sm text-sbk-fg hover:bg-sbk-surface-hover",
+                p
               ),
-              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 })
-                ] })
-              ]
+              onClick: y,
+              type: "button",
+              children: /* @__PURE__ */ e(H, { "aria-hidden": "true", className: "size-5" })
             }
-          )
+          ),
+          d ? /* @__PURE__ */ e(
+            "button",
+            {
+              className: o(
+                x,
+                "flex min-w-0 cursor-pointer items-center gap-3 rounded-sbk-xs",
+                p
+              ),
+              onClick: d,
+              type: "button",
+              children: b
+            }
+          ) : /* @__PURE__ */ e("div", { className: "flex min-w-0 items-center gap-3", children: b })
         ] }),
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 shrink-0", children: [
-          v,
-          c && /* @__PURE__ */ e(
-            "div",
+        c && /* @__PURE__ */ e("nav", { "aria-label": "Principal", className: "hidden min-w-0 flex-1 justify-center md:flex", children: c }),
+        /* @__PURE__ */ t("div", { className: "flex shrink-0 items-center gap-2", children: [
+          z,
+          a && /* @__PURE__ */ e(
+            "span",
             {
-              "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
+              "aria-label": `Usuário: ${a}`,
+              className: "inline-flex size-9 shrink-0 select-none items-center justify-center rounded-full bg-sbk-ciano text-[0.8125rem] font-semibold text-sbk-branco",
+              role: "img",
+              children: a
             }
           )
         ] })
@@ -167,8 +107,8 @@ const p = () => typeof document > "u" ? "light" : document.documentElement.getAt
     }
   );
 };
-j.displayName = "Header";
+B.displayName = "Header";
 export {
-  j as Header
+  B 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 { 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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"}
+{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Menu } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing, inverseScope } from '../../utils/styles';\nimport type { Theme } from '../../theme/ThemeProvider';\nimport { Logo, type LogoVariant } from '../Logo/Logo';\n\nexport type HeaderVariant = 'solid' | 'light' | 'glass';\n\nexport interface HeaderProps {\n  className?: string;\n  /** Texto alternativo da imagem de logo customizada. */\n  logoAlt?: string;\n  /** Imagem de logo para o tema escuro (substitui o SVG oficial). */\n  logoDarkSrc?: string;\n  /** Imagem de logo customizada (substitui o SVG oficial). */\n  logoSrc?: string;\n  /** Logo oficial usado quando não há `logoSrc`. Padrão: sbk. */\n  logoVariant?: LogoVariant;\n  /** Estado do menu lateral, anunciado no botão hamburger (aria-expanded). */\n  menuExpanded?: boolean;\n  /** Rótulo do botão hamburger. Padrão: \"Abrir menu\". */\n  menuLabel?: string;\n  /** Navegação principal, exibida ao centro. */\n  navigation?: React.ReactNode;\n  onLogoClick?: () => void;\n  onMenuClick?: () => void;\n  /** Conteúdo à direita (ações, seletor de tema, menu do usuário). */\n  rightContent?: React.ReactNode;\n  showMenuIcon?: boolean;\n  /** Fixa o header no topo. Padrão: true. */\n  sticky?: boolean;\n  subtitle?: React.ReactNode;\n  /** Tema para escolher entre logoSrc e logoDarkSrc sem depender do ThemeProvider. */\n  theme?: Theme;\n  title?: React.ReactNode;\n  /** Iniciais do usuário exibidas no avatar (ex.: \"CF\"). */\n  userInitials?: string;\n  /** `solid`: verde escuro (padrão). `light`: superfície clara. `glass`: Liquid Glass. */\n  variant?: HeaderVariant;\n}\n\nconst detectTheme = (): Theme =>\n  typeof document !== 'undefined' && document.documentElement.getAttribute('data-theme') === 'dark'\n    ? 'dark'\n    : 'light';\n\nconst VARIANT_CLASS: Record<HeaderVariant, string> = {\n  solid: inverseScope,\n  light: 'border-b border-sbk-line bg-sbk-surface text-sbk-fg',\n  glass: 'sbk-glass rounded-none border-x-0 border-t-0 text-sbk-fg',\n};\n\nexport const Header = ({\n  logoSrc,\n  logoDarkSrc,\n  logoAlt = 'SBK',\n  logoVariant = 'sbk',\n  title,\n  subtitle,\n  theme,\n  navigation,\n  onLogoClick,\n  onMenuClick,\n  menuExpanded,\n  menuLabel = 'Abrir menu',\n  rightContent,\n  showMenuIcon = true,\n  sticky = true,\n  userInitials,\n  variant = 'solid',\n  className,\n}: HeaderProps) => {\n  const [resolvedTheme, setResolvedTheme] = useState<Theme>(() => theme ?? detectTheme());\n\n  useEffect(() => {\n    if (theme) {\n      setResolvedTheme(theme);\n      return;\n    }\n    if (!logoDarkSrc || typeof MutationObserver === 'undefined') return;\n    const sync = () => setResolvedTheme(detectTheme());\n    sync();\n    const observer = new MutationObserver(sync);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme'],\n    });\n    return () => observer.disconnect();\n  }, [theme, logoDarkSrc]);\n\n  const customLogo = resolvedTheme === 'dark' && logoDarkSrc ? logoDarkSrc : logoSrc;\n  const brand = (\n    <>\n      {customLogo ? (\n        <img alt={logoAlt} className=\"h-8 w-auto shrink-0 object-contain\" src={customLogo} />\n      ) : (\n        <Logo color={variant === 'solid' ? 'white' : 'auto'} height={28} variant={logoVariant} />\n      )}\n      {(title || subtitle) && (\n        <span className=\"grid min-w-0 gap-px text-left\">\n          {title && (\n            <span className=\"truncate text-base font-semibold leading-tight text-sbk-fg-heading\">\n              {title}\n            </span>\n          )}\n          {subtitle && (\n            <span className=\"truncate text-xs font-light leading-tight text-sbk-fg-muted\">\n              {subtitle}\n            </span>\n          )}\n        </span>\n      )}\n    </>\n  );\n\n  return (\n    <header\n      className={cn(\n        'z-[var(--sbk-z-sticky)] box-border flex h-16 w-full shrink-0 items-center justify-between gap-4 px-4 md:px-8',\n        sticky && 'sticky top-0',\n        VARIANT_CLASS[variant],\n        className,\n      )}\n    >\n      <div className=\"flex min-w-0 items-center gap-3\">\n        {showMenuIcon && (\n          <button\n            aria-expanded={menuExpanded}\n            aria-label={menuLabel}\n            className={cn(\n              buttonReset,\n              'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sbk-sm text-sbk-fg hover:bg-sbk-surface-hover',\n              focusRing,\n            )}\n            onClick={onMenuClick}\n            type=\"button\"\n          >\n            <Menu aria-hidden=\"true\" className=\"size-5\" />\n          </button>\n        )}\n        {onLogoClick ? (\n          <button\n            className={cn(\n              buttonReset,\n              'flex min-w-0 cursor-pointer items-center gap-3 rounded-sbk-xs',\n              focusRing,\n            )}\n            onClick={onLogoClick}\n            type=\"button\"\n          >\n            {brand}\n          </button>\n        ) : (\n          <div className=\"flex min-w-0 items-center gap-3\">{brand}</div>\n        )}\n      </div>\n\n      {navigation && (\n        <nav aria-label=\"Principal\" className=\"hidden min-w-0 flex-1 justify-center md:flex\">\n          {navigation}\n        </nav>\n      )}\n\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {rightContent}\n        {userInitials && (\n          <span\n            aria-label={`Usuário: ${userInitials}`}\n            className=\"inline-flex size-9 shrink-0 select-none items-center justify-center rounded-full bg-sbk-ciano text-[0.8125rem] font-semibold text-sbk-branco\"\n            role=\"img\"\n          >\n            {userInitials}\n          </span>\n        )}\n      </div>\n    </header>\n  );\n};\n\nHeader.displayName = 'Header';\n"],"names":["detectTheme","VARIANT_CLASS","inverseScope","Header","logoSrc","logoDarkSrc","logoAlt","logoVariant","title","subtitle","theme","navigation","onLogoClick","onMenuClick","menuExpanded","menuLabel","rightContent","showMenuIcon","sticky","userInitials","variant","className","resolvedTheme","setResolvedTheme","useState","useEffect","sync","observer","customLogo","brand","jsxs","Fragment","Logo","jsx","cn","buttonReset","focusRing","Menu"],"mappings":"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"}

package/dist/components/Highlight/Highlight.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+export interface HighlightProps extends React.HTMLAttributes<HTMLElement> {
+    /** Ciano Escuro (padrão) ou Verde Claro, conforme o brand book. */
+    tone?: 'ciano' | 'verde';
+}
+/**
+ * Highlight de palavra-chave do brand book: bloco retangular atrás de palavras
+ * estruturantes, sempre com texto branco. Use em poucas palavras por tela.
+ */
+export declare const Highlight: {
+    ({ tone, className, ...props }: HighlightProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Highlight/Highlight.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+const s = ({ tone: o = "ciano", className: r, ...a }) => /* @__PURE__ */ e(
+  "mark",
+  {
+    className: i(
+      "rounded-sbk-xs px-1.5 py-0.5 font-semibold text-sbk-branco [box-decoration-break:clone]",
+      o === "ciano" ? "bg-sbk-ciano-escuro" : "bg-sbk-verde-claro",
+      r
+    ),
+    ...a
+  }
+);
+s.displayName = "Highlight";
+export {
+  s as Highlight
+};
+//# sourceMappingURL=Highlight.js.map

package/dist/components/Highlight/Highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.js","sources":["../../../src/components/Highlight/Highlight.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface HighlightProps extends React.HTMLAttributes<HTMLElement> {\n  /** Ciano Escuro (padrão) ou Verde Claro, conforme o brand book. */\n  tone?: 'ciano' | 'verde';\n}\n\n/**\n * Highlight de palavra-chave do brand book: bloco retangular atrás de palavras\n * estruturantes, sempre com texto branco. Use em poucas palavras por tela.\n */\nexport const Highlight = ({ tone = 'ciano', className, ...props }: HighlightProps) => (\n  <mark\n    className={cn(\n      'rounded-sbk-xs px-1.5 py-0.5 font-semibold text-sbk-branco [box-decoration-break:clone]',\n      tone === 'ciano' ? 'bg-sbk-ciano-escuro' : 'bg-sbk-verde-claro',\n      className,\n    )}\n    {...props}\n  />\n);\n\nHighlight.displayName = 'Highlight';\n"],"names":["Highlight","tone","className","props","jsx","cn"],"mappings":";;AAYO,MAAMA,IAAY,CAAC,EAAE,MAAAC,IAAO,SAAS,WAAAC,GAAW,GAAGC,QACxD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ,MAAS,UAAU,wBAAwB;AAAA,MAC3CC;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;AAGFH,EAAU,cAAc;"}

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,21 @@
+import type { LucideIcon, LucideProps } from 'lucide-react';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface IconProps extends Omit<LucideProps, 'size' | 'ref'> {
+    /** Componente de ícone do lucide-react (ex.: `import { Search } from 'lucide-react'`). */
+    icon: LucideIcon;
+    /**
+     * Texto para leitores de tela. Sem label o ícone é decorativo (`aria-hidden`).
+     * Informe sempre que o ícone for o único conteúdo com significado.
+     */
+    label?: string;
+    size?: IconSize | number;
+}
+/**
+ * Wrapper padronizado para ícones lucide-react.
+ * Ícones herdam a cor do texto (currentColor), o que mantém a paleta da marca.
+ * Traço 1.75 acompanha o peso Leve da tipografia.
+ */
+export declare const Icon: {
+    ({ icon: IconComponent, label, size, strokeWidth, className, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as c } from "../../utils/cn.js";
+const e = { xs: 12, sm: 16, md: 20, lg: 24, xl: 32 }, d = ({
+  icon: m,
+  label: o,
+  size: r = "md",
+  strokeWidth: n = 1.75,
+  className: t,
+  ...s
+}) => {
+  const i = typeof r == "number" ? r : e[r];
+  return /* @__PURE__ */ a(
+    m,
+    {
+      "aria-hidden": o ? void 0 : !0,
+      "aria-label": o,
+      className: c("shrink-0", t),
+      focusable: "false",
+      height: i,
+      role: o ? "img" : void 0,
+      strokeWidth: n,
+      width: i,
+      ...s
+    }
+  );
+};
+d.displayName = "Icon";
+export {
+  d as Icon
+};
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { LucideIcon, LucideProps } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps extends Omit<LucideProps, 'size' | 'ref'> {\n  /** Componente de ícone do lucide-react (ex.: `import { Search } from 'lucide-react'`). */\n  icon: LucideIcon;\n  /**\n   * Texto para leitores de tela. Sem label o ícone é decorativo (`aria-hidden`).\n   * Informe sempre que o ícone for o único conteúdo com significado.\n   */\n  label?: string;\n  size?: IconSize | number;\n}\n\nconst SIZE_PX: Record<IconSize, number> = { xs: 12, sm: 16, md: 20, lg: 24, xl: 32 };\n\n/**\n * Wrapper padronizado para ícones lucide-react.\n * Ícones herdam a cor do texto (currentColor), o que mantém a paleta da marca.\n * Traço 1.75 acompanha o peso Leve da tipografia.\n */\nexport const Icon = ({\n  icon: IconComponent,\n  label,\n  size = 'md',\n  strokeWidth = 1.75,\n  className,\n  ...props\n}: IconProps) => {\n  const px = typeof size === 'number' ? size : SIZE_PX[size];\n  return (\n    <IconComponent\n      aria-hidden={label ? undefined : true}\n      aria-label={label}\n      className={cn('shrink-0', className)}\n      focusable=\"false\"\n      height={px}\n      role={label ? 'img' : undefined}\n      strokeWidth={strokeWidth}\n      width={px}\n      {...props}\n    />\n  );\n};\n\nIcon.displayName = 'Icon';\n"],"names":["SIZE_PX","Icon","IconComponent","label","size","strokeWidth","className","props","px","jsx","cn"],"mappings":";;AAgBA,MAAMA,IAAoC,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA,GAOnEC,IAAO,CAAC;AAAA,EACnB,MAAMC;AAAA,EACN,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAAiB;AACf,QAAMC,IAAK,OAAOJ,KAAS,WAAWA,IAAOJ,EAAQI,CAAI;AACzD,SACE,gBAAAK;AAAA,IAACP;AAAA,IAAA;AAAA,MACC,eAAaC,IAAQ,SAAY;AAAA,MACjC,cAAYA;AAAA,MACZ,WAAWO,EAAG,YAAYJ,CAAS;AAAA,MACnC,WAAU;AAAA,MACV,QAAQE;AAAA,MACR,MAAML,IAAQ,QAAQ;AAAA,MACtB,aAAAE;AAAA,MACA,OAAOG;AAAA,MACN,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV;AAEAN,EAAK,cAAc;"}

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type IconButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'inverse' | 'glass';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Nome acessível obrigatório: o botão não tem texto visível. */
+    'aria-label': string;
+    children: React.ReactNode;
+    shape?: 'square' | 'circle';
+    size?: 'sm' | 'md' | 'lg';
+    variant?: IconButtonVariant;
+}
+/** Botão quadrado ou circular apenas com ícone. */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,49 @@
+import { jsx as i } from "react/jsx-runtime";
+import c from "react";
+import { cn as g } from "../../utils/cn.js";
+import { focusRing as d, transitionColors as m, buttonReset as k } from "../../utils/styles.js";
+const u = {
+  sm: "size-8 [&_svg]:size-4",
+  md: "size-10 [&_svg]:size-5",
+  lg: "size-12 [&_svg]:size-6"
+}, f = {
+  primary: "bg-sbk-primary text-sbk-on-primary hover:bg-sbk-primary-hover",
+  secondary: "bg-sbk-secondary text-sbk-on-secondary hover:bg-sbk-secondary-hover",
+  ghost: "bg-transparent text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg",
+  outline: "border-sbk-line-strong bg-sbk-surface text-sbk-fg hover:bg-sbk-surface-hover",
+  inverse: "bg-transparent text-sbk-branco hover:bg-sbk-branco/10",
+  glass: "sbk-glass text-sbk-fg"
+}, l = c.forwardRef(
+  ({
+    children: r,
+    shape: s = "square",
+    size: e = "md",
+    variant: o = "ghost",
+    className: t,
+    type: n = "button",
+    ...b
+  }, a) => /* @__PURE__ */ i(
+    "button",
+    {
+      ref: a,
+      className: g(
+        k,
+        "inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+        s === "circle" ? "rounded-full" : "rounded-sbk-sm",
+        m,
+        d,
+        u[e],
+        f[o],
+        t
+      ),
+      type: n,
+      ...b,
+      children: r
+    }
+  )
+);
+l.displayName = "IconButton";
+export {
+  l as IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\n\nexport type IconButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'inverse' | 'glass';\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Nome acessível obrigatório: o botão não tem texto visível. */\n  'aria-label': string;\n  children: React.ReactNode;\n  shape?: 'square' | 'circle';\n  size?: 'sm' | 'md' | 'lg';\n  variant?: IconButtonVariant;\n}\n\nconst SIZE_CLASS = {\n  sm: 'size-8 [&_svg]:size-4',\n  md: 'size-10 [&_svg]:size-5',\n  lg: 'size-12 [&_svg]:size-6',\n} as const;\n\nconst VARIANT_CLASS: Record<IconButtonVariant, string> = {\n  primary: 'bg-sbk-primary text-sbk-on-primary hover:bg-sbk-primary-hover',\n  secondary: 'bg-sbk-secondary text-sbk-on-secondary hover:bg-sbk-secondary-hover',\n  ghost: 'bg-transparent text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg',\n  outline: 'border-sbk-line-strong bg-sbk-surface text-sbk-fg hover:bg-sbk-surface-hover',\n  inverse: 'bg-transparent text-sbk-branco hover:bg-sbk-branco/10',\n  glass: 'sbk-glass text-sbk-fg',\n};\n\n/** Botão quadrado ou circular apenas com ícone. */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      children,\n      shape = 'square',\n      size = 'md',\n      variant = 'ghost',\n      className,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      className={cn(\n        buttonReset,\n        'inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent disabled:cursor-not-allowed disabled:opacity-50',\n        shape === 'circle' ? 'rounded-full' : 'rounded-sbk-sm',\n        transitionColors,\n        focusRing,\n        SIZE_CLASS[size],\n        VARIANT_CLASS[variant],\n        className,\n      )}\n      type={type}\n      {...props}\n    >\n      {children}\n    </button>\n  ),\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["SIZE_CLASS","VARIANT_CLASS","IconButton","React","children","shape","size","variant","className","type","props","ref","jsx","cn","buttonReset","transitionColors","focusRing"],"mappings":";;;;AAeA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAmD;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAGaC,IAAaC,EAAM;AAAA,EAC9B,CACE;AAAA,IACE,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACTC;AAAA,QACA;AAAA,QACAT,MAAU,WAAW,iBAAiB;AAAA,QACtCU;AAAA,QACAC;AAAA,QACAhB,EAAWM,CAAI;AAAA,QACfL,EAAcM,CAAO;AAAA,QACrBC;AAAA,MAAA;AAAA,MAEF,MAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAF,EAAW,cAAc;"}

package/dist/components/Input/Input.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
+import { type FieldSize } from '../../utils/styles';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     error?: string;
     fullWidth?: boolean;
     helperText?: string;
-    label?: string;
+    label?: React.ReactNode;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg';
+    size?: FieldSize;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;