@m4l/graphics 2.0.1 → 2.0.3

package/contexts/ThemeSettingsContext/ThemeSettingsContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ThemeSettingsProviderProps } from './types';
+import type { ThemeSettingsProviderProps } from './types';
 declare const ThemeSettingsContext: import("react").Context<(Omit<Omit<import("zustand").StoreApi<import("./types").ThemeSettingsStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;

package/contexts/ThemeSettingsContext/types.d.ts

@@ -1,6 +1,6 @@
 import { NetworkProps } from '@m4l/core';
 import { ThemeColorPresets } from '@m4l/styles';
-import { CssVarsTheme, Theme, PaletteColor } from '@mui/material/styles';
+import { CssVarsTheme, Theme } from '@mui/material/styles';
 import { ReactNode } from 'react';
 export declare type ThemeMode = 'light' | 'dark';
 export declare type ThemeDirection = 'rtl' | 'ltr';
@@ -16,7 +16,6 @@ export declare type ThemeSettingsType = {
 export interface ThemeSettingsStore {
     networkOperation: (props: NetworkProps) => Promise<any>;
     currentThemeSettings: ThemeSettingsType;
-    currentPreset: PaletteColor;
     themeOptions: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
     colorOption: {
         name: string | undefined;

package/contexts/index-CvzLutB3.js

@@ -0,0 +1,278 @@
+import { createContext as f, useRef as T, useMemo as O, useLayoutEffect as y } from "react";
+import { c as v, d as R, i as x, l as b } from "../node_modules-BHhXVwYT.js";
+import { jsx as P } from "react/jsx-runtime";
+import { useNetwork as E, useLocalStorageWithListener as M } from "@m4l/core";
+import { getColorPresets as g, getColorState as d, typography as w, palette as C, SECONDARY as L, COMMON as A, ERROR as N, WARNING as D, INFO as B, SUCCESS as z, shadows as p, createCustomShadows as W, defaultThemeOptions as $, colorPresets as j } from "@m4l/styles";
+import { alpha as _ } from "@mui/system";
+const u = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, I = (r) => {
+  const n = {
+    ...r
+  };
+  return v(
+    R(
+      x((o, t) => ({
+        ...n,
+        responsiveContainerActions: {
+          setBreakpoint: (e) => {
+            o((s) => {
+              s.breakPoint = e, s.isUpSm = e !== "xs" && e !== "sm", s.isXs = e == "xs";
+            });
+          }
+        }
+      })),
+      { name: "Responsive Relative Store" }
+    )
+  );
+}, U = f(null), J = (r) => {
+  const {
+    children: n,
+    observedDivRef: o
+  } = r, t = T();
+  t.current || (t.current = I({
+    breakPoint: "md",
+    isUpSm: !1,
+    isXs: !1
+  }));
+  const e = () => {
+    const i = o;
+    if (i instanceof HTMLElement && i.clientWidth) {
+      const a = Object.keys(u);
+      for (let c = 0; c < a.length; c++) {
+        const m = a[c];
+        if (i.clientWidth <= u[m]) {
+          t.current?.getState().responsiveContainerActions.setBreakpoint(m);
+          break;
+        } else c === a.length - 1 && i.clientWidth >= u[m] && t.current?.getState().responsiveContainerActions.setBreakpoint(m);
+      }
+    }
+  }, s = O(() => b.throttle(e, 200, {
+    leading: !1,
+    trailing: !0
+  }), [e]);
+  return y(() => {
+    const i = () => {
+      s();
+    }, a = o;
+    if (a && a instanceof Element) {
+      const c = new ResizeObserver((m) => {
+        i();
+      });
+      return c.observe(a), () => {
+        c.disconnect();
+      };
+    }
+  }, [o]), /* @__PURE__ */ P(U.Provider, {
+    value: t.current,
+    children: n
+  });
+}, S = {
+  themeMode: "light",
+  themeDirection: "ltr",
+  themeColorPresets: "patronus",
+  themeLayout: "horizontal",
+  themeStretch: !1
+};
+function k(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.');
+    return;
+  }
+  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 && k(e, `${n}-${t}`);
+  });
+}
+const h = (r) => {
+  const n = r.currentThemeSettings || S;
+  console.log("getColorPresets", g(n.themeColorPresets)), console.log(
+    "getColorState",
+    d(n.themeColorPresets, n.themeMode)
+  );
+  const o = n.themeMode === "light";
+  r.themeOptions = {
+    ...r.themeOptions,
+    typography: w,
+    palette: {
+      ...r.themeOptions?.palette ?? {},
+      ...o ? C.light : C.dark,
+      primary: g(n.themeColorPresets),
+      state: d(n.themeColorPresets, n.themeMode),
+      representative: n.themeMode === "light" ? g(n.themeColorPresets)?.light : g(n.themeColorPresets)?.darker,
+      secondary: {
+        ...L,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      common: {
+        ...A,
+        black: "#000",
+        white: "#fff",
+        background: "",
+        backgroundChannel: "",
+        onBackground: "",
+        onBackgroundChannel: ""
+      },
+      error: {
+        ...N,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      warning: {
+        ...D,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      info: {
+        ...B,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      success: {
+        ...z,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      }
+    },
+    shape: { borderRadius: 8 },
+    direction: n.themeDirection,
+    shadows: o ? p.light : p.dark,
+    customShadows: {
+      primary: `0 8px 16px 0 ${_(
+        g(n.themeColorPresets)?.main || "#fff",
+        0.2
+      )}`,
+      ...W(n.themeMode)
+    },
+    stretch: n.themeStretch
+  }, k(r.themeOptions);
+}, l = (r) => {
+  r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
+}, K = (r) => v(
+  R(
+    x((n, o) => ({
+      ...r,
+      settingsActions: {
+        init: () => {
+          n((t) => {
+            h(t);
+          });
+        },
+        // setThemeOptions: newObj => {
+        //   set(state => {
+        //     state.themeOptions = { ...state.themeOptions, ...newObj };
+        //   });
+        // },
+        setThemeSettings: (t) => {
+          n((e) => {
+            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, l(e), h(e);
+          });
+        },
+        onChangeMode: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeMode: t.target.value
+            }, l(e), h(e);
+          });
+        },
+        handleOpen: () => {
+          n((t) => {
+            t.open = !t.open;
+          });
+        },
+        onChangeDirection: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeDirection: t.target.value
+            }, l(e), h(e);
+          });
+        },
+        onChangeColor: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeColorPresets: t.target.value
+            }, l(e), h(e);
+          });
+        },
+        onChangeLayout: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeLayout: t.target.value
+            }, l(e), h(e);
+          });
+        },
+        onToggleStretch: () => {
+          n((t) => {
+            t.currentThemeSettings = {
+              ...t.currentThemeSettings,
+              themeStretch: !t.currentThemeSettings.themeStretch
+            }, l(t), h(t);
+          });
+        },
+        onResetSetting: () => {
+          n((t) => {
+            t.currentThemeSettings = {
+              ...S
+            }, l(t), h(t);
+          });
+        }
+      }
+    })),
+    { name: "ExampleStore" }
+  )
+), X = f(null);
+function Q({
+  children: r,
+  themeSettings: n
+}) {
+  const {
+    networkOperation: o
+  } = E(), [t, e] = M("theme_setting", {}), s = T();
+  return s.current || (s.current = K({
+    networkOperation: o,
+    currentThemeSettings: {
+      ...S,
+      ...n,
+      ...t
+    },
+    themeOptions: $,
+    colorOption: j.map((i) => ({
+      name: i.name,
+      value: i.main
+    })),
+    open: !1,
+    setterThemeSettings: n ? void 0 : e
+  }), s.current.getState().settingsActions.init()), /* @__PURE__ */ P(X.Provider, {
+    value: s.current,
+    children: r
+  });
+}
+export {
+  U as R,
+  X as T,
+  J as a,
+  Q as b,
+  S as d
+};

package/hooks/{index-c14LV1FI.js → index-Cg3zl6cl.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-C5Z07fH1.js";
 import { u as a } from "../node_modules-BHhXVwYT.js";
-import { T as l } from "../contexts/index-BB_hmi4E.js";
+import { T as l } from "../contexts/index-CvzLutB3.js";
 function S() {
   const e = n(!0);
   return r(

package/hooks/useResponsive/{index-DOGfC2H7.js → index-Cq8kt3PV.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-BB_hmi4E.js";
+import { R as n } from "../../contexts/index-CvzLutB3.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-DHBkshRk.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-BB_hmi4E.js";
+import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-CvzLutB3.js";
 import { H as T, a as g } from "./contexts/HostThemeContext/index-C5Z07fH1.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-c14LV1FI.js";
+import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-Cg3zl6cl.js";
 import { u as z } from "./hooks/useLocales/index-mTHn9nqY.js";
-import { u as I, a as M } from "./hooks/useResponsive/index-DOGfC2H7.js";
+import { u as I, a as M } from "./hooks/useResponsive/index-Cq8kt3PV.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": "2.0.1",
+  "version": "2.0.3",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "dependencies": {

package/vite-env.d.ts

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

package/contexts/index-BB_hmi4E.js

@@ -1,280 +0,0 @@
-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 E } from "../node_modules-BHhXVwYT.js";
-import { jsx as x } from "react/jsx-runtime";
-import { useNetwork as M, 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 B, SUCCESS as $, shadows as p, 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-B-Q0TTn0.js";
-const C = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, K = (r) => {
-  const t = {
-    ...r
-  };
-  return v(
-    R(
-      P((o, n) => ({
-        ...t,
-        responsiveContainerActions: {
-          setBreakpoint: (e) => {
-            o((i) => {
-              i.breakPoint = e, i.isUpSm = e !== "xs" && e !== "sm", i.isXs = e == "xs";
-            });
-          }
-        }
-      })),
-      { name: "Responsive Relative Store" }
-    )
-  );
-}, X = f(null), te = (r) => {
-  const {
-    children: t,
-    observedDivRef: o
-  } = r, n = T();
-  n.current || (n.current = K({
-    breakPoint: "md",
-    isUpSm: !1,
-    isXs: !1
-  }));
-  const e = () => {
-    const s = o;
-    if (s instanceof HTMLElement && s.clientWidth) {
-      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;
-        }
-      }
-    }
-  }, i = k(() => E.throttle(e, 200, {
-    leading: !1,
-    trailing: !0
-  }), [e]);
-  return y(() => {
-    const s = () => {
-      i();
-    }, a = o;
-    if (a && a instanceof Element) {
-      const l = new ResizeObserver((g) => {
-        s();
-      });
-      return l.observe(a), () => {
-        l.disconnect();
-      };
-    }
-  }, [o]), /* @__PURE__ */ x(X.Provider, {
-    value: n.current,
-    children: t
-  });
-}, u = {
-  themeMode: "light",
-  themeDirection: "ltr",
-  themeColorPresets: "patronus",
-  themeLayout: "horizontal",
-  themeStretch: !1
-};
-function O(r, t = "m4l") {
-  const o = document.querySelector('[data-mui-color-scheme="light"]');
-  if (!o) {
-    console.error('Element with data-mui-color-scheme="light" not found.');
-    return;
-  }
-  Object.keys(r).forEach((n) => {
-    const e = r[n];
-    if (typeof e == "string" || typeof e == "number") {
-      const i = `--${t}-${n}`;
-      o.style.setProperty(i, e.toString());
-    } else typeof e == "object" && e !== null && O(e, `${t}-${n}`);
-  });
-}
-const c = (r) => {
-  const t = r.currentThemeSettings || u;
-  console.log("getColorPresets", m(t.themeColorPresets)), console.log(
-    "getColorState",
-    d(t.themeColorPresets, t.themeMode)
-  );
-  const o = t.themeMode === "light";
-  r.themeOptions = {
-    ...r.themeOptions,
-    typography: L,
-    palette: {
-      ...r.themeOptions.palette,
-      ...o ? S.light : S.dark,
-      primary: m(t.themeColorPresets),
-      state: d(t.themeColorPresets, t.themeMode),
-      representative: t.themeMode === "light" ? m(t.themeColorPresets)?.light : m(t.themeColorPresets)?.darker,
-      secondary: {
-        ...A,
-        contrastText: "",
-        mainChannel: "",
-        lightChannel: "",
-        darkChannel: "",
-        contrastTextChannel: ""
-      },
-      common: {
-        ...N,
-        black: "#000",
-        white: "#fff",
-        background: "",
-        backgroundChannel: "",
-        onBackground: "",
-        onBackgroundChannel: ""
-      },
-      error: {
-        ...D,
-        contrastText: "",
-        mainChannel: "",
-        lightChannel: "",
-        darkChannel: "",
-        contrastTextChannel: ""
-      },
-      warning: {
-        ...z,
-        contrastText: "",
-        mainChannel: "",
-        lightChannel: "",
-        darkChannel: "",
-        contrastTextChannel: ""
-      },
-      info: {
-        ...B,
-        contrastText: "",
-        mainChannel: "",
-        lightChannel: "",
-        darkChannel: "",
-        contrastTextChannel: ""
-      },
-      success: {
-        ...$,
-        contrastText: "",
-        mainChannel: "",
-        lightChannel: "",
-        darkChannel: "",
-        contrastTextChannel: ""
-      }
-    },
-    shape: { borderRadius: 8 },
-    direction: t.themeDirection,
-    shadows: o ? p.light : p.dark,
-    customShadows: {
-      primary: `0 8px 16px 0 ${I(
-        m(t.themeColorPresets)?.main || "#fff",
-        0.2
-      )}`,
-      ...j(t.themeMode)
-    },
-    stretch: t.themeStretch
-  }, console.log("state.themeOptions", r.themeOptions), O(r.themeOptions);
-}, h = (r) => {
-  r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
-}, q = (r) => v(
-  R(
-    P((t, o) => ({
-      ...r,
-      settingsActions: {
-        init: () => {
-          t((n) => {
-            c(n);
-          });
-        },
-        // setThemeOptions: newObj => {
-        //   set(state => {
-        //     state.themeOptions = { ...state.themeOptions, ...newObj };
-        //   });
-        // },
-        setThemeSettings: (n) => {
-          t((e) => {
-            e.currentThemeSettings = { ...e.currentThemeSettings, ...n }, h(e), c(e);
-          });
-        },
-        onChangeMode: (n) => {
-          t((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
-              themeMode: n.target.value
-            }, h(e), c(e);
-          });
-        },
-        handleOpen: () => {
-          t((n) => {
-            n.open = !n.open;
-          });
-        },
-        onChangeDirection: (n) => {
-          t((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
-              themeDirection: n.target.value
-            }, h(e), c(e);
-          });
-        },
-        onChangeColor: (n) => {
-          t((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
-              themeColorPresets: n.target.value
-            }, h(e), c(e);
-          });
-        },
-        onChangeLayout: (n) => {
-          t((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
-              themeLayout: n.target.value
-            }, h(e), c(e);
-          });
-        },
-        onToggleStretch: () => {
-          t((n) => {
-            n.currentThemeSettings = {
-              ...n.currentThemeSettings,
-              themeStretch: !n.currentThemeSettings.themeStretch
-            }, h(n), c(n);
-          });
-        },
-        onResetSetting: () => {
-          t((n) => {
-            n.currentThemeSettings = {
-              ...u
-            }, h(n), c(n);
-          });
-        }
-      }
-    })),
-    { name: "ExampleStore" }
-  )
-), G = f(null);
-function ne({
-  children: r,
-  themeSettings: t
-}) {
-  const {
-    networkOperation: o
-  } = M(), [n, e] = w("theme_setting", u), i = U([t]), s = T();
-  return s.current || (s.current = q({
-    networkOperation: o,
-    currentThemeSettings: {
-      ...t ?? n
-    },
-    themeOptions: W,
-    currentPreset: _,
-    colorOption: F.map((a) => ({
-      name: a.name,
-      value: a.main
-    })),
-    open: !1,
-    setterThemeSettings: t ? void 0 : e
-  }), s.current.getState().settingsActions.init()), b(() => {
-    !i && s.current && t && s.current.getState().settingsActions.setThemeSettings(t);
-  }, [t]), /* @__PURE__ */ x(G.Provider, {
-    value: s.current,
-    children: r
-  });
-}
-export {
-  X as R,
-  G as T,
-  te as a,
-  ne as b,
-  u as d
-};