@sbkbs/ui 1.0.6 → 2.0.0

package/dist/components/FileUpload/FileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","sources":["../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface FileUploadProps {\n  accept?: string;\n  className?: string;\n  disabled?: boolean;\n  error?: string;\n  helperText?: string;\n  label?: string;\n  maxSizeBytes?: number;\n  multiple?: boolean;\n  onChange?: (files: File[]) => void;\n}\n\nexport const FileUpload: React.FC<FileUploadProps> = ({\n  label,\n  helperText,\n  error,\n  accept,\n  multiple = false,\n  maxSizeBytes,\n  disabled = false,\n  onChange,\n  className,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [sizeError, setSizeError] = useState<string | null>(null);\n\n  const handleFiles = (fileList: FileList | null) => {\n    if (!fileList) return;\n    const files = Array.from(fileList);\n\n    if (maxSizeBytes) {\n      const oversized = files.find((f) => f.size > maxSizeBytes);\n      if (oversized) {\n        const mb = (maxSizeBytes / 1024 / 1024).toFixed(0);\n        setSizeError(`Arquivo \"${oversized.name}\" excede o tamanho máximo de ${mb} MB.`);\n        return;\n      }\n    }\n\n    setSizeError(null);\n    onChange?.(files);\n  };\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault();\n    if (!disabled) setIsDragging(true);\n  };\n\n  const handleDragLeave = () => setIsDragging(false);\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault();\n    setIsDragging(false);\n    if (!disabled) handleFiles(e.dataTransfer.files);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      inputRef.current?.click();\n    }\n  };\n\n  const displayError = error ?? sizeError;\n\n  return (\n    <div className={cn('flex flex-col gap-[var(--spacing-xs)]', className)}>\n      {label && (\n        <span className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\">\n          {label}\n        </span>\n      )}\n      <div\n        aria-disabled={disabled}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-[var(--border-radius-lg)] border-2 border-dashed p-8 text-center transition',\n          isDragging\n            ? 'border-[var(--md-primary)] bg-[var(--md-primary-container)]'\n            : 'border-[var(--md-outline-variant)] hover:border-[var(--md-primary)] hover:bg-[var(--bg-tertiary)]',\n          displayError && 'border-[var(--md-error)]',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-60',\n        )}\n        onClick={() => !disabled && inputRef.current?.click()}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n      >\n        {/* Upload icon */}\n        <svg\n          className=\"h-8 w-8 text-[var(--md-primary)]\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        <div>\n          <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n            Arraste arquivos aqui ou{' '}\n            <span className=\"text-[var(--md-primary)] underline\">clique para selecionar</span>\n          </p>\n          {accept && (\n            <p className=\"mt-0.5 text-xs text-[var(--text-muted)]\">Formatos aceitos: {accept}</p>\n          )}\n          {maxSizeBytes && (\n            <p className=\"text-xs text-[var(--text-muted)]\">\n              Tamanho máximo: {(maxSizeBytes / 1024 / 1024).toFixed(0)} MB\n            </p>\n          )}\n        </div>\n      </div>\n      <input\n        ref={inputRef}\n        accept={accept}\n        className=\"sr-only\"\n        disabled={disabled}\n        multiple={multiple}\n        tabIndex={-1}\n        type=\"file\"\n        onChange={(e) => handleFiles(e.target.files)}\n      />\n      {displayError && (\n        <span className=\"text-[var(--font-size-xs)] text-[var(--md-error)]\" role=\"alert\">\n          {displayError}\n        </span>\n      )}\n      {helperText && !displayError && (\n        <span className=\"text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]\">\n          {helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nFileUpload.displayName = 'FileUpload';\n"],"names":["FileUpload","label","helperText","error","accept","multiple","maxSizeBytes","disabled","onChange","className","inputRef","useRef","isDragging","setIsDragging","useState","sizeError","setSizeError","handleFiles","fileList","files","oversized","f","mb","handleDragOver","e","handleDragLeave","handleDrop","handleKeyDown","_a","displayError","cn","jsx","jsxs"],"mappings":"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"}
+{"version":3,"file":"FileUpload.js","sources":["../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import React, { useId, useRef, useState } from 'react';\r\nimport { FileText, UploadCloud, X } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\r\nimport { Field } from '../Field/Field';\r\n\r\nexport interface FileUploadProps {\r\n  accept?: string;\r\n  className?: string;\r\n  disabled?: boolean;\r\n  error?: string;\r\n  helperText?: string;\r\n  id?: string;\r\n  label?: React.ReactNode;\r\n  maxSizeBytes?: number;\r\n  multiple?: boolean;\r\n  onChange?: (files: File[]) => void;\r\n  /** Lista os arquivos selecionados com opção de remover. Padrão: true. */\r\n  showFileList?: boolean;\r\n}\r\n\r\nconst formatSize = (bytes: number) =>\r\n  bytes >= 1024 * 1024\r\n    ? `${(bytes / 1024 / 1024).toFixed(1)} MB`\r\n    : `${Math.max(1, Math.round(bytes / 1024))} KB`;\r\n\r\n/** Área de upload com arrastar e soltar, acessível por teclado. */\r\nexport const FileUpload = ({\r\n  label,\r\n  helperText,\r\n  error,\r\n  accept,\r\n  multiple = false,\r\n  maxSizeBytes,\r\n  disabled = false,\r\n  showFileList = true,\r\n  onChange,\r\n  id,\r\n  className,\r\n}: FileUploadProps) => {\r\n  const autoId = useId();\r\n  const inputId = id ?? autoId;\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const [sizeError, setSizeError] = useState<string | null>(null);\r\n  const [files, setFiles] = useState<File[]>([]);\r\n\r\n  const commit = (next: File[]) => {\r\n    setFiles(next);\r\n    onChange?.(next);\r\n  };\r\n\r\n  const handleFiles = (fileList: FileList | null) => {\r\n    if (!fileList || fileList.length === 0) return;\r\n    const incoming = Array.from(fileList);\r\n    if (maxSizeBytes) {\r\n      const oversized = incoming.find((f) => f.size > maxSizeBytes);\r\n      if (oversized) {\r\n        setSizeError(\r\n          `Arquivo \"${oversized.name}\" excede o tamanho máximo de ${formatSize(maxSizeBytes)}.`,\r\n        );\r\n        return;\r\n      }\r\n    }\r\n    setSizeError(null);\r\n    commit(multiple ? [...files, ...incoming] : incoming.slice(0, 1));\r\n  };\r\n\r\n  const displayError = error ?? sizeError ?? undefined;\r\n  const hints = [\r\n    accept && `Formatos aceitos: ${accept}`,\r\n    maxSizeBytes && `Tamanho máximo: ${formatSize(maxSizeBytes)}`,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' · ');\r\n\r\n  return (\r\n    <Field\r\n      className={className}\r\n      error={displayError}\r\n      helperText={helperText}\r\n      id={inputId}\r\n      label={label}\r\n      labelAs=\"span\"\r\n    >\r\n      <div\r\n        aria-describedby={\r\n          displayError ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\r\n        }\r\n        aria-disabled={disabled || undefined}\r\n        aria-labelledby={label ? `${inputId}-label` : undefined}\r\n        className={cn(\r\n          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-sbk-md border-2 border-dashed p-8 text-center',\r\n          transitionColors,\r\n          focusRing,\r\n          isDragging\r\n            ? 'border-sbk-primary bg-sbk-primary-subtle'\r\n            : 'border-sbk-line-strong bg-sbk-surface hover:border-sbk-primary hover:bg-sbk-surface-hover',\r\n          displayError && 'border-sbk-error',\r\n          disabled && 'pointer-events-none opacity-60',\r\n        )}\r\n        onClick={() => !disabled && inputRef.current?.click()}\r\n        onDragLeave={() => setIsDragging(false)}\r\n        onDragOver={(e) => {\r\n          e.preventDefault();\r\n          if (!disabled) setIsDragging(true);\r\n        }}\r\n        onDrop={(e) => {\r\n          e.preventDefault();\r\n          setIsDragging(false);\r\n          if (!disabled) handleFiles(e.dataTransfer.files);\r\n        }}\r\n        onKeyDown={(e) => {\r\n          if (e.key === 'Enter' || e.key === ' ') {\r\n            e.preventDefault();\r\n            inputRef.current?.click();\r\n          }\r\n        }}\r\n        role=\"button\"\r\n        tabIndex={disabled ? -1 : 0}\r\n      >\r\n        <UploadCloud aria-hidden=\"true\" className=\"size-8 text-sbk-primary\" strokeWidth={1.5} />\r\n        <p className=\"m-0 text-sm font-light text-sbk-fg\">\r\n          Arraste arquivos aqui ou{' '}\r\n          <span className=\"font-semibold text-sbk-primary underline\">clique para selecionar</span>\r\n        </p>\r\n        {hints && <p className=\"m-0 text-xs font-light text-sbk-fg-muted\">{hints}</p>}\r\n      </div>\r\n      <input\r\n        ref={inputRef}\r\n        accept={accept}\r\n        className=\"sr-only\"\r\n        disabled={disabled}\r\n        id={inputId}\r\n        multiple={multiple}\r\n        onChange={(e) => {\r\n          handleFiles(e.target.files);\r\n          e.target.value = '';\r\n        }}\r\n        tabIndex={-1}\r\n        type=\"file\"\r\n      />\r\n      {showFileList && files.length > 0 && (\r\n        <ul aria-label=\"Arquivos selecionados\" className=\"m-0 grid list-none gap-1.5 p-0\">\r\n          {files.map((file, index) => (\r\n            <li\r\n              key={`${file.name}-${index}`}\r\n              className=\"flex items-center gap-2 rounded-sbk-sm border border-sbk-line bg-sbk-surface px-3 py-2 text-sm\"\r\n            >\r\n              <FileText aria-hidden=\"true\" className=\"size-4 shrink-0 text-sbk-fg-muted\" />\r\n              <span className=\"min-w-0 flex-1 truncate font-light text-sbk-fg\">{file.name}</span>\r\n              <span className=\"shrink-0 text-xs font-light text-sbk-fg-muted\">\r\n                {formatSize(file.size)}\r\n              </span>\r\n              <button\r\n                aria-label={`Remover ${file.name}`}\r\n                className={cn(\r\n                  buttonReset,\r\n                  'inline-flex size-6 cursor-pointer items-center justify-center rounded-sbk-xs text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg',\r\n                  focusRing,\r\n                )}\r\n                disabled={disabled}\r\n                onClick={() => commit(files.filter((_, i) => i !== index))}\r\n                type=\"button\"\r\n              >\r\n                <X aria-hidden=\"true\" className=\"size-4\" />\r\n              </button>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      )}\r\n    </Field>\r\n  );\r\n};\r\n\r\nFileUpload.displayName = 'FileUpload';\r\n"],"names":["formatSize","bytes","FileUpload","label","helperText","error","accept","multiple","maxSizeBytes","disabled","showFileList","onChange","id","className","autoId","useId","inputId","inputRef","useRef","isDragging","setIsDragging","useState","sizeError","setSizeError","files","setFiles","commit","next","handleFiles","fileList","incoming","oversized","f","displayError","hints","jsxs","Field","cn","transitionColors","focusRing","_a","jsx","UploadCloud","file","index","FileText","buttonReset","_","i","X"],"mappings":"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"}

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

@@ -1,14 +1,27 @@
 import type React from 'react';
+import { type LogoVariant } from '../Logo/Logo';
+export interface FooterLink {
+    href: string;
+    label: React.ReactNode;
+}
 export interface FooterProps {
-    /** Classe CSS adicional */
     className?: string;
-    /** Texto alternativo do logo */
+    /** Texto de copyright (ex.: "© 2026 SBK"). */
+    copyright?: React.ReactNode;
+    /** Links institucionais (privacidade, termos, suporte). */
+    links?: FooterLink[];
     logoAlt?: string;
-    /** Fallback textual — não utilizado no design padrão, mantido por compatibilidade */
+    /** @deprecated Não utilizado. Mantido por compatibilidade com a 1.x. */
     logoFallbackText?: string;
-    /** URL de imagem para substituir o logo SVG padrão */
+    /** Imagem de logo customizada (substitui o SVG oficial). */
     logoSrc?: string;
-    /** Texto antes do logo (ex.: "Powered by") */
+    logoVariant?: LogoVariant;
+    /** Texto antes do logo. Padrão: "Powered by". Use "" para ocultar. */
     poweredByText?: string;
+    /** `default`: superfície clara. `inverse`: verde escuro. `glass`: Liquid Glass. */
+    variant?: 'default' | 'inverse' | 'glass';
 }
-export declare const Footer: React.FC<FooterProps>;
+export declare const Footer: {
+    ({ poweredByText, logoSrc, logoAlt, logoVariant, links, copyright, variant, className, }: FooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Footer/Footer.js

@@ -1,119 +1,51 @@
-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",
-    {
-      "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
-            }
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+import { focusRing as c } from "../../utils/styles.js";
+import { Logo as m } from "../Logo/Logo.js";
+const g = {
+  default: "border-t border-sbk-line bg-sbk-surface",
+  inverse: "bg-sbk-surface-inverse text-sbk-fg-inverse [--sbk-color-fg-muted:color-mix(in_srgb,var(--sbk-color-fg-inverse)_72%,transparent)] [--sbk-color-fg-heading:var(--sbk-color-fg-inverse)]",
+  glass: "sbk-glass rounded-none border-x-0 border-b-0"
+}, x = ({
+  poweredByText: a = "Powered by",
+  logoSrc: o,
+  logoAlt: f = "SBK",
+  logoVariant: d = "sbk",
+  links: r,
+  copyright: s,
+  variant: l = "default",
+  className: b
+}) => /* @__PURE__ */ n(
+  "footer",
+  {
+    className: i(
+      "relative box-border flex w-full shrink-0 flex-wrap items-center justify-center gap-x-8 gap-y-3 px-4 py-5 md:px-8",
+      (r || s) && "md:justify-between",
+      g[l],
+      b
+    ),
+    children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-2.5", children: [
+        a && /* @__PURE__ */ e("span", { className: "text-xs font-light text-sbk-fg-muted", children: a }),
+        o ? /* @__PURE__ */ e("img", { alt: f, className: "h-7 w-auto object-contain", src: o }) : /* @__PURE__ */ e(m, { color: l === "inverse" ? "white" : "auto", height: 22, variant: d })
+      ] }),
+      r && r.length > 0 && /* @__PURE__ */ e("nav", { "aria-label": "Rodapé", children: /* @__PURE__ */ e("ul", { className: "m-0 flex list-none flex-wrap gap-x-5 gap-y-2 p-0", children: r.map((t) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+        "a",
+        {
+          className: i(
+            "rounded-sbk-xs text-xs font-light text-sbk-fg-muted underline-offset-4 hover:text-sbk-fg-heading hover:underline",
+            c
           ),
-          /* @__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",
-            {
-              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
-            }
-          ),
-          /* @__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: 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";
+          href: t.href,
+          children: t.label
+        }
+      ) }, t.href)) }) }),
+      s && /* @__PURE__ */ e("p", { className: "m-0 text-xs font-light text-sbk-fg-muted", children: s })
+    ]
+  }
+);
+x.displayName = "Footer";
 export {
-  b as Footer
+  x 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 { 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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"}
+{"version":3,"file":"Footer.js","sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { cn } from '../../utils/cn';\r\nimport { focusRing } from '../../utils/styles';\r\nimport { Logo, type LogoVariant } from '../Logo/Logo';\r\n\r\nexport interface FooterLink {\r\n  href: string;\r\n  label: React.ReactNode;\r\n}\r\n\r\nexport interface FooterProps {\r\n  className?: string;\r\n  /** Texto de copyright (ex.: \"© 2026 SBK\"). */\r\n  copyright?: React.ReactNode;\r\n  /** Links institucionais (privacidade, termos, suporte). */\r\n  links?: FooterLink[];\r\n  logoAlt?: string;\r\n  /** @deprecated Não utilizado. Mantido por compatibilidade com a 1.x. */\r\n  logoFallbackText?: string;\r\n  /** Imagem de logo customizada (substitui o SVG oficial). */\r\n  logoSrc?: string;\r\n  logoVariant?: LogoVariant;\r\n  /** Texto antes do logo. Padrão: \"Powered by\". Use \"\" para ocultar. */\r\n  poweredByText?: string;\r\n  /** `default`: superfície clara. `inverse`: verde escuro. `glass`: Liquid Glass. */\r\n  variant?: 'default' | 'inverse' | 'glass';\r\n}\r\n\r\nconst VARIANT_CLASS = {\r\n  default: 'border-t border-sbk-line bg-sbk-surface',\r\n  inverse:\r\n    'bg-sbk-surface-inverse text-sbk-fg-inverse [--sbk-color-fg-muted:color-mix(in_srgb,var(--sbk-color-fg-inverse)_72%,transparent)] [--sbk-color-fg-heading:var(--sbk-color-fg-inverse)]',\r\n  glass: 'sbk-glass rounded-none border-x-0 border-b-0',\r\n} as const;\r\n\r\nexport const Footer = ({\r\n  poweredByText = 'Powered by',\r\n  logoSrc,\r\n  logoAlt = 'SBK',\r\n  logoVariant = 'sbk',\r\n  links,\r\n  copyright,\r\n  variant = 'default',\r\n  className,\r\n}: FooterProps) => (\r\n  <footer\r\n    className={cn(\r\n      'relative box-border flex w-full shrink-0 flex-wrap items-center justify-center gap-x-8 gap-y-3 px-4 py-5 md:px-8',\r\n      (links || copyright) && 'md:justify-between',\r\n      VARIANT_CLASS[variant],\r\n      className,\r\n    )}\r\n  >\r\n    <div className=\"flex items-center gap-2.5\">\r\n      {poweredByText && (\r\n        <span className=\"text-xs font-light text-sbk-fg-muted\">{poweredByText}</span>\r\n      )}\r\n      {logoSrc ? (\r\n        <img alt={logoAlt} className=\"h-7 w-auto object-contain\" src={logoSrc} />\r\n      ) : (\r\n        <Logo color={variant === 'inverse' ? 'white' : 'auto'} height={22} variant={logoVariant} />\r\n      )}\r\n    </div>\r\n    {links && links.length > 0 && (\r\n      <nav aria-label=\"Rodapé\">\r\n        <ul className=\"m-0 flex list-none flex-wrap gap-x-5 gap-y-2 p-0\">\r\n          {links.map((link) => (\r\n            <li key={link.href}>\r\n              <a\r\n                className={cn(\r\n                  'rounded-sbk-xs text-xs font-light text-sbk-fg-muted underline-offset-4 hover:text-sbk-fg-heading hover:underline',\r\n                  focusRing,\r\n                )}\r\n                href={link.href}\r\n              >\r\n                {link.label}\r\n              </a>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      </nav>\r\n    )}\r\n    {copyright && <p className=\"m-0 text-xs font-light text-sbk-fg-muted\">{copyright}</p>}\r\n  </footer>\r\n);\r\n\r\nFooter.displayName = 'Footer';\r\n"],"names":["VARIANT_CLASS","Footer","poweredByText","logoSrc","logoAlt","logoVariant","links","copyright","variant","className","jsxs","cn","jsx","Logo","link","focusRing"],"mappings":";;;;AA4BA,MAAMA,IAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SACE;AAAA,EACF,OAAO;AACT,GAEaC,IAAS,CAAC;AAAA,EACrB,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AACF,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,OACCL,KAASC,MAAc;AAAA,MACxBP,EAAcQ,CAAO;AAAA,MACrBC;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,QAAAR,KACC,gBAAAU,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAV,GAAc;AAAA,QAEvEC,sBACE,OAAA,EAAI,KAAKC,GAAS,WAAU,6BAA4B,KAAKD,GAAS,sBAEtEU,GAAA,EAAK,OAAOL,MAAY,YAAY,UAAU,QAAQ,QAAQ,IAAI,SAASH,EAAA,CAAa;AAAA,MAAA,GAE7F;AAAA,MACCC,KAASA,EAAM,SAAS,KACvB,gBAAAM,EAAC,SAAI,cAAW,UACd,UAAA,gBAAAA,EAAC,MAAA,EAAG,WAAU,oDACX,UAAAN,EAAM,IAAI,CAACQ,wBACT,MAAA,EACC,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACAI;AAAA,UAAA;AAAA,UAEF,MAAMD,EAAK;AAAA,UAEV,UAAAA,EAAK;AAAA,QAAA;AAAA,MAAA,EACR,GATOA,EAAK,IAUd,CACD,GACH,EAAA,CACF;AAAA,MAEDP,KAAa,gBAAAK,EAAC,KAAA,EAAE,WAAU,4CAA4C,UAAAL,EAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AACnF;AAGFN,EAAO,cAAc;"}

package/dist/components/GlassPanel/GlassPanel.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface GlassPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    as?: 'div' | 'section' | 'aside' | 'header' | 'nav' | 'footer';
+    /** Intensidade do desfoque. Padrão: md (20px). */
+    blur?: 'sm' | 'md' | 'lg';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    radius?: 'sm' | 'md' | 'lg' | 'full';
+    /** Aumenta a opacidade do fundo para melhorar a leitura sobre imagens movimentadas. */
+    strong?: boolean;
+}
+/**
+ * Superfície "Liquid Glass" (inspirada no material da Apple): translucidez tingida de verde,
+ * desfoque com saturação, borda especular e brilho interno.
+ *
+ * Acessibilidade: em `prefers-reduced-transparency` ou sem suporte a `backdrop-filter`,
+ * cai para superfície opaca. Garanta contraste do texto sobre o conteúdo de fundo.
+ */
+export declare const GlassPanel: React.ForwardRefExoticComponent<GlassPanelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/GlassPanel/GlassPanel.js

@@ -0,0 +1,39 @@
+import { jsx as t } from "react/jsx-runtime";
+import p from "react";
+import { cn as f } from "../../utils/cn.js";
+const g = { sm: "12px", md: "20px", lg: "32px" }, b = { none: "p-0", sm: "p-3", md: "p-5", lg: "p-8" }, c = {
+  sm: "rounded-sbk-sm",
+  md: "rounded-sbk-md",
+  lg: "rounded-sbk-lg",
+  full: "rounded-full"
+}, k = p.forwardRef(
+  ({
+    as: s = "div",
+    blur: l = "md",
+    padding: m = "md",
+    radius: d = "md",
+    strong: o = !1,
+    className: a,
+    style: e,
+    ...r
+  }, n) => /* @__PURE__ */ t(
+    s,
+    {
+      ref: n,
+      className: f(
+        "sbk-glass text-sbk-fg",
+        o && "sbk-glass-strong",
+        b[m],
+        c[d],
+        a
+      ),
+      style: { "--sbk-glass-blur": g[l], ...e },
+      ...r
+    }
+  )
+);
+k.displayName = "GlassPanel";
+export {
+  k as GlassPanel
+};
+//# sourceMappingURL=GlassPanel.js.map

package/dist/components/GlassPanel/GlassPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassPanel.js","sources":["../../../src/components/GlassPanel/GlassPanel.tsx"],"sourcesContent":["import React from 'react';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface GlassPanelProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  as?: 'div' | 'section' | 'aside' | 'header' | 'nav' | 'footer';\r\n  /** Intensidade do desfoque. Padrão: md (20px). */\r\n  blur?: 'sm' | 'md' | 'lg';\r\n  padding?: 'none' | 'sm' | 'md' | 'lg';\r\n  radius?: 'sm' | 'md' | 'lg' | 'full';\r\n  /** Aumenta a opacidade do fundo para melhorar a leitura sobre imagens movimentadas. */\r\n  strong?: boolean;\r\n}\r\n\r\nconst BLUR = { sm: '12px', md: '20px', lg: '32px' } as const;\r\nconst PADDING = { none: 'p-0', sm: 'p-3', md: 'p-5', lg: 'p-8' } as const;\r\nconst RADIUS = {\r\n  sm: 'rounded-sbk-sm',\r\n  md: 'rounded-sbk-md',\r\n  lg: 'rounded-sbk-lg',\r\n  full: 'rounded-full',\r\n} as const;\r\n\r\n/**\r\n * Superfície \"Liquid Glass\" (inspirada no material da Apple): translucidez tingida de verde,\r\n * desfoque com saturação, borda especular e brilho interno.\r\n *\r\n * Acessibilidade: em `prefers-reduced-transparency` ou sem suporte a `backdrop-filter`,\r\n * cai para superfície opaca. Garanta contraste do texto sobre o conteúdo de fundo.\r\n */\r\nexport const GlassPanel = React.forwardRef<HTMLDivElement, GlassPanelProps>(\r\n  (\r\n    {\r\n      as: Tag = 'div',\r\n      blur = 'md',\r\n      padding = 'md',\r\n      radius = 'md',\r\n      strong = false,\r\n      className,\r\n      style,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => (\r\n    <Tag\r\n      ref={ref}\r\n      className={cn(\r\n        'sbk-glass text-sbk-fg',\r\n        strong && 'sbk-glass-strong',\r\n        PADDING[padding],\r\n        RADIUS[radius],\r\n        className,\r\n      )}\r\n      style={{ '--sbk-glass-blur': BLUR[blur], ...style } as React.CSSProperties}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\nGlassPanel.displayName = 'GlassPanel';\r\n"],"names":["BLUR","PADDING","RADIUS","GlassPanel","React","Tag","blur","padding","radius","strong","className","style","props","ref","jsx","cn"],"mappings":";;;AAaA,MAAMA,IAAO,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAA,GACrCC,IAAU,EAAE,MAAM,OAAO,IAAI,OAAO,IAAI,OAAO,IAAI,MAAA,GACnDC,IAAS;AAAA,EACb,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR,GASaC,IAAaC,EAAM;AAAA,EAC9B,CACE;AAAA,IACE,IAAIC,IAAM;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,QAAAC,IAAS;AAAA,IACT,QAAAC,IAAS;AAAA,IACT,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACT;AAAA,IAAA;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAN,KAAU;AAAA,QACVR,EAAQM,CAAO;AAAA,QACfL,EAAOM,CAAM;AAAA,QACbE;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,oBAAoBV,EAAKM,CAAI,GAAG,GAAGK,EAAA;AAAA,MAC3C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEAT,EAAW,cAAc;"}

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

@@ -1,29 +1,40 @@
 import type React from 'react';
 import type { Theme } from '../../theme/ThemeProvider';
+import { type LogoVariant } from '../Logo/Logo';
+export type HeaderVariant = 'solid' | 'light' | 'glass';
 export interface HeaderProps {
-    /** Classe CSS adicional */
     className?: string;
-    /** Texto alternativo do logo */
+    /** Texto alternativo da imagem de logo customizada. */
     logoAlt?: string;
-    /** URL de imagem para substituir o logo SVG padrão (tema escuro) */
+    /** Imagem de logo para o tema escuro (substitui o SVG oficial). */
     logoDarkSrc?: string;
-    /** URL de imagem para substituir o logo SVG padrão (tema claro) */
+    /** Imagem de logo customizada (substitui o SVG oficial). */
     logoSrc?: string;
-    /** Callback ao clicar no ícone de menu (hamburger) */
-    onMenuClick?: () => void;
-    /** Callback ao clicar na área do logo/título */
+    /** Logo oficial usado quando não há `logoSrc`. Padrão: sbk. */
+    logoVariant?: LogoVariant;
+    /** Estado do menu lateral, anunciado no botão hamburger (aria-expanded). */
+    menuExpanded?: boolean;
+    /** Rótulo do botão hamburger. Padrão: "Abrir menu". */
+    menuLabel?: string;
+    /** Navegação principal, exibida ao centro. */
+    navigation?: React.ReactNode;
     onLogoClick?: () => void;
-    /** Conteúdo da área direita (pills de idioma/tema, etc.) */
+    onMenuClick?: () => void;
+    /** Conteúdo à direita (ações, seletor de tema, menu do usuário). */
     rightContent?: React.ReactNode;
-    /** Exibe o ícone hamburger à esquerda — padrão: true */
     showMenuIcon?: boolean;
-    /** Subtítulo abaixo do título */
+    /** Fixa o header no topo. Padrão: true. */
+    sticky?: boolean;
     subtitle?: React.ReactNode;
-    /** Tema opcional para escolher o logo correto sem depender do ThemeProvider */
+    /** Tema para escolher entre logoSrc e logoDarkSrc sem depender do ThemeProvider. */
     theme?: Theme;
-    /** Título exibido ao lado do logo */
     title?: React.ReactNode;
-    /** Iniciais do usuário no avatar circular turquesa (ex.: "CF") */
+    /** Iniciais do usuário exibidas no avatar (ex.: "CF"). */
     userInitials?: string;
+    /** `solid`: verde escuro (padrão). `light`: superfície clara. `glass`: Liquid Glass. */
+    variant?: HeaderVariant;
 }
-export declare const Header: React.FC<HeaderProps>;
+export declare const Header: {
+    ({ logoSrc, logoDarkSrc, logoAlt, logoVariant, title, subtitle, theme, navigation, onLogoClick, onMenuClick, menuExpanded, menuLabel, rightContent, showMenuIcon, sticky, userInitials, variant, className, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};