@cloud-ru/ds-theme 1.0.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 (247) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/LICENSE +201 -0
  3. package/README.md +365 -0
  4. package/dist/cjs/components/ChildThemeProvider/ChildThemeProvider.d.ts +24 -0
  5. package/dist/cjs/components/ChildThemeProvider/ChildThemeProvider.js +25 -0
  6. package/dist/cjs/components/ChildThemeProvider/index.d.ts +1 -0
  7. package/dist/cjs/components/ChildThemeProvider/index.js +17 -0
  8. package/dist/cjs/components/RootThemeProvider/RootThemeProvider.d.ts +49 -0
  9. package/dist/cjs/components/RootThemeProvider/RootThemeProvider.js +30 -0
  10. package/dist/cjs/components/RootThemeProvider/index.d.ts +1 -0
  11. package/dist/cjs/components/RootThemeProvider/index.js +17 -0
  12. package/dist/cjs/components/ThemeProvider/ThemeProvider.d.ts +28 -0
  13. package/dist/cjs/components/ThemeProvider/ThemeProvider.js +16 -0
  14. package/dist/cjs/components/ThemeProvider/index.d.ts +1 -0
  15. package/dist/cjs/components/ThemeProvider/index.js +17 -0
  16. package/dist/cjs/components/ThemeScope/ThemeScope.d.ts +32 -0
  17. package/dist/cjs/components/ThemeScope/ThemeScope.js +65 -0
  18. package/dist/cjs/components/ThemeScope/index.d.ts +1 -0
  19. package/dist/cjs/components/ThemeScope/index.js +17 -0
  20. package/dist/cjs/components/index.d.ts +3 -0
  21. package/dist/cjs/components/index.js +19 -0
  22. package/dist/cjs/constants/appearance.d.ts +22 -0
  23. package/dist/cjs/constants/appearance.js +27 -0
  24. package/dist/cjs/constants/colorScheme.d.ts +17 -0
  25. package/dist/cjs/constants/colorScheme.js +23 -0
  26. package/dist/cjs/constants/index.d.ts +2 -0
  27. package/dist/cjs/constants/index.js +18 -0
  28. package/dist/cjs/context/appearanceContext.d.ts +20 -0
  29. package/dist/cjs/context/appearanceContext.js +22 -0
  30. package/dist/cjs/context/index.d.ts +4 -0
  31. package/dist/cjs/context/index.js +7 -0
  32. package/dist/cjs/context/themeContext.d.ts +12 -0
  33. package/dist/cjs/context/themeContext.js +15 -0
  34. package/dist/cjs/hooks/index.d.ts +4 -0
  35. package/dist/cjs/hooks/index.js +20 -0
  36. package/dist/cjs/hooks/useApplyCustomTheme.d.ts +27 -0
  37. package/dist/cjs/hooks/useApplyCustomTheme.js +39 -0
  38. package/dist/cjs/hooks/useColorScheme.d.ts +37 -0
  39. package/dist/cjs/hooks/useColorScheme.js +80 -0
  40. package/dist/cjs/hooks/useIsomorphicLayoutEffect.d.ts +7 -0
  41. package/dist/cjs/hooks/useIsomorphicLayoutEffect.js +16 -0
  42. package/dist/cjs/hooks/useThemeClassnames.d.ts +11 -0
  43. package/dist/cjs/hooks/useThemeClassnames.js +18 -0
  44. package/dist/cjs/hooks/useThemeConfig.d.ts +24 -0
  45. package/dist/cjs/hooks/useThemeConfig.js +15 -0
  46. package/dist/cjs/index.d.ts +7 -0
  47. package/dist/cjs/index.js +23 -0
  48. package/dist/cjs/keys.d.ts +4 -0
  49. package/dist/cjs/keys.js +19 -0
  50. package/dist/cjs/package.json +3 -0
  51. package/dist/cjs/ssr.d.ts +15 -0
  52. package/dist/cjs/ssr.js +38 -0
  53. package/dist/cjs/store/globalStore.d.ts +29 -0
  54. package/dist/cjs/store/globalStore.js +72 -0
  55. package/dist/cjs/store/index.d.ts +1 -0
  56. package/dist/cjs/store/index.js +17 -0
  57. package/dist/cjs/types/appearance.d.ts +23 -0
  58. package/dist/cjs/types/appearance.js +3 -0
  59. package/dist/cjs/types/colorScheme.d.ts +5 -0
  60. package/dist/cjs/types/colorScheme.js +2 -0
  61. package/dist/cjs/types/index.d.ts +2 -0
  62. package/dist/cjs/types/index.js +18 -0
  63. package/dist/cjs/utils/colorSchemeFromHeaders.d.ts +22 -0
  64. package/dist/cjs/utils/colorSchemeFromHeaders.js +44 -0
  65. package/dist/cjs/utils/colorSchemeStorage.d.ts +35 -0
  66. package/dist/cjs/utils/colorSchemeStorage.js +85 -0
  67. package/dist/cjs/utils/customTheme/buildBrandPaletteCss.d.ts +11 -0
  68. package/dist/cjs/utils/customTheme/buildBrandPaletteCss.js +35 -0
  69. package/dist/cjs/utils/customTheme/buildBrandPaletteVars.d.ts +11 -0
  70. package/dist/cjs/utils/customTheme/buildBrandPaletteVars.js +42 -0
  71. package/dist/cjs/utils/customTheme/color/apca.d.ts +4 -0
  72. package/dist/cjs/utils/customTheme/color/apca.js +62 -0
  73. package/dist/cjs/utils/customTheme/color/colorSpace.d.ts +5 -0
  74. package/dist/cjs/utils/customTheme/color/colorSpace.js +72 -0
  75. package/dist/cjs/utils/customTheme/color/conversions.d.ts +17 -0
  76. package/dist/cjs/utils/customTheme/color/conversions.js +101 -0
  77. package/dist/cjs/utils/customTheme/color/hex.d.ts +10 -0
  78. package/dist/cjs/utils/customTheme/color/hex.js +34 -0
  79. package/dist/cjs/utils/customTheme/color/index.d.ts +4 -0
  80. package/dist/cjs/utils/customTheme/color/index.js +20 -0
  81. package/dist/cjs/utils/customTheme/color/oklch.d.ts +3 -0
  82. package/dist/cjs/utils/customTheme/color/oklch.js +21 -0
  83. package/dist/cjs/utils/customTheme/color/types.d.ts +40 -0
  84. package/dist/cjs/utils/customTheme/color/types.js +2 -0
  85. package/dist/cjs/utils/customTheme/constants.d.ts +31 -0
  86. package/dist/cjs/utils/customTheme/constants.js +49 -0
  87. package/dist/cjs/utils/customTheme/generateBrandPalette.d.ts +10 -0
  88. package/dist/cjs/utils/customTheme/generateBrandPalette.js +25 -0
  89. package/dist/cjs/utils/customTheme/index.d.ts +4 -0
  90. package/dist/cjs/utils/customTheme/index.js +20 -0
  91. package/dist/cjs/utils/getThemeClassnames.d.ts +17 -0
  92. package/dist/cjs/utils/getThemeClassnames.js +38 -0
  93. package/dist/cjs/utils/index.d.ts +7 -0
  94. package/dist/cjs/utils/index.js +23 -0
  95. package/dist/cjs/utils/mergeAppearance.d.ts +7 -0
  96. package/dist/cjs/utils/mergeAppearance.js +17 -0
  97. package/dist/cjs/utils/resolveColorScheme.d.ts +7 -0
  98. package/dist/cjs/utils/resolveColorScheme.js +15 -0
  99. package/dist/cjs/utils/themeBootstrap.d.ts +12 -0
  100. package/dist/cjs/utils/themeBootstrap.js +19 -0
  101. package/dist/esm/components/ChildThemeProvider/ChildThemeProvider.d.ts +24 -0
  102. package/dist/esm/components/ChildThemeProvider/ChildThemeProvider.js +22 -0
  103. package/dist/esm/components/ChildThemeProvider/index.d.ts +1 -0
  104. package/dist/esm/components/ChildThemeProvider/index.js +1 -0
  105. package/dist/esm/components/RootThemeProvider/RootThemeProvider.d.ts +49 -0
  106. package/dist/esm/components/RootThemeProvider/RootThemeProvider.js +27 -0
  107. package/dist/esm/components/RootThemeProvider/index.d.ts +1 -0
  108. package/dist/esm/components/RootThemeProvider/index.js +1 -0
  109. package/dist/esm/components/ThemeProvider/ThemeProvider.d.ts +28 -0
  110. package/dist/esm/components/ThemeProvider/ThemeProvider.js +13 -0
  111. package/dist/esm/components/ThemeProvider/index.d.ts +1 -0
  112. package/dist/esm/components/ThemeProvider/index.js +1 -0
  113. package/dist/esm/components/ThemeScope/ThemeScope.d.ts +32 -0
  114. package/dist/esm/components/ThemeScope/ThemeScope.js +59 -0
  115. package/dist/esm/components/ThemeScope/index.d.ts +1 -0
  116. package/dist/esm/components/ThemeScope/index.js +1 -0
  117. package/dist/esm/components/index.d.ts +3 -0
  118. package/dist/esm/components/index.js +3 -0
  119. package/dist/esm/constants/appearance.d.ts +22 -0
  120. package/dist/esm/constants/appearance.js +24 -0
  121. package/dist/esm/constants/colorScheme.d.ts +17 -0
  122. package/dist/esm/constants/colorScheme.js +20 -0
  123. package/dist/esm/constants/index.d.ts +2 -0
  124. package/dist/esm/constants/index.js +2 -0
  125. package/dist/esm/context/appearanceContext.d.ts +20 -0
  126. package/dist/esm/context/appearanceContext.js +18 -0
  127. package/dist/esm/context/index.d.ts +4 -0
  128. package/dist/esm/context/index.js +2 -0
  129. package/dist/esm/context/themeContext.d.ts +12 -0
  130. package/dist/esm/context/themeContext.js +11 -0
  131. package/dist/esm/hooks/index.d.ts +4 -0
  132. package/dist/esm/hooks/index.js +4 -0
  133. package/dist/esm/hooks/useApplyCustomTheme.d.ts +27 -0
  134. package/dist/esm/hooks/useApplyCustomTheme.js +36 -0
  135. package/dist/esm/hooks/useColorScheme.d.ts +37 -0
  136. package/dist/esm/hooks/useColorScheme.js +76 -0
  137. package/dist/esm/hooks/useIsomorphicLayoutEffect.d.ts +7 -0
  138. package/dist/esm/hooks/useIsomorphicLayoutEffect.js +13 -0
  139. package/dist/esm/hooks/useThemeClassnames.d.ts +11 -0
  140. package/dist/esm/hooks/useThemeClassnames.js +15 -0
  141. package/dist/esm/hooks/useThemeConfig.d.ts +24 -0
  142. package/dist/esm/hooks/useThemeConfig.js +12 -0
  143. package/dist/esm/index.d.ts +7 -0
  144. package/dist/esm/index.js +7 -0
  145. package/dist/esm/keys.d.ts +4 -0
  146. package/dist/esm/keys.js +16 -0
  147. package/dist/esm/ssr.d.ts +15 -0
  148. package/dist/esm/ssr.js +15 -0
  149. package/dist/esm/store/globalStore.d.ts +29 -0
  150. package/dist/esm/store/globalStore.js +69 -0
  151. package/dist/esm/store/index.d.ts +1 -0
  152. package/dist/esm/store/index.js +1 -0
  153. package/dist/esm/types/appearance.d.ts +23 -0
  154. package/dist/esm/types/appearance.js +2 -0
  155. package/dist/esm/types/colorScheme.d.ts +5 -0
  156. package/dist/esm/types/colorScheme.js +1 -0
  157. package/dist/esm/types/index.d.ts +2 -0
  158. package/dist/esm/types/index.js +2 -0
  159. package/dist/esm/utils/colorSchemeFromHeaders.d.ts +22 -0
  160. package/dist/esm/utils/colorSchemeFromHeaders.js +40 -0
  161. package/dist/esm/utils/colorSchemeStorage.d.ts +35 -0
  162. package/dist/esm/utils/colorSchemeStorage.js +81 -0
  163. package/dist/esm/utils/customTheme/buildBrandPaletteCss.d.ts +11 -0
  164. package/dist/esm/utils/customTheme/buildBrandPaletteCss.js +32 -0
  165. package/dist/esm/utils/customTheme/buildBrandPaletteVars.d.ts +11 -0
  166. package/dist/esm/utils/customTheme/buildBrandPaletteVars.js +39 -0
  167. package/dist/esm/utils/customTheme/color/apca.d.ts +4 -0
  168. package/dist/esm/utils/customTheme/color/apca.js +59 -0
  169. package/dist/esm/utils/customTheme/color/colorSpace.d.ts +5 -0
  170. package/dist/esm/utils/customTheme/color/colorSpace.js +68 -0
  171. package/dist/esm/utils/customTheme/color/conversions.d.ts +17 -0
  172. package/dist/esm/utils/customTheme/color/conversions.js +91 -0
  173. package/dist/esm/utils/customTheme/color/hex.d.ts +10 -0
  174. package/dist/esm/utils/customTheme/color/hex.js +29 -0
  175. package/dist/esm/utils/customTheme/color/index.d.ts +4 -0
  176. package/dist/esm/utils/customTheme/color/index.js +4 -0
  177. package/dist/esm/utils/customTheme/color/oklch.d.ts +3 -0
  178. package/dist/esm/utils/customTheme/color/oklch.js +18 -0
  179. package/dist/esm/utils/customTheme/color/types.d.ts +40 -0
  180. package/dist/esm/utils/customTheme/color/types.js +1 -0
  181. package/dist/esm/utils/customTheme/constants.d.ts +31 -0
  182. package/dist/esm/utils/customTheme/constants.js +46 -0
  183. package/dist/esm/utils/customTheme/generateBrandPalette.d.ts +10 -0
  184. package/dist/esm/utils/customTheme/generateBrandPalette.js +22 -0
  185. package/dist/esm/utils/customTheme/index.d.ts +4 -0
  186. package/dist/esm/utils/customTheme/index.js +4 -0
  187. package/dist/esm/utils/getThemeClassnames.d.ts +17 -0
  188. package/dist/esm/utils/getThemeClassnames.js +34 -0
  189. package/dist/esm/utils/index.d.ts +7 -0
  190. package/dist/esm/utils/index.js +7 -0
  191. package/dist/esm/utils/mergeAppearance.d.ts +7 -0
  192. package/dist/esm/utils/mergeAppearance.js +14 -0
  193. package/dist/esm/utils/resolveColorScheme.d.ts +7 -0
  194. package/dist/esm/utils/resolveColorScheme.js +12 -0
  195. package/dist/esm/utils/themeBootstrap.d.ts +12 -0
  196. package/dist/esm/utils/themeBootstrap.js +16 -0
  197. package/dist/tsconfig.cjs.tsbuildinfo +1 -0
  198. package/dist/tsconfig.esm.tsbuildinfo +1 -0
  199. package/package.json +45 -0
  200. package/src/components/ChildThemeProvider/ChildThemeProvider.tsx +54 -0
  201. package/src/components/ChildThemeProvider/index.ts +1 -0
  202. package/src/components/RootThemeProvider/RootThemeProvider.tsx +87 -0
  203. package/src/components/RootThemeProvider/index.ts +1 -0
  204. package/src/components/ThemeProvider/ThemeProvider.tsx +41 -0
  205. package/src/components/ThemeProvider/index.ts +1 -0
  206. package/src/components/ThemeScope/ThemeScope.tsx +106 -0
  207. package/src/components/ThemeScope/index.ts +1 -0
  208. package/src/components/index.ts +3 -0
  209. package/src/constants/appearance.ts +27 -0
  210. package/src/constants/colorScheme.ts +23 -0
  211. package/src/constants/index.ts +2 -0
  212. package/src/context/appearanceContext.tsx +39 -0
  213. package/src/context/index.ts +4 -0
  214. package/src/context/themeContext.ts +18 -0
  215. package/src/hooks/index.ts +4 -0
  216. package/src/hooks/useApplyCustomTheme.ts +56 -0
  217. package/src/hooks/useColorScheme.ts +131 -0
  218. package/src/hooks/useIsomorphicLayoutEffect.ts +17 -0
  219. package/src/hooks/useThemeClassnames.ts +18 -0
  220. package/src/hooks/useThemeConfig.tsx +44 -0
  221. package/src/index.ts +7 -0
  222. package/src/keys.ts +18 -0
  223. package/src/ssr.ts +25 -0
  224. package/src/store/globalStore.ts +93 -0
  225. package/src/store/index.ts +1 -0
  226. package/src/types/appearance.ts +29 -0
  227. package/src/types/colorScheme.ts +7 -0
  228. package/src/types/index.ts +2 -0
  229. package/src/utils/colorSchemeFromHeaders.ts +57 -0
  230. package/src/utils/colorSchemeStorage.ts +117 -0
  231. package/src/utils/customTheme/buildBrandPaletteCss.ts +37 -0
  232. package/src/utils/customTheme/buildBrandPaletteVars.ts +56 -0
  233. package/src/utils/customTheme/color/apca.ts +74 -0
  234. package/src/utils/customTheme/color/colorSpace.ts +82 -0
  235. package/src/utils/customTheme/color/conversions.ts +113 -0
  236. package/src/utils/customTheme/color/hex.ts +39 -0
  237. package/src/utils/customTheme/color/index.ts +4 -0
  238. package/src/utils/customTheme/color/oklch.ts +22 -0
  239. package/src/utils/customTheme/color/types.ts +32 -0
  240. package/src/utils/customTheme/constants.ts +57 -0
  241. package/src/utils/customTheme/generateBrandPalette.ts +30 -0
  242. package/src/utils/customTheme/index.ts +4 -0
  243. package/src/utils/getThemeClassnames.ts +40 -0
  244. package/src/utils/index.ts +7 -0
  245. package/src/utils/mergeAppearance.ts +16 -0
  246. package/src/utils/resolveColorScheme.ts +15 -0
  247. package/src/utils/themeBootstrap.ts +18 -0
package/dist/cjs/components/RootThemeProvider/RootThemeProvider.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ import { ReactNode, RefObject } from 'react';
2
+ import { ThemeAppearanceStore } from '../../context/appearanceContext';
3
+ import { ThemeAppearance } from '../../types/appearance';
4
+ export type RootThemeProviderProps = {
5
+ /**
6
+ * Оформление приложения. Используется в static-режиме (один React-корень: SSR — одно значение на
7
+ * запрос, либо CSR с собственным state, напр. `colorScheme` из `useColorScheme`). Для multi-root
8
+ * (single-spa) — см. `store`.
9
+ */
10
+ value?: ThemeAppearance;
11
+ /**
12
+ * Внешний реактивный стор оформления (`getGlobalThemeStore().store`). Если задан — приоритетнее
13
+ * `value`; подписанные провайдеры обновляются при смене темы без перерендера провайдера. Так один
14
+ * глобальный стор охватывает все микрофронты. Сеттер для shell — `getGlobalThemeStore().setAppearance`.
15
+ */
16
+ store?: ThemeAppearanceStore;
17
+ /**
18
+ * Внешний элемент для полного набора `sn-*` (обычно `<html>`/`<body>`). Если не задан — провайдер
19
+ * оборачивает children в `<div>` с этим набором.
20
+ */
21
+ rootRef?: RefObject<HTMLElement | null>;
22
+ /** Дополнительный класс на wrapper-`<div>` (паддинги/фон). Только в wrapper-режиме (без `rootRef`). */
23
+ className?: string;
24
+ /**
25
+ * Кастомный бренд-цвет потребителя (hex `#rrggbb`) для white-label. Генерирует бренд-палитру из
26
+ * seed-цвета и инжектит scoped `<style>` на бренд-классы этого поддерева. Правило на бренд-классе
27
+ * (а не inline на одном элементе) переживает переэмиты `sn-*` вложенными компонентами (Table и т.п.),
28
+ * поэтому кастомный цвет доходит до всей вложенности. Невалидный hex игнорируется. Глобальная
29
+ * (app-root) альтернатива для порталов — хук `useApplyCustomTheme`.
30
+ */
31
+ brandColor?: string;
32
+ /** CSP-`nonce` для инжектируемого `<style>` кастомного бренд-цвета. */
33
+ nonce?: string;
34
+ children: ReactNode;
35
+ };
36
+ /**
37
+ * Корневой провайдер оформления. Ставится один раз в корне приложения: задаёт контекст осей
38
+ * (`colorScheme`/`brand`/`brandRole`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
39
+ * (`rootRef`) либо на собственный wrapper. Объект контекста — глобальный синглтон (`Symbol.for`),
40
+ * поэтому провайдер работает даже при нескольких версиях пакета в разных микрофронтах, а потребитель
41
+ * читает ближайший провайдер. Локальные переопределения осей в поддереве — через `ChildThemeProvider`.
42
+ *
43
+ * Этот провайдер НЕ управляет состоянием цветовой схемы (override/system/cross-tab) — это `useColorScheme`;
44
+ * результат передаётся в `value.colorScheme`. Не путать со старым `ThemeProvider` (themeMap/changeTheme).
45
+ */
46
+ export declare function RootThemeProvider({ value, store, rootRef, className, brandColor, nonce, children, }: RootThemeProviderProps): import("react/jsx-runtime").JSX.Element;
47
+ export declare namespace RootThemeProvider {
48
+ var displayName: string;
49
+ }
package/dist/cjs/components/RootThemeProvider/RootThemeProvider.js ADDED
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.RootThemeProvider = RootThemeProvider;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const context_kit_1 = require("@cloud-ru/ds-context-kit");
6
+ const react_1 = require("react");
7
+ const appearanceContext_1 = require("../../context/appearanceContext");
8
+ const ThemeScope_1 = require("../ThemeScope");
9
+ /**
10
+ * Корневой провайдер оформления. Ставится один раз в корне приложения: задаёт контекст осей
11
+ * (`colorScheme`/`brand`/`brandRole`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
12
+ * (`rootRef`) либо на собственный wrapper. Объект контекста — глобальный синглтон (`Symbol.for`),
13
+ * поэтому провайдер работает даже при нескольких версиях пакета в разных микрофронтах, а потребитель
14
+ * читает ближайший провайдер. Локальные переопределения осей в поддереве — через `ChildThemeProvider`.
15
+ *
16
+ * Этот провайдер НЕ управляет состоянием цветовой схемы (override/system/cross-tab) — это `useColorScheme`;
17
+ * результат передаётся в `value.colorScheme`. Не путать со старым `ThemeProvider` (themeMap/changeTheme).
18
+ */
19
+ function RootThemeProvider({ value, store, rootRef, className, brandColor, nonce, children, }) {
20
+ const { colorScheme, brand, brandRole, density, acrylic } = value ?? {};
21
+ // Мемо по значениям осей (не по идентичности объекта `value`): иначе литерал `value={{…}}` у
22
+ // потребителя пересоздавал бы стор на каждом рендере. Сеттер в static-режиме не нужен — значением
23
+ // владеет сам потребитель через проп `value`.
24
+ const staticThemeStore = (0, react_1.useMemo)(() => (0, context_kit_1.staticStore)({
25
+ appearance: { colorScheme, brand, brandRole, density, acrylic },
26
+ setAppearance: undefined,
27
+ }), [colorScheme, brand, brandRole, density, acrylic]);
28
+ return ((0, jsx_runtime_1.jsx)(appearanceContext_1.ThemeAppearanceStoreProvider, { store: store ?? staticThemeStore, children: (0, jsx_runtime_1.jsx)(ThemeScope_1.ThemeScope, { rootRef: rootRef, className: className, brandColor: brandColor, nonce: nonce, children: children }) }));
29
+ }
30
+ RootThemeProvider.displayName = 'RootThemeProvider';
package/dist/cjs/components/RootThemeProvider/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './RootThemeProvider';
package/dist/cjs/components/RootThemeProvider/index.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./RootThemeProvider"), exports);
package/dist/cjs/components/ThemeProvider/ThemeProvider.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { ReactNode } from 'react';
2
+ type UseThemePropsWithDefaultTheme = {
3
+ /**
4
+ * Объект с указанием соответсвия темы и css-класса
5
+ */
6
+ themeMap: Record<string, string>;
7
+ /**
8
+ * Значение темы по умолчанию
9
+ */
10
+ defaultTheme: string;
11
+ };
12
+ type UseThemeProps = {
13
+ /**
14
+ * Объект с указанием соответсвия темы и css-класса
15
+ */
16
+ themeMap: Record<string, string>;
17
+ };
18
+ export type ThemeProviderProps = {
19
+ /**
20
+ * Дети, которые будут обёрнуты в провайдер
21
+ */
22
+ children: ReactNode;
23
+ } & (UseThemePropsWithDefaultTheme | UseThemeProps);
24
+ /**
25
+ * Провайдер, предназначенный для работы с темами
26
+ */
27
+ export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
28
+ export {};
package/dist/cjs/components/ThemeProvider/ThemeProvider.js ADDED
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ThemeProvider = ThemeProvider;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
6
+ const themeContext_1 = require("../../context/themeContext");
7
+ const useThemeConfig_1 = require("../../hooks/useThemeConfig");
8
+ /**
9
+ * Провайдер, предназначенный для работы с темами
10
+ */
11
+ function ThemeProvider({ children, ...props }) {
12
+ const { theme, themeClassName, changeTheme } = (0, useThemeConfig_1.useThemeConfig)(props);
13
+ // Мемоизируем объект значения (createSharedContext оборачивает его в staticStore по ссылке).
14
+ const value = (0, react_1.useMemo)(() => ({ theme, themeClassName, changeTheme }), [theme, themeClassName, changeTheme]);
15
+ return (0, jsx_runtime_1.jsx)(themeContext_1.ThemeValueProvider, { value: value, children: children });
16
+ }
package/dist/cjs/components/ThemeProvider/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './ThemeProvider';
package/dist/cjs/components/ThemeProvider/index.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./ThemeProvider"), exports);
package/dist/cjs/components/ThemeScope/ThemeScope.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ import { ReactNode, RefObject } from 'react';
2
+ export type ThemeScopeProps = {
3
+ /**
4
+ * Внешний элемент, на который ставится полный набор `sn-*` (обычно `<html>`/`<body>` для корня).
5
+ * Если не задан — `ThemeScope` рендерит собственный wrapper `<div>` с этим набором.
6
+ */
7
+ rootRef?: RefObject<HTMLElement | null>;
8
+ /**
9
+ * Дополнительный класс на wrapper-`<div>` (паддинги/фон вокруг темы). Действует только в wrapper-режиме;
10
+ * при `rootRef` игнорируется (внешним элементом владеет потребитель).
11
+ */
12
+ className?: string;
13
+ /**
14
+ * Кастомный бренд-цвет (hex). Инжектит scoped `<style>`, переопределяющий бренд-палитру на бренд-классах
15
+ * поддерева. В отличие от inline-переменных, правило на бренд-классе переживает переэмиты `sn-*` внутри
16
+ * (Table/Stepper и т.п.), поэтому кастомный цвет доходит до вложенных компонентов.
17
+ */
18
+ brandColor?: string;
19
+ /** CSP-`nonce` для инжектируемого `<style>`. */
20
+ nonce?: string;
21
+ children: ReactNode;
22
+ };
23
+ /**
24
+ * Внутренний помощник Root/Child-провайдеров: читает ближайшее оформление (= собственный стор
25
+ * провайдера, под которым отрендерен) и эмитит полный набор `sn-*`. Реактивен — при смене темы
26
+ * пересобирает и переустанавливает классы.
27
+ *
28
+ * - `rootRef` задан → классы добавляются на внешний элемент через эффект (без лишнего DOM-узла);
29
+ * при смене набора старые классы снимаются, новые ставятся.
30
+ * - `rootRef` не задан → классы навешиваются на wrapper `<div>` (+ `className` потребителя).
31
+ */
32
+ export declare function ThemeScope({ rootRef, className, brandColor, nonce, children }: ThemeScopeProps): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/components/ThemeScope/ThemeScope.js ADDED
@@ -0,0 +1,65 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ThemeScope = ThemeScope;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const classnames_1 = __importDefault(require("classnames"));
9
+ const react_1 = require("react");
10
+ const appearanceContext_1 = require("../../context/appearanceContext");
11
+ const useIsomorphicLayoutEffect_1 = require("../../hooks/useIsomorphicLayoutEffect");
12
+ const customTheme_1 = require("../../utils/customTheme");
13
+ const getThemeClassnames_1 = require("../../utils/getThemeClassnames");
14
+ // Атрибут-маркер поддерева для scope кастомной палитры. Правило нацеливается на бренд-классы внутри
15
+ // этого маркера (см. `buildBrandPaletteCss`), поэтому переживает переэмиты `sn-*` вложенными обёртками.
16
+ const BRAND_SCOPE_ATTR = 'data-ds-brand-scope';
17
+ /**
18
+ * Внутренний помощник Root/Child-провайдеров: читает ближайшее оформление (= собственный стор
19
+ * провайдера, под которым отрендерен) и эмитит полный набор `sn-*`. Реактивен — при смене темы
20
+ * пересобирает и переустанавливает классы.
21
+ *
22
+ * - `rootRef` задан → классы добавляются на внешний элемент через эффект (без лишнего DOM-узла);
23
+ * при смене набора старые классы снимаются, новые ставятся.
24
+ * - `rootRef` не задан → классы навешиваются на wrapper `<div>` (+ `className` потребителя).
25
+ */
26
+ function ThemeScope({ rootRef, className, brandColor, nonce, children }) {
27
+ const { appearance } = (0, appearanceContext_1.useThemeAppearance)();
28
+ // Список токенов — источник истины: `classList.add(...)` принимает их напрямую (без `split`),
29
+ // а wrapper-режим джойнит через `cn`. Мемо по `appearance` держит ссылку стабильной между
30
+ // рендерами, поэтому эффект переустанавливает классы только при реальной смене темы.
31
+ const themeClasses = (0, react_1.useMemo)(() => (0, getThemeClassnames_1.getThemeClassnameList)(appearance), [appearance]);
32
+ const scopeId = (0, react_1.useId)();
33
+ const brandCss = (0, react_1.useMemo)(() => (brandColor ? (0, customTheme_1.buildBrandPaletteCss)(brandColor, `[${BRAND_SCOPE_ATTR}="${scopeId}"]`) : null), [brandColor, scopeId]);
34
+ // Layout-эффект (не `useEffect`): классы/scope-маркер ставим на внешний элемент синхронно до пейнта,
35
+ // иначе первый кадр рендерится без набора `sn-*` (и без scoped бренд-правила) — видно моргание темы.
36
+ (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
37
+ const element = rootRef?.current;
38
+ if (!element) {
39
+ return undefined;
40
+ }
41
+ element.classList.add(...themeClasses);
42
+ return () => {
43
+ element.classList.remove(...themeClasses);
44
+ };
45
+ }, [rootRef, themeClasses]);
46
+ // В rootRef-режиме scope-маркер ставим на внешний элемент, чтобы scoped-правило достало его поддерево
47
+ // (в wrapper-режиме маркер — атрибут `div`а ниже).
48
+ (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
49
+ const element = rootRef?.current;
50
+ if (!element || !brandCss) {
51
+ return undefined;
52
+ }
53
+ element.setAttribute(BRAND_SCOPE_ATTR, scopeId);
54
+ return () => {
55
+ element.removeAttribute(BRAND_SCOPE_ATTR);
56
+ };
57
+ }, [rootRef, brandCss, scopeId]);
58
+ // `<style>` рендерится в дерево (React управляет монтированием/размонтированием, без ручной инъекции).
59
+ // В body он не имеет визуального бокса — только применяет правило по scoped-селектору.
60
+ const styleTag = brandCss ? (0, jsx_runtime_1.jsx)("style", { nonce: nonce, children: brandCss }) : null;
61
+ if (rootRef) {
62
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [styleTag, children] }));
63
+ }
64
+ return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(themeClasses, className), "data-ds-brand-scope": brandCss ? scopeId : undefined, children: [styleTag, children] }));
65
+ }
package/dist/cjs/components/ThemeScope/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './ThemeScope';
package/dist/cjs/components/ThemeScope/index.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./ThemeScope"), exports);
package/dist/cjs/components/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './RootThemeProvider';
2
+ export * from './ChildThemeProvider';
3
+ export * from './ThemeProvider';
package/dist/cjs/components/index.js ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./RootThemeProvider"), exports);
18
+ __exportStar(require("./ChildThemeProvider"), exports);
19
+ __exportStar(require("./ThemeProvider"), exports);
package/dist/cjs/constants/appearance.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /** Плотность раскладки. Класс `sn-comfort` / `sn-compact` / `sn-spacious`. */
2
+ export declare const DENSITY: {
3
+ readonly Comfort: "comfort";
4
+ readonly Compact: "compact";
5
+ readonly Spacious: "spacious";
6
+ };
7
+ /** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE`. */
8
+ export declare const BRAND: {
9
+ readonly A: "brandA";
10
+ readonly B: "brandB";
11
+ readonly C: "brandC";
12
+ readonly D: "brandD";
13
+ readonly E: "brandE";
14
+ };
15
+ /** Роль бренда (палитра). Класс `sn-main` / `sn-alter` … */
16
+ export declare const BRAND_ROLE: {
17
+ readonly Main: "main";
18
+ readonly Alter: "alter";
19
+ readonly Alter2: "alter2";
20
+ readonly Alter3: "alter3";
21
+ readonly Alter4: "alter4";
22
+ };
package/dist/cjs/constants/appearance.js ADDED
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+ // Оси оформления дизайн-системы, спроецированные на классы `sn-*` из `@cloud-ru/figma-variables`.
3
+ // Чистый модуль (без React/DOM) — реэкспортируется из `@cloud-ru/ds-theme/ssr` (RSC-safe).
4
+ Object.defineProperty(exports, "__esModule", { value: true });
5
+ exports.BRAND_ROLE = exports.BRAND = exports.DENSITY = void 0;
6
+ /** Плотность раскладки. Класс `sn-comfort` / `sn-compact` / `sn-spacious`. */
7
+ exports.DENSITY = {
8
+ Comfort: 'comfort',
9
+ Compact: 'compact',
10
+ Spacious: 'spacious',
11
+ };
12
+ /** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE`. */
13
+ exports.BRAND = {
14
+ A: 'brandA',
15
+ B: 'brandB',
16
+ C: 'brandC',
17
+ D: 'brandD',
18
+ E: 'brandE',
19
+ };
20
+ /** Роль бренда (палитра). Класс `sn-main` / `sn-alter` … */
21
+ exports.BRAND_ROLE = {
22
+ Main: 'main',
23
+ Alter: 'alter',
24
+ Alter2: 'alter2',
25
+ Alter3: 'alter3',
26
+ Alter4: 'alter4',
27
+ };
package/dist/cjs/constants/colorScheme.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ /** Разрешённая цветовая схема (то, что реально применяется на корень). */
2
+ export declare const COLOR_SCHEME: {
3
+ readonly Light: "light";
4
+ readonly Dark: "dark";
5
+ };
6
+ /** Пользовательский выбор: фиксированная схема или `system` (следовать `prefers-color-scheme`). */
7
+ export declare const THEME_OVERRIDE: {
8
+ readonly Light: "light";
9
+ readonly Dark: "dark";
10
+ readonly System: "system";
11
+ };
12
+ /**
13
+ * Дефолтное имя ключа персиста override для опциональных адаптеров (cookie/localStorage) и
14
+ * SSR/bootstrap-хелперов. Namespace'нут под DS, чтобы не пересекаться с ключами хост-приложения.
15
+ * Конкретный адаптер может переопределить его через `storageKey`.
16
+ */
17
+ export declare const THEME_OVERRIDE_STORAGE_KEY = "snack-uikit-theme";
package/dist/cjs/constants/colorScheme.js ADDED
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ // Цветовая схема = класс `sn-light`/`sn-dark` на корне. Чистый модуль (RSC-safe), реэкспорт из `@cloud-ru/ds-theme/ssr`.
3
+ // Персиста по умолчанию нет: `useColorScheme` держит выбор in-memory, а cookie/localStorage подключает
4
+ // потребитель явным адаптером. Этот ключ — дефолтное имя для опциональных адаптеров и SSR/bootstrap-хелперов.
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.THEME_OVERRIDE_STORAGE_KEY = exports.THEME_OVERRIDE = exports.COLOR_SCHEME = void 0;
7
+ /** Разрешённая цветовая схема (то, что реально применяется на корень). */
8
+ exports.COLOR_SCHEME = {
9
+ Light: 'light',
10
+ Dark: 'dark',
11
+ };
12
+ /** Пользовательский выбор: фиксированная схема или `system` (следовать `prefers-color-scheme`). */
13
+ exports.THEME_OVERRIDE = {
14
+ Light: 'light',
15
+ Dark: 'dark',
16
+ System: 'system',
17
+ };
18
+ /**
19
+ * Дефолтное имя ключа персиста override для опциональных адаптеров (cookie/localStorage) и
20
+ * SSR/bootstrap-хелперов. Namespace'нут под DS, чтобы не пересекаться с ключами хост-приложения.
21
+ * Конкретный адаптер может переопределить его через `storageKey`.
22
+ */
23
+ exports.THEME_OVERRIDE_STORAGE_KEY = 'snack-uikit-theme';
package/dist/cjs/constants/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './appearance';
2
+ export * from './colorScheme';
package/dist/cjs/constants/index.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./appearance"), exports);
18
+ __exportStar(require("./colorScheme"), exports);
package/dist/cjs/context/appearanceContext.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { ExternalStore } from '@cloud-ru/ds-context-kit';
2
+ import { ThemeAppearance } from '../types/appearance';
3
+ /**
4
+ * Значение контекста оформления: слитые оси (`appearance`) + опциональный сеттер. Сеттер задаёт
5
+ * только корневой провайдер (`RootThemeProvider`) — у `ChildThemeProvider` он `undefined` (детям
6
+ * менять глобальное значение нельзя, они только локально переопределяют оси).
7
+ */
8
+ export type ThemeAppearanceContextValue = {
9
+ appearance: ThemeAppearance;
10
+ setAppearance?: (patch: Partial<ThemeAppearance>) => void;
11
+ };
12
+ /** Внешний стор оформления (формат `useSyncExternalStore`). Mutable-global — см. `getGlobalThemeStore`. */
13
+ export type ThemeAppearanceStore = ExternalStore<ThemeAppearanceContextValue>;
14
+ declare const StoreProvider: ({ store, children }: {
15
+ store: ExternalStore<ThemeAppearanceContextValue>;
16
+ children: import("react").ReactNode;
17
+ }) => import("react/jsx-runtime").JSX.Element;
18
+ export { StoreProvider as ThemeAppearanceStoreProvider };
19
+ /** Возвращает ближайшее (уже слитое по цепочке провайдеров) значение оформления. Реактивно к стору. */
20
+ export declare function useThemeAppearance(): ThemeAppearanceContextValue;
package/dist/cjs/context/appearanceContext.js ADDED
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ThemeAppearanceStoreProvider = void 0;
4
+ exports.useThemeAppearance = useThemeAppearance;
5
+ const context_kit_1 = require("@cloud-ru/ds-context-kit");
6
+ const keys_1 = require("../keys");
7
+ const globalStore_1 = require("../store/globalStore");
8
+ // Отдельный домен `theme-appearance` — НЕ пересекается с `providerKey('theme', 1)` старого
9
+ // `ThemeContext` (themeMap/changeTheme). Объект контекста — `Symbol.for`-синглтон, общий для всех
10
+ // версий пакета, поэтому потребитель в микрофронте читает ближайший провайдер независимо от версии.
11
+ //
12
+ // Дефолт контекста = глобальный singleton-стор оформления. Поэтому компонент, вызывающий
13
+ // `useThemeClassnames` (мобильная обёртка, `ChildThemeProvider`, портал вне `<body>`) БЕЗ
14
+ // `RootThemeProvider` в своём корне, реэмитит полный набор `sn-*` не с пустым оформлением
15
+ // (теряя `colorScheme`/`density`), а с тем, что shell выставил в `getGlobalThemeStore` из источника
16
+ // истины. Так микрофронту не нужен провайдер. Явный `RootThemeProvider` затеняет дефолт (back-compat).
17
+ const { StoreProvider, useStoreValue } = (0, context_kit_1.createSharedStoreContext)(keys_1.THEME_KEYS.context, (0, globalStore_1.getGlobalThemeStore)().store);
18
+ exports.ThemeAppearanceStoreProvider = StoreProvider;
19
+ /** Возвращает ближайшее (уже слитое по цепочке провайдеров) значение оформления. Реактивно к стору. */
20
+ function useThemeAppearance() {
21
+ return useStoreValue();
22
+ }
package/dist/cjs/context/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { useThemeAppearance } from './appearanceContext';
2
+ export type { ThemeAppearanceContextValue, ThemeAppearanceStore } from './appearanceContext';
3
+ export { useThemeContext } from './themeContext';
4
+ export type { ThemeContextType } from './themeContext';
package/dist/cjs/context/index.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useThemeContext = exports.useThemeAppearance = void 0;
4
+ var appearanceContext_1 = require("./appearanceContext");
5
+ Object.defineProperty(exports, "useThemeAppearance", { enumerable: true, get: function () { return appearanceContext_1.useThemeAppearance; } });
6
+ var themeContext_1 = require("./themeContext");
7
+ Object.defineProperty(exports, "useThemeContext", { enumerable: true, get: function () { return themeContext_1.useThemeContext; } });
package/dist/cjs/context/themeContext.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export type ThemeContextType = {
2
+ theme: string | undefined;
3
+ themeClassName: string | undefined;
4
+ changeTheme: ((theme: string) => void) | undefined;
5
+ };
6
+ export declare const ThemeValueProvider: {
7
+ ({ value, children }: {
8
+ value: ThemeContextType;
9
+ children: import("react").ReactNode;
10
+ }): import("react/jsx-runtime").JSX.Element;
11
+ displayName: string;
12
+ }, useThemeContext: () => ThemeContextType;
package/dist/cjs/context/themeContext.js ADDED
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ var _a;
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useThemeContext = exports.ThemeValueProvider = void 0;
5
+ const context_kit_1 = require("@cloud-ru/ds-context-kit");
6
+ // Общий контекст темы через @cloud-ru/ds-context-kit (Symbol.for-синглтон, SSR-safe). `ThemeValueProvider`
7
+ // внутренний — публично доступны `ThemeProvider` (обёртка) и `useThemeContext`.
8
+ _a = (0, context_kit_1.createSharedContext)({
9
+ key: (0, context_kit_1.providerKey)('theme', 1),
10
+ defaultValue: {
11
+ theme: undefined,
12
+ themeClassName: undefined,
13
+ changeTheme: undefined,
14
+ },
15
+ }), exports.ThemeValueProvider = _a.Provider, exports.useThemeContext = _a.useValue;
package/dist/cjs/hooks/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export * from './useApplyCustomTheme';
2
+ export * from './useColorScheme';
3
+ export * from './useThemeClassnames';
4
+ export * from './useThemeConfig';
package/dist/cjs/hooks/index.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./useApplyCustomTheme"), exports);
18
+ __exportStar(require("./useColorScheme"), exports);
19
+ __exportStar(require("./useThemeClassnames"), exports);
20
+ __exportStar(require("./useThemeConfig"), exports);
package/dist/cjs/hooks/useApplyCustomTheme.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ export type UseApplyCustomThemeProps = {
2
+ /** Бренд-цвет потребителя (hex `#rrggbb`). Из него генерируется бренд-палитра. */
3
+ color: string;
4
+ /** Применять ли кастомную палитру. При `false` `<style>` не инжектится (а ранее добавленный снимается). */
5
+ enabled?: boolean;
6
+ /**
7
+ * CSS-скоуп — селектор корня поддерева (напр. `#app`, `[data-x]`). Без него правило глобальное:
8
+ * переопределяет бренд-классы на всей странице (white-label в корне приложения — покрывает и порталы,
9
+ * и переэмиченные внутренние обёртки). Со скоупом область ограничена его поддеревом.
10
+ */
11
+ scope?: string;
12
+ /** CSP-`nonce` для инжектируемого `<style>`. */
13
+ nonce?: string;
14
+ };
15
+ /**
16
+ * Применяет кастомный бренд-цвет: генерирует из `color` бренд-палитру и инжектит `<style>`,
17
+ * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E`), а не inline на одном элементе — поэтому
18
+ * цвет переживает переэмиты `sn-*` вложенными компонентами и доходит до порталов. Семантический слой
19
+ * каскадит из палитры, красятся обе схемы.
20
+ *
21
+ * Императивная (обычно app-root) альтернатива декларативному пропу `brandColor` у `RootThemeProvider`.
22
+ *
23
+ * ```tsx
24
+ * useApplyCustomTheme({ color: brand.primaryColor, enabled: Boolean(brand), nonce });
25
+ * ```
26
+ */
27
+ export declare function useApplyCustomTheme({ color, enabled, scope, nonce }: UseApplyCustomThemeProps): void;
package/dist/cjs/hooks/useApplyCustomTheme.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useApplyCustomTheme = useApplyCustomTheme;
4
+ const react_1 = require("react");
5
+ const customTheme_1 = require("../utils/customTheme");
6
+ const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
7
+ /**
8
+ * Применяет кастомный бренд-цвет: генерирует из `color` бренд-палитру и инжектит `<style>`,
9
+ * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E`), а не inline на одном элементе — поэтому
10
+ * цвет переживает переэмиты `sn-*` вложенными компонентами и доходит до порталов. Семантический слой
11
+ * каскадит из палитры, красятся обе схемы.
12
+ *
13
+ * Императивная (обычно app-root) альтернатива декларативному пропу `brandColor` у `RootThemeProvider`.
14
+ *
15
+ * ```tsx
16
+ * useApplyCustomTheme({ color: brand.primaryColor, enabled: Boolean(brand), nonce });
17
+ * ```
18
+ */
19
+ function useApplyCustomTheme({ color, enabled = true, scope, nonce }) {
20
+ const css = (0, react_1.useMemo)(() => (0, customTheme_1.buildBrandPaletteCss)(color, scope), [color, scope]);
21
+ // Layout-эффект (не `useEffect`): `<style>` добавляем в `head` синхронно до пейнта, иначе первый кадр
22
+ // успевает отрисоваться с дефолтным акцентом и виден проблеск старого цвета при смене бренд-цвета.
23
+ /* eslint-disable @cloud-ru/ssr-safe-react/domApi -- DOM трогаем только в layout-эффекте под guard `typeof document` */
24
+ (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
25
+ if (!enabled || !css || typeof document === 'undefined') {
26
+ return undefined;
27
+ }
28
+ const styleElement = document.createElement('style');
29
+ if (nonce) {
30
+ styleElement.setAttribute('nonce', nonce);
31
+ }
32
+ styleElement.textContent = css;
33
+ document.head.appendChild(styleElement);
34
+ return () => {
35
+ styleElement.remove();
36
+ };
37
+ }, [css, enabled, nonce]);
38
+ /* eslint-enable @cloud-ru/ssr-safe-react/domApi */
39
+ }