@sbkbs/ui 2.0.0-beta.0 → 2.0.0

package/dist/reset.css

@@ -1,9 +1,9 @@
-/* ============================================================
-   @sbkbs/ui · Reset opcional (import '@sbkbs/ui/reset.css')
-   Preflight do Tailwind CSS v4 na camada base.
-   Apps com Tailwind já têm este reset: não importe duas vezes.
-   Apps sem Tailwind: importe antes de styles.css para um ponto de partida consistente.
-   ============================================================ */
-
-@layer theme, base, components, utilities;
-@import 'tailwindcss/preflight.css' layer(base);
+/* ============================================================
+   @sbkbs/ui · Reset opcional (import '@sbkbs/ui/reset.css')
+   Preflight do Tailwind CSS v4 na camada base.
+   Apps com Tailwind já têm este reset: não importe duas vezes.
+   Apps sem Tailwind: importe antes de styles.css para um ponto de partida consistente.
+   ============================================================ */
+
+@layer theme, base, components, utilities;
+@import 'tailwindcss/preflight.css' layer(base);

package/dist/tailwind.css

@@ -1,153 +1,153 @@
-/* ============================================================
-   @sbkbs/ui · Preset Tailwind CSS v4
-   Mapeia os tokens (--sbk-*) para utilitários com namespace "sbk":
-     bg-sbk-primary, text-sbk-fg-muted, border-sbk-line,
-     rounded-sbk-md, shadow-sbk-sm, font-sbk, sbk-glass
-
-   Uso em app com Tailwind 4:
-     @import 'tailwindcss';
-     @import '@sbkbs/ui/tailwind.css';
-   Requer os tokens carregados (@sbkbs/ui/styles.css ou @sbkbs/ui/tokens.css).
-   ============================================================ */
-
-@theme inline {
-  /* Paleta oficial */
-  --color-sbk-verde-escuro: var(--sbk-verde-escuro);
-  --color-sbk-ciano-escuro: var(--sbk-ciano-escuro);
-  --color-sbk-off-white: var(--sbk-off-white);
-  --color-sbk-verde-claro: var(--sbk-verde-claro);
-  --color-sbk-verde-profundo: var(--sbk-verde-profundo);
-  --color-sbk-ciano: var(--sbk-ciano);
-  --color-sbk-ciano-profundo: var(--sbk-ciano-profundo);
-  --color-sbk-chumbo-leve: var(--sbk-chumbo-leve);
-  --color-sbk-preto: var(--sbk-preto);
-  --color-sbk-branco: var(--sbk-branco);
-
-  /* Semânticos */
-  --color-sbk-bg: var(--sbk-color-bg);
-  --color-sbk-surface: var(--sbk-color-surface);
-  --color-sbk-surface-sunken: var(--sbk-color-surface-sunken);
-  --color-sbk-surface-hover: var(--sbk-color-surface-hover);
-  --color-sbk-surface-inverse: var(--sbk-color-surface-inverse);
-  --color-sbk-overlay: var(--sbk-color-overlay);
-  --color-sbk-fg: var(--sbk-color-fg);
-  --color-sbk-fg-heading: var(--sbk-color-fg-heading);
-  --color-sbk-fg-muted: var(--sbk-color-fg-muted);
-  --color-sbk-fg-inverse: var(--sbk-color-fg-inverse);
-  --color-sbk-line: var(--sbk-color-line);
-  --color-sbk-line-strong: var(--sbk-color-line-strong);
-  --color-sbk-primary: var(--sbk-color-primary);
-  --color-sbk-primary-hover: var(--sbk-color-primary-hover);
-  --color-sbk-on-primary: var(--sbk-color-on-primary);
-  --color-sbk-primary-subtle: var(--sbk-color-primary-subtle);
-  --color-sbk-secondary: var(--sbk-color-secondary);
-  --color-sbk-secondary-hover: var(--sbk-color-secondary-hover);
-  --color-sbk-on-secondary: var(--sbk-color-on-secondary);
-  --color-sbk-accent: var(--sbk-color-accent);
-  --color-sbk-highlight-bg: var(--sbk-color-highlight-bg);
-  --color-sbk-highlight-fg: var(--sbk-color-highlight-fg);
-  --color-sbk-focus: var(--sbk-color-focus);
-  --color-sbk-success: var(--sbk-color-success);
-  --color-sbk-success-subtle: var(--sbk-color-success-subtle);
-  --color-sbk-warning: var(--sbk-color-warning);
-  --color-sbk-warning-subtle: var(--sbk-color-warning-subtle);
-  --color-sbk-error: var(--sbk-color-error);
-  --color-sbk-error-subtle: var(--sbk-color-error-subtle);
-  --color-sbk-info: var(--sbk-color-info);
-  --color-sbk-info-subtle: var(--sbk-color-info-subtle);
-  --color-sbk-on-state: var(--sbk-color-on-state);
-  --color-sbk-success-fg: var(--sbk-color-success-fg);
-  --color-sbk-warning-fg: var(--sbk-color-warning-fg);
-  --color-sbk-error-fg: var(--sbk-color-error-fg);
-  --color-sbk-info-fg: var(--sbk-color-info-fg);
-
-  /* Tipografia */
-  --font-sbk: var(--sbk-font-family);
-
-  /* Raio e sombra */
-  --radius-sbk-xs: var(--sbk-radius-xs);
-  --radius-sbk-sm: var(--sbk-radius-sm);
-  --radius-sbk-md: var(--sbk-radius-md);
-  --radius-sbk-lg: var(--sbk-radius-lg);
-  --shadow-sbk-sm: var(--sbk-shadow-sm);
-  --shadow-sbk-md: var(--sbk-shadow-md);
-  --shadow-sbk-glass: var(--sbk-glass-shadow);
-}
-
-/* Animações */
-@theme {
-  --animate-sbk-indeterminate: sbk-indeterminate 1.4s var(--sbk-easing-standard) infinite;
-  --animate-sbk-fade-in: sbk-fade-in var(--sbk-duration-normal) var(--sbk-easing-standard);
-  --animate-sbk-scale-in: sbk-scale-in var(--sbk-duration-normal) var(--sbk-easing-standard);
-
-  @keyframes sbk-indeterminate {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(250%);
-    }
-  }
-  @keyframes sbk-fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  @keyframes sbk-scale-in {
-    from {
-      opacity: 0;
-      transform: scale(0.97);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
-/* Superfície Liquid Glass */
-@utility sbk-glass {
-  background-color: var(--sbk-glass-bg);
-  background-image:
-    linear-gradient(
-      160deg,
-      color-mix(in srgb, var(--sbk-glass-highlight) 40%, transparent) 0%,
-      transparent 45%
-    ),
-    linear-gradient(var(--sbk-glass-tint), var(--sbk-glass-tint));
-  -webkit-backdrop-filter: blur(var(--sbk-glass-blur)) saturate(var(--sbk-glass-saturate));
-  backdrop-filter: blur(var(--sbk-glass-blur)) saturate(var(--sbk-glass-saturate));
-  border: 1px solid var(--sbk-glass-border);
-  box-shadow:
-    inset 0 1px 0 var(--sbk-glass-highlight),
-    inset 0 -1px 0 color-mix(in srgb, var(--sbk-glass-highlight) 30%, transparent),
-    var(--sbk-glass-shadow);
-
-  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-    background-color: var(--sbk-glass-fallback);
-  }
-
-  @media (prefers-reduced-transparency: reduce) {
-    background-color: var(--sbk-glass-fallback);
-    background-image: none;
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-  }
-
-  @media (forced-colors: active) {
-    border-color: CanvasText;
-  }
-}
-
-@utility sbk-glass-strong {
-  background-color: var(--sbk-glass-bg-strong);
-}
-
-/* Anel de foco padrão da lib */
-@utility sbk-focus-ring {
-  outline: 2px solid var(--sbk-color-focus);
-  outline-offset: 2px;
-}
+/* ============================================================
+   @sbkbs/ui · Preset Tailwind CSS v4
+   Mapeia os tokens (--sbk-*) para utilitários com namespace "sbk":
+     bg-sbk-primary, text-sbk-fg-muted, border-sbk-line,
+     rounded-sbk-md, shadow-sbk-sm, font-sbk, sbk-glass
+
+   Uso em app com Tailwind 4:
+     @import 'tailwindcss';
+     @import '@sbkbs/ui/tailwind.css';
+   Requer os tokens carregados (@sbkbs/ui/styles.css ou @sbkbs/ui/tokens.css).
+   ============================================================ */
+
+@theme inline {
+  /* Paleta oficial */
+  --color-sbk-verde-escuro: var(--sbk-verde-escuro);
+  --color-sbk-ciano-escuro: var(--sbk-ciano-escuro);
+  --color-sbk-off-white: var(--sbk-off-white);
+  --color-sbk-verde-claro: var(--sbk-verde-claro);
+  --color-sbk-verde-profundo: var(--sbk-verde-profundo);
+  --color-sbk-ciano: var(--sbk-ciano);
+  --color-sbk-ciano-profundo: var(--sbk-ciano-profundo);
+  --color-sbk-chumbo-leve: var(--sbk-chumbo-leve);
+  --color-sbk-preto: var(--sbk-preto);
+  --color-sbk-branco: var(--sbk-branco);
+
+  /* Semânticos */
+  --color-sbk-bg: var(--sbk-color-bg);
+  --color-sbk-surface: var(--sbk-color-surface);
+  --color-sbk-surface-sunken: var(--sbk-color-surface-sunken);
+  --color-sbk-surface-hover: var(--sbk-color-surface-hover);
+  --color-sbk-surface-inverse: var(--sbk-color-surface-inverse);
+  --color-sbk-overlay: var(--sbk-color-overlay);
+  --color-sbk-fg: var(--sbk-color-fg);
+  --color-sbk-fg-heading: var(--sbk-color-fg-heading);
+  --color-sbk-fg-muted: var(--sbk-color-fg-muted);
+  --color-sbk-fg-inverse: var(--sbk-color-fg-inverse);
+  --color-sbk-line: var(--sbk-color-line);
+  --color-sbk-line-strong: var(--sbk-color-line-strong);
+  --color-sbk-primary: var(--sbk-color-primary);
+  --color-sbk-primary-hover: var(--sbk-color-primary-hover);
+  --color-sbk-on-primary: var(--sbk-color-on-primary);
+  --color-sbk-primary-subtle: var(--sbk-color-primary-subtle);
+  --color-sbk-secondary: var(--sbk-color-secondary);
+  --color-sbk-secondary-hover: var(--sbk-color-secondary-hover);
+  --color-sbk-on-secondary: var(--sbk-color-on-secondary);
+  --color-sbk-accent: var(--sbk-color-accent);
+  --color-sbk-highlight-bg: var(--sbk-color-highlight-bg);
+  --color-sbk-highlight-fg: var(--sbk-color-highlight-fg);
+  --color-sbk-focus: var(--sbk-color-focus);
+  --color-sbk-success: var(--sbk-color-success);
+  --color-sbk-success-subtle: var(--sbk-color-success-subtle);
+  --color-sbk-warning: var(--sbk-color-warning);
+  --color-sbk-warning-subtle: var(--sbk-color-warning-subtle);
+  --color-sbk-error: var(--sbk-color-error);
+  --color-sbk-error-subtle: var(--sbk-color-error-subtle);
+  --color-sbk-info: var(--sbk-color-info);
+  --color-sbk-info-subtle: var(--sbk-color-info-subtle);
+  --color-sbk-on-state: var(--sbk-color-on-state);
+  --color-sbk-success-fg: var(--sbk-color-success-fg);
+  --color-sbk-warning-fg: var(--sbk-color-warning-fg);
+  --color-sbk-error-fg: var(--sbk-color-error-fg);
+  --color-sbk-info-fg: var(--sbk-color-info-fg);
+
+  /* Tipografia */
+  --font-sbk: var(--sbk-font-family);
+
+  /* Raio e sombra */
+  --radius-sbk-xs: var(--sbk-radius-xs);
+  --radius-sbk-sm: var(--sbk-radius-sm);
+  --radius-sbk-md: var(--sbk-radius-md);
+  --radius-sbk-lg: var(--sbk-radius-lg);
+  --shadow-sbk-sm: var(--sbk-shadow-sm);
+  --shadow-sbk-md: var(--sbk-shadow-md);
+  --shadow-sbk-glass: var(--sbk-glass-shadow);
+}
+
+/* Animações */
+@theme {
+  --animate-sbk-indeterminate: sbk-indeterminate 1.4s var(--sbk-easing-standard) infinite;
+  --animate-sbk-fade-in: sbk-fade-in var(--sbk-duration-normal) var(--sbk-easing-standard);
+  --animate-sbk-scale-in: sbk-scale-in var(--sbk-duration-normal) var(--sbk-easing-standard);
+
+  @keyframes sbk-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(250%);
+    }
+  }
+  @keyframes sbk-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes sbk-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+/* Superfície Liquid Glass */
+@utility sbk-glass {
+  background-color: var(--sbk-glass-bg);
+  background-image:
+    linear-gradient(
+      160deg,
+      color-mix(in srgb, var(--sbk-glass-highlight) 40%, transparent) 0%,
+      transparent 45%
+    ),
+    linear-gradient(var(--sbk-glass-tint), var(--sbk-glass-tint));
+  -webkit-backdrop-filter: blur(var(--sbk-glass-blur)) saturate(var(--sbk-glass-saturate));
+  backdrop-filter: blur(var(--sbk-glass-blur)) saturate(var(--sbk-glass-saturate));
+  border: 1px solid var(--sbk-glass-border);
+  box-shadow:
+    inset 0 1px 0 var(--sbk-glass-highlight),
+    inset 0 -1px 0 color-mix(in srgb, var(--sbk-glass-highlight) 30%, transparent),
+    var(--sbk-glass-shadow);
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    background-color: var(--sbk-glass-fallback);
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    background-color: var(--sbk-glass-fallback);
+    background-image: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  @media (forced-colors: active) {
+    border-color: CanvasText;
+  }
+}
+
+@utility sbk-glass-strong {
+  background-color: var(--sbk-glass-bg-strong);
+}
+
+/* Anel de foco padrão da lib */
+@utility sbk-focus-ring {
+  outline: 2px solid var(--sbk-color-focus);
+  outline-offset: 2px;
+}

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\n/** Tema efetivamente aplicado. */\nexport type Theme = 'light' | 'dark';\n/** Preferência do usuário: `system` segue prefers-color-scheme. */\nexport type ThemePreference = Theme | 'system';\n/** `sbk-ia`: produto digital (padrão). `sbk`: institucional (marca-mãe). */\nexport type Brand = 'sbk-ia' | 'sbk';\n\ninterface ThemeContextType {\n  brand: Brand;\n  /** Preferência escolhida (pode ser `system`). */\n  preference: ThemePreference;\n  setBrand: (brand: Brand) => void;\n  setTheme: (preference: ThemePreference) => void;\n  /** Tema efetivo (`light` ou `dark`), já resolvido quando a preferência é `system`. */\n  theme: Theme;\n  toggleTheme: () => void;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nexport const useTheme = (): ThemeContextType => {\n  const context = useContext(ThemeContext);\n  if (!context) throw new Error('useTheme deve ser usado dentro de ThemeProvider');\n  return context;\n};\n\nexport interface ThemeProviderProps {\n  children: ReactNode;\n  defaultBrand?: Brand;\n  defaultTheme?: ThemePreference;\n  /** Chave no localStorage. `null` desativa a persistência. Padrão: \"theme\". */\n  storageKey?: string | null;\n}\n\nconst readStorage = (key: string | null): ThemePreference | null => {\n  if (!key || typeof window === 'undefined') return null;\n  try {\n    const value = window.localStorage.getItem(key);\n    return value === 'light' || value === 'dark' || value === 'system' ? value : null;\n  } catch {\n    return null;\n  }\n};\n\nconst systemTheme = (): Theme =>\n  typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches\n    ? 'dark'\n    : 'light';\n\n/**\n * Aplica `data-theme` e `data-brand` no <html>. Os tokens da lib reagem a esses atributos.\n * Para evitar flash no primeiro paint em SSR, defina os atributos no HTML inicial.\n */\nexport const ThemeProvider = ({\n  children,\n  defaultTheme = 'light',\n  defaultBrand = 'sbk-ia',\n  storageKey = 'theme',\n}: ThemeProviderProps) => {\n  const [preference, setPreference] = useState<ThemePreference>(\n    () => readStorage(storageKey) ?? defaultTheme,\n  );\n  const [brand, setBrand] = useState<Brand>(defaultBrand);\n  const [system, setSystem] = useState<Theme>(systemTheme);\n  const theme: Theme = preference === 'system' ? system : preference;\n\n  useEffect(() => {\n    if (preference !== 'system' || typeof window === 'undefined' || !window.matchMedia) return;\n    const mql = window.matchMedia('(prefers-color-scheme: dark)');\n    const onChange = () => setSystem(mql.matches ? 'dark' : 'light');\n    onChange();\n    mql.addEventListener?.('change', onChange);\n    return () => mql.removeEventListener?.('change', onChange);\n  }, [preference]);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    root.setAttribute('data-theme', theme);\n    root.style.colorScheme = theme;\n  }, [theme]);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    if (brand === 'sbk') root.setAttribute('data-brand', 'sbk');\n    else root.removeAttribute('data-brand');\n  }, [brand]);\n\n  useEffect(() => {\n    if (!storageKey) return;\n    try {\n      window.localStorage.setItem(storageKey, preference);\n    } catch {\n      /* armazenamento indisponível (modo privado): ignora */\n    }\n  }, [preference, storageKey]);\n\n  const toggleTheme = useCallback(\n    () => setPreference(theme === 'dark' ? 'light' : 'dark'),\n    [theme],\n  );\n\n  const value = useMemo(\n    () => ({ theme, preference, setTheme: setPreference, toggleTheme, brand, setBrand }),\n    [theme, preference, toggleTheme, brand],\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n};\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","readStorage","key","value","systemTheme","_a","ThemeProvider","children","defaultTheme","defaultBrand","storageKey","preference","setPreference","useState","brand","setBrand","system","setSystem","theme","useEffect","mql","onChange","root","toggleTheme","useCallback","useMemo","jsx"],"mappings":";;AA4BA,MAAMA,IAAeC,EAA4C,MAAS,GAE7DC,IAAW,MAAwB;AAC9C,QAAMC,IAAUC,EAAWJ,CAAY;AACvC,MAAI,CAACG,EAAS,OAAM,IAAI,MAAM,iDAAiD;AAC/E,SAAOA;AACT,GAUME,IAAc,CAACC,MAA+C;AAClE,MAAI,CAACA,KAAO,OAAO,SAAW,IAAa,QAAO;AAClD,MAAI;AACF,UAAMC,IAAQ,OAAO,aAAa,QAAQD,CAAG;AAC7C,WAAOC,MAAU,WAAWA,MAAU,UAAUA,MAAU,WAAWA,IAAQ;AAAA,EAC/E,QAAQ;AACN,WAAO;AAAA,EACT;AACF,GAEMC,IAAc,MAAA;;AAClB,gBAAO,SAAW,SAAeC,IAAA,OAAO,eAAP,QAAAA,EAAA,aAAoB,gCAAgC,WACjF,SACA;AAAA,GAMOC,IAAgB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,YAAAC,IAAa;AACf,MAA0B;AACxB,QAAM,CAACC,GAAYC,CAAa,IAAIC;AAAA,IAClC,MAAMZ,EAAYS,CAAU,KAAKF;AAAA,EAAA,GAE7B,CAACM,GAAOC,CAAQ,IAAIF,EAAgBJ,CAAY,GAChD,CAACO,GAAQC,CAAS,IAAIJ,EAAgBT,CAAW,GACjDc,IAAeP,MAAe,WAAWK,IAASL;AAExD,EAAAQ,EAAU,MAAM;;AACd,QAAIR,MAAe,YAAY,OAAO,SAAW,OAAe,CAAC,OAAO,WAAY;AACpF,UAAMS,IAAM,OAAO,WAAW,8BAA8B,GACtDC,IAAW,MAAMJ,EAAUG,EAAI,UAAU,SAAS,OAAO;AAC/D,WAAAC,EAAA,IACAhB,IAAAe,EAAI,qBAAJ,QAAAf,EAAA,KAAAe,GAAuB,UAAUC,IAC1B;;AAAM,cAAAhB,IAAAe,EAAI,wBAAJ,gBAAAf,EAAA,KAAAe,GAA0B,UAAUC;AAAA;AAAA,EACnD,GAAG,CAACV,CAAU,CAAC,GAEfQ,EAAU,MAAM;AACd,UAAMG,IAAO,SAAS;AACtB,IAAAA,EAAK,aAAa,cAAcJ,CAAK,GACrCI,EAAK,MAAM,cAAcJ;AAAA,EAC3B,GAAG,CAACA,CAAK,CAAC,GAEVC,EAAU,MAAM;AACd,UAAMG,IAAO,SAAS;AACtB,IAAIR,MAAU,QAAOQ,EAAK,aAAa,cAAc,KAAK,IACrDA,EAAK,gBAAgB,YAAY;AAAA,EACxC,GAAG,CAACR,CAAK,CAAC,GAEVK,EAAU,MAAM;AACd,QAAKT;AACL,UAAI;AACF,eAAO,aAAa,QAAQA,GAAYC,CAAU;AAAA,MACpD,QAAQ;AAAA,MAER;AAAA,EACF,GAAG,CAACA,GAAYD,CAAU,CAAC;AAE3B,QAAMa,IAAcC;AAAA,IAClB,MAAMZ,EAAcM,MAAU,SAAS,UAAU,MAAM;AAAA,IACvD,CAACA,CAAK;AAAA,EAAA,GAGFf,IAAQsB;AAAA,IACZ,OAAO,EAAE,OAAAP,GAAO,YAAAP,GAAY,UAAUC,GAAe,aAAAW,GAAa,OAAAT,GAAO,UAAAC;IACzE,CAACG,GAAOP,GAAYY,GAAaT,CAAK;AAAA,EAAA;AAGxC,SAAO,gBAAAY,EAAC9B,EAAa,UAAb,EAAsB,OAAAO,GAAe,UAAAI,EAAA,CAAS;AACxD;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import {\r\n  createContext,\r\n  type ReactNode,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useState,\r\n} from 'react';\r\n\r\n/** Tema efetivamente aplicado. */\r\nexport type Theme = 'light' | 'dark';\r\n/** Preferência do usuário: `system` segue prefers-color-scheme. */\r\nexport type ThemePreference = Theme | 'system';\r\n/** `sbk-ia`: produto digital (padrão). `sbk`: institucional (marca-mãe). */\r\nexport type Brand = 'sbk-ia' | 'sbk';\r\n\r\ninterface ThemeContextType {\r\n  brand: Brand;\r\n  /** Preferência escolhida (pode ser `system`). */\r\n  preference: ThemePreference;\r\n  setBrand: (brand: Brand) => void;\r\n  setTheme: (preference: ThemePreference) => void;\r\n  /** Tema efetivo (`light` ou `dark`), já resolvido quando a preferência é `system`. */\r\n  theme: Theme;\r\n  toggleTheme: () => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\r\n\r\nexport const useTheme = (): ThemeContextType => {\r\n  const context = useContext(ThemeContext);\r\n  if (!context) throw new Error('useTheme deve ser usado dentro de ThemeProvider');\r\n  return context;\r\n};\r\n\r\nexport interface ThemeProviderProps {\r\n  children: ReactNode;\r\n  defaultBrand?: Brand;\r\n  defaultTheme?: ThemePreference;\r\n  /** Chave no localStorage. `null` desativa a persistência. Padrão: \"theme\". */\r\n  storageKey?: string | null;\r\n}\r\n\r\nconst readStorage = (key: string | null): ThemePreference | null => {\r\n  if (!key || typeof window === 'undefined') return null;\r\n  try {\r\n    const value = window.localStorage.getItem(key);\r\n    return value === 'light' || value === 'dark' || value === 'system' ? value : null;\r\n  } catch {\r\n    return null;\r\n  }\r\n};\r\n\r\nconst systemTheme = (): Theme =>\r\n  typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches\r\n    ? 'dark'\r\n    : 'light';\r\n\r\n/**\r\n * Aplica `data-theme` e `data-brand` no <html>. Os tokens da lib reagem a esses atributos.\r\n * Para evitar flash no primeiro paint em SSR, defina os atributos no HTML inicial.\r\n */\r\nexport const ThemeProvider = ({\r\n  children,\r\n  defaultTheme = 'light',\r\n  defaultBrand = 'sbk-ia',\r\n  storageKey = 'theme',\r\n}: ThemeProviderProps) => {\r\n  const [preference, setPreference] = useState<ThemePreference>(\r\n    () => readStorage(storageKey) ?? defaultTheme,\r\n  );\r\n  const [brand, setBrand] = useState<Brand>(defaultBrand);\r\n  const [system, setSystem] = useState<Theme>(systemTheme);\r\n  const theme: Theme = preference === 'system' ? system : preference;\r\n\r\n  useEffect(() => {\r\n    if (preference !== 'system' || typeof window === 'undefined' || !window.matchMedia) return;\r\n    const mql = window.matchMedia('(prefers-color-scheme: dark)');\r\n    const onChange = () => setSystem(mql.matches ? 'dark' : 'light');\r\n    onChange();\r\n    mql.addEventListener?.('change', onChange);\r\n    return () => mql.removeEventListener?.('change', onChange);\r\n  }, [preference]);\r\n\r\n  useEffect(() => {\r\n    const root = document.documentElement;\r\n    root.setAttribute('data-theme', theme);\r\n    root.style.colorScheme = theme;\r\n  }, [theme]);\r\n\r\n  useEffect(() => {\r\n    const root = document.documentElement;\r\n    if (brand === 'sbk') root.setAttribute('data-brand', 'sbk');\r\n    else root.removeAttribute('data-brand');\r\n  }, [brand]);\r\n\r\n  useEffect(() => {\r\n    if (!storageKey) return;\r\n    try {\r\n      window.localStorage.setItem(storageKey, preference);\r\n    } catch {\r\n      /* armazenamento indisponível (modo privado): ignora */\r\n    }\r\n  }, [preference, storageKey]);\r\n\r\n  const toggleTheme = useCallback(\r\n    () => setPreference(theme === 'dark' ? 'light' : 'dark'),\r\n    [theme],\r\n  );\r\n\r\n  const value = useMemo(\r\n    () => ({ theme, preference, setTheme: setPreference, toggleTheme, brand, setBrand }),\r\n    [theme, preference, toggleTheme, brand],\r\n  );\r\n\r\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\r\n};\r\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","readStorage","key","value","systemTheme","_a","ThemeProvider","children","defaultTheme","defaultBrand","storageKey","preference","setPreference","useState","brand","setBrand","system","setSystem","theme","useEffect","mql","onChange","root","toggleTheme","useCallback","useMemo","jsx"],"mappings":";;AA4BA,MAAMA,IAAeC,EAA4C,MAAS,GAE7DC,IAAW,MAAwB;AAC9C,QAAMC,IAAUC,EAAWJ,CAAY;AACvC,MAAI,CAACG,EAAS,OAAM,IAAI,MAAM,iDAAiD;AAC/E,SAAOA;AACT,GAUME,IAAc,CAACC,MAA+C;AAClE,MAAI,CAACA,KAAO,OAAO,SAAW,IAAa,QAAO;AAClD,MAAI;AACF,UAAMC,IAAQ,OAAO,aAAa,QAAQD,CAAG;AAC7C,WAAOC,MAAU,WAAWA,MAAU,UAAUA,MAAU,WAAWA,IAAQ;AAAA,EAC/E,QAAQ;AACN,WAAO;AAAA,EACT;AACF,GAEMC,IAAc,MAAA;;AAClB,gBAAO,SAAW,SAAeC,IAAA,OAAO,eAAP,QAAAA,EAAA,aAAoB,gCAAgC,WACjF,SACA;AAAA,GAMOC,IAAgB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,YAAAC,IAAa;AACf,MAA0B;AACxB,QAAM,CAACC,GAAYC,CAAa,IAAIC;AAAA,IAClC,MAAMZ,EAAYS,CAAU,KAAKF;AAAA,EAAA,GAE7B,CAACM,GAAOC,CAAQ,IAAIF,EAAgBJ,CAAY,GAChD,CAACO,GAAQC,CAAS,IAAIJ,EAAgBT,CAAW,GACjDc,IAAeP,MAAe,WAAWK,IAASL;AAExD,EAAAQ,EAAU,MAAM;;AACd,QAAIR,MAAe,YAAY,OAAO,SAAW,OAAe,CAAC,OAAO,WAAY;AACpF,UAAMS,IAAM,OAAO,WAAW,8BAA8B,GACtDC,IAAW,MAAMJ,EAAUG,EAAI,UAAU,SAAS,OAAO;AAC/D,WAAAC,EAAA,IACAhB,IAAAe,EAAI,qBAAJ,QAAAf,EAAA,KAAAe,GAAuB,UAAUC,IAC1B;;AAAM,cAAAhB,IAAAe,EAAI,wBAAJ,gBAAAf,EAAA,KAAAe,GAA0B,UAAUC;AAAA;AAAA,EACnD,GAAG,CAACV,CAAU,CAAC,GAEfQ,EAAU,MAAM;AACd,UAAMG,IAAO,SAAS;AACtB,IAAAA,EAAK,aAAa,cAAcJ,CAAK,GACrCI,EAAK,MAAM,cAAcJ;AAAA,EAC3B,GAAG,CAACA,CAAK,CAAC,GAEVC,EAAU,MAAM;AACd,UAAMG,IAAO,SAAS;AACtB,IAAIR,MAAU,QAAOQ,EAAK,aAAa,cAAc,KAAK,IACrDA,EAAK,gBAAgB,YAAY;AAAA,EACxC,GAAG,CAACR,CAAK,CAAC,GAEVK,EAAU,MAAM;AACd,QAAKT;AACL,UAAI;AACF,eAAO,aAAa,QAAQA,GAAYC,CAAU;AAAA,MACpD,QAAQ;AAAA,MAER;AAAA,EACF,GAAG,CAACA,GAAYD,CAAU,CAAC;AAE3B,QAAMa,IAAcC;AAAA,IAClB,MAAMZ,EAAcM,MAAU,SAAS,UAAU,MAAM;AAAA,IACvD,CAACA,CAAK;AAAA,EAAA,GAGFf,IAAQsB;AAAA,IACZ,OAAO,EAAE,OAAAP,GAAO,YAAAP,GAAY,UAAUC,GAAe,aAAAW,GAAa,OAAAT,GAAO,UAAAC;IACzE,CAACG,GAAOP,GAAYY,GAAaT,CAAK;AAAA,EAAA;AAGxC,SAAO,gBAAAY,EAAC9B,EAAa,UAAb,EAAsB,OAAAO,GAAe,UAAAI,EAAA,CAAS;AACxD;"}

package/dist/theme/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../src/theme/tokens.ts"],"sourcesContent":["/**\n * Tokens da marca SBK (Brand Book 2026) para uso em JS/TS:\n * gráficos, canvas, e-mails, geração de PDF ou qualquer lugar sem CSS custom properties.\n * Em componentes React prefira as classes/variáveis CSS, que reagem a tema e marca.\n */\nexport const sbkTokens = {\n  color: {\n    verdeEscuro: '#023631',\n    cianoEscuro: '#075056',\n    offWhite: '#ECEFF3',\n    verdeClaro: '#0A5A52',\n    verdeProfundo: '#012824',\n    ciano: '#2A7C79',\n    cianoProfundo: '#0E4442',\n    chumboLeve: '#4A545E',\n    preto: '#000000',\n    branco: '#FFFFFF',\n  },\n  /** Proposta pendente de aprovação da marca. */\n  state: {\n    sucesso: '#1D6B43',\n    alerta: '#B45309',\n    erro: '#B42318',\n    info: '#075056',\n  },\n  font: {\n    family: '\"Plus Jakarta Sans\", Calibri, system-ui, sans-serif',\n    weight: { heading: 600, body: 300 },\n  },\n  radius: { xs: 4, sm: 8, md: 12, lg: 16 },\n  cardLayerOpacity: [0.9, 0.75, 0.6],\n} as const;\n\n/** Paleta ordenada para séries de gráficos (do mais escuro ao mais claro, dentro do espectro verde/ciano). */\nexport const sbkChartPalette = [\n  sbkTokens.color.verdeEscuro,\n  sbkTokens.color.ciano,\n  sbkTokens.color.cianoEscuro,\n  sbkTokens.color.verdeClaro,\n  sbkTokens.color.chumboLeve,\n  sbkTokens.color.cianoProfundo,\n] as const;\n\nexport type SbkTokens = typeof sbkTokens;\n"],"names":["sbkTokens","sbkChartPalette"],"mappings":"AAKO,MAAMA,IAAY;AAAA,EACvB,OAAO;AAAA,IACL,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA;AAAA,EAGV,OAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ,EAAE,SAAS,KAAK,MAAM,IAAA;AAAA,EAAI;AAAA,EAEpC,QAAQ,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI,IAAI,GAAA;AAAA,EACpC,kBAAkB,CAAC,KAAK,MAAM,GAAG;AACnC,GAGaC,IAAkB;AAAA,EAC7BD,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAClB;"}
+{"version":3,"file":"tokens.js","sources":["../../src/theme/tokens.ts"],"sourcesContent":["/**\r\n * Tokens da marca SBK (Brand Book 2026) para uso em JS/TS:\r\n * gráficos, canvas, e-mails, geração de PDF ou qualquer lugar sem CSS custom properties.\r\n * Em componentes React prefira as classes/variáveis CSS, que reagem a tema e marca.\r\n */\r\nexport const sbkTokens = {\r\n  color: {\r\n    verdeEscuro: '#023631',\r\n    cianoEscuro: '#075056',\r\n    offWhite: '#ECEFF3',\r\n    verdeClaro: '#0A5A52',\r\n    verdeProfundo: '#012824',\r\n    ciano: '#2A7C79',\r\n    cianoProfundo: '#0E4442',\r\n    chumboLeve: '#4A545E',\r\n    preto: '#000000',\r\n    branco: '#FFFFFF',\r\n  },\r\n  /** Proposta pendente de aprovação da marca. */\r\n  state: {\r\n    sucesso: '#1D6B43',\r\n    alerta: '#B45309',\r\n    erro: '#B42318',\r\n    info: '#075056',\r\n  },\r\n  font: {\r\n    family: '\"Plus Jakarta Sans\", Calibri, system-ui, sans-serif',\r\n    weight: { heading: 600, body: 300 },\r\n  },\r\n  radius: { xs: 4, sm: 8, md: 12, lg: 16 },\r\n  cardLayerOpacity: [0.9, 0.75, 0.6],\r\n} as const;\r\n\r\n/** Paleta ordenada para séries de gráficos (do mais escuro ao mais claro, dentro do espectro verde/ciano). */\r\nexport const sbkChartPalette = [\r\n  sbkTokens.color.verdeEscuro,\r\n  sbkTokens.color.ciano,\r\n  sbkTokens.color.cianoEscuro,\r\n  sbkTokens.color.verdeClaro,\r\n  sbkTokens.color.chumboLeve,\r\n  sbkTokens.color.cianoProfundo,\r\n] as const;\r\n\r\nexport type SbkTokens = typeof sbkTokens;\r\n"],"names":["sbkTokens","sbkChartPalette"],"mappings":"AAKO,MAAMA,IAAY;AAAA,EACvB,OAAO;AAAA,IACL,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA;AAAA,EAGV,OAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ,EAAE,SAAS,KAAK,MAAM,IAAA;AAAA,EAAI;AAAA,EAEpC,QAAQ,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI,IAAI,GAAA;AAAA,EACpC,kBAAkB,CAAC,KAAK,MAAM,GAAG;AACnC,GAGaC,IAAkB;AAAA,EAC7BD,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAAA,EAChBA,EAAU,MAAM;AAClB;"}