@m4l/graphics 3.0.0 → 3.0.1

package/contexts/HostThemeContext/index-L-9XyXob.js

@@ -0,0 +1,45 @@
+import { createContext as a, useMemo as h } from "react";
+import { CssBaseline as d } from "@mui/material";
+import { G as p } from "../../components/GlobalStyle/index-BwMNLyTC.js";
+import { createTheme as x, experimental_extendTheme as f, Experimental_CssVarsProvider as u, StyledEngineProvider as T } from "@mui/material/styles";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+const v = a(null);
+function H(i) {
+  const {
+    children: m,
+    hostThemeOptions: t,
+    fnComponentsOverrides: n,
+    isMobile: l
+  } = i, c = h(() => {
+    const e = x({
+      ...t
+    }), r = f({
+      cssVarPrefix: "m4l",
+      colorSchemes: {
+        light: e,
+        finalTheme: e,
+        dark: e
+      }
+    });
+    return r.components = n(r), r;
+  }, [l]);
+  return /* @__PURE__ */ s(u, {
+    theme: c,
+    children: [/* @__PURE__ */ o(p, {}), /* @__PURE__ */ o(v.Provider, {
+      value: {
+        hostThemeOptions: t,
+        fnComponentsOverrides: n
+      },
+      children: /* @__PURE__ */ s(T, {
+        injectFirst: !0,
+        children: [/* @__PURE__ */ o(d, {
+          enableColorScheme: !0
+        }), m]
+      })
+    })]
+  });
+}
+export {
+  v as H,
+  H as a
+};

package/contexts/HostThemeContext/types.d.ts

@@ -8,5 +8,6 @@ export interface HostThemeType {
 export interface HostThemeProviderProps extends HostThemeType {
     isMicroFrontEnd: boolean;
     children: ReactNode;
+    isMobile: boolean;
 }
 export declare type HostThemeContextType = HostThemeType;

package/contexts/ThemeSettingsContext/types.d.ts

@@ -12,6 +12,7 @@ export declare type ThemeSettingsType = {
     themeColorPresets: ThemeColorPresets;
     themeStretch: ThemeStretch;
     themeLayout: ThemeLayout;
+    isMobile: boolean;
 };
 export interface ThemeSettingsStore {
     networkOperation: (props: NetworkProps) => Promise<any>;

package/contexts/{index-lSin3toV.js → index-B5tlaHe1.js}

@@ -1,10 +1,11 @@
-import { createContext as S, useRef as f, useMemo as b, useLayoutEffect as k } from "react";
-import { c as T, d as C, i as v, l as P } from "../node_modules-BHhXVwYT.js";
+import { createContext as S, useRef as f, useMemo as R, useLayoutEffect as k, useEffect as P } from "react";
+import { c as T, d as C, i as v, l as O } from "../node_modules-BHhXVwYT.js";
 import { jsx as y } from "react/jsx-runtime";
-import { useNetwork as O, useLocalStorageWithListener as x } from "@m4l/core";
-import { getPaletteByPreset as w, typography as E, shadows as d, getColorPresets as L, createCustomShadows as M, defaultThemeOptions as B, presetsOptions as A } from "@m4l/styles";
-import { alpha as D } from "@mui/system";
-const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, z = (r) => {
+import { useNetwork as x, useLocalStorageWithListener as M } from "@m4l/core";
+import { getPaletteByPreset as w, typography as E, shadows as d, getColorPresets as L, createCustomShadows as B, defaultThemeOptions as A, presetsOptions as D } from "@m4l/styles";
+import { alpha as z } from "@mui/system";
+import { u as $ } from "../hooks/useIsMobile/index-Bro0dV28.js";
+const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, j = (r) => {
   const n = {
     ...r
   };
@@ -14,8 +15,8 @@ const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, z = (r) => {
         ...n,
         responsiveContainerActions: {
           setBreakpoint: (e) => {
-            o((s) => {
-              s.breakPoint = e, s.isUpSm = e !== "xs" && e !== "sm", s.isXs = e == "xs";
+            o((i) => {
+              i.breakPoint = e, i.isUpSm = e !== "xs" && e !== "sm", i.isXs = e == "xs";
             });
           }
         }
@@ -23,45 +24,45 @@ const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, z = (r) => {
       { name: "Responsive Relative Store" }
     )
   );
-}, $ = S(null), H = (r) => {
+}, W = S(null), F = (r) => {
   const {
     children: n,
     observedDivRef: o
   } = r, t = f();
-  t.current || (t.current = z({
+  t.current || (t.current = j({
     breakPoint: "md",
     isUpSm: !1,
     isXs: !1
   }));
   const e = () => {
-    const m = o;
-    if (m instanceof HTMLElement && m.clientWidth) {
-      const c = Object.keys(g);
-      for (let h = 0; h < c.length; h++) {
-        const u = c[h];
-        if (m.clientWidth <= g[u]) {
+    const s = o;
+    if (s instanceof HTMLElement && s.clientWidth) {
+      const a = Object.keys(g);
+      for (let h = 0; h < a.length; h++) {
+        const u = a[h];
+        if (s.clientWidth <= g[u]) {
           t.current?.getState().responsiveContainerActions.setBreakpoint(u);
           break;
-        } else h === c.length - 1 && m.clientWidth >= g[u] && t.current?.getState().responsiveContainerActions.setBreakpoint(u);
+        } else h === a.length - 1 && s.clientWidth >= g[u] && t.current?.getState().responsiveContainerActions.setBreakpoint(u);
       }
     }
-  }, s = b(() => P.throttle(e, 200, {
+  }, i = R(() => O.throttle(e, 200, {
     leading: !1,
     trailing: !0
   }), [e]);
   return k(() => {
-    const m = () => {
-      s();
-    }, c = o;
-    if (c && c instanceof Element) {
+    const s = () => {
+      i();
+    }, a = o;
+    if (a && a instanceof Element) {
       const h = new ResizeObserver((u) => {
-        m();
+        s();
       });
-      return h.observe(c), () => {
+      return h.observe(a), () => {
         h.disconnect();
       };
     }
-  }, [o]), /* @__PURE__ */ y($.Provider, {
+  }, [o]), /* @__PURE__ */ y(W.Provider, {
     value: t.current,
     children: n
   });
@@ -70,9 +71,10 @@ const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, z = (r) => {
   themeDirection: "ltr",
   themeColorPresets: "patronus",
   themeLayout: "horizontal",
-  themeStretch: !1
+  themeStretch: !1,
+  isMobile: !1
 };
-function R(r, n = "m4l") {
+function b(r, n = "m4l") {
   const o = document.querySelector('[data-mui-color-scheme="light"]');
   if (!o) {
     console.error('Element with data-mui-color-scheme="light" not found.');
@@ -81,47 +83,50 @@ function R(r, n = "m4l") {
   Object.keys(r).forEach((t) => {
     const e = r[t];
     if (typeof e == "string" || typeof e == "number") {
-      const s = `--${n}-${t}`;
-      o.style.setProperty(s, e.toString());
-    } else typeof e == "object" && e !== null && R(e, `${n}-${t}`);
+      const i = `--${n}-${t}`;
+      o.style.setProperty(i, e.toString());
+    } else typeof e == "object" && e !== null && b(e, `${n}-${t}`);
   });
 }
-const l = {
+const m = {
   mainChannel: "",
   lightChannel: "",
   darkChannel: "",
   contrastTextChannel: ""
-}, i = (r) => {
-  const n = r.currentThemeSettings || p, o = n.themeMode === "light", t = w(n.themeColorPresets), e = o ? t.light : t.dark;
+}, c = (r) => {
+  const n = r.currentThemeSettings || p, o = n.themeMode === "light", t = w(n.themeColorPresets), e = o ? t.light : t.dark, i = n.isMobile;
   r.themeOptions = {
     ...r.themeOptions,
     typography: E,
+    generalSettings: {
+      isMobile: i
+    },
     palette: {
       ...r.themeOptions?.palette ?? {},
       ...e,
       primary: {
         ...e.primary,
-        ...l
+        ...m
       },
       secondary: {
         ...e.secondary,
-        ...l
+        ...m
       },
       info: {
         ...e.info,
-        ...l
+        ...m
       },
       error: {
         ...e.error,
-        ...l
+        ...m
       },
       success: {
         ...e.success,
-        ...l
+        ...m
       },
       warning: {
         ...e.warning,
-        ...l
+        ...m
       },
       text: {
         ...e.text,
@@ -150,29 +155,29 @@ const l = {
     direction: n.themeDirection,
     shadows: o ? d.light : d.dark,
     customShadows: {
-      primary: `0 8px 16px 0 ${D(
+      primary: `0 8px 16px 0 ${z(
         L(n.themeColorPresets)?.main || "#fff",
         0.2
       )}`,
-      ...M(n.themeMode)
+      ...B(n.themeMode)
     },
     stretch: n.themeStretch
-  }, R(r.themeOptions);
-}, a = (r) => {
+  }, b(r.themeOptions);
+}, l = (r) => {
   r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
-}, j = (r) => T(
+}, _ = (r) => T(
   C(
     v((n, o) => ({
       ...r,
       settingsActions: {
         init: () => {
           n((t) => {
-            i(t);
+            c(t);
           });
         },
         setThemeSettings: (t) => {
           n((e) => {
-            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, a(e), i(e);
+            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, l(e), c(e);
           });
         },
         onChangeMode: (t) => {
@@ -180,7 +185,7 @@ const l = {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeMode: t.target.value
-            }, a(e), i(e);
+            }, l(e), c(e);
           });
         },
         handleOpen: () => {
@@ -193,7 +198,7 @@ const l = {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeDirection: t.target.value
-            }, a(e), i(e);
+            }, l(e), c(e);
           });
         },
         onChangeColor: (t) => {
@@ -201,7 +206,7 @@ const l = {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeColorPresets: t.target.value
-            }, a(e), i(e);
+            }, l(e), c(e);
           });
         },
         onChangeLayout: (t) => {
@@ -209,7 +214,7 @@ const l = {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeLayout: t.target.value
-            }, a(e), i(e);
+            }, l(e), c(e);
           });
         },
         onToggleStretch: () => {
@@ -217,48 +222,52 @@ const l = {
             t.currentThemeSettings = {
               ...t.currentThemeSettings,
               themeStretch: !t.currentThemeSettings.themeStretch
-            }, a(t), i(t);
+            }, l(t), c(t);
           });
         },
         onResetSetting: () => {
           n((t) => {
             t.currentThemeSettings = {
               ...p
-            }, a(t), i(t);
+            }, l(t), c(t);
           });
         }
       }
     })),
     { name: "ThemeSettingsStore" }
   )
-), W = S(null);
-function I({
+), N = S(null);
+function G({
   children: r,
   themeSettings: n
 }) {
   const {
     networkOperation: o
-  } = O(), [t, e] = x("theme_setting", {}), s = f();
-  return s.current || (s.current = j({
+  } = x(), t = $(), [e, i] = M("theme_setting", {}), s = f();
+  return s.current || (s.current = _({
     networkOperation: o,
     currentThemeSettings: {
       ...p,
       ...n,
-      ...t
+      ...e
     },
-    themeOptions: B,
-    colorOption: A,
+    themeOptions: A,
+    colorOption: D,
     open: !1,
-    setterThemeSettings: n ? void 0 : e
-  }), s.current.getState().settingsActions.init()), /* @__PURE__ */ y(W.Provider, {
+    setterThemeSettings: n ? void 0 : i
+  }), s.current.getState().settingsActions.init()), P(() => {
+    s.current?.getState().settingsActions.setThemeSettings({
+      isMobile: t
+    });
+  }, [t]), /* @__PURE__ */ y(N.Provider, {
     value: s.current,
     children: r
   });
 }
 export {
-  $ as R,
-  W as T,
-  H as a,
-  I as b,
+  W as R,
+  N as T,
+  F as a,
+  G as b,
   p as d
 };

package/hooks/{index-BFpjMXdG.js → index-Ds71tnc2.js}

@@ -1,7 +1,7 @@
 import { useRef as n, useEffect as r, useState as i, useContext as u, useLayoutEffect as c } from "react";
-import { H as m } from "../contexts/HostThemeContext/index-KkaEtH_8.js";
+import { H as m } from "../contexts/HostThemeContext/index-L-9XyXob.js";
 import { u as a } from "../node_modules-BHhXVwYT.js";
-import { T as l } from "../contexts/index-lSin3toV.js";
+import { T as l } from "../contexts/index-B5tlaHe1.js";
 function S() {
   const e = n(!0);
   return r(

package/hooks/useResponsive/{index-CH-gd9zy.js → index-2q6r6mFX.js}

@@ -1,6 +1,6 @@
 import { useContext as t } from "react";
 import { u as r } from "../../node_modules-BHhXVwYT.js";
-import { R as n } from "../../contexts/index-lSin3toV.js";
+import { R as n } from "../../contexts/index-B5tlaHe1.js";
 import { useResponsive as i } from "@m4l/styles";
 function f(e, s) {
   const o = t(n);

package/index.js

@@ -1,13 +1,13 @@
 import { G as s } from "./components/GlobalStyle/index-BwMNLyTC.js";
 import { L as r, a, g as i } from "./contexts/LocalesContext/index--VwMF60R.js";
 import { F as m, a as p } from "./contexts/FormatterContext/index-BHG3bJJo.js";
-import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-lSin3toV.js";
-import { H as T, a as g } from "./contexts/HostThemeContext/index-KkaEtH_8.js";
+import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-B5tlaHe1.js";
+import { H as T, a as g } from "./contexts/HostThemeContext/index-L-9XyXob.js";
 import { u as R } from "./hooks/useFirstRender/index-B-Q0TTn0.js";
 import { u as c } from "./hooks/useFormatter/index-DfdAcbzw.js";
-import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-BFpjMXdG.js";
+import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-Ds71tnc2.js";
 import { u as z } from "./hooks/useLocales/index-mTHn9nqY.js";
-import { u as I, a as M } from "./hooks/useResponsive/index-CH-gd9zy.js";
+import { u as I, a as M } from "./hooks/useResponsive/index-2q6r6mFX.js";
 import { u as y } from "./hooks/useIsMobile/index-Bro0dV28.js";
 import { C as D, g as E } from "./utils/index-DZG6QXjf.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "dependencies": {

package/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/contexts/HostThemeContext/index-KkaEtH_8.js

@@ -1,44 +0,0 @@
-import { createContext as c, useMemo as a } from "react";
-import { CssBaseline as h } from "@mui/material";
-import { G as d } from "../../components/GlobalStyle/index-BwMNLyTC.js";
-import { createTheme as p, experimental_extendTheme as x, Experimental_CssVarsProvider as f, StyledEngineProvider as u } from "@mui/material/styles";
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-const T = c(null);
-function H(m) {
-  const {
-    children: i,
-    hostThemeOptions: o,
-    fnComponentsOverrides: n
-  } = m, l = a(() => {
-    const e = p({
-      ...o
-    }), r = x({
-      cssVarPrefix: "m4l",
-      colorSchemes: {
-        light: e,
-        finalTheme: e,
-        dark: e
-      }
-    });
-    return r.components = n(r), r;
-  }, []);
-  return /* @__PURE__ */ s(f, {
-    theme: l,
-    children: [/* @__PURE__ */ t(d, {}), /* @__PURE__ */ t(T.Provider, {
-      value: {
-        hostThemeOptions: o,
-        fnComponentsOverrides: n
-      },
-      children: /* @__PURE__ */ s(u, {
-        injectFirst: !0,
-        children: [/* @__PURE__ */ t(h, {
-          enableColorScheme: !0
-        }), i]
-      })
-    })]
-  });
-}
-export {
-  T as H,
-  H as a
-};