@m4l/graphics 2.0.2 → 2.0.3

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

@@ -7,6 +7,7 @@ function s() {
   return /* @__PURE__ */ a(e, {
     styles: {
       body: {
+        /* backgroundColor: `${theme.vars.palette.background.background}!important`, */
         textRendering: "geometricPrecision",
         width: "100%",
         height: "100vh",
@@ -14,19 +15,26 @@ function s() {
           color: t.vars.palette.text.primary
         },
         "*::-webkit-scrollbar": {
+          // camino de la barra con radio
           width: "7px",
           height: "7px",
           borderRadius: "3px",
           backgroundColor: "transparent"
         },
         "*::-webkit-scrollbar-track": {
+          // Camino de la barrra sin radio
           backgroundColor: "transparent",
           border: "0px solid transparent"
         },
         "*::-webkit-scrollbar-corner": {
           backgroundColor: "transparent"
         },
+        // FireFox
+        // scrollbarColor: `${theme.vars.palette.primary.main} white`,
+        // scrollbarWidth: 'thin',
+        // Chrome
         "*::-webkit-scrollbar-thumb": {
+          // barra que se mueve
           background: t.vars.palette.state.scrollBar,
           borderRadius: "2px!important"
         },

package/components/index-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/contexts/FormatterContext/{index.92336f4c.js → index-BHG3bJJo.js}

@@ -1,6 +1,6 @@
 import { createContext as D, useState as C, useCallback as k, useEffect as p } from "react";
 import { useHostTools as v, usePropageteMF as R, EmitEvents as f } from "@m4l/core";
-import { u as h } from "../../hooks/useFirstRender/index.1e9b02fb.js";
+import { u as h } from "../../hooks/useFirstRender/index-B-Q0TTn0.js";
 import { jsx as V } from "react/jsx-runtime";
 const x = D(null);
 function I(T) {
@@ -10,7 +10,7 @@ function I(T) {
     currencyFormatter: l,
     numberFormatter: M,
     dateFormatter: t
-  } = T, r = l?.decimalDigits || 0, o = l?.code || "USD", a = M?.decimalSymbol || 0.1 .toLocaleString().substring(1, 2), s = M?.thousandsSymbol || 1e3 .toLocaleString().substring(1, 2), m = t?.dateFormat || "yyyy-MM-dd", n = t?.dateMask || "____-__-__", c = t?.datetimeFormat || "yyyy-MM-dd HH:mm:ss", i = t?.datetimeMask || "____-__-__ __:__:__", _ = t?.timeFormat || "HH:mm:ss", d = t?.timeMask || "__:__:__", u = t?.formatDate || (() => {
+  } = T, r = l?.decimalDigits || 0, o = l?.code || "USD", a = M?.decimalSymbol || 0.1.toLocaleString().substring(1, 2), s = M?.thousandsSymbol || 1e3.toLocaleString().substring(1, 2), m = t?.dateFormat || "yyyy-MM-dd", n = t?.dateMask || "____-__-__", c = t?.datetimeFormat || "yyyy-MM-dd HH:mm:ss", i = t?.datetimeMask || "____-__-__ __:__:__", _ = t?.timeFormat || "HH:mm:ss", d = t?.timeMask || "__:__:__", u = t?.formatDate || (() => {
     throw new Error("Incorrect use of formatDate");
   }), y = h(), {
     events_emit: g

package/contexts/HostThemeContext/{index.89c85eb6.js → index-C5Z07fH1.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.b7393a44.js";
+import { G as d } from "../../components/GlobalStyle/index-DHBkshRk.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/LocalesContext/{index.53f0b702.js → index--VwMF60R.js}

@@ -65,7 +65,7 @@ function J(t) {
     o && T(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, d);
   }), []), _(() => {
     let n = !0;
-    if (!o && !!r && !(l === M && l !== ""))
+    if (!o && r && !(l === M && l !== ""))
       return C({
         method: "POST",
         endPoint: "na/locales",

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-Cg3zl6cl.js

@@ -0,0 +1,52 @@
+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-CvzLutB3.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
+};

package/hooks/useFormatter/index-DfdAcbzw.js

@@ -0,0 +1,10 @@
+import { useContext as r } from "react";
+import { F as e } from "../../contexts/FormatterContext/index-BHG3bJJo.js";
+const m = () => {
+  const t = r(e);
+  if (!t) throw new Error("useFormatter context must be use inside FormatterProvider");
+  return t;
+};
+export {
+  m as u
+};

package/hooks/useIsMobile/{index.54bf37f7.js → index-Bro0dV28.js}

@@ -1,5 +1,5 @@
 import { useState as n, useEffect as o } from "react";
-import { t as s } from "../../node_modules.9690bbee.js";
+import { t as s } from "../../node_modules-BHhXVwYT.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(() => {

package/hooks/useLocales/index-mTHn9nqY.js

@@ -0,0 +1,10 @@
+import { useContext as o } from "react";
+import { L as t } from "../../contexts/LocalesContext/index--VwMF60R.js";
+const n = () => {
+  const e = o(t);
+  if (!e) throw new Error("useLocales context must be use inside LocalesProvider");
+  return e;
+};
+export {
+  n as u
+};

package/hooks/useResponsive/{index.49db561d.js → index-Cq8kt3PV.js}

@@ -1,11 +1,10 @@
 import { useContext as t } from "react";
-import { u as r } from "../../node_modules.9690bbee.js";
-import { R as n } from "../../contexts/index.d4e2c292.js";
+import { u as r } from "../../node_modules-BHhXVwYT.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);
-  if (!o)
-    throw new Error("useAreasStore context must be use inside AreasContext");
+  if (!o) throw new Error("useAreasStore context must be use inside AreasContext");
   return r(o, e, s);
 }
 function c() {

package/index.js

@@ -1,52 +1,40 @@
-import { G as l } from "./components/GlobalStyle/index.b7393a44.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.d4e2c292.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.953df5ed.js";
-import { u as q } from "./hooks/useLocales/index.d5a80aff.js";
-import { u as J, a as K } from "./hooks/useResponsive/index.49db561d.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 "date-fns/locale/en-US";
-import "./node_modules.9690bbee.js";
-import "./commonjs.e3daa2e5.js";
-import "@mui/system";
+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-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-Cg3zl6cl.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 y } from "./hooks/useIsMobile/index-Bro0dV28.js";
+import { C as D, g as E } from "./utils/index-DZG6QXjf.js";
 export {
-  X as Capitalize,
-  C as FormatterContext,
-  T as FormatterProvider,
-  l as GlobalStyles,
-  w as HostThemeContext,
-  z as HostThemeProvider,
-  h as LocalesContext,
-  R as LocalesProvider,
-  F as ResponsiveContainerContext,
-  P as ResponsiveContainerProvider,
-  b as ThemeSettingsContext,
-  L as ThemeSettingsProvider,
-  H as defaultThemeSettings,
-  Y as getAnchorElPositionWindow,
-  S as getLocaleFromNetwork,
-  I as useFirstRender,
-  O as useFormatter,
-  A as useHostTheme,
-  U as useIsMobile,
-  D as useIsMountedRef,
-  q as useLocales,
-  E as useOffSetTop,
-  N as useResizeObserver,
-  J as useResponsiveContainerStore,
-  K as useResponsiveDesktop,
-  W as useThemeSettingsStore
+  D as Capitalize,
+  m as FormatterContext,
+  p as FormatterProvider,
+  s as GlobalStyles,
+  T as HostThemeContext,
+  g as HostThemeProvider,
+  r as LocalesContext,
+  a as LocalesProvider,
+  x as ResponsiveContainerContext,
+  f as ResponsiveContainerProvider,
+  d as ThemeSettingsContext,
+  l as ThemeSettingsProvider,
+  v as defaultThemeSettings,
+  E as getAnchorElPositionWindow,
+  i as getLocaleFromNetwork,
+  R as useFirstRender,
+  c as useFormatter,
+  P as useHostTheme,
+  y as useIsMobile,
+  b as useIsMountedRef,
+  z as useLocales,
+  L as useOffSetTop,
+  H as useResizeObserver,
+  I as useResponsiveContainerStore,
+  M as useResponsiveDesktop,
+  k as useThemeSettingsStore
 };