@m4l/graphics 7.3.1-beta-update-components-mui-version.0 → 7.5.0-beta-feature-731-m4l-components-code-editor.0

package/contexts/ThemeSettingsContext/store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/contexts/ThemeSettingsContext/store.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,8BAA8B,EAC9B,6BAA6B,EAI9B,MAAM,SAAS,CAAC;AAwGjB;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,GAAI,cAAc,8BAA8B;;;;;;;;CAwKpF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/contexts/ThemeSettingsContext/store.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,8BAA8B,EAC9B,6BAA6B,EAI9B,MAAM,SAAS,CAAC;AAiHjB;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,GAAI,cAAc,8BAA8B;;;;;;;;CAwKpF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/contexts/ThemeSettingsContext/store.js

@@ -1,46 +1,49 @@
-import { createStore as c } from "zustand";
-import { devtools as d } from "zustand/middleware";
-import { immer as u } from "zustand/middleware/immer";
-import { getPaletteByPreset as a, createCustomShadows as x, shadows as s, typographyOld as U, getColorPresets as m } from "@m4l/styles";
-import { alpha as p } from "@mui/system";
-import { defaultThemeSettings as g } from "./constants.js";
-function l(o, r = "m4l") {
-  const n = document.querySelector("[data-mui-color-scheme]");
-  n && Object.keys(o).forEach((t) => {
-    const e = o[t];
-    if (typeof e == "string" || typeof e == "number") {
-      const S = `--${r}-${t}`;
-      n.style.setProperty(S, e.toString());
-    } else typeof e == "object" && e !== null && l(e, `${r}-${t}`);
+import { createStore as d } from "zustand";
+import { devtools as u } from "zustand/middleware";
+import { immer as a } from "zustand/middleware/immer";
+import { getPaletteByPreset as f, createCustomShadows as y, shadows as g, typographyOld as U, getColorPresets as p } from "@m4l/styles";
+import { alpha as s } from "@mui/system";
+import { defaultThemeSettings as l } from "./constants.js";
+function S(r, o = "m4l") {
+  const n = typeof document > "u" ? null : document.documentElement;
+  if (!n)
+    return;
+  const e = r?.palette?.mode;
+  o === "m4l" && (typeof e == "string" || typeof e == "number") && n.style.setProperty(`--${o}-mode`, e.toString()), Object.keys(r).forEach((t) => {
+    const i = r[t];
+    if (typeof i == "string" || typeof i == "number") {
+      const c = `--${o}-${t}`;
+      n.style.setProperty(c, i.toString());
+    } else typeof i == "object" && i !== null && S(i, `${o}-${t}`);
   });
 }
-const h = (o) => {
-  const r = o.themeUserSettings || g, n = r.themeMode === "light", t = a(r.themeColor), e = n ? t.light : t.dark;
-  o.themeOptions = {
-    ...o.themeOptions,
+const m = (r) => {
+  const o = r.themeUserSettings || l, n = o.themeMode === "light", e = f(o.themeColor), t = n ? e.light : e.dark;
+  r.themeOptions = {
+    ...r.themeOptions,
     ...U,
     palette: {
-      ...o.themeOptions?.palette ?? {},
-      ...e
+      ...r.themeOptions?.palette ?? {},
+      ...t
     },
     shape: { borderRadius: 8 },
-    direction: r.themeDirection,
-    shadows: n ? s.light : s.dark,
+    direction: o.themeDirection,
+    shadows: n ? g.light : g.dark,
     customShadows: {
-      primary: n ? `0 4px 8px -4px ${p(m(r.themeColor)?.enabledLight, 0.12)},
-       0 2px 27px 2px ${p(m(r.themeColor)?.enabledLight, 0.02)}` : `0 4px 8px -4px ${p(m(r.themeColor)?.enabledDark, 0.12)},
-       0 2px 27px 2px ${p(m(r.themeColor)?.enabledDark, 0.02)}`,
-      ...x(r.themeMode),
-      primary2: n ? `0px 2px 3px 0px ${p(m(r.themeColor)?.hoverOpacityLight, 0.2)}` : `0px 2px 3px 0px ${p(m(r.themeColor)?.hoverOpacityDark, 0.2)}`
+      primary: n ? `0 4px 8px -4px ${s(p(o.themeColor)?.enabledLight, 0.12)},
+       0 2px 27px 2px ${s(p(o.themeColor)?.enabledLight, 0.02)}` : `0 4px 8px -4px ${s(p(o.themeColor)?.enabledDark, 0.12)},
+       0 2px 27px 2px ${s(p(o.themeColor)?.enabledDark, 0.02)}`,
+      ...y(o.themeMode),
+      primary2: n ? `0px 2px 3px 0px ${s(p(o.themeColor)?.hoverOpacityLight, 0.2)}` : `0px 2px 3px 0px ${s(p(o.themeColor)?.hoverOpacityDark, 0.2)}`
     },
-    stretch: r.themeStretch
-  }, l(o.themeOptions);
-}, i = (o) => {
-  o.themeSettingsPersistFn?.(o.themeUserSettings);
-}, T = (o) => c(
-  d(
-    u((r, n) => ({
-      ...o,
+    stretch: o.themeStretch
+  }, S(r.themeOptions);
+}, h = (r) => {
+  r.themeSettingsPersistFn?.(r.themeUserSettings);
+}, M = (r) => d(
+  u(
+    a((o, n) => ({
+      ...r,
       settingsActions: {
         /**
          * Inicializa la tienda de configuración del tema
@@ -50,8 +53,8 @@ const h = (o) => {
          * @updatedUser Juan Escobar - automatic
          */
         init: () => {
-          r((t) => {
-            h(t);
+          o((e) => {
+            m(e);
           });
         },
         /**
@@ -61,9 +64,9 @@ const h = (o) => {
          * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
-        setThemeSettings: (t) => {
-          r((e) => {
-            e.themeUserSettings = { ...e.themeUserSettings, ...t }, i(e), h(e);
+        setThemeSettings: (e) => {
+          o((t) => {
+            t.themeUserSettings = { ...t.themeUserSettings, ...e }, h(t), m(t);
           });
         },
         /**
@@ -73,12 +76,12 @@ const h = (o) => {
          * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
-        onChangeMode: (t) => {
-          r((e) => {
-            t !== e.themeUserSettings.themeMode && (e.themeUserSettings = {
-              ...e.themeUserSettings,
-              themeMode: t
-            }, i(e), h(e));
+        onChangeMode: (e) => {
+          o((t) => {
+            e !== t.themeUserSettings.themeMode && (t.themeUserSettings = {
+              ...t.themeUserSettings,
+              themeMode: e
+            }, h(t), m(t));
           });
         },
         /**
@@ -89,8 +92,8 @@ const h = (o) => {
          * @updatedUser Juan Escobar - automatic
          */
         handleOpen: () => {
-          r((t) => {
-            t.open = !t.open;
+          o((e) => {
+            e.open = !e.open;
           });
         },
         /**
@@ -100,12 +103,12 @@ const h = (o) => {
          * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
-        onChangeDirection: (t) => {
-          r((e) => {
-            t !== e.themeUserSettings.themeDirection && (e.themeUserSettings = {
-              ...e.themeUserSettings,
-              themeDirection: t
-            }, i(e), h(e));
+        onChangeDirection: (e) => {
+          o((t) => {
+            e !== t.themeUserSettings.themeDirection && (t.themeUserSettings = {
+              ...t.themeUserSettings,
+              themeDirection: e
+            }, h(t), m(t));
           });
         },
         /**
@@ -115,12 +118,12 @@ const h = (o) => {
          * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
-        onChangeColor: (t) => {
-          r((e) => {
-            t !== e.themeUserSettings.themeColor && (e.themeUserSettings = {
-              ...e.themeUserSettings,
-              themeColor: t
-            }, i(e), h(e));
+        onChangeColor: (e) => {
+          o((t) => {
+            e !== t.themeUserSettings.themeColor && (t.themeUserSettings = {
+              ...t.themeUserSettings,
+              themeColor: e
+            }, h(t), m(t));
           });
         },
         /**
@@ -130,12 +133,12 @@ const h = (o) => {
          * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
-        onChangeLayout: (t) => {
-          r((e) => {
-            e.themeUserSettings = {
-              ...e.themeUserSettings,
-              themeLayout: t.target.value
-            }, i(e), h(e);
+        onChangeLayout: (e) => {
+          o((t) => {
+            t.themeUserSettings = {
+              ...t.themeUserSettings,
+              themeLayout: e.target.value
+            }, h(t), m(t);
           });
         },
         /**
@@ -146,11 +149,11 @@ const h = (o) => {
          * @updatedUser Juan Escobar - automatic
          */
         onToggleStretch: () => {
-          r((t) => {
-            t.themeUserSettings = {
-              ...t.themeUserSettings,
-              themeStretch: !t.themeUserSettings.themeStretch
-            }, i(t), h(t);
+          o((e) => {
+            e.themeUserSettings = {
+              ...e.themeUserSettings,
+              themeStretch: !e.themeUserSettings.themeStretch
+            }, h(e), m(e);
           });
         },
         /**
@@ -161,10 +164,10 @@ const h = (o) => {
          * @updatedUser Juan Escobar - automatic
          */
         onResetSetting: () => {
-          r((t) => {
-            t.themeUserSettings = {
-              ...g
-            }, i(t), h(t);
+          o((e) => {
+            e.themeUserSettings = {
+              ...l
+            }, h(e), m(e);
           });
         }
       }
@@ -173,5 +176,5 @@ const h = (o) => {
   )
 );
 export {
-  T as createThemeSettingsStore
+  M as createThemeSettingsStore
 };

package/hooks/index.d.ts

@@ -10,6 +10,7 @@ export { useOffSetTop } from './useOffSetTop';
 export { useHostTheme } from './useHostTheme';
 export { useResizeObserver } from './useResizeObserver';
 export { useResponsiveDesktop } from './useResponsive';
+export { useThemeMode } from './useThemeMode';
 export { useThemeSettingsStore } from './useThemSettingsStore';
 export { usePaginate } from './usePaginate';
 export { useRows } from './useRows';

package/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/graphics/src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/graphics/src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/hooks/useThemeMode/index.d.ts

@@ -0,0 +1,6 @@
+export type ThemeMode = 'light' | 'dark';
+/**
+ * Return the current document theme mode derived from the `--m4l-mode` CSS variable.
+ */
+export declare function useThemeMode(): ThemeMode;
+//# sourceMappingURL=index.d.ts.map

package/hooks/useThemeMode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/hooks/useThemeMode/index.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAiDzC;;GAEG;AACH,wBAAgB,YAAY,IAAI,SAAS,CAMxC"}

package/hooks/useThemeMode/index.js

@@ -0,0 +1,34 @@
+import { useSyncExternalStore as u } from "react";
+const d = "--m4l-mode", o = "light";
+function i(e) {
+  return e?.trim() === "dark" ? "dark" : o;
+}
+function n() {
+  return typeof document > "u" || typeof window > "u" ? o : i(
+    window.getComputedStyle(document.documentElement).getPropertyValue(d)
+  );
+}
+function m(e) {
+  if (typeof document > "u" || typeof MutationObserver > "u")
+    return () => {
+    };
+  const r = document.documentElement, t = new MutationObserver(() => {
+    e();
+  });
+  return t.observe(r, {
+    attributes: !0,
+    attributeFilter: ["style", "data-mui-color-scheme"]
+  }), () => {
+    t.disconnect();
+  };
+}
+function s() {
+  return u(
+    m,
+    n,
+    n
+  );
+}
+export {
+  s as useThemeMode
+};

package/index.js

@@ -1,14 +1,14 @@
-import { GlobalStyles as t } from "./components/GlobalStyles/index.js";
+import { GlobalStyles as r } from "./components/GlobalStyles/index.js";
 import { M4L_CHROMATIC_AUTOFILL as p, getInputAutofillBodyNestedStyles as m, getInputAutofillKeyframeStyles as n } from "./components/GlobalStyles/getInputAutofillGlobalStyles.js";
 import { getLocaleFromNetwork as x } from "./contexts/LocalesContext/helper.js";
 import { FormatterContext as i, FormatterProvider as a } from "./contexts/FormatterContext/index.js";
-import { AppearanceComponentContext as u, AppearanceComponentProvider as S } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
-import { createAppearanceComponentStore as T } from "./contexts/AppearanceComponentContext/AppearanceComponentStore.js";
+import { AppearanceComponentContext as C, AppearanceComponentProvider as S } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
+import { createAppearanceComponentStore as l } from "./contexts/AppearanceComponentContext/AppearanceComponentStore.js";
 import { useAppearanceComponentStore as A } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
-import { LocalesContext as d, LocalesProvider as h } from "./contexts/LocalesContext/index.js";
+import { LocalesContext as h, LocalesProvider as v } from "./contexts/LocalesContext/index.js";
 import { ResponsiveContainerContext as y, ResponsiveContainerProvider as R } from "./contexts/ResponsiveContainerContext/index.js";
 import { HostThemeContext as P, HostThemeProvider as F } from "./contexts/HostThemeContext/index.js";
-import { DeviceTypeContext as b, DeviceTypeProvider as M } from "./contexts/DeviceTypeContext/index.js";
+import { DeviceTypeContext as M, DeviceTypeProvider as b } from "./contexts/DeviceTypeContext/index.js";
 import { KEY_LOCAL_STORAGE_THEME_SETTINGS as E, defaultThemeSettings as O } from "./contexts/ThemeSettingsContext/constants.js";
 import { ThemeSettingsContext as H, ThemeSettingsProvider as W } from "./contexts/ThemeSettingsContext/ThemeSettingsContext.js";
 import { WithAppearanceContext as z } from "./decorators/WithAppearanceContext/WithAppearanceContext.js";
@@ -20,32 +20,33 @@ import { useComponentSize as Q } from "./hooks/useComponentSize/useComponentSize
 import { useFormatter as X } from "./hooks/useFormatter/index.js";
 import { useIsMountedRef as $ } from "./hooks/useIsMountedRef/index.js";
 import { useLocales as oe } from "./hooks/useLocales/index.js";
-import { useResponsiveContainerStore as re } from "./hooks/useResponsiveContainer/index.js";
+import { useResponsiveContainerStore as te } from "./hooks/useResponsiveContainer/index.js";
 import { useUserAgent as me } from "./hooks/useUserAgent/index.js";
 import { useIsMobile as se } from "./hooks/useIsMobile/index.js";
 import { useOffSetTop as fe } from "./hooks/useOffSetTop.js";
 import { useHostTheme as ae } from "./hooks/useHostTheme/index.js";
-import { useResizeObserver as ue } from "./hooks/useResizeObserver/index.js";
-import { useResponsiveDesktop as le } from "./hooks/useResponsive/index.js";
-import { useThemeSettingsStore as ce } from "./hooks/useThemSettingsStore/index.js";
+import { useResizeObserver as Ce } from "./hooks/useResizeObserver/index.js";
+import { useResponsiveDesktop as Te } from "./hooks/useResponsive/index.js";
+import { useThemeMode as ce } from "./hooks/useThemeMode/index.js";
+import { useThemeSettingsStore as de } from "./hooks/useThemSettingsStore/index.js";
 import { usePaginate as ve } from "./hooks/usePaginate/index.js";
-import { useRows as he } from "./hooks/useRows/index.js";
-import { capitalize as ye } from "./utils/strings.js";
-import { getAnchorElPositionWindow as Le } from "./utils/anchorEl.js";
-import { getContrastTextColor as Fe } from "./utils/getContrastTextColor/getContrastTextColor.js";
+import { useRows as ye } from "./hooks/useRows/index.js";
+import { capitalize as Le } from "./utils/strings.js";
+import { getAnchorElPositionWindow as Fe } from "./utils/anchorEl.js";
+import { getContrastTextColor as Me } from "./utils/getContrastTextColor/getContrastTextColor.js";
 export {
-  u as AppearanceComponentContext,
+  C as AppearanceComponentContext,
   S as AppearanceComponentProvider,
-  b as DeviceTypeContext,
-  M as DeviceTypeProvider,
+  M as DeviceTypeContext,
+  b as DeviceTypeProvider,
   i as FormatterContext,
   a as FormatterProvider,
-  t as GlobalStyles,
+  r as GlobalStyles,
   P as HostThemeContext,
   F as HostThemeProvider,
   E as KEY_LOCAL_STORAGE_THEME_SETTINGS,
-  d as LocalesContext,
-  h as LocalesProvider,
+  h as LocalesContext,
+  v as LocalesProvider,
   p as M4L_CHROMATIC_AUTOFILL,
   K as MFAppStorybook,
   G as MFIsolationAppStorybook,
@@ -55,12 +56,12 @@ export {
   W as ThemeSettingsProvider,
   z as WithAppearanceContext,
   B as WithStorybookThemeContext,
-  ye as capitalize,
-  T as createAppearanceComponentStore,
+  Le as capitalize,
+  l as createAppearanceComponentStore,
   Y as createWithStorybookThemeContext,
   O as defaultThemeSettings,
-  Le as getAnchorElPositionWindow,
-  Fe as getContrastTextColor,
+  Fe as getAnchorElPositionWindow,
+  Me as getContrastTextColor,
   m as getInputAutofillBodyNestedStyles,
   n as getInputAutofillKeyframeStyles,
   x as getLocaleFromNetwork,
@@ -74,10 +75,11 @@ export {
   oe as useLocales,
   fe as useOffSetTop,
   ve as usePaginate,
-  ue as useResizeObserver,
-  re as useResponsiveContainerStore,
-  le as useResponsiveDesktop,
-  he as useRows,
-  ce as useThemeSettingsStore,
+  Ce as useResizeObserver,
+  te as useResponsiveContainerStore,
+  Te as useResponsiveDesktop,
+  ye as useRows,
+  ce as useThemeMode,
+  de as useThemeSettingsStore,
   me as useUserAgent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "7.3.1-beta-update-components-mui-version.0",
+  "version": "7.5.0-beta-feature-731-m4l-components-code-editor.0",
   "publishConfig": {
     "access": "public"
   },