@m4l/graphics 2.0.3 → 3.0.0

package/components/GlobalStyle/{index-DHBkshRk.js → index-BwMNLyTC.js}

@@ -1,13 +1,12 @@
-import { useTheme as o } from "@mui/material/styles";
-import { GlobalStyles as e } from "@mui/material";
+import { useTheme as e } from "@mui/material/styles";
+import { GlobalStyles as o } from "@mui/material";
 import { globalRemSize as r } from "@m4l/styles";
 import { jsx as a } from "react/jsx-runtime";
 function s() {
-  const t = o();
-  return /* @__PURE__ */ a(e, {
+  const t = e();
+  return /* @__PURE__ */ a(o, {
     styles: {
       body: {
-        /* backgroundColor: `${theme.vars.palette.background.background}!important`, */
         textRendering: "geometricPrecision",
         width: "100%",
         height: "100vh",
@@ -35,7 +34,7 @@ function s() {
         // Chrome
         "*::-webkit-scrollbar-thumb": {
           // barra que se mueve
-          background: t.vars.palette.state.scrollBar,
+          background: t.vars.palette.general.scrollBar,
           borderRadius: "2px!important"
         },
         "& #root": {

package/contexts/HostThemeContext/{index-C5Z07fH1.js → index-KkaEtH_8.js}

@@ -1,6 +1,6 @@
 import { createContext as c, useMemo as a } from "react";
 import { CssBaseline as h } from "@mui/material";
-import { G as d } from "../../components/GlobalStyle/index-DHBkshRk.js";
+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);

package/contexts/ThemeSettingsContext/types.d.ts

@@ -1,5 +1,5 @@
 import { NetworkProps } from '@m4l/core';
-import { ThemeColorPresets } from '@m4l/styles';
+import { PresetsOptions, ThemeColorPresets } from '@m4l/styles';
 import { CssVarsTheme, Theme } from '@mui/material/styles';
 import { ReactNode } from 'react';
 export declare type ThemeMode = 'light' | 'dark';
@@ -17,10 +17,7 @@ export interface ThemeSettingsStore {
     networkOperation: (props: NetworkProps) => Promise<any>;
     currentThemeSettings: ThemeSettingsType;
     themeOptions: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
-    colorOption: {
-        name: string | undefined;
-        value: string;
-    }[];
+    colorOption: PresetsOptions;
     /**
      * "setterThemeSettings" es una función que se encarga de persistir en local storage los cambios de los settings
      * Solo se instancia cuando esta en host, cuando esta storybook no se instancia

package/contexts/index-lSin3toV.js

@@ -0,0 +1,264 @@
+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 { 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) => {
+  const n = {
+    ...r
+  };
+  return T(
+    C(
+      v((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" }
+    )
+  );
+}, $ = S(null), H = (r) => {
+  const {
+    children: n,
+    observedDivRef: o
+  } = r, t = f();
+  t.current || (t.current = z({
+    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]) {
+          t.current?.getState().responsiveContainerActions.setBreakpoint(u);
+          break;
+        } else h === c.length - 1 && m.clientWidth >= g[u] && t.current?.getState().responsiveContainerActions.setBreakpoint(u);
+      }
+    }
+  }, s = b(() => P.throttle(e, 200, {
+    leading: !1,
+    trailing: !0
+  }), [e]);
+  return k(() => {
+    const m = () => {
+      s();
+    }, c = o;
+    if (c && c instanceof Element) {
+      const h = new ResizeObserver((u) => {
+        m();
+      });
+      return h.observe(c), () => {
+        h.disconnect();
+      };
+    }
+  }, [o]), /* @__PURE__ */ y($.Provider, {
+    value: t.current,
+    children: n
+  });
+}, p = {
+  themeMode: "light",
+  themeDirection: "ltr",
+  themeColorPresets: "patronus",
+  themeLayout: "horizontal",
+  themeStretch: !1
+};
+function R(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 && R(e, `${n}-${t}`);
+  });
+}
+const l = {
+  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;
+  r.themeOptions = {
+    ...r.themeOptions,
+    typography: E,
+    palette: {
+      ...r.themeOptions?.palette ?? {},
+      ...e,
+      primary: {
+        ...e.primary,
+        ...l
+      },
+      secondary: {
+        ...e.secondary,
+        ...l
+      },
+      info: {
+        ...e.info,
+        ...l
+      },
+      error: {
+        ...e.error,
+        ...l
+      },
+      success: {
+        ...e.success,
+        ...l
+      },
+      warning: {
+        ...e.warning,
+        ...l
+      },
+      text: {
+        ...e.text,
+        primaryChannel: "",
+        secondaryChannel: ""
+      },
+      background: {
+        ...e.background,
+        defaultChannel: "",
+        paperChannel: ""
+      },
+      common: {
+        ...e.common,
+        background: "",
+        backgroundChannel: "",
+        onBackground: "",
+        onBackgroundChannel: ""
+      },
+      action: {
+        ...e.action,
+        activeChannel: "",
+        selectedChannel: ""
+      }
+    },
+    shape: { borderRadius: 8 },
+    direction: n.themeDirection,
+    shadows: o ? d.light : d.dark,
+    customShadows: {
+      primary: `0 8px 16px 0 ${D(
+        L(n.themeColorPresets)?.main || "#fff",
+        0.2
+      )}`,
+      ...M(n.themeMode)
+    },
+    stretch: n.themeStretch
+  }, R(r.themeOptions);
+}, a = (r) => {
+  r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
+}, j = (r) => T(
+  C(
+    v((n, o) => ({
+      ...r,
+      settingsActions: {
+        init: () => {
+          n((t) => {
+            i(t);
+          });
+        },
+        setThemeSettings: (t) => {
+          n((e) => {
+            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, a(e), i(e);
+          });
+        },
+        onChangeMode: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeMode: t.target.value
+            }, a(e), i(e);
+          });
+        },
+        handleOpen: () => {
+          n((t) => {
+            t.open = !t.open;
+          });
+        },
+        onChangeDirection: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeDirection: t.target.value
+            }, a(e), i(e);
+          });
+        },
+        onChangeColor: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeColorPresets: t.target.value
+            }, a(e), i(e);
+          });
+        },
+        onChangeLayout: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeLayout: t.target.value
+            }, a(e), i(e);
+          });
+        },
+        onToggleStretch: () => {
+          n((t) => {
+            t.currentThemeSettings = {
+              ...t.currentThemeSettings,
+              themeStretch: !t.currentThemeSettings.themeStretch
+            }, a(t), i(t);
+          });
+        },
+        onResetSetting: () => {
+          n((t) => {
+            t.currentThemeSettings = {
+              ...p
+            }, a(t), i(t);
+          });
+        }
+      }
+    })),
+    { name: "ThemeSettingsStore" }
+  )
+), W = S(null);
+function I({
+  children: r,
+  themeSettings: n
+}) {
+  const {
+    networkOperation: o
+  } = O(), [t, e] = x("theme_setting", {}), s = f();
+  return s.current || (s.current = j({
+    networkOperation: o,
+    currentThemeSettings: {
+      ...p,
+      ...n,
+      ...t
+    },
+    themeOptions: B,
+    colorOption: A,
+    open: !1,
+    setterThemeSettings: n ? void 0 : e
+  }), s.current.getState().settingsActions.init()), /* @__PURE__ */ y(W.Provider, {
+    value: s.current,
+    children: r
+  });
+}
+export {
+  $ as R,
+  W as T,
+  H as a,
+  I as b,
+  p as d
+};

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

package/hooks/useResponsive/{index-Cq8kt3PV.js → index-CH-gd9zy.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-CvzLutB3.js";
+import { R as n } from "../../contexts/index-lSin3toV.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 { 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-CvzLutB3.js";
-import { H as T, a as g } from "./contexts/HostThemeContext/index-C5Z07fH1.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 { 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-Cg3zl6cl.js";
+import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-BFpjMXdG.js";
 import { u as z } from "./hooks/useLocales/index-mTHn9nqY.js";
-import { u as I, a as M } from "./hooks/useResponsive/index-Cq8kt3PV.js";
+import { u as I, a as M } from "./hooks/useResponsive/index-CH-gd9zy.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,11 +1,11 @@
 {
   "name": "@m4l/graphics",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "dependencies": {
-    "@m4l/core": "*",
-    "@m4l/styles": "*",
+    "@m4l/core": "^2.0.0",
+    "@m4l/styles": "^3.0.0",
     "date-fns": "^2.30.0",
     "zustand": "4.3.6",
     "immer": "^9.0.21"

package/contexts/index-CvzLutB3.js

@@ -1,278 +0,0 @@
-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
-};