@sbkbs/ui 1.0.6 → 2.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. package/CHANGELOG.md +57 -0
  2. package/MIGRATION.md +96 -0
  3. package/README.md +221 -115
  4. package/dist/assets/favicon/apple-touch-icon.png +0 -0
  5. package/dist/assets/favicon/favicon-96x96.png +0 -0
  6. package/dist/assets/favicon/favicon.ico +0 -0
  7. package/dist/assets/favicon/favicon.svg +1 -0
  8. package/dist/assets/favicon/site.webmanifest +21 -0
  9. package/dist/assets/favicon/web-app-manifest-192x192.png +0 -0
  10. package/dist/assets/favicon/web-app-manifest-512x512.png +0 -0
  11. package/dist/base.css +38 -0
  12. package/dist/components/Accordion/Accordion.d.ts +13 -1
  13. package/dist/components/Accordion/Accordion.js +100 -52
  14. package/dist/components/Accordion/Accordion.js.map +1 -1
  15. package/dist/components/Alert/Alert.d.ts +17 -4
  16. package/dist/components/Alert/Alert.js +64 -20
  17. package/dist/components/Alert/Alert.js.map +1 -1
  18. package/dist/components/Avatar/Avatar.d.ts +12 -6
  19. package/dist/components/Avatar/Avatar.js +66 -0
  20. package/dist/components/Avatar/Avatar.js.map +1 -0
  21. package/dist/components/Badge/Badge.d.ts +11 -2
  22. package/dist/components/Badge/Badge.js +42 -30
  23. package/dist/components/Badge/Badge.js.map +1 -1
  24. package/dist/components/Breadcrumb/Breadcrumb.d.ts +5 -2
  25. package/dist/components/Breadcrumb/Breadcrumb.js +23 -16
  26. package/dist/components/Breadcrumb/Breadcrumb.js.map +1 -1
  27. package/dist/components/Button/Button.d.ts +10 -8
  28. package/dist/components/Button/Button.js +73 -114
  29. package/dist/components/Button/Button.js.map +1 -1
  30. package/dist/components/Card/Card.d.ts +33 -3
  31. package/dist/components/Card/Card.js +91 -30
  32. package/dist/components/Card/Card.js.map +1 -1
  33. package/dist/components/Checkbox/Checkbox.d.ts +4 -1
  34. package/dist/components/Checkbox/Checkbox.js +32 -31
  35. package/dist/components/Checkbox/Checkbox.js.map +1 -1
  36. package/dist/components/Chip/Chip.d.ts +7 -1
  37. package/dist/components/Chip/Chip.js +19 -9
  38. package/dist/components/Chip/Chip.js.map +1 -1
  39. package/dist/components/Combobox/Combobox.d.ts +10 -2
  40. package/dist/components/Combobox/Combobox.js +146 -133
  41. package/dist/components/Combobox/Combobox.js.map +1 -1
  42. package/dist/components/Divider/Divider.d.ts +7 -1
  43. package/dist/components/Divider/Divider.js +28 -12
  44. package/dist/components/Divider/Divider.js.map +1 -1
  45. package/dist/components/DropdownMenu/DropdownMenu.d.ts +33 -0
  46. package/dist/components/DropdownMenu/DropdownMenu.js +147 -0
  47. package/dist/components/DropdownMenu/DropdownMenu.js.map +1 -0
  48. package/dist/components/EmptyState/EmptyState.d.ts +7 -1
  49. package/dist/components/EmptyState/EmptyState.js +28 -19
  50. package/dist/components/EmptyState/EmptyState.js.map +1 -1
  51. package/dist/components/Field/Field.d.ts +21 -0
  52. package/dist/components/Field/Field.js +35 -0
  53. package/dist/components/Field/Field.js.map +1 -0
  54. package/dist/components/FileUpload/FileUpload.d.ts +9 -2
  55. package/dist/components/FileUpload/FileUpload.js +128 -102
  56. package/dist/components/FileUpload/FileUpload.js.map +1 -1
  57. package/dist/components/Footer/Footer.d.ts +19 -6
  58. package/dist/components/Footer/Footer.js +47 -115
  59. package/dist/components/Footer/Footer.js.map +1 -1
  60. package/dist/components/GlassPanel/GlassPanel.d.ts +18 -0
  61. package/dist/components/GlassPanel/GlassPanel.js +39 -0
  62. package/dist/components/GlassPanel/GlassPanel.js.map +1 -0
  63. package/dist/components/Header/Header.d.ts +25 -14
  64. package/dist/components/Header/Header.js +88 -148
  65. package/dist/components/Header/Header.js.map +1 -1
  66. package/dist/components/Highlight/Highlight.d.ts +13 -0
  67. package/dist/components/Highlight/Highlight.js +18 -0
  68. package/dist/components/Highlight/Highlight.js.map +1 -0
  69. package/dist/components/Icon/Icon.d.ts +21 -0
  70. package/dist/components/Icon/Icon.js +31 -0
  71. package/dist/components/Icon/Icon.js.map +1 -0
  72. package/dist/components/IconButton/IconButton.d.ts +12 -0
  73. package/dist/components/IconButton/IconButton.js +49 -0
  74. package/dist/components/IconButton/IconButton.js.map +1 -0
  75. package/dist/components/Input/Input.d.ts +3 -2
  76. package/dist/components/Input/Input.js +51 -69
  77. package/dist/components/Input/Input.js.map +1 -1
  78. package/dist/components/Layout/Layout.d.ts +2 -0
  79. package/dist/components/Layout/Layout.js +24 -18
  80. package/dist/components/Layout/Layout.js.map +1 -1
  81. package/dist/components/Logo/Logo.d.ts +27 -0
  82. package/dist/components/Logo/Logo.js +107 -0
  83. package/dist/components/Logo/Logo.js.map +1 -0
  84. package/dist/components/MiniCard/MiniCard.d.ts +21 -0
  85. package/dist/components/MiniCard/MiniCard.js +90 -0
  86. package/dist/components/MiniCard/MiniCard.js.map +1 -0
  87. package/dist/components/Modal/Modal.d.ts +16 -3
  88. package/dist/components/Modal/Modal.js +124 -93
  89. package/dist/components/Modal/Modal.js.map +1 -1
  90. package/dist/components/Navigation/Navigation.d.ts +1 -0
  91. package/dist/components/Navigation/Navigation.js +14 -14
  92. package/dist/components/Navigation/Navigation.js.map +1 -1
  93. package/dist/components/NumberInput/NumberInput.d.ts +5 -2
  94. package/dist/components/NumberInput/NumberInput.js +98 -128
  95. package/dist/components/NumberInput/NumberInput.js.map +1 -1
  96. package/dist/components/PageHeader/PageHeader.d.ts +8 -1
  97. package/dist/components/PageHeader/PageHeader.js +26 -25
  98. package/dist/components/PageHeader/PageHeader.js.map +1 -1
  99. package/dist/components/Pagination/Pagination.d.ts +15 -2
  100. package/dist/components/Pagination/Pagination.js +68 -34
  101. package/dist/components/Pagination/Pagination.js.map +1 -1
  102. package/dist/components/Paragraph/Paragraph.d.ts +8 -2
  103. package/dist/components/Paragraph/Paragraph.js +39 -36
  104. package/dist/components/Paragraph/Paragraph.js.map +1 -1
  105. package/dist/components/Popover/Popover.d.ts +12 -1
  106. package/dist/components/Popover/Popover.js +49 -37
  107. package/dist/components/Popover/Popover.js.map +1 -1
  108. package/dist/components/ProgressBar/ProgressBar.d.ts +12 -6
  109. package/dist/components/ProgressBar/ProgressBar.js +71 -0
  110. package/dist/components/ProgressBar/ProgressBar.js.map +1 -0
  111. package/dist/components/Radio/Radio.d.ts +2 -1
  112. package/dist/components/Radio/Radio.js +27 -31
  113. package/dist/components/Radio/Radio.js.map +1 -1
  114. package/dist/components/SectionHeader/SectionHeader.d.ts +6 -1
  115. package/dist/components/SectionHeader/SectionHeader.js +14 -12
  116. package/dist/components/SectionHeader/SectionHeader.js.map +1 -1
  117. package/dist/components/Select/Select.d.ts +6 -2
  118. package/dist/components/Select/Select.js +47 -35
  119. package/dist/components/Select/Select.js.map +1 -1
  120. package/dist/components/SideNav/SideNav.d.ts +55 -0
  121. package/dist/components/SideNav/SideNav.js +141 -0
  122. package/dist/components/SideNav/SideNav.js.map +1 -0
  123. package/dist/components/Skeleton/Skeleton.d.ts +12 -1
  124. package/dist/components/Skeleton/Skeleton.js +33 -18
  125. package/dist/components/Skeleton/Skeleton.js.map +1 -1
  126. package/dist/components/Spinner/Spinner.d.ts +11 -3
  127. package/dist/components/Spinner/Spinner.js +57 -0
  128. package/dist/components/Spinner/Spinner.js.map +1 -0
  129. package/dist/components/Stepper/Stepper.d.ts +1 -1
  130. package/dist/components/Stepper/Stepper.js +41 -53
  131. package/dist/components/Stepper/Stepper.js.map +1 -1
  132. package/dist/components/Subtitle/Subtitle.d.ts +9 -3
  133. package/dist/components/Subtitle/Subtitle.js +29 -35
  134. package/dist/components/Subtitle/Subtitle.js.map +1 -1
  135. package/dist/components/Switch/Switch.d.ts +2 -1
  136. package/dist/components/Switch/Switch.js +45 -33
  137. package/dist/components/Switch/Switch.js.map +1 -1
  138. package/dist/components/Table/Table.d.ts +19 -1
  139. package/dist/components/Table/Table.js +48 -11
  140. package/dist/components/Table/Table.js.map +1 -1
  141. package/dist/components/Tabs/Tabs.d.ts +16 -2
  142. package/dist/components/Tabs/Tabs.js +80 -44
  143. package/dist/components/Tabs/Tabs.js.map +1 -1
  144. package/dist/components/Tag/Tag.d.ts +8 -1
  145. package/dist/components/Tag/Tag.js +27 -12
  146. package/dist/components/Tag/Tag.js.map +1 -1
  147. package/dist/components/Textarea/Textarea.d.ts +3 -1
  148. package/dist/components/Textarea/Textarea.js +36 -40
  149. package/dist/components/Textarea/Textarea.js.map +1 -1
  150. package/dist/components/Title/Title.d.ts +9 -3
  151. package/dist/components/Title/Title.js +42 -42
  152. package/dist/components/Title/Title.js.map +1 -1
  153. package/dist/components/Toast/Toast.d.ts +39 -11
  154. package/dist/components/Toast/Toast.js +130 -76
  155. package/dist/components/Toast/Toast.js.map +1 -1
  156. package/dist/components/Tooltip/Tooltip.d.ts +12 -2
  157. package/dist/components/Tooltip/Tooltip.js +50 -32
  158. package/dist/components/Tooltip/Tooltip.js.map +1 -1
  159. package/dist/components/Typography/weight.d.ts +9 -0
  160. package/dist/components/Typography/weight.js +5 -0
  161. package/dist/components/Typography/weight.js.map +1 -0
  162. package/dist/fonts.css +8 -0
  163. package/dist/index.cjs +2 -0
  164. package/dist/index.cjs.map +1 -0
  165. package/dist/index.d.ts +55 -43
  166. package/dist/index.js +118 -83
  167. package/dist/index.js.map +1 -1
  168. package/dist/reset.css +9 -0
  169. package/dist/styles.css +1 -0
  170. package/dist/tailwind.css +153 -0
  171. package/dist/theme/ThemeProvider.d.ts +21 -3
  172. package/dist/theme/ThemeProvider.js +57 -18
  173. package/dist/theme/ThemeProvider.js.map +1 -1
  174. package/dist/theme/tokens.d.ts +43 -0
  175. package/dist/theme/tokens.js +39 -0
  176. package/dist/theme/tokens.js.map +1 -0
  177. package/dist/theme.css +296 -263
  178. package/dist/tokens.css +327 -0
  179. package/dist/utils/cn.d.ts +2 -2
  180. package/dist/utils/cn.js +19 -4
  181. package/dist/utils/cn.js.map +1 -1
  182. package/dist/utils/styles.d.ts +37 -0
  183. package/dist/utils/styles.js +35 -0
  184. package/dist/utils/styles.js.map +1 -0
  185. package/package.json +140 -117
  186. package/dist/components/Accordion/Accordion.stories.d.ts +0 -7
  187. package/dist/components/Alert/Alert.stories.d.ts +0 -8
  188. package/dist/components/Badge/Badge.stories.d.ts +0 -8
  189. package/dist/components/Breadcrumb/Breadcrumb.stories.d.ts +0 -8
  190. package/dist/components/Button/Button.stories.d.ts +0 -7
  191. package/dist/components/Card/Card.stories.d.ts +0 -8
  192. package/dist/components/Checkbox/Checkbox.stories.d.ts +0 -7
  193. package/dist/components/Combobox/Combobox.stories.d.ts +0 -9
  194. package/dist/components/Feedback/Feedback.stories.d.ts +0 -5
  195. package/dist/components/FileUpload/FileUpload.stories.d.ts +0 -10
  196. package/dist/components/Input/Input.stories.d.ts +0 -9
  197. package/dist/components/Modal/Modal.stories.d.ts +0 -8
  198. package/dist/components/NumberInput/NumberInput.stories.d.ts +0 -8
  199. package/dist/components/Pagination/Pagination.stories.d.ts +0 -8
  200. package/dist/components/Radio/Radio.stories.d.ts +0 -7
  201. package/dist/components/Select/Select.stories.d.ts +0 -8
  202. package/dist/components/Stepper/Stepper.stories.d.ts +0 -8
  203. package/dist/components/Switch/Switch.stories.d.ts +0 -8
  204. package/dist/components/Tabs/Tabs.stories.d.ts +0 -8
  205. package/dist/components/Textarea/Textarea.stories.d.ts +0 -7
  206. package/dist/components/Toast/Toast.stories.d.ts +0 -8
  207. package/dist/oficios-ui.css +0 -1
  208. package/dist/oficios-ui.umd.cjs +0 -2
  209. package/dist/oficios-ui.umd.cjs.map +0 -1
  210. package/dist/sbk-icon.png +0 -0
package/dist/theme/ThemeProvider.d.ts CHANGED
@@ -1,13 +1,31 @@
1
1
  import { type ReactNode } from 'react';
2
+ /** Tema efetivamente aplicado. */
2
3
  export type Theme = 'light' | 'dark';
4
+ /** Preferência do usuário: `system` segue prefers-color-scheme. */
5
+ export type ThemePreference = Theme | 'system';
6
+ /** `sbk-ia`: produto digital (padrão). `sbk`: institucional (marca-mãe). */
7
+ export type Brand = 'sbk-ia' | 'sbk';
3
8
  interface ThemeContextType {
9
+ brand: Brand;
10
+ /** Preferência escolhida (pode ser `system`). */
11
+ preference: ThemePreference;
12
+ setBrand: (brand: Brand) => void;
13
+ setTheme: (preference: ThemePreference) => void;
14
+ /** Tema efetivo (`light` ou `dark`), já resolvido quando a preferência é `system`. */
4
15
  theme: Theme;
5
16
  toggleTheme: () => void;
6
17
  }
7
18
  export declare const useTheme: () => ThemeContextType;
8
- interface ThemeProviderProps {
19
+ export interface ThemeProviderProps {
9
20
  children: ReactNode;
10
- defaultTheme?: Theme;
21
+ defaultBrand?: Brand;
22
+ defaultTheme?: ThemePreference;
23
+ /** Chave no localStorage. `null` desativa a persistência. Padrão: "theme". */
24
+ storageKey?: string | null;
11
25
  }
12
- export declare const ThemeProvider: ({ children, defaultTheme }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
26
+ /**
27
+ * Aplica `data-theme` e `data-brand` no <html>. Os tokens da lib reagem a esses atributos.
28
+ * Para evitar flash no primeiro paint em SSR, defina os atributos no HTML inicial.
29
+ */
30
+ export declare const ThemeProvider: ({ children, defaultTheme, defaultBrand, storageKey, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
13
31
  export {};
package/dist/theme/ThemeProvider.js CHANGED
@@ -1,22 +1,61 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import { useState as d, useEffect as u, useContext as c, createContext as h } from "react";
3
- const n = h(void 0), f = () => {
4
- const e = c(n);
5
- if (!e)
6
- throw new Error("useTheme must be used within a ThemeProvider");
7
- return e;
8
- }, l = ({ children: e, defaultTheme: o = "light" }) => {
9
- const [t, i] = d(() => typeof window > "u" ? o : window.localStorage.getItem("theme") || o);
10
- u(() => {
11
- typeof window > "u" || (window.localStorage.setItem("theme", t), document.documentElement.setAttribute("data-theme", t));
12
- }, [t]);
13
- const m = () => {
14
- i((r) => r === "dark" ? "light" : "dark");
15
- };
16
- return /* @__PURE__ */ s(n.Provider, { value: { theme: t, toggleTheme: m }, children: e });
1
+ import { jsx as p } from "react/jsx-runtime";
2
+ import { useState as m, useEffect as d, useCallback as y, useMemo as T, useContext as x, createContext as E } from "react";
3
+ const f = E(void 0), A = () => {
4
+ const t = x(f);
5
+ if (!t) throw new Error("useTheme deve ser usado dentro de ThemeProvider");
6
+ return t;
7
+ }, S = (t) => {
8
+ if (!t || typeof window > "u") return null;
9
+ try {
10
+ const o = window.localStorage.getItem(t);
11
+ return o === "light" || o === "dark" || o === "system" ? o : null;
12
+ } catch {
13
+ return null;
14
+ }
15
+ }, C = () => {
16
+ var t;
17
+ return typeof window < "u" && ((t = window.matchMedia) != null && t.call(window, "(prefers-color-scheme: dark)").matches) ? "dark" : "light";
18
+ }, I = ({
19
+ children: t,
20
+ defaultTheme: o = "light",
21
+ defaultBrand: w = "sbk-ia",
22
+ storageKey: s = "theme"
23
+ }) => {
24
+ const [n, i] = m(
25
+ () => S(s) ?? o
26
+ ), [c, g] = m(w), [v, b] = m(C), r = n === "system" ? v : n;
27
+ d(() => {
28
+ var h;
29
+ if (n !== "system" || typeof window > "u" || !window.matchMedia) return;
30
+ const e = window.matchMedia("(prefers-color-scheme: dark)"), a = () => b(e.matches ? "dark" : "light");
31
+ return a(), (h = e.addEventListener) == null || h.call(e, "change", a), () => {
32
+ var l;
33
+ return (l = e.removeEventListener) == null ? void 0 : l.call(e, "change", a);
34
+ };
35
+ }, [n]), d(() => {
36
+ const e = document.documentElement;
37
+ e.setAttribute("data-theme", r), e.style.colorScheme = r;
38
+ }, [r]), d(() => {
39
+ const e = document.documentElement;
40
+ c === "sbk" ? e.setAttribute("data-brand", "sbk") : e.removeAttribute("data-brand");
41
+ }, [c]), d(() => {
42
+ if (s)
43
+ try {
44
+ window.localStorage.setItem(s, n);
45
+ } catch {
46
+ }
47
+ }, [n, s]);
48
+ const u = y(
49
+ () => i(r === "dark" ? "light" : "dark"),
50
+ [r]
51
+ ), k = T(
52
+ () => ({ theme: r, preference: n, setTheme: i, toggleTheme: u, brand: c, setBrand: g }),
53
+ [r, n, u, c]
54
+ );
55
+ return /* @__PURE__ */ p(f.Provider, { value: k, children: t });
17
56
  };
18
57
  export {
19
- l as ThemeProvider,
20
- f as useTheme
58
+ I as ThemeProvider,
59
+ A as useTheme
21
60
  };
22
61
  //# sourceMappingURL=ThemeProvider.js.map
package/dist/theme/ThemeProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useEffect, useState } from 'react';\n\nexport type Theme = 'light' | 'dark';\n\ninterface ThemeContextType {\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) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n};\n\ninterface ThemeProviderProps {\n children: ReactNode;\n defaultTheme?: Theme;\n}\n\nexport const ThemeProvider = ({ children, defaultTheme = 'light' }: ThemeProviderProps) => {\n const [theme, setTheme] = useState<Theme>(() => {\n if (typeof window === 'undefined') {\n return defaultTheme;\n }\n const saved = window.localStorage.getItem('theme');\n return (saved as Theme) || defaultTheme;\n });\n\n useEffect(() => {\n if (typeof window === 'undefined') {\n return;\n }\n window.localStorage.setItem('theme', theme);\n document.documentElement.setAttribute('data-theme', theme);\n }, [theme]);\n\n const toggleTheme = (): void => {\n setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));\n };\n\n return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;\n};\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","children","defaultTheme","theme","setTheme","useState","useEffect","toggleTheme","prev","jsx"],"mappings":";;AASA,MAAMA,IAAeC,EAA4C,MAAS,GAE7DC,IAAW,MAAwB;AAC9C,QAAMC,IAAUC,EAAWJ,CAAY;AACvC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAOA;AACT,GAOaE,IAAgB,CAAC,EAAE,UAAAC,GAAU,cAAAC,IAAe,cAAkC;AACzF,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAgB,MACpC,OAAO,SAAW,MACbH,IAEK,OAAO,aAAa,QAAQ,OAAO,KACtBA,CAC5B;AAED,EAAAI,EAAU,MAAM;AACd,IAAI,OAAO,SAAW,QAGtB,OAAO,aAAa,QAAQ,SAASH,CAAK,GAC1C,SAAS,gBAAgB,aAAa,cAAcA,CAAK;AAAA,EAC3D,GAAG,CAACA,CAAK,CAAC;AAEV,QAAMI,IAAc,MAAY;AAC9B,IAAAH,EAAS,CAACI,MAAUA,MAAS,SAAS,UAAU,MAAO;AAAA,EACzD;AAEA,SAAO,gBAAAC,EAACd,EAAa,UAAb,EAAsB,OAAO,EAAE,OAAAQ,GAAO,aAAAI,KAAgB,UAAAN,GAAS;AACzE;"}
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;"}
package/dist/theme/tokens.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Tokens da marca SBK (Brand Book 2026) para uso em JS/TS:
3
+ * gráficos, canvas, e-mails, geração de PDF ou qualquer lugar sem CSS custom properties.
4
+ * Em componentes React prefira as classes/variáveis CSS, que reagem a tema e marca.
5
+ */
6
+ export declare const sbkTokens: {
7
+ readonly color: {
8
+ readonly verdeEscuro: "#023631";
9
+ readonly cianoEscuro: "#075056";
10
+ readonly offWhite: "#ECEFF3";
11
+ readonly verdeClaro: "#0A5A52";
12
+ readonly verdeProfundo: "#012824";
13
+ readonly ciano: "#2A7C79";
14
+ readonly cianoProfundo: "#0E4442";
15
+ readonly chumboLeve: "#4A545E";
16
+ readonly preto: "#000000";
17
+ readonly branco: "#FFFFFF";
18
+ };
19
+ /** Proposta pendente de aprovação da marca. */
20
+ readonly state: {
21
+ readonly sucesso: "#1D6B43";
22
+ readonly alerta: "#B45309";
23
+ readonly erro: "#B42318";
24
+ readonly info: "#075056";
25
+ };
26
+ readonly font: {
27
+ readonly family: "\"Plus Jakarta Sans\", Calibri, system-ui, sans-serif";
28
+ readonly weight: {
29
+ readonly heading: 600;
30
+ readonly body: 300;
31
+ };
32
+ };
33
+ readonly radius: {
34
+ readonly xs: 4;
35
+ readonly sm: 8;
36
+ readonly md: 12;
37
+ readonly lg: 16;
38
+ };
39
+ readonly cardLayerOpacity: readonly [0.9, 0.75, 0.6];
40
+ };
41
+ /** Paleta ordenada para séries de gráficos (do mais escuro ao mais claro, dentro do espectro verde/ciano). */
42
+ export declare const sbkChartPalette: readonly ["#023631", "#2A7C79", "#075056", "#0A5A52", "#4A545E", "#0E4442"];
43
+ export type SbkTokens = typeof sbkTokens;
package/dist/theme/tokens.js ADDED
@@ -0,0 +1,39 @@
1
+ const o = {
2
+ color: {
3
+ verdeEscuro: "#023631",
4
+ cianoEscuro: "#075056",
5
+ offWhite: "#ECEFF3",
6
+ verdeClaro: "#0A5A52",
7
+ verdeProfundo: "#012824",
8
+ ciano: "#2A7C79",
9
+ cianoProfundo: "#0E4442",
10
+ chumboLeve: "#4A545E",
11
+ preto: "#000000",
12
+ branco: "#FFFFFF"
13
+ },
14
+ /** Proposta pendente de aprovação da marca. */
15
+ state: {
16
+ sucesso: "#1D6B43",
17
+ alerta: "#B45309",
18
+ erro: "#B42318",
19
+ info: "#075056"
20
+ },
21
+ font: {
22
+ family: '"Plus Jakarta Sans", Calibri, system-ui, sans-serif',
23
+ weight: { heading: 600, body: 300 }
24
+ },
25
+ radius: { xs: 4, sm: 8, md: 12, lg: 16 },
26
+ cardLayerOpacity: [0.9, 0.75, 0.6]
27
+ }, r = [
28
+ o.color.verdeEscuro,
29
+ o.color.ciano,
30
+ o.color.cianoEscuro,
31
+ o.color.verdeClaro,
32
+ o.color.chumboLeve,
33
+ o.color.cianoProfundo
34
+ ];
35
+ export {
36
+ r as sbkChartPalette,
37
+ o as sbkTokens
38
+ };
39
+ //# sourceMappingURL=tokens.js.map
package/dist/theme/tokens.js.map ADDED
@@ -0,0 +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;"}