@sbkbs/ui 1.0.4 → 1.0.6

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":";;;AAgCA,MAAMA,IAAc,MACd,OAAO,WAAa,MAAoB,UACrC,SAAS,gBAAgB,aAAa,YAAY,MAAM,SAAS,SAAS,SAG7EC,IAA8C,CAAC,EAAE,QAAAC,IAAS,SAAS;AAEvE,QAAMC,IAAQ,KAAK,MAAMD,IADV,iBACyB;AACxC,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,QAAAF;AAAA,MACA,SAAQ;AAAA,MACR,OAAAC;AAAA,MACA,OAAM;AAAA,MAEN,UAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBACX,4BAAC,KAAA,EACC,UAAA;AAAA,QAAA,gBAAAC,EAAC,KAAA,EAEC,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,cACL,QAAO;AAAA,cACP,kBAAkB;AAAA,cAClB,aAAa;AAAA,YAAA;AAAA,UAAA;AAAA,UAGf,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,cACL,UAAS;AAAA,cACT,QAAO;AAAA,cACP,kBAAkB;AAAA,cAClB,aAAa;AAAA,YAAA;AAAA,UAAA;AAAA,UAGf,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,cACL,QAAO;AAAA,cACP,kBAAkB;AAAA,cAClB,aAAa;AAAA,YAAA;AAAA,UAAA;AAAA,QACf,GACF;AAAA,0BACC,KAAA,EAEC,UAAA;AAAA,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAGP,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACP,EAAA,CACF;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEME,IAAoD,CAAC,EAAE,SAAAC,EAAA,MAC3D,gBAAAF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,cAAW;AAAA,IACX,SAAAE;AAAA,IACA,MAAK;AAAA,IACL,WAAWC;AAAA,MACT;AAAA,MACAD,IAAU,mBAAmB;AAAA,IAAA;AAAA,IAG/B,UAAA;AAAA,MAAA,gBAAAH,EAAC,QAAA,EAAK,WAAU,sDAAA,CAAsD;AAAA,MACtE,gBAAAA,EAAC,QAAA,EAAK,WAAU,sDAAA,CAAsD;AAAA,MACtE,gBAAAA,EAAC,QAAA,EAAK,WAAU,sDAAA,CAAsD;AAAA,IAAA;AAAA,EAAA;AACxE,GAGWK,IAAgC,CAAC;AAAA,EAC5C,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAgB,MAAMT,KAASf,GAAa,GAEhFyB,IAAkBH,MAAkB,UAAUX,IAAcA,IAAcD;AAEhF,EAAAgB,EAAU,MAAM;AACd,QAAIX,GAAO;AACT,MAAAQ,EAAiBR,CAAK;AACtB;AAAA,IACF;AACA,UAAMY,IAAY,MAAMJ,EAAiBvB,GAAa;AAEtD,QADA2B,EAAA,GACI,OAAO,mBAAqB,IAAa;AAC7C,UAAMC,IAAW,IAAI,iBAAiBD,CAAS;AAC/C,WAAAC,EAAS,QAAQ,SAAS,iBAAiB,EAAE,YAAY,IAAM,iBAAiB,CAAC,YAAY,GAAG,GACzF,MAAMA,EAAS,WAAA;AAAA,EACxB,GAAG,CAACb,CAAK,CAAC;AAEV,QAAMc,IAAoB,CAACC,MAA2B;AACpD,IAAIA,EAAE,QAAQ,YAASd,KAAA,QAAAA;AAAA,EACzB;AAEA,SACE,gBAAAX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWG;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAa;AAAA,MAAA;AAAA,MAIF,UAAA;AAAA,QAAA,gBAAAhB,EAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,UAAAc,KAAgB,gBAAAf,EAACE,GAAA,EAAc,SAASW,EAAA,CAAa;AAAA,UAEtD,gBAAAZ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAASW;AAAA,cACT,WAAWA,IAAca,IAAoB;AAAA,cAC7C,MAAMb,IAAc,WAAW;AAAA,cAC/B,WAAWR;AAAA,gBACT;AAAA,gBACAQ,IAAc,mBAAmB;AAAA,cAAA;AAAA,cAEnC,UAAUA,IAAc,IAAI;AAAA,cAE3B,UAAA;AAAA,gBAAAS,IACC,gBAAArB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,KAAKQ;AAAA,oBACL,SAAS,CAACkB,MAAM;AACb,sBAAAA,EAAE,OAA4B,MAAM,UAAU;AAAA,oBACjD;AAAA,oBACA,KAAKL;AAAA,oBACL,WAAU;AAAA,kBAAA;AAAA,gBAAA,IAGZ,gBAAArB,EAACH,GAAA,EAAa,QAAQ,GAAA,CAAI;AAAA,iBAG1BY,KAASC,MACT,gBAAAT,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,kBAAAQ,KACC,gBAAAT,EAAC,QAAA,EAAK,WAAU,sFACb,UAAAS,GACH;AAAA,kBAEDC,KACC,gBAAAV,EAAC,QAAA,EAAK,WAAU,oEACb,UAAAU,EAAA,CACH;AAAA,gBAAA,EAAA,CAEJ;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ,GACF;AAAA,QAGA,gBAAAT,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,UAAAa;AAAA,UACAE,KACC,gBAAAhB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,cAAY,YAAYgB,CAAY;AAAA,cACpC,WAAU;AAAA,cAET,UAAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAX,EAAO,cAAc;"}

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

package/dist/components/Stepper/Stepper.js

@@ -1,46 +1,57 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { cn as a } from "../../utils/cn.js";
-const f = ({
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { cn as r } from "../../utils/cn.js";
+const u = ({
   items: n,
-  currentStep: o,
-  orientation: m = "horizontal",
-  className: c,
-  ...p
+  currentStep: c,
+  orientation: v = "horizontal",
+  className: p,
+  ...x
 }) => {
-  const s = n.findIndex((e) => e.id === o), v = (e) => e < s ? "completed" : e === s ? "active" : "pending", i = m === "horizontal";
-  return /* @__PURE__ */ r(
+  const s = n.findIndex((e) => e.id === c), l = v === "horizontal", f = (e) => e < s ? "completed" : e === s ? "active" : "pending", d = (e) => e ? "bg-[var(--md-primary)]" : "bg-[var(--md-outline-variant)]";
+  return /* @__PURE__ */ t(
     "div",
     {
       "aria-label": "Progresso",
-      className: a(i ? "flex items-start" : "flex flex-col", c),
+      className: r(l ? "flex items-start" : "flex flex-col", p),
       role: "list",
-      ...p,
-      children: n.map((e, l) => {
-        const t = v(l), x = l === n.length - 1;
-        return /* @__PURE__ */ d(
+      ...x,
+      children: n.map((e, i) => {
+        const a = f(i), m = i === n.length - 1;
+        return /* @__PURE__ */ o(
           "div",
           {
-            className: a("flex", i ? "flex-1 flex-col items-center" : "gap-4"),
+            className: r("flex", l ? "flex-1 flex-col items-center" : "gap-4"),
             role: "listitem",
             children: [
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ o(
                 "div",
                 {
-                  className: a(
-                    i ? "flex w-full items-center" : "flex flex-col items-center"
+                  className: r(
+                    l ? "flex w-full items-center" : "flex flex-col items-center"
                   ),
                   children: [
-                    /* @__PURE__ */ r(
+                    l && /* Conector esquerdo: espaçador no 1º item, linha colorida nos demais */
+                    (i === 0 ? /* @__PURE__ */ t("div", { className: "flex-1", "aria-hidden": "true" }) : /* @__PURE__ */ t(
                       "div",
                       {
-                        "aria-current": t === "active" ? "step" : void 0,
-                        className: a(
+                        "aria-hidden": "true",
+                        className: r(
+                          "h-0.5 flex-1 transition",
+                          d(i <= s)
+                        )
+                      }
+                    )),
+                    /* @__PURE__ */ t(
+                      "div",
+                      {
+                        "aria-current": a === "active" ? "step" : void 0,
+                        className: r(
                           "relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition",
-                          t === "completed" && "border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]",
-                          t === "active" && "border-[var(--md-primary)] bg-[var(--md-surface)] text-[var(--md-primary)]",
-                          t === "pending" && "border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--text-muted)]"
+                          a === "completed" && "border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]",
+                          a === "active" && "border-[var(--md-primary)] bg-[var(--md-surface)] text-[var(--md-primary)]",
+                          a === "pending" && "border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--text-muted)]"
                         ),
-                        children: t === "completed" ? /* @__PURE__ */ r(
+                        children: a === "completed" ? /* @__PURE__ */ t(
                           "svg",
                           {
                             className: "h-4 w-4",
@@ -48,39 +59,53 @@ const f = ({
                             stroke: "currentColor",
                             strokeWidth: "2.5",
                             viewBox: "0 0 24 24",
-                            children: /* @__PURE__ */ r("path", { d: "M20 6 9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round" })
+                            children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round" })
                           }
-                        ) : l + 1
+                        ) : i + 1
                       }
                     ),
-                    !x && /* @__PURE__ */ r(
-                      "div",
-                      {
-                        className: a(
-                          "transition",
-                          i ? "h-0.5 flex-1" : "my-1 ml-[1.0625rem] w-0.5 flex-1",
-                          l < s ? "bg-[var(--md-primary)]" : "bg-[var(--md-outline-variant)]"
-                        ),
-                        "aria-hidden": "true"
-                      }
+                    l ? (
+                      /* Conector direito: linha colorida se não for último, espaçador se for */
+                      m ? /* @__PURE__ */ t("div", { className: "flex-1", "aria-hidden": "true" }) : /* @__PURE__ */ t(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: r(
+                            "h-0.5 flex-1 transition",
+                            d(i < s)
+                          )
+                        }
+                      )
+                    ) : (
+                      /* Conector vertical (para orientação vertical) */
+                      !m && /* @__PURE__ */ t(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: r(
+                            "my-1 ml-[1.0625rem] w-0.5 flex-1 transition",
+                            d(i < s)
+                          )
+                        }
+                      )
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ d("div", { className: a("mt-2 text-center", i ? "" : "mt-0 pb-6 text-left"), children: [
-                /* @__PURE__ */ r(
+              /* @__PURE__ */ o("div", { className: r("mt-2 text-center", !l && "mt-0 pb-6 text-left"), children: [
+                /* @__PURE__ */ t(
                   "p",
                   {
-                    className: a(
+                    className: r(
                       "text-sm font-medium leading-tight",
-                      t === "active" && "text-[var(--md-primary)]",
-                      t === "completed" && "text-[var(--text-primary)]",
-                      t === "pending" && "text-[var(--text-muted)]"
+                      a === "active" && "text-[var(--md-primary)]",
+                      a === "completed" && "text-[var(--text-primary)]",
+                      a === "pending" && "text-[var(--text-muted)]"
                     ),
                     children: e.label
                   }
                 ),
-                e.description && /* @__PURE__ */ r("p", { className: "mt-0.5 text-xs text-[var(--text-muted)]", children: e.description })
+                e.description && /* @__PURE__ */ t("p", { className: "mt-0.5 text-xs text-[var(--text-muted)]", children: e.description })
               ] })
             ]
           },
@@ -90,8 +115,8 @@ const f = ({
     }
   );
 };
-f.displayName = "Stepper";
+u.displayName = "Stepper";
 export {
-  f as Stepper
+  u as Stepper
 };
 //# sourceMappingURL=Stepper.js.map

package/dist/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface StepperItem {\n  description?: string;\n  id: string;\n  label: string;\n}\n\nexport type StepStatus = 'completed' | 'active' | 'pending';\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  currentStep: string;\n  items: StepperItem[];\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Stepper: React.FC<StepperProps> = ({\n  items,\n  currentStep,\n  orientation = 'horizontal',\n  className,\n  ...props\n}) => {\n  const currentIndex = items.findIndex((item) => item.id === currentStep);\n\n  const getStatus = (index: number): StepStatus => {\n    if (index < currentIndex) return 'completed';\n    if (index === currentIndex) return 'active';\n    return 'pending';\n  };\n\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <div\n      aria-label=\"Progresso\"\n      className={cn(isHorizontal ? 'flex items-start' : 'flex flex-col', className)}\n      role=\"list\"\n      {...props}\n    >\n      {items.map((item, index) => {\n        const status = getStatus(index);\n        const isLast = index === items.length - 1;\n\n        return (\n          <div\n            key={item.id}\n            className={cn('flex', isHorizontal ? 'flex-1 flex-col items-center' : 'gap-4')}\n            role=\"listitem\"\n          >\n            {/* Step indicator + connector */}\n            <div\n              className={cn(\n                isHorizontal ? 'flex w-full items-center' : 'flex flex-col items-center',\n              )}\n            >\n              {/* Circle */}\n              <div\n                aria-current={status === 'active' ? 'step' : undefined}\n                className={cn(\n                  'relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition',\n                  status === 'completed' &&\n                    'border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]',\n                  status === 'active' &&\n                    'border-[var(--md-primary)] bg-[var(--md-surface)] text-[var(--md-primary)]',\n                  status === 'pending' &&\n                    'border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--text-muted)]',\n                )}\n              >\n                {status === 'completed' ? (\n                  <svg\n                    className=\"h-4 w-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2.5\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path d=\"M20 6 9 17l-5-5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                  </svg>\n                ) : (\n                  index + 1\n                )}\n              </div>\n\n              {/* Connector line */}\n              {!isLast && (\n                <div\n                  className={cn(\n                    'transition',\n                    isHorizontal ? 'h-0.5 flex-1' : 'my-1 ml-[1.0625rem] w-0.5 flex-1',\n                    index < currentIndex\n                      ? 'bg-[var(--md-primary)]'\n                      : 'bg-[var(--md-outline-variant)]',\n                  )}\n                  aria-hidden=\"true\"\n                />\n              )}\n            </div>\n\n            {/* Label + description */}\n            <div className={cn('mt-2 text-center', isHorizontal ? '' : 'mt-0 pb-6 text-left')}>\n              <p\n                className={cn(\n                  'text-sm font-medium leading-tight',\n                  status === 'active' && 'text-[var(--md-primary)]',\n                  status === 'completed' && 'text-[var(--text-primary)]',\n                  status === 'pending' && 'text-[var(--text-muted)]',\n                )}\n              >\n                {item.label}\n              </p>\n              {item.description && (\n                <p className=\"mt-0.5 text-xs text-[var(--text-muted)]\">{item.description}</p>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nStepper.displayName = 'Stepper';\n"],"names":["Stepper","items","currentStep","orientation","className","props","currentIndex","item","getStatus","index","isHorizontal","jsx","cn","status","isLast","jsxs"],"mappings":";;AAiBO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAeL,EAAM,UAAU,CAACM,MAASA,EAAK,OAAOL,CAAW,GAEhEM,IAAY,CAACC,MACbA,IAAQH,IAAqB,cAC7BG,MAAUH,IAAqB,WAC5B,WAGHI,IAAeP,MAAgB;AAErC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAWC,EAAGF,IAAe,qBAAqB,iBAAiBN,CAAS;AAAA,MAC5E,MAAK;AAAA,MACJ,GAAGC;AAAA,MAEH,UAAAJ,EAAM,IAAI,CAACM,GAAME,MAAU;AAC1B,cAAMI,IAASL,EAAUC,CAAK,GACxBK,IAASL,MAAUR,EAAM,SAAS;AAExC,eACE,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWH,EAAG,QAAQF,IAAe,iCAAiC,OAAO;AAAA,YAC7E,MAAK;AAAA,YAGL,UAAA;AAAA,cAAA,gBAAAK;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACTF,IAAe,6BAA6B;AAAA,kBAAA;AAAA,kBAI9C,UAAA;AAAA,oBAAA,gBAAAC;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,gBAAcE,MAAW,WAAW,SAAS;AAAA,wBAC7C,WAAWD;AAAA,0BACT;AAAA,0BACAC,MAAW,eACT;AAAA,0BACFA,MAAW,YACT;AAAA,0BACFA,MAAW,aACT;AAAA,wBAAA;AAAA,wBAGH,gBAAW,cACV,gBAAAF;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,WAAU;AAAA,4BACV,MAAK;AAAA,4BACL,QAAO;AAAA,4BACP,aAAY;AAAA,4BACZ,SAAQ;AAAA,4BAER,4BAAC,QAAA,EAAK,GAAE,mBAAkB,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,0BAAA;AAAA,wBAAA,IAGzEF,IAAQ;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAKX,CAACK,KACA,gBAAAH;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWC;AAAA,0BACT;AAAA,0BACAF,IAAe,iBAAiB;AAAA,0BAChCD,IAAQH,IACJ,2BACA;AAAA,wBAAA;AAAA,wBAEN,eAAY;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACd;AAAA,gBAAA;AAAA,cAAA;AAAA,cAKJ,gBAAAS,EAAC,SAAI,WAAWH,EAAG,oBAAoBF,IAAe,KAAK,qBAAqB,GAC9E,UAAA;AAAA,gBAAA,gBAAAC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACT;AAAA,sBACAC,MAAW,YAAY;AAAA,sBACvBA,MAAW,eAAe;AAAA,sBAC1BA,MAAW,aAAa;AAAA,oBAAA;AAAA,oBAGzB,UAAAN,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEPA,EAAK,eACJ,gBAAAI,EAAC,OAAE,WAAU,2CAA2C,YAAK,YAAA,CAAY;AAAA,cAAA,EAAA,CAE7E;AAAA,YAAA;AAAA,UAAA;AAAA,UApEKJ,EAAK;AAAA,QAAA;AAAA,MAuEhB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAQ,cAAc;"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface StepperItem {\n  description?: string;\n  id: string;\n  label: string;\n}\n\nexport type StepStatus = 'completed' | 'active' | 'pending';\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  currentStep: string;\n  items: StepperItem[];\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Stepper: React.FC<StepperProps> = ({\n  items,\n  currentStep,\n  orientation = 'horizontal',\n  className,\n  ...props\n}) => {\n  const currentIndex = items.findIndex((item) => item.id === currentStep);\n  const isHorizontal = orientation === 'horizontal';\n\n  const getStatus = (index: number): StepStatus => {\n    if (index < currentIndex) return 'completed';\n    if (index === currentIndex) return 'active';\n    return 'pending';\n  };\n\n  const connectorColor = (isActive: boolean) =>\n    isActive ? 'bg-[var(--md-primary)]' : 'bg-[var(--md-outline-variant)]';\n\n  return (\n    <div\n      aria-label=\"Progresso\"\n      className={cn(isHorizontal ? 'flex items-start' : 'flex flex-col', className)}\n      role=\"list\"\n      {...props}\n    >\n      {items.map((item, index) => {\n        const status = getStatus(index);\n        const isLast = index === items.length - 1;\n\n        return (\n          <div\n            key={item.id}\n            className={cn('flex', isHorizontal ? 'flex-1 flex-col items-center' : 'gap-4')}\n            role=\"listitem\"\n          >\n            {/* ── Indicador + conectores ─────────────────── */}\n            <div\n              className={cn(\n                isHorizontal ? 'flex w-full items-center' : 'flex flex-col items-center',\n              )}\n            >\n              {isHorizontal && (\n                /* Conector esquerdo: espaçador no 1º item, linha colorida nos demais */\n                index === 0 ? (\n                  <div className=\"flex-1\" aria-hidden=\"true\" />\n                ) : (\n                  <div\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'h-0.5 flex-1 transition',\n                      connectorColor(index <= currentIndex),\n                    )}\n                  />\n                )\n              )}\n\n              {/* Círculo */}\n              <div\n                aria-current={status === 'active' ? 'step' : undefined}\n                className={cn(\n                  'relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition',\n                  status === 'completed' &&\n                    'border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]',\n                  status === 'active' &&\n                    'border-[var(--md-primary)] bg-[var(--md-surface)] text-[var(--md-primary)]',\n                  status === 'pending' &&\n                    'border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--text-muted)]',\n                )}\n              >\n                {status === 'completed' ? (\n                  <svg\n                    className=\"h-4 w-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2.5\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path d=\"M20 6 9 17l-5-5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                  </svg>\n                ) : (\n                  index + 1\n                )}\n              </div>\n\n              {isHorizontal ? (\n                /* Conector direito: linha colorida se não for último, espaçador se for */\n                isLast ? (\n                  <div className=\"flex-1\" aria-hidden=\"true\" />\n                ) : (\n                  <div\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'h-0.5 flex-1 transition',\n                      connectorColor(index < currentIndex),\n                    )}\n                  />\n                )\n              ) : (\n                /* Conector vertical (para orientação vertical) */\n                !isLast && (\n                  <div\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'my-1 ml-[1.0625rem] w-0.5 flex-1 transition',\n                      connectorColor(index < currentIndex),\n                    )}\n                  />\n                )\n              )}\n            </div>\n\n            {/* ── Label + descrição ──────────────────────── */}\n            <div className={cn('mt-2 text-center', !isHorizontal && 'mt-0 pb-6 text-left')}>\n              <p\n                className={cn(\n                  'text-sm font-medium leading-tight',\n                  status === 'active' && 'text-[var(--md-primary)]',\n                  status === 'completed' && 'text-[var(--text-primary)]',\n                  status === 'pending' && 'text-[var(--text-muted)]',\n                )}\n              >\n                {item.label}\n              </p>\n              {item.description && (\n                <p className=\"mt-0.5 text-xs text-[var(--text-muted)]\">{item.description}</p>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nStepper.displayName = 'Stepper';\n"],"names":["Stepper","items","currentStep","orientation","className","props","currentIndex","item","isHorizontal","getStatus","index","connectorColor","isActive","jsx","cn","status","isLast","jsxs"],"mappings":";;AAiBO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAeL,EAAM,UAAU,CAACM,MAASA,EAAK,OAAOL,CAAW,GAChEM,IAAeL,MAAgB,cAE/BM,IAAY,CAACC,MACbA,IAAQJ,IAAqB,cAC7BI,MAAUJ,IAAqB,WAC5B,WAGHK,IAAiB,CAACC,MACtBA,IAAW,2BAA2B;AAExC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAWC,EAAGN,IAAe,qBAAqB,iBAAiBJ,CAAS;AAAA,MAC5E,MAAK;AAAA,MACJ,GAAGC;AAAA,MAEH,UAAAJ,EAAM,IAAI,CAACM,GAAMG,MAAU;AAC1B,cAAMK,IAASN,EAAUC,CAAK,GACxBM,IAASN,MAAUT,EAAM,SAAS;AAExC,eACE,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWH,EAAG,QAAQN,IAAe,iCAAiC,OAAO;AAAA,YAC7E,MAAK;AAAA,YAGL,UAAA;AAAA,cAAA,gBAAAS;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACTN,IAAe,6BAA6B;AAAA,kBAAA;AAAA,kBAG7C,UAAA;AAAA,oBAAAA;AAAA,qBAECE,MAAU,IACR,gBAAAG,EAAC,OAAA,EAAI,WAAU,UAAS,eAAY,QAAO,IAE3C,gBAAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,eAAY;AAAA,wBACZ,WAAWC;AAAA,0BACT;AAAA,0BACAH,EAAeD,KAASJ,CAAY;AAAA,wBAAA;AAAA,sBACtC;AAAA,oBAAA;AAAA,oBAMN,gBAAAO;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,gBAAcE,MAAW,WAAW,SAAS;AAAA,wBAC7C,WAAWD;AAAA,0BACT;AAAA,0BACAC,MAAW,eACT;AAAA,0BACFA,MAAW,YACT;AAAA,0BACFA,MAAW,aACT;AAAA,wBAAA;AAAA,wBAGH,gBAAW,cACV,gBAAAF;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,WAAU;AAAA,4BACV,MAAK;AAAA,4BACL,QAAO;AAAA,4BACP,aAAY;AAAA,4BACZ,SAAQ;AAAA,4BAER,4BAAC,QAAA,EAAK,GAAE,mBAAkB,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,0BAAA;AAAA,wBAAA,IAGzEH,IAAQ;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAIXF;AAAA;AAAA,sBAECQ,IACE,gBAAAH,EAAC,OAAA,EAAI,WAAU,UAAS,eAAY,QAAO,IAE3C,gBAAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,eAAY;AAAA,0BACZ,WAAWC;AAAA,4BACT;AAAA,4BACAH,EAAeD,IAAQJ,CAAY;AAAA,0BAAA;AAAA,wBACrC;AAAA,sBAAA;AAAA;AAAA;AAAA,sBAKJ,CAACU,KACC,gBAAAH;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,eAAY;AAAA,0BACZ,WAAWC;AAAA,4BACT;AAAA,4BACAH,EAAeD,IAAQJ,CAAY;AAAA,0BAAA;AAAA,wBACrC;AAAA,sBAAA;AAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,cAMN,gBAAAW,EAAC,SAAI,WAAWH,EAAG,oBAAoB,CAACN,KAAgB,qBAAqB,GAC3E,UAAA;AAAA,gBAAA,gBAAAK;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACT;AAAA,sBACAC,MAAW,YAAY;AAAA,sBACvBA,MAAW,eAAe;AAAA,sBAC1BA,MAAW,aAAa;AAAA,oBAAA;AAAA,oBAGzB,UAAAR,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEPA,EAAK,eACJ,gBAAAM,EAAC,OAAE,WAAU,2CAA2C,YAAK,YAAA,CAAY;AAAA,cAAA,EAAA,CAE7E;AAAA,YAAA;AAAA,UAAA;AAAA,UA/FKN,EAAK;AAAA,QAAA;AAAA,MAkGhB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAQ,cAAc;"}