@dss-kit/ui-kit 0.3.10 → 1.0.0

package/dist/components/shared/Toast/Toast.js

@@ -1,77 +1,77 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { cx as t, css as u } from "@emotion/css";
-import { forwardRef as T, useMemo as c } from "react";
+import { forwardRef as T, useMemo as i } from "react";
 import s from "../../../assets/svg/toast/alert-triangle.svg.js";
 import f from "../../../assets/svg/toast/check-circle.svg.js";
 import j from "../../../assets/svg/toast/info-circle.svg.js";
 import v from "../../../assets/svg/toast/x.svg.js";
 import { theme as r } from "../../../utils/theme/index.js";
-import { Box as i } from "../../builders/Box/Box.js";
+import { Box as c } from "../../builders/Box/Box.js";
 import { Text as m } from "../../builders/Text/Text.js";
-const M = {
+const W = {
   positive: /* @__PURE__ */ e(f, {}),
   negative: /* @__PURE__ */ e(s, {}),
   warning: /* @__PURE__ */ e(s, {}),
   info: /* @__PURE__ */ e(j, {}),
   neutral: /* @__PURE__ */ e(f, {})
-}, W = u({
-  boxShadow: `0 4px 20px 0 ${r.color.effect.shadowM}`
-}), A = u({
+}, A = u({
+  boxShadow: `0 4px 20px 0 ${r.color.effect.shadow_m}`
+}), M = u({
   cursor: "pointer",
   "&:hover": {
     opacity: 0.8
   }
 }), K = T(
   ({
-    title: g,
+    title: p,
     subtitle: l,
-    icon: a,
+    icon: g,
     variant: o = "neutral",
-    w: d = "full",
-    onClose: p,
+    w: a = "full",
+    onClose: d,
     className: y,
     iconBoxClassName: h,
     titleClassName: x,
     subtitleClassName: C,
-    closeIconClassName: b,
-    ...w
-  }, S) => {
-    const I = c(() => o === "neutral" ? r.color.icon.accent : o === "info" ? r.color.icon.accent : o === "positive" ? r.color.icon.positive : o === "negative" ? r.color.icon.negative : o === "warning" ? r.color.icon.warning : r.color.icon.inverse, [o]), P = c(() => o === "neutral" ? r.color.icon.tertiary : r.color.icon.inverse, [o]), N = c(() => o === "neutral" ? r.color.fill.accentSecondary : r.color.fill.bgPrimary, [o]), R = c(() => o === "neutral" ? r.color.fill.bgPrimary : o === "info" ? r.color.fill.accentPrimary : o === "positive" ? r.color.fill.positivePrimary : o === "negative" ? r.color.fill.negativePrimary : o === "warning" ? r.color.fill.warningPrimary : r.color.fill.accentPrimary, [o]), k = c(() => o === "neutral" ? r.color.text.primary : r.color.text.primaryInverse, [o]), B = c(() => o === "neutral" ? r.color.text.tertiaryInverse : r.color.text.primaryInverse, [o]);
+    closeIconClassName: _,
+    ...b
+  }, w) => {
+    const S = i(() => o === "neutral" ? r.color.icon.accent : o === "info" ? r.color.icon.accent : o === "positive" ? r.color.icon.positive : o === "negative" ? r.color.icon.negative : o === "warning" ? r.color.icon.warning : r.color.icon.inverse, [o]), N = i(() => o === "neutral" ? r.color.icon.tertiary : r.color.icon.inverse, [o]), R = i(() => o === "neutral" ? r.color.fill.accent_secondary : r.color.fill.bg_primary, [o]), k = i(() => o === "neutral" ? r.color.fill.bg_primary : o === "info" ? r.color.fill.accent_primary : o === "positive" ? r.color.fill.positive_primary : o === "negative" ? r.color.fill.negative_primary : o === "warning" ? r.color.fill.warning_primary : r.color.fill.accent_primary, [o]), I = i(() => o === "neutral" ? r.color.text.primary : r.color.text.primary_inverse, [o]), B = i(() => o === "neutral" ? r.color.text.tertiary_inverse : r.color.text.primary_inverse, [o]);
     return /* @__PURE__ */ n(
-      i,
+      c,
       {
         row: !0,
-        w: d,
-        ref: S,
+        w: a,
+        ref: w,
         p: r.spacing.md,
         gap: r.spacing.md,
-        backgroundColor: R,
+        backgroundColor: k,
         borderRadius: r.cornerRadius.lg,
-        className: t(W, y),
-        ...w,
+        className: t(A, y),
+        ...b,
         children: [
           /* @__PURE__ */ e(
-            i,
+            c,
             {
               w: 48,
               h: 48,
               center: !0,
-              backgroundColor: N,
+              backgroundColor: R,
               borderRadius: r.cornerRadius.md,
-              style: { color: I },
+              style: { color: S },
               className: h,
-              children: a || M[o]
+              children: g || W[o]
             }
           ),
-          /* @__PURE__ */ n(i, { flex: 1, children: [
+          /* @__PURE__ */ n(c, { flex: 1, children: [
             /* @__PURE__ */ e(
               m,
               {
                 variant: "body-1",
                 fontWeight: "semibold",
-                color: k,
+                color: I,
                 className: x,
-                children: g
+                children: p
               }
             ),
             l && /* @__PURE__ */ e(
@@ -85,13 +85,13 @@ const M = {
               }
             )
           ] }),
-          /* @__PURE__ */ e(i, { onClick: p, children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(c, { onClick: d, children: /* @__PURE__ */ e(
             v,
             {
               width: 24,
               height: 24,
-              color: P,
-              className: t(A, b)
+              color: N,
+              className: t(M, _)
             }
           ) })
         ]

package/dist/components/shared/Tooltip/Tooltip.js

@@ -3,26 +3,26 @@ import { css as c, cx as T, keyframes as ho } from "@emotion/css";
 import { useFloating as go, offset as wo, flip as yo, shift as So, arrow as xo, autoUpdate as vo, useHover as bo, useFocus as Ao, useDismiss as Oo, useRole as Ro, useInteractions as To, useMergeRefs as Do } from "@floating-ui/react";
 import { useState as D, useId as Po, useCallback as ko, useMemo as Eo, cloneElement as Fo } from "react";
 import { tooltipStyles as P, tooltipArrowShapes as Co, tooltipArrowOverlap as p, tooltipArrowHeight as Io, tooltipArrowSize as No } from "./constants.js";
-import { getTooltipArrowPosition as Mo, getTooltipRadiusOverrides as Ho, getTooltipArrowDimensions as Ko, getTooltipArrowShapeKey as $o } from "./utils.js";
+import { getTooltipArrowPosition as Ho, getTooltipRadiusOverrides as Ko, getTooltipArrowDimensions as Mo, getTooltipArrowShapeKey as $o } from "./utils.js";
 import { Portal as jo } from "../../builders/Portal/Portal.js";
 import { Box as w } from "../../builders/Box/Box.js";
 import { theme as zo } from "../../../utils/theme/index.js";
 import { Text as Bo } from "../../builders/Text/Text.js";
-const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
+const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, _o = ho`
   from { opacity: 0; transform: translateY(2px); }
   to { opacity: 1; transform: translateY(0); }
-`, Go = c({
-  boxShadow: `0 4px 20px 0 ${Uo.effect.shadowM}`,
-  animation: `${qo} 0.16s ease-out`,
+`, qo = c({
+  boxShadow: `0 4px 20px 0 ${Uo.effect.shadow_m}`,
+  animation: `${_o} 0.16s ease-out`,
   fontSize: "12px",
   lineHeight: "16px",
   fontWeight: "500",
   wordBreak: "break-word"
-}), Jo = c({
+}), Go = c({
   position: "absolute",
   // Треугольник через clip-path
   clipPath: "var(--tooltip-arrow-shape)"
-}), Lo = ({
+}), Jo = ({
   color: d = "primary",
   children: n,
   content: s,
@@ -35,9 +35,9 @@ const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
   offset: I = 5,
   showArrow: a = !0,
   openDelay: N = 400,
-  closeDelay: M = 0,
-  closeOnEsc: H = !0,
-  zIndex: K = 1,
+  closeDelay: H = 0,
+  closeOnEsc: K = !0,
+  zIndex: M = 1,
   maxWidth: $,
   className: j,
   contentClassName: z,
@@ -45,10 +45,10 @@ const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
   textClassName: U,
   style: W,
   id: Y,
-  p: q = Yo.md,
-  borderRadius: G = Wo.sm
+  p: _ = Yo.md,
+  borderRadius: q = Wo.sm
 }) => {
-  const [J, L] = D(E), [S, Q] = D(null), x = F ?? J, v = C ?? L, V = Po(), f = Y ?? `tooltip-${V}`, X = s == null || s === "", t = !k && !X, Z = ko(
+  const [G, J] = D(E), [S, L] = D(null), x = F ?? G, v = C ?? J, Q = Po(), f = Y ?? `tooltip-${Q}`, V = s == null || s === "", t = !k && !V, X = ko(
     (fo) => {
       t && v(fo);
     },
@@ -56,13 +56,13 @@ const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
   ), u = I + (a ? Io : 0), {
     context: e,
     refs: b,
-    floatingStyles: _,
+    floatingStyles: Z,
     middlewareData: oo,
     placement: h
   } = go({
     placement: m,
     open: t ? x : !1,
-    onOpenChange: Z,
+    onOpenChange: X,
     whileElementsMounted: vo,
     middleware: [
       wo(u),
@@ -74,11 +74,11 @@ const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
       So({ padding: u }),
       ...a && S ? [xo({ element: S, padding: 0 })] : []
     ]
-  }), to = oo.arrow, o = h.split("-")[0], i = h.includes("-") ? h.split("-")[1] : null, A = Mo(to, o, i), eo = $o(o, i), so = Ho(
+  }), to = oo.arrow, o = h.split("-")[0], i = h.includes("-") ? h.split("-")[1] : null, A = Ho(to, o, i), eo = $o(o, i), so = Ko(
     o,
     i,
     a
-  ), r = Ko(
+  ), r = Mo(
     o,
     i,
     No
@@ -115,13 +115,13 @@ const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
     enabled: y === "hover" && t,
     delay: {
       open: N,
-      close: M
+      close: H
     },
     move: !1
   }), ao = Ao(e, {
     enabled: y === "hover" && t
   }), lo = Oo(e, {
-    enabled: H && t,
+    enabled: K && t,
     escapeKey: !0
   }), po = Ro(e, { role: "tooltip" }), g = To([no, ao, lo, po]), co = n.ref, O = Do([b.setReference, co]), mo = Eo(
     () => Fo(
@@ -141,10 +141,10 @@ const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
       w,
       {
         absolute: !0,
-        zIndex: K,
+        zIndex: M,
         className: j,
         ref: b.setFloating,
-        style: { ..._, ...W },
+        style: { ...Z, ...W },
         ...g.getFloatingProps({
           id: f
         }),
@@ -153,10 +153,10 @@ const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
           {
             relative: !0,
             maxWidth: $,
-            p: q,
-            borderRadius: G,
+            p: _,
+            borderRadius: q,
             className: T(
-              Go,
+              qo,
               ro,
               z
             ),
@@ -164,9 +164,9 @@ const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
               a && /* @__PURE__ */ l(
                 w,
                 {
-                  ref: Q,
+                  ref: L,
                   className: T(
-                    Jo,
+                    Go,
                     io,
                     B
                   )
@@ -189,7 +189,7 @@ const { color: Uo, cornerRadius: Wo, spacing: Yo } = zo, qo = ho`
     ) })
   ] });
 };
-Lo.displayName = "Tooltip";
+Jo.displayName = "Tooltip";
 export {
-  Lo as Tooltip
+  Jo as Tooltip
 };

package/dist/components/shared/Tooltip/constants.js

@@ -21,12 +21,12 @@ const { color: o } = t, l = {
   // ◄ (tooltip справа, стрелка влево)
 }, p = 10, n = 6, e = 1, i = {
   primary: {
-    backgroundColor: o.fill.bgPrimary,
+    backgroundColor: o.fill.bg_primary,
     color: o.text.primary
   },
   inverse: {
-    backgroundColor: o.fill.bgPrimaryInverse,
-    color: o.text.primaryInverse
+    backgroundColor: o.fill.bg_primary_inverse,
+    color: o.text.primary_inverse
   }
 };
 export {

package/dist/index.js

@@ -2,20 +2,20 @@
 import { UiKitLocaleProvider as t } from "./locale/UiKitLocaleProvider/UiKitLocaleProvider.js";
 import { Box as m } from "./components/builders/Box/Box.js";
 import { Loader as f } from "./components/builders/Loader/Loader.js";
-import { Modal as n } from "./components/builders/Modal/index.js";
+import { Modal as i } from "./components/builders/Modal/index.js";
 import { Portal as T } from "./components/builders/Portal/Portal.js";
 import { Ripple as l } from "./components/builders/Ripple/Ripple.js";
 import { Table as C } from "./components/builders/Table/Table.js";
 import { createColumnHelper as B } from "@tanstack/react-table";
-import { AnimatedText as g, Text as k } from "./components/builders/Text/Text.js";
-import { LineChart as E } from "./components/charts/LineChart/LineChart.js";
+import { AnimatedText as h, Text as g } from "./components/builders/Text/Text.js";
+import { LineChart as A } from "./components/charts/LineChart/LineChart.js";
 import { PieProgressChart as S } from "./components/charts/PieProgressChart/PieProgressChart.js";
 import { Button as P } from "./components/controls/Button/Button.js";
 import { Checkbox as _ } from "./components/controls/Checkbox/Checkbox.js";
 import { IconButton as I } from "./components/controls/IconButton/IconButton.js";
 import { Input as v } from "./components/controls/Input/Input.js";
-import { MarkdownToolbarAction as O } from "./components/controls/MarkdownTextEditor/hooks/useToolbarActions/useToolbarActions.const.js";
-import { MARKDOWN_TEXT_EDITOR_LOCALE_KEY as H } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.locale.js";
+import { MarkdownToolbarAction as K } from "./components/controls/MarkdownTextEditor/hooks/useToolbarActions/useToolbarActions.const.js";
+import { MARKDOWN_TEXT_EDITOR_LOCALE_KEY as D } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.locale.js";
 import { MarkdownTextEditor as U } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.js";
 import { OtpInput as y } from "./components/controls/OtpInput/OtpInput.js";
 import { Radio as F } from "./components/controls/RadioGroup/Radio.js";
@@ -29,46 +29,47 @@ import { Avatar as eo } from "./components/shared/Avatar/Avatar.js";
 import { Badge as po } from "./components/shared/Badge/Badge.js";
 import { Hint as xo } from "./components/shared/Hint/Hint.js";
 import { MarkdownText as ao } from "./components/shared/MarkdownText/MarkdownText.js";
-import { Popover as io } from "./components/shared/Popover/Popover.js";
+import { Popover as no } from "./components/shared/Popover/Popover.js";
 import { Skeleton as so } from "./components/shared/Skeleton/Skeleton.js";
 import { Tag as Co } from "./components/shared/Tag/Tag.js";
 import { Toast as Bo } from "./components/shared/Toast/Toast.js";
-import { useToast as go } from "./components/shared/Toast/Toast.hooks.js";
-import { toast as Ao } from "./components/shared/Toast/Toast.utils.js";
-import { ToastContainer as ho } from "./components/shared/Toast/ToastContainer.js";
+import { useToast as ho } from "./components/shared/Toast/Toast.hooks.js";
+import { toast as ko } from "./components/shared/Toast/Toast.utils.js";
+import { ToastContainer as Eo } from "./components/shared/Toast/ToastContainer.js";
 import { Tooltip as Mo } from "./components/shared/Tooltip/Tooltip.js";
 import { ThemeProviderScoped as Ro } from "./providers/ThemeProviderScoped/ThemeProviderScoped.js";
 import { THEME_DATA_ATTRIBUTE as bo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.const.js";
-import { useControlled as Lo } from "./utils/hooks/useControlled.js";
-import { useBreakpoint as wo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.js";
-import { Breakpoints as Do, BreakpointsBase as Ho } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
-import { getFontWeightClass as Uo } from "./utils/styles/getFontWeightClass/getFontWeightClass.js";
-import { getSizeClass as yo } from "./utils/styles/getSizeClass/getSizeClass.js";
-import { getStyleClass as Fo } from "./utils/styles/getStyleClass/getStyleClass.js";
-import { theme as No } from "./utils/theme/index.js";
+import { ThemeContext as Lo, useUiKitTheme as vo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.context.js";
+import { useControlled as Ko } from "./utils/hooks/useControlled.js";
+import { useBreakpoint as Do } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.js";
+import { Breakpoints as Uo, BreakpointsBase as Wo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
+import { getFontWeightClass as zo } from "./utils/styles/getFontWeightClass/getFontWeightClass.js";
+import { getSizeClass as Go } from "./utils/styles/getSizeClass/getSizeClass.js";
+import { getStyleClass as Xo } from "./utils/styles/getStyleClass/getStyleClass.js";
+import { theme as jo } from "./utils/theme/index.js";
 export {
-  g as AnimatedText,
+  h as AnimatedText,
   eo as Avatar,
   po as Badge,
   m as Box,
   oo as Breadcrumbs,
-  Do as Breakpoints,
-  Ho as BreakpointsBase,
+  Uo as Breakpoints,
+  Wo as BreakpointsBase,
   P as Button,
   _ as Checkbox,
   xo as Hint,
   I as IconButton,
   v as Input,
-  E as LineChart,
+  A as LineChart,
   f as Loader,
-  H as MARKDOWN_TEXT_EDITOR_LOCALE_KEY,
+  D as MARKDOWN_TEXT_EDITOR_LOCALE_KEY,
   ao as MarkdownText,
   U as MarkdownTextEditor,
-  O as MarkdownToolbarAction,
-  n as Modal,
+  K as MarkdownToolbarAction,
+  i as Modal,
   y as OtpInput,
   S as PieProgressChart,
-  io as Popover,
+  no as Popover,
   T as Portal,
   F as Radio,
   N as RadioGroup,
@@ -81,19 +82,21 @@ export {
   C as Table,
   Z as Tabs,
   Co as Tag,
-  k as Text,
+  g as Text,
+  Lo as ThemeContext,
   Ro as ThemeProviderScoped,
   Bo as Toast,
-  ho as ToastContainer,
+  Eo as ToastContainer,
   Mo as Tooltip,
   t as UiKitLocaleProvider,
   B as createColumnHelper,
-  Uo as getFontWeightClass,
-  yo as getSizeClass,
-  Fo as getStyleClass,
-  No as theme,
-  Ao as toast,
-  wo as useBreakpoint,
-  Lo as useControlled,
-  go as useToast
+  zo as getFontWeightClass,
+  Go as getSizeClass,
+  Xo as getStyleClass,
+  jo as theme,
+  ko as toast,
+  Do as useBreakpoint,
+  Ko as useControlled,
+  ho as useToast,
+  vo as useUiKitTheme
 };

package/dist/providers/ThemeProviderScoped/ThemeProviderScoped.const.d.ts

@@ -1 +1,9 @@
+/**
+ * Атрибут, которым выбирается тема. Часть публичного контракта: приложение
+ * обязано выставить его на `<html>` до первого пейнта (SSR или инлайн-скрипт
+ * в `<head>`), иначе фон документа мигнёт светлым — см. docs/styles/themes.
+ *
+ * Экспортируется именно чтобы anti-flash-скрипты не хардкодили имя: если оно
+ * когда-нибудь изменится, потребители сломаются молча.
+ */
 export declare const THEME_DATA_ATTRIBUTE: "data-theme";

package/dist/providers/ThemeProviderScoped/ThemeProviderScoped.context.d.ts

@@ -0,0 +1,12 @@
+import { UiKitTheme } from './ThemeProviderScoped.types';
+export interface IThemeContext {
+    theme: UiKitTheme;
+    setTheme: (theme: UiKitTheme) => void;
+}
+export declare const ThemeContext: import('react').Context<IThemeContext | null>;
+/**
+ * Текущая тема и её сеттер — доступны любому компоненту внутри `ThemeProviderScoped`.
+ * `setTheme` меняет тему только в uncontrolled-режиме (когда `theme` снаружи не передан);
+ * если тема контролируется извне, используйте `onThemeChange` на `ThemeProviderScoped`.
+ */
+export declare function useUiKitTheme(): IThemeContext;

package/dist/providers/ThemeProviderScoped/ThemeProviderScoped.context.js

@@ -0,0 +1,12 @@
+import { createContext as t, useContext as o } from "react";
+const r = t(null);
+function i() {
+  const e = o(r);
+  if (!e)
+    throw new Error("useUiKitTheme must be used within a ThemeProviderScoped");
+  return e;
+}
+export {
+  r as ThemeContext,
+  i as useUiKitTheme
+};

package/dist/providers/ThemeProviderScoped/ThemeProviderScoped.d.ts

@@ -1,2 +1,2 @@
 import { IThemeProviderProps } from './ThemeProviderScoped.types';
-export declare function ThemeProviderScoped({ className, children, theme, position, applyThemeToRoot, }: IThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProviderScoped({ className, children, theme: controlledTheme, defaultTheme, onThemeChange, position, }: IThemeProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/ThemeProviderScoped/ThemeProviderScoped.js

@@ -1,35 +1,46 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import d from "classnames";
-import { useRef as c, useEffect as p } from "react";
-import { PortalHostContext as u } from "../../components/builders/Portal/context.js";
-import { ToastContainer as l } from "../../components/shared/Toast/ToastContainer.js";
-import a from "./styles.module.scss.js";
-import { THEME_DATA_ATTRIBUTE as i } from "./ThemeProviderScoped.const.js";
-function h({
-  className: s,
-  children: m,
-  theme: r,
-  position: f = "top-right",
-  applyThemeToRoot: o = !1
+import { jsx as r, jsxs as T } from "react/jsx-runtime";
+import { useRef as a, useCallback as C, useMemo as x, useEffect as E } from "react";
+import { PortalHostContext as A } from "../../components/builders/Portal/context.js";
+import { ToastContainer as P } from "../../components/shared/Toast/ToastContainer.js";
+import { THEME_DATA_ATTRIBUTE as l } from "./ThemeProviderScoped.const.js";
+import { ThemeContext as R } from "./ThemeProviderScoped.context.js";
+import { useControlled as b } from "../../utils/hooks/useControlled.js";
+function B({
+  className: c,
+  children: u,
+  theme: t,
+  defaultTheme: f = "light",
+  onThemeChange: i,
+  position: p = "top-right"
 }) {
-  const e = c(null);
-  return p(() => {
-    !o || typeof r != "string" || document.documentElement.setAttribute(i, r);
-  }, [o, r]), // Прокидываем ref в контекст, чтобы вложенный Portal знал, куда монтировать DOM.
-  /* @__PURE__ */ t(u.Provider, { value: e, children: /* @__PURE__ */ n(
+  const m = a(null), [h, s] = b(
+    t,
+    f
+  ), o = t !== void 0, e = o ? t : h, n = C(
+    (d) => {
+      o || s(d), i?.(d);
+    },
+    [o, i, s]
+  ), v = x(
+    () => ({ theme: e, setTheme: n }),
+    [e, n]
+  );
+  return E(() => {
+    document.documentElement.setAttribute(l, e);
+  }, [e]), /* @__PURE__ */ r(R.Provider, { value: v, children: /* @__PURE__ */ r(A.Provider, { value: m, children: /* @__PURE__ */ T(
     "div",
     {
-      ref: e,
-      className: d(a.themeProviderScoped, s),
-      id: "theme-provider-scoped",
-      [i]: r,
+      ref: m,
+      className: c,
+      id: "dss-theme-provider",
+      [l]: e,
       children: [
-        m,
-        /* @__PURE__ */ t(l, { position: f })
+        u,
+        /* @__PURE__ */ r(P, { position: p })
       ]
     }
-  ) });
+  ) }) });
 }
 export {
-  h as ThemeProviderScoped
+  B as ThemeProviderScoped
 };

package/dist/providers/ThemeProviderScoped/ThemeProviderScoped.types.d.ts

@@ -1,13 +1,38 @@
 import { PropsWithChildren } from 'react';
 import { ToastPosition } from '../../components/shared/Toast';
 import { IClassnameProp } from '../../types';
-export type UiKitTheme = "dark" | "light" | "brand" | "crimson-light" | "crimson-dark";
+export type UiKitTheme = "dark" | "light";
 export interface IThemeProviderProps extends IClassnameProp, PropsWithChildren {
+    /**
+     * Активная тема в controlled-режиме — компонент всегда следует этому значению,
+     * `setTheme` из `useUiKitTheme()` сам его не меняет (см. `onThemeChange`).
+     *
+     * Нужен, только если источник истины о теме живёт СНАРУЖИ этого дерева —
+     * например, в Redux/сторе, который может измениться независимо от вызовов
+     * `setTheme()` изнутри (WebView-мост, другая вкладка и т.п.), и/или тему
+     * читают ещё где-то помимо потомков этого провайдера. Если единственный,
+     * кто вообще меняет тему — компонент внутри дерева через `useUiKitTheme()`,
+     * controlled не нужен — используйте `defaultTheme`, это заметно проще.
+     */
     theme?: UiKitTheme;
-    position?: ToastPosition;
     /**
-     * Синхронизирует атрибут темы на document при смене темы.
-     * Нужно для фона `html`/`body` и iOS overscroll
+     * Начальная тема в uncontrolled-режиме (когда `theme` не передан) — обычный
+     * случай, если единственный источник смены темы — вызовы `setTheme()` из
+     * `useUiKitTheme()` внутри дерева. Компонент сам хранит и обновляет
+     * состояние дальше, никакой обвязки снаружи не требуется.
+     * @default "light"
      */
-    applyThemeToRoot?: boolean;
+    defaultTheme?: UiKitTheme;
+    /**
+     * Вызывается при каждом `setTheme()` из `useUiKitTheme()` — в обоих режимах,
+     * и controlled, и uncontrolled. Предназначен для side-effect'ов
+     * (например, сохранить тему в cookie/localStorage), а не для самого
+     * переключения:
+     * - в uncontrolled-режиме компонент и так обновит своё состояние сам —
+     *   этот колбэк тут не единственный (и не обязательный) способ сменить тему;
+     * - в controlled-режиме это единственный способ реально сменить тему:
+     *   сохраните новое значение снаружи и передайте его обратно через `theme`.
+     */
+    onThemeChange?: (theme: UiKitTheme) => void;
+    position?: ToastPosition;
 }

package/dist/providers/ThemeProviderScoped/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ThemeProviderScoped';
 export * from './ThemeProviderScoped.const';
+export * from './ThemeProviderScoped.context';
 export type * from './ThemeProviderScoped.types';