@m4l/graphics 0.1.53 → 1.0.0

package/components/GlobalStyle/{index.fff91e86.js → index.c11ef3f3.js}

@@ -1,13 +1,15 @@
 import { useTheme as o } from "@mui/material/styles";
-import { GlobalStyles as a } from "@mui/material";
-import { globalRemSize as t } from "@m4l/styles";
-import { jsx as e } from "react/jsx-runtime";
-function s() {
-  const r = o();
-  return /* @__PURE__ */ e(a, {
+import { GlobalStyles as e } from "@mui/material";
+import { globalRemSize as r } from "@m4l/styles";
+import { jsx as a } from "react/jsx-runtime";
+function p() {
+  const t = o();
+  return console.log("theme test", t), /* @__PURE__ */ a(e, {
     styles: {
       body: {
-        backgroundColor: `${r.palette.background.background}!important`,
+        textRendering: "geometricPrecision",
+        width: "100%",
+        height: "100vh",
         "*::-webkit-scrollbar": {
           width: "7px",
           height: "7px",
@@ -22,8 +24,12 @@ function s() {
           backgroundColor: "transparent"
         },
         "*::-webkit-scrollbar-thumb": {
-          background: r.palette.state.scrollBar,
+          background: t.vars.palette,
           borderRadius: "2px!important"
+        },
+        "& #root": {
+          width: "100%",
+          height: "100%"
         }
       },
       "#nprogress": {
@@ -34,9 +40,9 @@ function s() {
           height: 2,
           width: "100%",
           position: "fixed",
-          zIndex: r.zIndex.snackbar,
-          backgroundColor: r.palette.primary.main,
-          boxShadow: `0 0 2px ${r.palette.primary.main}`
+          zIndex: t.zIndex.snackbar,
+          backgroundColor: t.vars.palette.primary.main,
+          boxShadow: `0 0 2px ${t.vars.palette.primary.main}`
         },
         "& .peg": {
           right: 0,
@@ -46,18 +52,18 @@ function s() {
           display: "block",
           position: "absolute",
           transform: "rotate(3deg) translate(0px, -4px)",
-          boxShadow: `0 0 10px ${r.palette.primary.main}, 0 0 5px ${r.palette.primary.main}`
+          boxShadow: `0 0 10px ${t.vars.palette.primary.main}, 0 0 5px ${t.vars.palette.primary.main}`
         }
       },
       "& html": {
-        fontSize: t.desktop,
-        [r.breakpoints.down("sm")]: {
-          fontSize: t.mobile
+        fontSize: r.desktop,
+        [t.breakpoints.down("sm")]: {
+          fontSize: r.mobile
         }
       }
     }
   });
 }
 export {
-  s as G
+  p as G
 };

package/contexts/HostThemeContext/index.86691e12.js

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

package/contexts/HostThemeContext/types.d.ts

@@ -1,9 +1,9 @@
-import type { ThemeOptions, Theme } from '@mui/material/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: ThemeOptions;
-    fnComponentsOverrides: (theme: Theme) => any;
+    hostThemeOptions: Theme;
+    fnComponentsOverrides: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => any;
 }
 export interface HostThemeProviderProps extends HostThemeType {
     isMicroFrontEnd: boolean;

package/contexts/{index.921576cc.js → index.d28ab716.js}

@@ -1,10 +1,10 @@
 import "./FormatterContext/index.92336f4c.js";
 import "./LocalesContext/index.53f0b702.js";
 import { createContext as d, useRef as p, useMemo as v, useLayoutEffect as f } from "react";
-import { c as u, d as R, i as g, l as h } from "../node_modules.dbab0abd.js";
+import { c as u, d as R, i as g, l as h } from "../node_modules.9eeccca4.js";
 import { jsx as x } from "react/jsx-runtime";
 import "date-fns/locale/en-US";
-import "./HostThemeContext/index.4291ba89.js";
+import "./HostThemeContext/index.86691e12.js";
 const m = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, S = (c) => {
   const a = {
     ...c

package/hooks/{index.66afb19b.js → index.73785922.js}

@@ -1,10 +1,11 @@
 import { useRef as r, useEffect as n, useState as f, useContext as i, useLayoutEffect as c } from "react";
-import { H as m } from "../contexts/HostThemeContext/index.4291ba89.js";
+import { H as m } from "../contexts/HostThemeContext/index.86691e12.js";
 import "../contexts/FormatterContext/index.92336f4c.js";
 import "../contexts/LocalesContext/index.53f0b702.js";
-import "../contexts/index.921576cc.js";
+import "../contexts/index.d28ab716.js";
+import "../node_modules.9eeccca4.js";
 import "@m4l/styles";
-function b() {
+function h() {
   const e = r(!0);
   return n(
     () => () => {
@@ -13,7 +14,7 @@ function b() {
     []
   ), e;
 }
-function h(e) {
+function v(e) {
   const [o, t] = f(!1), s = e || 100;
   return n(() => (window.onscroll = () => {
     window.pageYOffset > s ? t(!0) : t(!1);
@@ -21,13 +22,13 @@ function h(e) {
     window.onscroll = null;
   }), [s]), o;
 }
-const v = () => {
+const x = () => {
   const e = i(m);
   if (!e)
     throw new Error("useHostTheme context must be use inside HostThemeProvider");
   return e;
 };
-function x(e) {
+function H(e) {
   const o = r(null);
   return c(() => {
     const t = o?.current;
@@ -42,8 +43,8 @@ function x(e) {
   }, [e, o.current]), o;
 }
 export {
-  h as a,
-  v as b,
-  x as c,
-  b as u
+  v as a,
+  x as b,
+  H as c,
+  h as u
 };

package/hooks/index.d.ts

@@ -3,6 +3,7 @@ export { useFormatter } from './useFormatter';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLocales } from './useLocales';
 export { useResponsiveContainerStore } from './useResponsiveContainer';
+export { useIsMobile } from './useIsMobile';
 export { useOffSetTop } from './useOffSetTop';
 export { useHostTheme } from './useHostTheme';
 export { useResizeObserver } from './useResizeObserver';

package/hooks/useIsMobile/index.3de7c47a.js

@@ -0,0 +1,16 @@
+import { useState as n, useEffect as o } from "react";
+import { t as s } from "../../node_modules.9eeccca4.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);
+    return window.addEventListener("resize", e), e(), () => {
+      window.removeEventListener("resize", e), e.cancel();
+    };
+  }, []), i;
+};
+export {
+  l as u
+};

package/hooks/useIsMobile/index.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobile: () => boolean;

package/hooks/useResponsive/{index.c9515afc.js → index.2b01d764.js}

@@ -1,6 +1,6 @@
 import { useContext as t } from "react";
-import { u as r } from "../../node_modules.dbab0abd.js";
-import { R as n } from "../../contexts/index.921576cc.js";
+import { u as r } from "../../node_modules.9eeccca4.js";
+import { R as n } from "../../contexts/index.d28ab716.js";
 import { useResponsive as i } from "@m4l/styles";
 function f(e, s) {
   const o = t(n);

package/index.js

@@ -1,14 +1,15 @@
-import { G as l } from "./components/GlobalStyle/index.fff91e86.js";
+import { G as l } from "./components/GlobalStyle/index.c11ef3f3.js";
 import { F as C, a as R } from "./contexts/FormatterContext/index.92336f4c.js";
 import { L as c, a as F, g as L } from "./contexts/LocalesContext/index.53f0b702.js";
-import { R as g, a as h } from "./contexts/index.921576cc.js";
-import { H as T, a as b } from "./contexts/HostThemeContext/index.4291ba89.js";
+import { R as b, a as g } from "./contexts/index.d28ab716.js";
+import { H, a as T } from "./contexts/HostThemeContext/index.86691e12.js";
 import { u as k } from "./hooks/useFirstRender/index.1e9b02fb.js";
 import { u as z } from "./hooks/useFormatter/index.57ac8cca.js";
-import { b as O, u as y, a as A, c as D } from "./hooks/index.66afb19b.js";
-import { u as I } from "./hooks/useLocales/index.d5a80aff.js";
-import { u as N, a as W } from "./hooks/useResponsive/index.c9515afc.js";
-import { C as q, g as B } from "./utils/index.6909c662.js";
+import { b as I, u as M, a as O, c as y } from "./hooks/index.73785922.js";
+import { u as D } from "./hooks/useLocales/index.d5a80aff.js";
+import { u as N, a as W } from "./hooks/useResponsive/index.2b01d764.js";
+import { u as q } from "./hooks/useIsMobile/index.3de7c47a.js";
+import { C as J, g as K } from "./utils/index.6909c662.js";
 import "@mui/material/styles";
 import "@mui/material";
 import "@m4l/styles";
@@ -18,28 +19,29 @@ import "@m4l/core";
 import "@mui/x-date-pickers/AdapterDateFns";
 import "@mui/x-date-pickers";
 import "date-fns/locale/en-US";
-import "./node_modules.dbab0abd.js";
+import "./node_modules.9eeccca4.js";
 import "./commonjs.e3daa2e5.js";
 export {
-  q as Capitalize,
+  J as Capitalize,
   C as FormatterContext,
   R as FormatterProvider,
   l as GlobalStyles,
-  T as HostThemeContext,
-  b as HostThemeProvider,
+  H as HostThemeContext,
+  T as HostThemeProvider,
   c as LocalesContext,
   F as LocalesProvider,
-  g as ResponsiveContainerContext,
-  h as ResponsiveContainerProvider,
-  B as getAnchorElPositionWindow,
+  b as ResponsiveContainerContext,
+  g as ResponsiveContainerProvider,
+  K as getAnchorElPositionWindow,
   L as getLocaleFromNetwork,
   k as useFirstRender,
   z as useFormatter,
-  O as useHostTheme,
-  y as useIsMountedRef,
-  I as useLocales,
-  A as useOffSetTop,
-  D as useResizeObserver,
+  I as useHostTheme,
+  q as useIsMobile,
+  M as useIsMountedRef,
+  D as useLocales,
+  O as useOffSetTop,
+  y as useResizeObserver,
   N as useResponsiveContainerStore,
   W as useResponsiveDesktop
 };