fsk-design-system 1.2.0 → 1.2.1

package/dist/theme/theme.context.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { Theme } from './theme.types';
+export type ThemeContextValue = {
+    theme: Theme;
+    changeTheme: (newTheme: Theme) => void;
+};
+export declare const ThemeContext: React.Context<ThemeContextValue | undefined>;
+type Props = React.PropsWithChildren<{
+    forcedTheme?: Theme;
+}>;
+export declare const ThemeProviderContext: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/theme/theme.context.js

@@ -0,0 +1,39 @@
+import { jsx as h } from "@emotion/react/jsx-runtime";
+import s from "react";
+const g = s.createContext(void 0), k = (r) => {
+  const {
+    forcedTheme: t,
+    children: f
+  } = r, [m, l] = s.useState(() => t || v()), n = (e, a = !0) => {
+    const o = document.documentElement;
+    o.classList.add(d), o.dataset.theme = e, a && l(e), requestAnimationFrame(() => {
+      o.classList.remove(d);
+    });
+  }, u = (e) => {
+    t || (localStorage.setItem(c, e), n(e, !1));
+  };
+  return s.useEffect(() => {
+    if (n(m, !1), t) return;
+    const e = (a) => {
+      const {
+        key: o,
+        newValue: i
+      } = a;
+      o === c && (i === "light" || i === "dark") && n(i);
+    };
+    return window.addEventListener("storage", e), () => window.removeEventListener("storage", e);
+  }, []), s.useEffect(() => {
+    t && n(t);
+  }, [t]), /* @__PURE__ */ h(g.Provider, { value: {
+    theme: m,
+    changeTheme: u
+  }, children: f });
+}, v = () => {
+  if (typeof window > "u") return "light";
+  const r = localStorage.getItem(c);
+  return r || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+}, c = "fsk-design-system-theme", d = "no-theme-transition";
+export {
+  g as ThemeContext,
+  k as ThemeProviderContext
+};

package/dist/theme/theme.provider.js

@@ -1,31 +1,33 @@
 import { jsx as e } from "@emotion/react/jsx-runtime";
-import { ConfigProvider as s, App as n } from "antd";
-import p from "antd/es/locale/ru_RU";
+import { ConfigProvider as t, App as i } from "antd";
+import n from "antd/es/locale/ru_RU";
 import c from "dayjs";
 import "dayjs/locale/ru.js";
-import { themedTokens as h, commonTokens as d } from "./theme.tokens.js";
-import { useTheme as f } from "./useTheme.js";
+import { ThemeProviderContext as d } from "./theme.context.js";
+import { themedTokens as h, commonTokens as s } from "./theme.tokens.js";
+import { useTheme as p } from "./useTheme.js";
 c.locale("ru");
-const g = (o) => {
+const g = (r) => {
   const {
-    children: r,
-    forcedTheme: m,
-    ...t
-  } = o, {
-    theme: i
-  } = f({
+    children: o,
     forcedTheme: m
-  });
-  return /* @__PURE__ */ e(s, { locale: p, wave: {
+  } = r;
+  return /* @__PURE__ */ e(d, { forcedTheme: m, children: /* @__PURE__ */ e(l, { children: o }) });
+}, l = (r) => {
+  const {
+    children: o
+  } = r, {
+    theme: m
+  } = p();
+  return /* @__PURE__ */ e(t, { locale: n, wave: {
     disabled: !0
   }, theme: {
-    ...t,
     cssVar: !0,
     token: {
-      ...d,
-      ...h[i || "light"]
+      ...s,
+      ...h[m || "light"]
     }
-  }, children: /* @__PURE__ */ e(n, { children: r }) });
+  }, children: /* @__PURE__ */ e(i, { children: o }) });
 };
 export {
   g as ThemeProvider

package/dist/theme/useTheme.d.ts

@@ -1,9 +1,2 @@
-import { Theme } from './theme.types';
-type Props = {
-    forcedTheme?: Theme;
-};
-export declare const useTheme: (props?: Props) => {
-    theme: Theme;
-    changeTheme: (newTheme: Theme) => void;
-};
-export {};
+import { ThemeContextValue } from './theme.context';
+export declare const useTheme: () => ThemeContextValue;

package/dist/theme/useTheme.js

@@ -1,36 +1,10 @@
-import i from "react";
-const g = (o = {}) => {
-  const {
-    forcedTheme: t
-  } = o, [m, f] = i.useState(() => t || l()), n = (e, a = !0) => {
-    const r = document.documentElement;
-    r.classList.add(d), r.dataset.theme = e, a && f(e), requestAnimationFrame(() => {
-      r.classList.remove(d);
-    });
-  }, u = (e) => {
-    t || (localStorage.setItem(c, e), n(e));
-  };
-  return i.useEffect(() => {
-    if (n(m, !1), t) return;
-    const e = (a) => {
-      const {
-        key: r,
-        newValue: s
-      } = a;
-      r !== c || !s || (s === "light" || s === "dark") && n(s);
-    };
-    return window.addEventListener("storage", e), () => window.removeEventListener("storage", e);
-  }, []), i.useEffect(() => {
-    t && n(t);
-  }, [t]), {
-    theme: m,
-    changeTheme: u
-  };
-}, d = "no-theme-transition", c = "fsk-design-system-theme", l = () => {
-  if (typeof window > "u") return "light";
-  const o = localStorage.getItem(c);
-  return o || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+import t from "react";
+import { ThemeContext as o } from "./theme.context.js";
+const n = () => {
+  const e = t.useContext(o);
+  if (!e) throw new Error("useTheme must be used inside ThemeProviderContext");
+  return e;
 };
 export {
-  g as useTheme
+  n as useTheme
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fsk-design-system",
   "description": "FSK UI components library",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "sideEffects": false,
   "type": "module",
   "files": [