@m4l/graphics 1.0.9 → 1.0.11

package/components/index.8083534b.js

@@ -0,0 +1,4 @@
+import "@mui/material/styles";
+import "@mui/material";
+import "@m4l/styles";
+import "react/jsx-runtime";

package/contexts/HostThemeContext/{index.02e36f38.js → index.89c85eb6.js}

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

package/contexts/ResponsiveContainerContext/constants.d.ts

@@ -1,2 +1,2 @@
-import { BreakPointsType } from "./types";
+import { BreakPointsType } from './types';
 export declare const BREAKPOINTS: BreakPointsType;

package/contexts/ResponsiveContainerContext/types.d.ts

@@ -19,8 +19,7 @@ export interface ResponsiveContainerState {
     isUpSm: boolean;
     isXs: boolean;
 }
-export interface InitialResponsiveContainerProps extends Pick<ResponsiveContainerState, 'breakPoint' | 'isUpSm' | 'isXs'> {
-}
+export declare type InitialResponsiveContainerProps = Pick<ResponsiveContainerState, 'breakPoint' | 'isUpSm' | 'isXs'>;
 export interface ResponsiveContainerStateWithActions extends ResponsiveContainerState {
     responsiveContainerActions: {
         setBreakpoint: (breakPoint: BreakpointType) => void;

package/contexts/{index.1d935da9.js → index.9a0fbc7c.js}

@@ -1,8 +1,12 @@
+import "./FormatterContext/index.92336f4c.js";
+import "./LocalesContext/index.53f0b702.js";
 import { createContext as f, useRef as T, useMemo as k, useLayoutEffect as y, useEffect as b } from "react";
-import { c as v, d as R, i as P, l as M } from "../node_modules.7cdb697c.js";
+import { c as v, d as R, i as P, l as E } from "../node_modules.9690bbee.js";
 import { jsx as x } from "react/jsx-runtime";
-import { useNetwork as E, useLocalStorageWithListener as w } from "@m4l/core";
-import { getColorPresets as m, getColorState as d, typography as L, palette as S, SECONDARY as A, COMMON as N, ERROR as D, WARNING as z, INFO as W, SUCCESS as B, shadows as p, createCustomShadows as $, defaultThemeOptions as j, defaultPreset as _, colorPresets as F } from "@m4l/styles";
+import "date-fns/locale/en-US";
+import "./HostThemeContext/index.89c85eb6.js";
+import { useNetwork as M, useLocalStorageWithListener as w } from "@m4l/core";
+import { getColorPresets as m, getColorState as d, typography as L, palette as p, SECONDARY as A, COMMON as N, ERROR as D, WARNING as z, INFO as B, SUCCESS as $, shadows as S, createCustomShadows as j, defaultThemeOptions as W, defaultPreset as _, colorPresets as F } from "@m4l/styles";
 import { alpha as I } from "@mui/system";
 import { u as U } from "../hooks/useFirstRender/index.1e9b02fb.js";
 const C = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, K = (r) => {
@@ -15,18 +19,16 @@ const C = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, K = (r) => {
         ...t,
         responsiveContainerActions: {
           setBreakpoint: (e) => {
-            o(
-              (i) => {
-                console.log("current breakpoint", e), i.breakPoint = e, i.isUpSm = e !== "xs" && e !== "sm", i.isXs = e == "xs";
-              }
-            );
+            o((i) => {
+              i.breakPoint = e, i.isUpSm = e !== "xs" && e !== "sm", i.isXs = e == "xs";
+            });
           }
         }
       })),
       { name: "Responsive Relative Store" }
     )
   );
-}, X = f(null), te = (r) => {
+}, X = f(null), se = (r) => {
   const {
     children: t,
     observedDivRef: o
@@ -39,29 +41,28 @@ const C = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, K = (r) => {
   const e = () => {
     const s = o;
     if (s instanceof HTMLElement && s.clientWidth) {
-      const c = Object.keys(C);
-      for (let l = 0; l < c.length; l++) {
-        const g = c[l];
+      const a = Object.keys(C);
+      for (let l = 0; l < a.length; l++) {
+        const g = a[l];
         if (s.clientWidth <= C[g]) {
           n.current?.getState().responsiveContainerActions.setBreakpoint(g);
           break;
         }
       }
-      console.log("node.clientWidth", s.clientWidth), console.log("onResizeMemo", n.current?.getState().breakPoint);
     }
-  }, i = k(() => M.exports.throttle(e, 200, {
+  }, i = k(() => E.exports.throttle(e, 200, {
     leading: !1,
     trailing: !0
   }), [e]);
   return y(() => {
     const s = () => {
       i();
-    }, c = o;
-    if (c && c instanceof Element) {
+    }, a = o;
+    if (a && a instanceof Element) {
       const l = new ResizeObserver((g) => {
         s();
       });
-      return l.observe(c), () => {
+      return l.observe(a), () => {
         l.disconnect();
       };
     }
@@ -91,7 +92,7 @@ function O(r, t = "m4l") {
       typeof e == "object" && e !== null && O(e, `${t}-${n}`);
   });
 }
-const a = (r) => {
+const c = (r) => {
   const t = r.currentThemeSettings || u;
   console.log("getColorPresets", m(t.themeColorPresets)), console.log(
     "getColorState",
@@ -103,7 +104,7 @@ const a = (r) => {
     typography: L,
     palette: {
       ...r.themeOptions.palette,
-      ...o ? S.light : S.dark,
+      ...o ? p.light : p.dark,
       primary: m(t.themeColorPresets),
       state: d(t.themeColorPresets, t.themeMode),
       representative: t.themeMode === "light" ? m(t.themeColorPresets)?.light : m(t.themeColorPresets)?.darker,
@@ -141,7 +142,7 @@ const a = (r) => {
         contrastTextChannel: ""
       },
       info: {
-        ...W,
+        ...B,
         contrastText: "",
         mainChannel: "",
         lightChannel: "",
@@ -149,7 +150,7 @@ const a = (r) => {
         contrastTextChannel: ""
       },
       success: {
-        ...B,
+        ...$,
         contrastText: "",
         mainChannel: "",
         lightChannel: "",
@@ -159,13 +160,13 @@ const a = (r) => {
     },
     shape: { borderRadius: 8 },
     direction: t.themeDirection,
-    shadows: o ? p.light : p.dark,
+    shadows: o ? S.light : S.dark,
     customShadows: {
       primary: `0 8px 16px 0 ${I(
         m(t.themeColorPresets)?.main || "#fff",
         0.2
       )}`,
-      ...$(t.themeMode)
+      ...j(t.themeMode)
     },
     stretch: t.themeStretch
   }, console.log("state.themeOptions", r.themeOptions), O(r.themeOptions);
@@ -178,12 +179,12 @@ const a = (r) => {
       settingsActions: {
         init: () => {
           t((n) => {
-            a(n);
+            c(n);
           });
         },
         setThemeSettings: (n) => {
           t((e) => {
-            e.currentThemeSettings = { ...e.currentThemeSettings, ...n }, h(e), a(e);
+            e.currentThemeSettings = { ...e.currentThemeSettings, ...n }, h(e), c(e);
           });
         },
         onChangeMode: (n) => {
@@ -191,7 +192,7 @@ const a = (r) => {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeMode: n.target.value
-            }, h(e), a(e);
+            }, h(e), c(e);
           });
         },
         handleOpen: () => {
@@ -204,7 +205,7 @@ const a = (r) => {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeDirection: n.target.value
-            }, h(e), a(e);
+            }, h(e), c(e);
           });
         },
         onChangeColor: (n) => {
@@ -212,7 +213,7 @@ const a = (r) => {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeColorPresets: n.target.value
-            }, h(e), a(e);
+            }, h(e), c(e);
           });
         },
         onChangeLayout: (n) => {
@@ -220,7 +221,7 @@ const a = (r) => {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeLayout: n.target.value
-            }, h(e), a(e);
+            }, h(e), c(e);
           });
         },
         onToggleStretch: () => {
@@ -228,14 +229,14 @@ const a = (r) => {
             n.currentThemeSettings = {
               ...n.currentThemeSettings,
               themeStretch: !n.currentThemeSettings.themeStretch
-            }, h(n), a(n);
+            }, h(n), c(n);
           });
         },
         onResetSetting: () => {
           t((n) => {
             n.currentThemeSettings = {
               ...u
-            }, h(n), a(n);
+            }, h(n), c(n);
           });
         }
       }
@@ -243,23 +244,23 @@ const a = (r) => {
     { name: "ExampleStore" }
   )
 ), G = f(null);
-function ne({
+function ie({
   children: r,
   themeSettings: t
 }) {
   const {
     networkOperation: o
-  } = E(), [n, e] = w("theme_setting", u), i = U([t]), s = T();
+  } = M(), [n, e] = w("theme_setting", u), i = U([t]), s = T();
   return s.current || (s.current = q({
     networkOperation: o,
     currentThemeSettings: {
       ...t ?? n
     },
-    themeOptions: j,
+    themeOptions: W,
     currentPreset: _,
-    colorOption: F.map((c) => ({
-      name: c.name,
-      value: c.main
+    colorOption: F.map((a) => ({
+      name: a.name,
+      value: a.main
     })),
     open: !1,
     setterThemeSettings: t ? void 0 : e
@@ -273,7 +274,7 @@ function ne({
 export {
   X as R,
   G as T,
-  te as a,
-  ne as b,
+  se as a,
+  ie as b,
   u as d
 };

package/hooks/index.ff8c4415.js

@@ -0,0 +1,57 @@
+import { useRef as r, useEffect as n, useState as f, useContext as u, useLayoutEffect as c } from "react";
+import { H as m } from "../contexts/HostThemeContext/index.89c85eb6.js";
+import { u as a } from "../node_modules.9690bbee.js";
+import { T as p } from "../contexts/index.9a0fbc7c.js";
+import "../contexts/FormatterContext/index.92336f4c.js";
+import "../contexts/LocalesContext/index.53f0b702.js";
+import "@m4l/styles";
+function b() {
+  const e = r(!0);
+  return n(
+    () => () => {
+      e.current = !1;
+    },
+    []
+  ), e;
+}
+function g(e) {
+  const [o, t] = f(!1), s = e || 100;
+  return n(() => (window.onscroll = () => {
+    window.pageYOffset > s ? t(!0) : t(!1);
+  }, () => {
+    window.onscroll = null;
+  }), [s]), o;
+}
+const v = () => {
+  const e = u(m);
+  if (!e)
+    throw new Error("useHostTheme context must be use inside HostThemeProvider");
+  return e;
+};
+function H(e) {
+  const o = r(null);
+  return c(() => {
+    const t = o?.current;
+    if (!t)
+      return;
+    const s = new ResizeObserver((i) => {
+      e(t, i[0]);
+    });
+    return s.observe(t), () => {
+      s.disconnect();
+    };
+  }, [e, o.current]), o;
+}
+function O(e, o) {
+  const t = u(p);
+  if (!t)
+    throw new Error("useSettingsStore context must be use inside SettignsContext");
+  return a(t, e, o);
+}
+export {
+  g as a,
+  v as b,
+  H as c,
+  O as d,
+  b as u
+};

package/hooks/useIsMobile/{index.1afbcd66.js → index.54bf37f7.js}

@@ -1,11 +1,17 @@
 import { useState as n, useEffect as o } from "react";
-import { t as s } from "../../node_modules.7cdb697c.js";
+import { t as s } from "../../node_modules.9690bbee.js";
 const t = () => typeof navigator > "u" ? !1 : /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), l = () => {
   const [i, r] = n(t());
   return o(() => {
-    const e = s(() => {
-      r(t());
-    }, 200);
+    const e = s(
+      () => {
+        r(t());
+      },
+      200,
+      {
+        trailing: !0
+      }
+    );
     return window.addEventListener("resize", e), e(), () => {
       window.removeEventListener("resize", e), e.cancel();
     };

package/hooks/useResponsive/{index.0881f166.js → index.ea7ff1dc.js}

@@ -1,6 +1,6 @@
 import { useContext as t } from "react";
-import { u as r } from "../../node_modules.7cdb697c.js";
-import { R as n } from "../../contexts/index.1d935da9.js";
+import { u as r } from "../../node_modules.9690bbee.js";
+import { R as n } from "../../contexts/index.9a0fbc7c.js";
 import { useResponsive as i } from "@m4l/styles";
 function f(e, s) {
   const o = t(n);

package/index.js

@@ -1,43 +1,43 @@
 import { G as l } from "./components/GlobalStyle/index.b7393a44.js";
-import { L as C, a as T, g } from "./contexts/LocalesContext/index.53f0b702.js";
-import { F as R, a as S } from "./contexts/FormatterContext/index.92336f4c.js";
-import { R as F, a as P, T as b, b as L, d as H } from "./contexts/index.1d935da9.js";
-import { H as w, a as z } from "./contexts/HostThemeContext/index.02e36f38.js";
+import { F as C, a as T } from "./contexts/FormatterContext/index.92336f4c.js";
+import { L as h, a as R, g as S } from "./contexts/LocalesContext/index.53f0b702.js";
+import { R as F, a as P, T as b, b as L, d as H } from "./contexts/index.9a0fbc7c.js";
+import { H as w, a as z } from "./contexts/HostThemeContext/index.89c85eb6.js";
 import { u as I } from "./hooks/useFirstRender/index.1e9b02fb.js";
 import { u as O } from "./hooks/useFormatter/index.57ac8cca.js";
-import { b as A, u as D, a as E, c as N, d as W } from "./hooks/index.e4fb3c4e.js";
+import { b as A, u as D, a as E, c as N, d as W } from "./hooks/index.ff8c4415.js";
 import { u as q } from "./hooks/useLocales/index.d5a80aff.js";
-import { u as J, a as K } from "./hooks/useResponsive/index.0881f166.js";
-import { u as U } from "./hooks/useIsMobile/index.1afbcd66.js";
+import { u as J, a as K } from "./hooks/useResponsive/index.ea7ff1dc.js";
+import { u as U } from "./hooks/useIsMobile/index.54bf37f7.js";
 import { C as X, g as Y } from "./utils/index.6909c662.js";
 import "@mui/material/styles";
 import "@mui/material";
 import "@m4l/styles";
 import "react/jsx-runtime";
 import "react";
+import "@m4l/core";
 import "@mui/x-date-pickers/AdapterDateFns";
 import "@mui/x-date-pickers";
-import "@m4l/core";
 import "date-fns/locale/en-US";
-import "./node_modules.7cdb697c.js";
+import "./node_modules.9690bbee.js";
 import "./commonjs.e3daa2e5.js";
 import "@mui/system";
 export {
   X as Capitalize,
-  R as FormatterContext,
-  S as FormatterProvider,
+  C as FormatterContext,
+  T as FormatterProvider,
   l as GlobalStyles,
   w as HostThemeContext,
   z as HostThemeProvider,
-  C as LocalesContext,
-  T as LocalesProvider,
+  h as LocalesContext,
+  R as LocalesProvider,
   F as ResponsiveContainerContext,
   P as ResponsiveContainerProvider,
   b as ThemeSettingsContext,
   L as ThemeSettingsProvider,
   H as defaultThemeSettings,
   Y as getAnchorElPositionWindow,
-  g as getLocaleFromNetwork,
+  S as getLocaleFromNetwork,
   I as useFirstRender,
   O as useFormatter,
   A as useHostTheme,

package/package.json

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

package/vite-env.d.ts

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

package/components/index.d8d41b1b.js

@@ -1 +0,0 @@
-

package/hooks/index.e4fb3c4e.js

@@ -1,54 +0,0 @@
-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.02e36f38.js";
-import { u as a } from "../node_modules.7cdb697c.js";
-import { T as l } from "../contexts/index.1d935da9.js";
-function S() {
-  const e = n(!0);
-  return r(
-    () => () => {
-      e.current = !1;
-    },
-    []
-  ), e;
-}
-function x(e) {
-  const [s, t] = i(!1), o = e || 100;
-  return r(() => (window.onscroll = () => {
-    window.pageYOffset > o ? t(!0) : t(!1);
-  }, () => {
-    window.onscroll = null;
-  }), [o]), s;
-}
-const h = () => {
-  const e = u(m);
-  if (!e)
-    throw new Error("useHostTheme context must be use inside HostThemeProvider");
-  return e;
-};
-function b(e) {
-  const s = n(null);
-  return c(() => {
-    const t = s?.current;
-    if (!t)
-      return;
-    const o = new ResizeObserver((f) => {
-      e(t, f[0]);
-    });
-    return o.observe(t), () => {
-      o.disconnect();
-    };
-  }, [e, s.current]), s;
-}
-function g(e, s) {
-  const t = u(l);
-  if (!t)
-    throw new Error("useSettingsStore context must be use inside SettignsContext");
-  return a(t, e, s);
-}
-export {
-  x as a,
-  h as b,
-  b as c,
-  g as d,
-  S as u
-};