@m4l/graphics 3.0.3 → 6.0.0

package/contexts/HostThemeContext/index-CcHelA1w.js

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

package/contexts/HostThemeContext/types.d.ts

@@ -1,8 +1,9 @@
+import { OurTheme } from '@m4l/styles';
 import type { Theme, CssVarsTheme } from '@mui/material/styles';
 import type { ReactNode } from 'react';
 export declare type EventFunListener = (...args: any[]) => void;
 export interface HostThemeType {
-    hostThemeOptions: Theme;
+    hostThemeOptions: OurTheme;
     fnComponentsOverrides: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => any;
 }
 export interface HostThemeProviderProps extends HostThemeType {

package/contexts/ThemeSettingsContext/types.d.ts

@@ -1,5 +1,5 @@
 import { NetworkProps } from '@m4l/core';
-import { PresetsOptions, ThemeColorPresets } from '@m4l/styles';
+import { OurTheme, PresetsOptions, ThemeColorOptionsType } from '@m4l/styles';
 import { CssVarsTheme, Theme } from '@mui/material/styles';
 import { ReactNode } from 'react';
 export declare type ThemeMode = 'light' | 'dark';
@@ -9,7 +9,7 @@ export declare type ThemeStretch = boolean;
 export declare type ThemeSettingsType = {
     themeMode: ThemeMode;
     themeDirection: ThemeDirection;
-    themeColorPresets: ThemeColorPresets;
+    themeColorPresets: ThemeColorOptionsType;
     themeStretch: ThemeStretch;
     themeLayout: ThemeLayout;
     isMobile: boolean;
@@ -17,7 +17,10 @@ export declare type ThemeSettingsType = {
 export interface ThemeSettingsStore {
     networkOperation: (props: NetworkProps) => Promise<any>;
     currentThemeSettings: ThemeSettingsType;
-    themeOptions: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
+    /**
+     * Contiene la configuración incial del tema como la paleta, tipografía, sombras, etc. También puede contener el tema convertido a css vars.
+    */
+    themeOptions: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme | OurTheme;
     colorOption: PresetsOptions;
     /**
      * "setterThemeSettings" es una función que se encarga de persistir en local storage los cambios de los settings

package/contexts/{index-DEyJidab.js → index-DypyrDjq.js}

@@ -1,17 +1,17 @@
-import { jsx as S } from "react/jsx-runtime";
-import { createContext as f, useRef as T, useMemo as R, useLayoutEffect as k, useEffect as P } from "react";
-import { c as C, d as v, i as y, l as O } from "../node_modules-BHhXVwYT.js";
-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) => {
+import { jsx as p } from "react/jsx-runtime";
+import { createContext as f, useRef as d, useMemo as y, useLayoutEffect as b, useEffect as P } from "react";
+import { c as T, d as v, i as C, l as O } from "../node_modules-BHhXVwYT.js";
+import { useNetwork as M, useLocalStorageWithListener as E } from "@m4l/core";
+import { getPaletteByPreset as x, typography as k, shadows as S, getColorPresets as L, createCustomShadows as w, OUR_THEME as A, presetsOptions as B } from "@m4l/styles";
+import { alpha as D } from "@mui/system";
+import { u as z } from "../hooks/useIsMobile/index-Bro0dV28.js";
+const u = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, _ = (r) => {
   const n = {
     ...r
   };
-  return C(
+  return T(
     v(
-      y((o, t) => ({
+      C((o, t) => ({
         ...n,
         responsiveContainerActions: {
           setBreakpoint: (e) => {
@@ -24,9 +24,9 @@ const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, j = (r) => {
       { name: "Responsive Relative Store" }
     )
   );
-}, W = f(null), F = (r) => {
-  const { children: n, observedDivRef: o } = r, t = T();
-  t.current || (t.current = j({
+}, $ = f(null), V = (r) => {
+  const { children: n, observedDivRef: o } = r, t = d();
+  t.current || (t.current = _({
     breakPoint: "md",
     isUpSm: !1,
     isXs: !1
@@ -34,38 +34,38 @@ const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, j = (r) => {
   const e = () => {
     const s = o;
     if (s instanceof HTMLElement && s.clientWidth) {
-      const h = Object.keys(
-        g
+      const m = Object.keys(
+        u
       );
-      for (let a = 0; a < h.length; a++) {
-        const u = h[a];
-        if (s.clientWidth <= g[u]) {
-          t.current?.getState().responsiveContainerActions.setBreakpoint(u);
+      for (let h = 0; h < m.length; h++) {
+        const a = m[h];
+        if (s.clientWidth <= u[a]) {
+          t.current?.getState().responsiveContainerActions.setBreakpoint(a);
           break;
-        } else a === h.length - 1 && s.clientWidth >= g[u] && t.current?.getState().responsiveContainerActions.setBreakpoint(u);
+        } else h === m.length - 1 && s.clientWidth >= u[a] && t.current?.getState().responsiveContainerActions.setBreakpoint(a);
       }
     }
-  }, i = R(
+  }, i = y(
     () => O.throttle(e, 200, {
       leading: !1,
       trailing: !0
     }),
     [e]
   );
-  return k(() => {
+  return b(() => {
     const s = () => {
       i();
-    }, h = o;
-    if (h && h instanceof Element) {
-      const a = new ResizeObserver((u) => {
+    }, m = o;
+    if (m && m instanceof Element) {
+      const h = new ResizeObserver((a) => {
         s();
       });
-      return a.observe(h), () => {
-        a.disconnect();
+      return h.observe(m), () => {
+        h.disconnect();
       };
     }
-  }, [o]), /* @__PURE__ */ S(W.Provider, { value: t.current, children: n });
-}, p = {
+  }, [o]), /* @__PURE__ */ p($.Provider, { value: t.current, children: n });
+}, g = {
   themeMode: "light",
   themeDirection: "ltr",
   themeColorPresets: "patronus",
@@ -73,7 +73,7 @@ const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, j = (r) => {
   themeStretch: !1,
   isMobile: !1
 };
-function b(r, n = "m4l") {
+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.');
@@ -84,86 +84,35 @@ function b(r, n = "m4l") {
     if (typeof e == "string" || typeof e == "number") {
       const i = `--${n}-${t}`;
       o.style.setProperty(i, e.toString());
-    } else typeof e == "object" && e !== null && b(e, `${n}-${t}`);
+    } else typeof e == "object" && e !== null && R(e, `${n}-${t}`);
   });
 }
-const l = {
-  mainChannel: "",
-  lightChannel: "",
-  darkChannel: "",
-  contrastTextChannel: ""
-}, c = (r) => {
-  const n = r.currentThemeSettings || p, o = n.themeMode === "light", t = w(n.themeColorPresets), e = o ? t.light : t.dark;
+const c = (r) => {
+  const n = r.currentThemeSettings || g, o = n.themeMode === "light", t = x(n.themeColorPresets), e = o ? t.light : t.dark;
   r.themeOptions = {
     ...r.themeOptions,
-    typography: E,
+    typography: k,
     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: ""
-      }
+      ...e
     },
     shape: { borderRadius: 8 },
     direction: n.themeDirection,
-    shadows: o ? d.light : d.dark,
+    shadows: o ? S.light : S.dark,
     customShadows: {
-      primary: `0 8px 16px 0 ${z(
+      primary: `0 8px 16px 0 ${D(
         L(n.themeColorPresets)?.main || "#fff",
         0.2
       )}`,
-      ...B(n.themeMode)
+      ...w(n.themeMode)
     },
     stretch: n.themeStretch
-  }, b(r.themeOptions);
-}, m = (r) => {
+  }, R(r.themeOptions);
+}, l = (r) => {
   r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
-}, _ = (r) => C(
+}, j = (r) => T(
   v(
-    y((n, o) => ({
+    C((n, o) => ({
       ...r,
       settingsActions: {
         init: () => {
@@ -173,7 +122,7 @@ const l = {
         },
         setThemeSettings: (t) => {
           n((e) => {
-            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, m(e), c(e);
+            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, l(e), c(e);
           });
         },
         onChangeMode: (t) => {
@@ -181,7 +130,7 @@ const l = {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeMode: t.target.value
-            }, m(e), c(e);
+            }, l(e), c(e);
           });
         },
         handleOpen: () => {
@@ -194,7 +143,7 @@ const l = {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeDirection: t.target.value
-            }, m(e), c(e);
+            }, l(e), c(e);
           });
         },
         onChangeColor: (t) => {
@@ -202,7 +151,7 @@ const l = {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeColorPresets: t.target.value
-            }, m(e), c(e);
+            }, l(e), c(e);
           });
         },
         onChangeLayout: (t) => {
@@ -210,7 +159,7 @@ const l = {
             e.currentThemeSettings = {
               ...e.currentThemeSettings,
               themeLayout: t.target.value
-            }, m(e), c(e);
+            }, l(e), c(e);
           });
         },
         onToggleStretch: () => {
@@ -218,45 +167,45 @@ const l = {
             t.currentThemeSettings = {
               ...t.currentThemeSettings,
               themeStretch: !t.currentThemeSettings.themeStretch
-            }, m(t), c(t);
+            }, l(t), c(t);
           });
         },
         onResetSetting: () => {
           n((t) => {
             t.currentThemeSettings = {
-              ...p
-            }, m(t), c(t);
+              ...g
+            }, l(t), c(t);
           });
         }
       }
     })),
     { name: "ThemeSettingsStore" }
   )
-), N = f(null);
-function G({ children: r, themeSettings: n }) {
-  const { networkOperation: o } = x(), t = $(), [e, i] = M(
+), W = f(null);
+function F({ children: r, themeSettings: n }) {
+  const { networkOperation: o } = M(), t = z(), [e, i] = E(
     "theme_setting",
     {}
-  ), s = T();
-  return s.current || (s.current = _({
+  ), s = d();
+  return s.current || (s.current = j({
     networkOperation: o,
     currentThemeSettings: {
-      ...p,
+      ...g,
       ...n,
       ...e
     },
     themeOptions: A,
-    colorOption: D,
+    colorOption: B,
     open: !1,
     setterThemeSettings: n ? void 0 : i
   }), s.current.getState().settingsActions.init()), P(() => {
     s.current?.getState().settingsActions.setThemeSettings({ isMobile: t });
-  }, [t]), /* @__PURE__ */ S(N.Provider, { value: s.current, children: r });
+  }, [t]), /* @__PURE__ */ p(W.Provider, { value: s.current, children: r });
 }
 export {
-  W as R,
-  N as T,
-  F as a,
-  G as b,
-  p as d
+  $ as R,
+  W as T,
+  V as a,
+  F as b,
+  g as d
 };

package/hooks/{index-Y3uj_IzK.js → index-DrIHt-va.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-BMSwOCtA.js";
+import { H as m } from "../contexts/HostThemeContext/index-CcHelA1w.js";
 import { u as a } from "../node_modules-BHhXVwYT.js";
-import { T as l } from "../contexts/index-DEyJidab.js";
+import { T as l } from "../contexts/index-DypyrDjq.js";
 function S() {
   const e = n(!0);
   return r(

package/hooks/useResponsive/{index-Dki-WJi8.js → index-BEcgN5as.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-DEyJidab.js";
+import { R as n } from "../../contexts/index-DypyrDjq.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-C3p7OfnO.js";
 import { L as r, a, g as i } from "./contexts/LocalesContext/index-C89UlO0s.js";
 import { F as m, a as p } from "./contexts/FormatterContext/index-Ch6IW7j8.js";
-import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-DEyJidab.js";
-import { H as T, a as g } from "./contexts/HostThemeContext/index-BMSwOCtA.js";
+import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-DypyrDjq.js";
+import { H as T, a as g } from "./contexts/HostThemeContext/index-CcHelA1w.js";
 import { u as R } from "./hooks/useFirstRender/index-B-Q0TTn0.js";
 import { u as c } from "./hooks/useFormatter/index-BBgQ4lJL.js";
-import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-Y3uj_IzK.js";
+import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-DrIHt-va.js";
 import { u as z } from "./hooks/useLocales/index-_thMBNE7.js";
-import { u as I, a as M } from "./hooks/useResponsive/index-Dki-WJi8.js";
+import { u as I, a as M } from "./hooks/useResponsive/index-BEcgN5as.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,16 +1,16 @@
 {
   "name": "@m4l/graphics",
-  "version": "3.0.3",
+  "version": "6.0.0",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "dependencies": {
-    "@m4l/core": "^2.0.0",
-    "@m4l/styles": "^3.0.0",
     "date-fns": "^2.30.0",
     "zustand": "4.3.6",
     "immer": "^9.0.21"
   },
   "peerDependencies": {
+    "@m4l/core": "^2.0.0",
+    "@m4l/styles": "^6.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-toastify": "10.0.5",

package/vite-env.d.ts

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

package/contexts/HostThemeContext/index-BMSwOCtA.js

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