@m4l/graphics 0.1.51 → 0.1.53

package/commonjs.e3daa2e5.js

@@ -0,0 +1,9 @@
+import "react";
+var l = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function t(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+export {
+  l as c,
+  t as g
+};

package/components/index.8083534b.js

@@ -0,0 +1,4 @@
+import "@mui/material/styles";
+import "@mui/material";
+import "@m4l/styles";
+import "react/jsx-runtime";

package/contexts/ResponsiveContainerContext/constants.d.ts

@@ -0,0 +1,2 @@
+import { BreakPointsType } from "./types";
+export declare const BREAKPOINTS: BreakPointsType;

package/contexts/ResponsiveContainerContext/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ResponsiveContainerProviderProps } from './types';
+declare const ResponsiveContainerContext: import("react").Context<(Omit<Omit<import("zustand").StoreApi<import("./types").ResponsiveContainerStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import("./types").ResponsiveContainerStateWithActions | Partial<import("./types").ResponsiveContainerStateWithActions> | ((state: import("./types").ResponsiveContainerStateWithActions) => import("./types").ResponsiveContainerStateWithActions | Partial<import("./types").ResponsiveContainerStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import("./types").ResponsiveContainerStateWithActions | Partial<import("./types").ResponsiveContainerStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./types").ResponsiveContainerStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+declare const ResponsiveContainerProvider: (props: ResponsiveContainerProviderProps) => import("react").JSX.Element;
+export { ResponsiveContainerProvider, ResponsiveContainerContext };

package/contexts/ResponsiveContainerContext/store.d.ts

@@ -0,0 +1,11 @@
+import { InitialResponsiveContainerProps, ResponsiveContainerStateWithActions } from './types';
+export declare const createResponsiveContainerStore: (initProps: InitialResponsiveContainerProps) => Omit<Omit<import("zustand").StoreApi<ResponsiveContainerStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: ResponsiveContainerStateWithActions | Partial<ResponsiveContainerStateWithActions> | ((state: ResponsiveContainerStateWithActions) => ResponsiveContainerStateWithActions | Partial<ResponsiveContainerStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: ResponsiveContainerStateWithActions | Partial<ResponsiveContainerStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<ResponsiveContainerStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export declare type ResponsiveContainerStore = ReturnType<typeof createResponsiveContainerStore>;

package/contexts/ResponsiveContainerContext/types.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type BreakPointsType = Record<BreakpointType, number>;
+export interface ResponsiveRelativeContextProps {
+    breakPoint: BreakpointType;
+}
+export interface ResponsiveContainerProviderProps {
+    observedDivRef: Element | Text | null;
+    children: React.ReactNode;
+}
+export declare type CurrentState = {
+    width: number;
+    height: number;
+    mounted: boolean;
+    breakpoint: BreakpointType;
+};
+export interface ResponsiveContainerState {
+    breakPoint: BreakpointType;
+    isUpSm: boolean;
+    isXs: boolean;
+}
+export interface InitialResponsiveContainerProps extends Pick<ResponsiveContainerState, 'breakPoint' | 'isUpSm' | 'isXs'> {
+}
+export interface ResponsiveContainerStateWithActions extends ResponsiveContainerState {
+    responsiveContainerActions: {
+        setBreakpoint: (breakPoint: BreakpointType) => void;
+    };
+}

package/contexts/index.921576cc.js

@@ -0,0 +1,76 @@
+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 { jsx as x } from "react/jsx-runtime";
+import "date-fns/locale/en-US";
+import "./HostThemeContext/index.4291ba89.js";
+const m = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, S = (c) => {
+  const a = {
+    ...c
+  };
+  return u(
+    R(
+      g((r, t) => ({
+        ...a,
+        responsiveContainerActions: {
+          setBreakpoint: (e) => {
+            r(
+              (i) => {
+                console.log("current breakpoint", e), i.breakPoint = e, i.isUpSm = e !== "xs" && e !== "sm", i.isXs = e == "xs";
+              }
+            );
+          }
+        }
+      })),
+      { name: "Responsive Relative Store" }
+    )
+  );
+}, b = d(null), A = (c) => {
+  const {
+    children: a,
+    observedDivRef: r
+  } = c, t = p();
+  t.current || (t.current = S({
+    breakPoint: "md",
+    isUpSm: !1,
+    isXs: !1
+  }));
+  const e = () => {
+    const o = r;
+    if (o instanceof HTMLElement && o.clientWidth) {
+      const s = Object.keys(m);
+      for (let n = 0; n < s.length; n++) {
+        const l = s[n];
+        if (o.clientWidth <= m[l]) {
+          t.current?.getState().responsiveContainerActions.setBreakpoint(l);
+          break;
+        }
+      }
+      console.log("node.clientWidth", o.clientWidth), console.log("onResizeMemo", t.current?.getState().breakPoint);
+    }
+  }, i = v(() => h.exports.throttle(e, 200, {
+    leading: !1,
+    trailing: !0
+  }), [e]);
+  return f(() => {
+    const o = () => {
+      i();
+    }, s = r;
+    if (s && s instanceof Element) {
+      const n = new ResizeObserver((l) => {
+        o();
+      });
+      return n.observe(s), () => {
+        n.disconnect();
+      };
+    }
+  }, [r]), /* @__PURE__ */ x(b.Provider, {
+    value: t.current,
+    children: a
+  });
+};
+export {
+  b as R,
+  A as a
+};

package/contexts/index.d.ts

@@ -1,6 +1,8 @@
 export * from './FormatterContext';
 export type { Formatters, DateFormatter, NumberFormatter, CurrencyFormatter, } from './FormatterContext/types';
 export * from './LocalesContext';
+export * from './ResponsiveContainerContext';
+export type { BreakpointType } from './ResponsiveContainerContext/types';
 export type { NetworkLocaleType, LocaleType } from './LocalesContext/types';
 export { getLocaleFromNetwork } from './LocalesContext/helper';
 export * from './HostThemeContext';

package/hooks/index.66afb19b.js

@@ -0,0 +1,49 @@
+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 "../contexts/FormatterContext/index.92336f4c.js";
+import "../contexts/LocalesContext/index.53f0b702.js";
+import "../contexts/index.921576cc.js";
+import "@m4l/styles";
+function b() {
+  const e = r(!0);
+  return n(
+    () => () => {
+      e.current = !1;
+    },
+    []
+  ), e;
+}
+function h(e) {
+  const [o, t] = f(!1), s = e || 100;
+  return n(() => (window.onscroll = () => {
+    window.pageYOffset > s ? t(!0) : t(!1);
+  }, () => {
+    window.onscroll = null;
+  }), [s]), o;
+}
+const v = () => {
+  const e = i(m);
+  if (!e)
+    throw new Error("useHostTheme context must be use inside HostThemeProvider");
+  return e;
+};
+function x(e) {
+  const o = r(null);
+  return c(() => {
+    const t = o?.current;
+    if (!t)
+      return;
+    const s = new ResizeObserver((u) => {
+      e(t, u[0]);
+    });
+    return s.observe(t), () => {
+      s.disconnect();
+    };
+  }, [e, o.current]), o;
+}
+export {
+  h as a,
+  v as b,
+  x as c,
+  b as u
+};

package/hooks/index.d.ts

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

package/hooks/useResponsive/index.c9515afc.js

@@ -0,0 +1,17 @@
+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 { 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");
+  return r(o, e, s);
+}
+function c() {
+  return i("up", "sm");
+}
+export {
+  c as a,
+  f as u
+};

package/hooks/useResponsiveContainer/index.d.ts

@@ -0,0 +1,2 @@
+import { ResponsiveContainerStateWithActions } from '../../contexts/ResponsiveContainerContext/types';
+export declare function useResponsiveContainerStore<T>(selector: (state: ResponsiveContainerStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;

package/index.js

@@ -1,39 +1,45 @@
-import { G as x } from "./components/GlobalStyle/index.fff91e86.js";
-import { L as n, a as c, g as d } from "./contexts/LocalesContext/index.53f0b702.js";
-import { F as v, a as C } from "./contexts/FormatterContext/index.92336f4c.js";
-import { H as g, a as h } from "./contexts/HostThemeContext/index.4291ba89.js";
-import { u as P } from "./hooks/useFirstRender/index.1e9b02fb.js";
-import { u as T } from "./hooks/useFormatter/index.57ac8cca.js";
-import { b as k, u as w, a as z, c as G } from "./hooks/index.33d67709.js";
-import { u as S } from "./hooks/useLocales/index.d5a80aff.js";
-import { u as A } from "./hooks/useResponsive/index.1409e387.js";
-import { C as E, g as I } from "./utils/index.6909c662.js";
+import { G as l } from "./components/GlobalStyle/index.fff91e86.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 { 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 "@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 "@m4l/core";
 import "date-fns/locale/en-US";
+import "./node_modules.dbab0abd.js";
+import "./commonjs.e3daa2e5.js";
 export {
-  E as Capitalize,
-  v as FormatterContext,
-  C as FormatterProvider,
-  x as GlobalStyles,
-  g as HostThemeContext,
-  h as HostThemeProvider,
-  n as LocalesContext,
-  c as LocalesProvider,
-  I as getAnchorElPositionWindow,
-  d as getLocaleFromNetwork,
-  P as useFirstRender,
-  T as useFormatter,
-  k as useHostTheme,
-  w as useIsMountedRef,
-  S as useLocales,
-  z as useOffSetTop,
-  G as useResizeObserver,
-  A as useResponsiveDesktop
+  q as Capitalize,
+  C as FormatterContext,
+  R as FormatterProvider,
+  l as GlobalStyles,
+  T as HostThemeContext,
+  b as HostThemeProvider,
+  c as LocalesContext,
+  F as LocalesProvider,
+  g as ResponsiveContainerContext,
+  h as ResponsiveContainerProvider,
+  B 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,
+  N as useResponsiveContainerStore,
+  W as useResponsiveDesktop
 };