@sbkbs/ui 1.0.5 → 2.0.0-beta.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';\nimport { FileText, UploadCloud, X } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\nimport { Field } from '../Field/Field';\n\nexport interface FileUploadProps {\n  accept?: string;\n  className?: string;\n  disabled?: boolean;\n  error?: string;\n  helperText?: string;\n  id?: string;\n  label?: React.ReactNode;\n  maxSizeBytes?: number;\n  multiple?: boolean;\n  onChange?: (files: File[]) => void;\n  /** Lista os arquivos selecionados com opção de remover. Padrão: true. */\n  showFileList?: boolean;\n}\n\nconst formatSize = (bytes: number) =>\n  bytes >= 1024 * 1024\n    ? `${(bytes / 1024 / 1024).toFixed(1)} MB`\n    : `${Math.max(1, Math.round(bytes / 1024))} KB`;\n\n/** Área de upload com arrastar e soltar, acessível por teclado. */\nexport const FileUpload = ({\n  label,\n  helperText,\n  error,\n  accept,\n  multiple = false,\n  maxSizeBytes,\n  disabled = false,\n  showFileList = true,\n  onChange,\n  id,\n  className,\n}: FileUploadProps) => {\n  const autoId = useId();\n  const inputId = id ?? autoId;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [sizeError, setSizeError] = useState<string | null>(null);\n  const [files, setFiles] = useState<File[]>([]);\n\n  const commit = (next: File[]) => {\n    setFiles(next);\n    onChange?.(next);\n  };\n\n  const handleFiles = (fileList: FileList | null) => {\n    if (!fileList || fileList.length === 0) return;\n    const incoming = Array.from(fileList);\n    if (maxSizeBytes) {\n      const oversized = incoming.find((f) => f.size > maxSizeBytes);\n      if (oversized) {\n        setSizeError(\n          `Arquivo \"${oversized.name}\" excede o tamanho máximo de ${formatSize(maxSizeBytes)}.`,\n        );\n        return;\n      }\n    }\n    setSizeError(null);\n    commit(multiple ? [...files, ...incoming] : incoming.slice(0, 1));\n  };\n\n  const displayError = error ?? sizeError ?? undefined;\n  const hints = [\n    accept && `Formatos aceitos: ${accept}`,\n    maxSizeBytes && `Tamanho máximo: ${formatSize(maxSizeBytes)}`,\n  ]\n    .filter(Boolean)\n    .join(' · ');\n\n  return (\n    <Field\n      className={className}\n      error={displayError}\n      helperText={helperText}\n      id={inputId}\n      label={label}\n      labelAs=\"span\"\n    >\n      <div\n        aria-describedby={\n          displayError ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\n        }\n        aria-disabled={disabled || undefined}\n        aria-labelledby={label ? `${inputId}-label` : undefined}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-sbk-md border-2 border-dashed p-8 text-center',\n          transitionColors,\n          focusRing,\n          isDragging\n            ? 'border-sbk-primary bg-sbk-primary-subtle'\n            : 'border-sbk-line-strong bg-sbk-surface hover:border-sbk-primary hover:bg-sbk-surface-hover',\n          displayError && 'border-sbk-error',\n          disabled && 'pointer-events-none opacity-60',\n        )}\n        onClick={() => !disabled && inputRef.current?.click()}\n        onDragLeave={() => setIsDragging(false)}\n        onDragOver={(e) => {\n          e.preventDefault();\n          if (!disabled) setIsDragging(true);\n        }}\n        onDrop={(e) => {\n          e.preventDefault();\n          setIsDragging(false);\n          if (!disabled) handleFiles(e.dataTransfer.files);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            inputRef.current?.click();\n          }\n        }}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n      >\n        <UploadCloud aria-hidden=\"true\" className=\"size-8 text-sbk-primary\" strokeWidth={1.5} />\n        <p className=\"m-0 text-sm font-light text-sbk-fg\">\n          Arraste arquivos aqui ou{' '}\n          <span className=\"font-semibold text-sbk-primary underline\">clique para selecionar</span>\n        </p>\n        {hints && <p className=\"m-0 text-xs font-light text-sbk-fg-muted\">{hints}</p>}\n      </div>\n      <input\n        ref={inputRef}\n        accept={accept}\n        className=\"sr-only\"\n        disabled={disabled}\n        id={inputId}\n        multiple={multiple}\n        onChange={(e) => {\n          handleFiles(e.target.files);\n          e.target.value = '';\n        }}\n        tabIndex={-1}\n        type=\"file\"\n      />\n      {showFileList && files.length > 0 && (\n        <ul aria-label=\"Arquivos selecionados\" className=\"m-0 grid list-none gap-1.5 p-0\">\n          {files.map((file, index) => (\n            <li\n              key={`${file.name}-${index}`}\n              className=\"flex items-center gap-2 rounded-sbk-sm border border-sbk-line bg-sbk-surface px-3 py-2 text-sm\"\n            >\n              <FileText aria-hidden=\"true\" className=\"size-4 shrink-0 text-sbk-fg-muted\" />\n              <span className=\"min-w-0 flex-1 truncate font-light text-sbk-fg\">{file.name}</span>\n              <span className=\"shrink-0 text-xs font-light text-sbk-fg-muted\">\n                {formatSize(file.size)}\n              </span>\n              <button\n                aria-label={`Remover ${file.name}`}\n                className={cn(\n                  buttonReset,\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',\n                  focusRing,\n                )}\n                disabled={disabled}\n                onClick={() => commit(files.filter((_, i) => i !== index))}\n                type=\"button\"\n              >\n                <X aria-hidden=\"true\" className=\"size-4\" />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </Field>\n  );\n};\n\nFileUpload.displayName = 'FileUpload';\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;
-    /** Texto exibido se a imagem do logo falhar (ex.: "SBK") */
+    /** @deprecated Não utilizado. Mantido por compatibilidade com a 1.x. */
     logoFallbackText?: string;
-    /** URL da imagem do logo */
+    /** 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,54 +1,51 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { useState as c } from "react";
-const p = ({
-  poweredByText: t = "Powered by",
-  logoSrc: e,
-  logoAlt: i = "Logo",
-  logoFallbackText: s,
-  className: o = ""
-}) => {
-  const [a, l] = c(!0);
-  return /* @__PURE__ */ r(
-    "footer",
-    {
-      className: [
-        "relative z-[1] flex w-full shrink-0 items-center justify-center border-t border-[var(--border-color)] bg-[var(--bg-secondary)] px-[var(--spacing-2xl)] py-[var(--spacing-lg)]",
-        o
-      ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ n("div", { className: "flex items-center gap-[var(--spacing-md)]", children: [
-        t && /* @__PURE__ */ r("span", { className: "text-[0.95rem] font-normal text-[var(--text-secondary)]", children: t }),
-        (e || s) && /* @__PURE__ */ n("div", { className: "flex items-center", children: [
-          e && a && /* @__PURE__ */ r(
-            "img",
-            {
-              alt: i,
-              className: "h-6 w-auto object-contain",
-              onError: (m) => {
-                l(!1);
-              },
-              src: e,
-              style: {
-                filter: "brightness(0)"
-              }
-            }
+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
           ),
-          s && /* @__PURE__ */ r(
-            "span",
-            {
-              className: "flex items-center text-base font-bold tracking-[0.1em] text-[var(--md-primary)]",
-              style: {
-                display: e && a ? "none" : "flex",
-                fontFamily: '"Orbitron", sans-serif'
-              },
-              children: s
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-};
+          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 {
-  p 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 { useState } from 'react';\n\nexport interface FooterProps {\n  /** Classe CSS adicional */\n  className?: string;\n  /** Texto alternativo do logo */\n  logoAlt?: string;\n  /** Texto exibido se a imagem do logo falhar (ex.: \"SBK\") */\n  logoFallbackText?: string;\n  /** URL da imagem do logo */\n  logoSrc?: string;\n  /** Texto antes do logo (ex.: \"Powered by\") */\n  poweredByText?: string;\n}\n\nexport const Footer: React.FC<FooterProps> = ({\n  poweredByText = 'Powered by',\n  logoSrc,\n  logoAlt = 'Logo',\n  logoFallbackText,\n  className = '',\n}) => {\n  const [logoVisible, setLogoVisible] = useState(true);\n  return (\n    <footer\n      className={[\n        'relative z-[1] flex w-full shrink-0 items-center justify-center border-t border-[var(--border-color)] bg-[var(--bg-secondary)] px-[var(--spacing-2xl)] py-[var(--spacing-lg)]',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"flex items-center gap-[var(--spacing-md)]\">\n        {poweredByText && (\n          <span className=\"text-[0.95rem] font-normal text-[var(--text-secondary)]\">\n            {poweredByText}\n          </span>\n        )}\n        {(logoSrc || logoFallbackText) && (\n          <div className=\"flex items-center\">\n            {logoSrc && logoVisible && (\n              <img\n                alt={logoAlt}\n                className=\"h-6 w-auto object-contain\"\n                onError={(_e) => {\n                  setLogoVisible(false);\n                }}\n                src={logoSrc}\n                style={{\n                  filter: 'brightness(0)',\n                }}\n              />\n            )}\n            {logoFallbackText && (\n              <span\n                className=\"flex items-center text-base font-bold tracking-[0.1em] text-[var(--md-primary)]\"\n                style={{\n                  display: logoSrc && logoVisible ? 'none' : 'flex',\n                  fontFamily: '\"Orbitron\", sans-serif',\n                }}\n              >\n                {logoFallbackText}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    </footer>\n  );\n};\n"],"names":["Footer","poweredByText","logoSrc","logoAlt","logoFallbackText","className","logoVisible","setLogoVisible","useState","jsx","jsxs","_e"],"mappings":";;AAgBO,MAAMA,IAAgC,CAAC;AAAA,EAC5C,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,kBAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAI;AACnD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,6CACZ,UAAA;AAAA,QAAAT,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,2DACb,UAAAR,GACH;AAAA,SAEAC,KAAWE,MACX,gBAAAM,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,UAAAR,KAAWI,KACV,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKN;AAAA,cACL,WAAU;AAAA,cACV,SAAS,CAACQ,MAAO;AACf,gBAAAJ,EAAe,EAAK;AAAA,cACtB;AAAA,cACA,KAAKL;AAAA,cACL,OAAO;AAAA,gBACL,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UAAA;AAAA,UAGHE,KACC,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,SAASP,KAAWI,IAAc,SAAS;AAAA,gBAC3C,YAAY;AAAA,cAAA;AAAA,cAGb,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Footer.js","sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { focusRing } from '../../utils/styles';\nimport { Logo, type LogoVariant } from '../Logo/Logo';\n\nexport interface FooterLink {\n  href: string;\n  label: React.ReactNode;\n}\n\nexport interface FooterProps {\n  className?: string;\n  /** Texto de copyright (ex.: \"© 2026 SBK\"). */\n  copyright?: React.ReactNode;\n  /** Links institucionais (privacidade, termos, suporte). */\n  links?: FooterLink[];\n  logoAlt?: string;\n  /** @deprecated Não utilizado. Mantido por compatibilidade com a 1.x. */\n  logoFallbackText?: string;\n  /** Imagem de logo customizada (substitui o SVG oficial). */\n  logoSrc?: string;\n  logoVariant?: LogoVariant;\n  /** Texto antes do logo. Padrão: \"Powered by\". Use \"\" para ocultar. */\n  poweredByText?: string;\n  /** `default`: superfície clara. `inverse`: verde escuro. `glass`: Liquid Glass. */\n  variant?: 'default' | 'inverse' | 'glass';\n}\n\nconst VARIANT_CLASS = {\n  default: 'border-t border-sbk-line bg-sbk-surface',\n  inverse:\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)]',\n  glass: 'sbk-glass rounded-none border-x-0 border-b-0',\n} as const;\n\nexport const Footer = ({\n  poweredByText = 'Powered by',\n  logoSrc,\n  logoAlt = 'SBK',\n  logoVariant = 'sbk',\n  links,\n  copyright,\n  variant = 'default',\n  className,\n}: FooterProps) => (\n  <footer\n    className={cn(\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',\n      (links || copyright) && 'md:justify-between',\n      VARIANT_CLASS[variant],\n      className,\n    )}\n  >\n    <div className=\"flex items-center gap-2.5\">\n      {poweredByText && (\n        <span className=\"text-xs font-light text-sbk-fg-muted\">{poweredByText}</span>\n      )}\n      {logoSrc ? (\n        <img alt={logoAlt} className=\"h-7 w-auto object-contain\" src={logoSrc} />\n      ) : (\n        <Logo color={variant === 'inverse' ? 'white' : 'auto'} height={22} variant={logoVariant} />\n      )}\n    </div>\n    {links && links.length > 0 && (\n      <nav aria-label=\"Rodapé\">\n        <ul className=\"m-0 flex list-none flex-wrap gap-x-5 gap-y-2 p-0\">\n          {links.map((link) => (\n            <li key={link.href}>\n              <a\n                className={cn(\n                  'rounded-sbk-xs text-xs font-light text-sbk-fg-muted underline-offset-4 hover:text-sbk-fg-heading hover:underline',\n                  focusRing,\n                )}\n                href={link.href}\n              >\n                {link.label}\n              </a>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    )}\n    {copyright && <p className=\"m-0 text-xs font-light text-sbk-fg-muted\">{copyright}</p>}\n  </footer>\n);\n\nFooter.displayName = 'Footer';\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';\nimport { cn } from '../../utils/cn';\n\nexport interface GlassPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: 'div' | 'section' | 'aside' | 'header' | 'nav' | 'footer';\n  /** Intensidade do desfoque. Padrão: md (20px). */\n  blur?: 'sm' | 'md' | 'lg';\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n  radius?: 'sm' | 'md' | 'lg' | 'full';\n  /** Aumenta a opacidade do fundo para melhorar a leitura sobre imagens movimentadas. */\n  strong?: boolean;\n}\n\nconst BLUR = { sm: '12px', md: '20px', lg: '32px' } as const;\nconst PADDING = { none: 'p-0', sm: 'p-3', md: 'p-5', lg: 'p-8' } as const;\nconst RADIUS = {\n  sm: 'rounded-sbk-sm',\n  md: 'rounded-sbk-md',\n  lg: 'rounded-sbk-lg',\n  full: 'rounded-full',\n} as const;\n\n/**\n * Superfície \"Liquid Glass\" (inspirada no material da Apple): translucidez tingida de verde,\n * desfoque com saturação, borda especular e brilho interno.\n *\n * Acessibilidade: em `prefers-reduced-transparency` ou sem suporte a `backdrop-filter`,\n * cai para superfície opaca. Garanta contraste do texto sobre o conteúdo de fundo.\n */\nexport const GlassPanel = React.forwardRef<HTMLDivElement, GlassPanelProps>(\n  (\n    {\n      as: Tag = 'div',\n      blur = 'md',\n      padding = 'md',\n      radius = 'md',\n      strong = false,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <Tag\n      ref={ref}\n      className={cn(\n        'sbk-glass text-sbk-fg',\n        strong && 'sbk-glass-strong',\n        PADDING[padding],\n        RADIUS[radius],\n        className,\n      )}\n      style={{ '--sbk-glass-blur': BLUR[blur], ...style } as React.CSSProperties}\n      {...props}\n    />\n  ),\n);\n\nGlassPanel.displayName = 'GlassPanel';\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,23 +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 da imagem do logo (tema escuro). Se não informado, usa logoSrc. */
+    /** Imagem de logo para o tema escuro (substitui o SVG oficial). */
     logoDarkSrc?: string;
-    /** URL da imagem do logo (tema claro) */
+    /** Imagem de logo customizada (substitui o SVG oficial). */
     logoSrc?: string;
-    /** 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 (ex.: seletor de idioma, toggle tema, menu usuário) */
+    onMenuClick?: () => void;
+    /** Conteúdo à direita (ações, seletor de tema, menu do usuário). */
     rightContent?: React.ReactNode;
-    /** Subtítulo abaixo do título */
+    showMenuIcon?: boolean;
+    /** Fixa o header no topo. Padrão: true. */
+    sticky?: boolean;
     subtitle?: React.ReactNode;
-    /** Tema opcional para escolher o logo correto sem depender do ThemeProvider do UI */
+    /** Tema para escolher entre logoSrc e logoDarkSrc sem depender do ThemeProvider. */
     theme?: Theme;
-    /** Título exibido ao lado do logo (ex.: "OFÍCIO.IA") */
     title?: React.ReactNode;
+    /** 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;
+};

package/dist/components/Header/Header.js

@@ -1,114 +1,114 @@
-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,
-  subtitle: d,
-  theme: s,
-  onLogoClick: e,
-  rightContent: m,
-  className: b = ""
+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";
+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 [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 [E, m] = C(() => n ?? g());
+  F(() => {
+    if (n) {
+      m(n);
       return;
     }
-    const t = () => c(v());
-    if (t(), typeof MutationObserver > "u")
-      return;
-    const n = new MutationObserver(t);
-    return n.observe(document.documentElement, {
+    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"]
-    }), () => n.disconnect();
-  }, [s]);
-  const N = () => e == null ? void 0 : e(), E = (t) => {
-    t.key === "Enter" && (e == null || e());
-  };
-  return /* @__PURE__ */ a(
+    }), () => 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: ["fixed inset-x-0 top-0 z-[1000] w-full backdrop-blur-[12px]", b].filter(Boolean).join(" "),
+      className: o(
+        "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__ */ 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 min-w-0 items-center gap-3", children: [
+          A && /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-expanded": w,
+              "aria-label": j,
+              className: o(
+                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
+              ),
+              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
               ),
-              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 })
-            ]
-          }
-        )
+              onClick: d,
+              type: "button",
+              children: b
+            }
+          ) : /* @__PURE__ */ e("div", { className: "flex min-w-0 items-center gap-3", children: b })
+        ] }),
+        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: ${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
+            }
+          )
+        ] })
       ]
     }
   );
 };
+B.displayName = "Header";
 export {
-  M as Header
+  B as Header
 };
 //# sourceMappingURL=Header.js.map