@m4l/graphics 2.0.4 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,13 +1,12 @@
1
- import { useTheme as o } from "@mui/material/styles";
2
- import { GlobalStyles as e } from "@mui/material";
1
+ import { useTheme as e } from "@mui/material/styles";
2
+ import { GlobalStyles as o } from "@mui/material";
3
3
  import { globalRemSize as r } from "@m4l/styles";
4
4
  import { jsx as a } from "react/jsx-runtime";
5
5
  function s() {
6
- const t = o();
7
- return /* @__PURE__ */ a(e, {
6
+ const t = e();
7
+ return /* @__PURE__ */ a(o, {
8
8
  styles: {
9
9
  body: {
10
- /* backgroundColor: `${theme.vars.palette.background.background}!important`, */
11
10
  textRendering: "geometricPrecision",
12
11
  width: "100%",
13
12
  height: "100vh",
@@ -35,7 +34,7 @@ function s() {
35
34
  // Chrome
36
35
  "*::-webkit-scrollbar-thumb": {
37
36
  // barra que se mueve
38
- background: t.vars.palette.state.scrollBar,
37
+ background: t.vars.palette.general.scrollBar,
39
38
  borderRadius: "2px!important"
40
39
  },
41
40
  "& #root": {
@@ -0,0 +1,45 @@
1
+ import { createContext as a, useMemo as h } from "react";
2
+ import { CssBaseline as d } from "@mui/material";
3
+ import { G as p } from "../../components/GlobalStyle/index-BwMNLyTC.js";
4
+ import { createTheme as x, experimental_extendTheme as f, Experimental_CssVarsProvider as u, StyledEngineProvider as T } from "@mui/material/styles";
5
+ import { jsxs as s, jsx as o } from "react/jsx-runtime";
6
+ const v = a(null);
7
+ function H(i) {
8
+ const {
9
+ children: m,
10
+ hostThemeOptions: t,
11
+ fnComponentsOverrides: n,
12
+ isMobile: l
13
+ } = i, c = h(() => {
14
+ const e = x({
15
+ ...t
16
+ }), r = f({
17
+ cssVarPrefix: "m4l",
18
+ colorSchemes: {
19
+ light: e,
20
+ finalTheme: e,
21
+ dark: e
22
+ }
23
+ });
24
+ return r.components = n(r), r;
25
+ }, [l]);
26
+ return /* @__PURE__ */ s(u, {
27
+ theme: c,
28
+ children: [/* @__PURE__ */ o(p, {}), /* @__PURE__ */ o(v.Provider, {
29
+ value: {
30
+ hostThemeOptions: t,
31
+ fnComponentsOverrides: n
32
+ },
33
+ children: /* @__PURE__ */ s(T, {
34
+ injectFirst: !0,
35
+ children: [/* @__PURE__ */ o(d, {
36
+ enableColorScheme: !0
37
+ }), m]
38
+ })
39
+ })]
40
+ });
41
+ }
42
+ export {
43
+ v as H,
44
+ H as a
45
+ };
@@ -8,5 +8,6 @@ export interface HostThemeType {
8
8
  export interface HostThemeProviderProps extends HostThemeType {
9
9
  isMicroFrontEnd: boolean;
10
10
  children: ReactNode;
11
+ isMobile: boolean;
11
12
  }
12
13
  export declare type HostThemeContextType = HostThemeType;
@@ -1,5 +1,5 @@
1
1
  import { NetworkProps } from '@m4l/core';
2
- import { ThemeColorPresets } from '@m4l/styles';
2
+ import { PresetsOptions, ThemeColorPresets } from '@m4l/styles';
3
3
  import { CssVarsTheme, Theme } from '@mui/material/styles';
4
4
  import { ReactNode } from 'react';
5
5
  export declare type ThemeMode = 'light' | 'dark';
@@ -12,15 +12,13 @@ export declare type ThemeSettingsType = {
12
12
  themeColorPresets: ThemeColorPresets;
13
13
  themeStretch: ThemeStretch;
14
14
  themeLayout: ThemeLayout;
15
+ isMobile: boolean;
15
16
  };
16
17
  export interface ThemeSettingsStore {
17
18
  networkOperation: (props: NetworkProps) => Promise<any>;
18
19
  currentThemeSettings: ThemeSettingsType;
19
20
  themeOptions: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
20
- colorOption: {
21
- name: string | undefined;
22
- value: string;
23
- }[];
21
+ colorOption: PresetsOptions;
24
22
  /**
25
23
  * "setterThemeSettings" es una función que se encarga de persistir en local storage los cambios de los settings
26
24
  * Solo se instancia cuando esta en host, cuando esta storybook no se instancia
@@ -0,0 +1,273 @@
1
+ import { createContext as S, useRef as f, useMemo as R, useLayoutEffect as k, useEffect as P } from "react";
2
+ import { c as T, d as C, i as v, l as O } from "../node_modules-BHhXVwYT.js";
3
+ import { jsx as y } from "react/jsx-runtime";
4
+ import { useNetwork as x, useLocalStorageWithListener as M } from "@m4l/core";
5
+ 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";
6
+ import { alpha as z } from "@mui/system";
7
+ import { u as $ } from "../hooks/useIsMobile/index-Bro0dV28.js";
8
+ const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, j = (r) => {
9
+ const n = {
10
+ ...r
11
+ };
12
+ return T(
13
+ C(
14
+ v((o, t) => ({
15
+ ...n,
16
+ responsiveContainerActions: {
17
+ setBreakpoint: (e) => {
18
+ o((i) => {
19
+ i.breakPoint = e, i.isUpSm = e !== "xs" && e !== "sm", i.isXs = e == "xs";
20
+ });
21
+ }
22
+ }
23
+ })),
24
+ { name: "Responsive Relative Store" }
25
+ )
26
+ );
27
+ }, W = S(null), F = (r) => {
28
+ const {
29
+ children: n,
30
+ observedDivRef: o
31
+ } = r, t = f();
32
+ t.current || (t.current = j({
33
+ breakPoint: "md",
34
+ isUpSm: !1,
35
+ isXs: !1
36
+ }));
37
+ const e = () => {
38
+ const s = o;
39
+ if (s instanceof HTMLElement && s.clientWidth) {
40
+ const a = Object.keys(g);
41
+ for (let h = 0; h < a.length; h++) {
42
+ const u = a[h];
43
+ if (s.clientWidth <= g[u]) {
44
+ t.current?.getState().responsiveContainerActions.setBreakpoint(u);
45
+ break;
46
+ } else h === a.length - 1 && s.clientWidth >= g[u] && t.current?.getState().responsiveContainerActions.setBreakpoint(u);
47
+ }
48
+ }
49
+ }, i = R(() => O.throttle(e, 200, {
50
+ leading: !1,
51
+ trailing: !0
52
+ }), [e]);
53
+ return k(() => {
54
+ const s = () => {
55
+ i();
56
+ }, a = o;
57
+ if (a && a instanceof Element) {
58
+ const h = new ResizeObserver((u) => {
59
+ s();
60
+ });
61
+ return h.observe(a), () => {
62
+ h.disconnect();
63
+ };
64
+ }
65
+ }, [o]), /* @__PURE__ */ y(W.Provider, {
66
+ value: t.current,
67
+ children: n
68
+ });
69
+ }, p = {
70
+ themeMode: "light",
71
+ themeDirection: "ltr",
72
+ themeColorPresets: "patronus",
73
+ themeLayout: "horizontal",
74
+ themeStretch: !1,
75
+ isMobile: !1
76
+ };
77
+ function b(r, n = "m4l") {
78
+ const o = document.querySelector('[data-mui-color-scheme="light"]');
79
+ if (!o) {
80
+ console.error('Element with data-mui-color-scheme="light" not found.');
81
+ return;
82
+ }
83
+ Object.keys(r).forEach((t) => {
84
+ const e = r[t];
85
+ if (typeof e == "string" || typeof e == "number") {
86
+ const i = `--${n}-${t}`;
87
+ o.style.setProperty(i, e.toString());
88
+ } else typeof e == "object" && e !== null && b(e, `${n}-${t}`);
89
+ });
90
+ }
91
+ const m = {
92
+ mainChannel: "",
93
+ lightChannel: "",
94
+ darkChannel: "",
95
+ contrastTextChannel: ""
96
+ }, c = (r) => {
97
+ const n = r.currentThemeSettings || p, o = n.themeMode === "light", t = w(n.themeColorPresets), e = o ? t.light : t.dark, i = n.isMobile;
98
+ r.themeOptions = {
99
+ ...r.themeOptions,
100
+ typography: E,
101
+ generalSettings: {
102
+ isMobile: i
103
+ },
104
+ palette: {
105
+ ...r.themeOptions?.palette ?? {},
106
+ ...e,
107
+ primary: {
108
+ ...e.primary,
109
+ ...m
110
+ },
111
+ secondary: {
112
+ ...e.secondary,
113
+ ...m
114
+ },
115
+ info: {
116
+ ...e.info,
117
+ ...m
118
+ },
119
+ error: {
120
+ ...e.error,
121
+ ...m
122
+ },
123
+ success: {
124
+ ...e.success,
125
+ ...m
126
+ },
127
+ warning: {
128
+ ...e.warning,
129
+ ...m
130
+ },
131
+ text: {
132
+ ...e.text,
133
+ primaryChannel: "",
134
+ secondaryChannel: ""
135
+ },
136
+ background: {
137
+ ...e.background,
138
+ defaultChannel: "",
139
+ paperChannel: ""
140
+ },
141
+ common: {
142
+ ...e.common,
143
+ background: "",
144
+ backgroundChannel: "",
145
+ onBackground: "",
146
+ onBackgroundChannel: ""
147
+ },
148
+ action: {
149
+ ...e.action,
150
+ activeChannel: "",
151
+ selectedChannel: ""
152
+ }
153
+ },
154
+ shape: { borderRadius: 8 },
155
+ direction: n.themeDirection,
156
+ shadows: o ? d.light : d.dark,
157
+ customShadows: {
158
+ primary: `0 8px 16px 0 ${z(
159
+ L(n.themeColorPresets)?.main || "#fff",
160
+ 0.2
161
+ )}`,
162
+ ...B(n.themeMode)
163
+ },
164
+ stretch: n.themeStretch
165
+ }, b(r.themeOptions);
166
+ }, l = (r) => {
167
+ r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
168
+ }, _ = (r) => T(
169
+ C(
170
+ v((n, o) => ({
171
+ ...r,
172
+ settingsActions: {
173
+ init: () => {
174
+ n((t) => {
175
+ c(t);
176
+ });
177
+ },
178
+ setThemeSettings: (t) => {
179
+ n((e) => {
180
+ e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, l(e), c(e);
181
+ });
182
+ },
183
+ onChangeMode: (t) => {
184
+ n((e) => {
185
+ e.currentThemeSettings = {
186
+ ...e.currentThemeSettings,
187
+ themeMode: t.target.value
188
+ }, l(e), c(e);
189
+ });
190
+ },
191
+ handleOpen: () => {
192
+ n((t) => {
193
+ t.open = !t.open;
194
+ });
195
+ },
196
+ onChangeDirection: (t) => {
197
+ n((e) => {
198
+ e.currentThemeSettings = {
199
+ ...e.currentThemeSettings,
200
+ themeDirection: t.target.value
201
+ }, l(e), c(e);
202
+ });
203
+ },
204
+ onChangeColor: (t) => {
205
+ n((e) => {
206
+ e.currentThemeSettings = {
207
+ ...e.currentThemeSettings,
208
+ themeColorPresets: t.target.value
209
+ }, l(e), c(e);
210
+ });
211
+ },
212
+ onChangeLayout: (t) => {
213
+ n((e) => {
214
+ e.currentThemeSettings = {
215
+ ...e.currentThemeSettings,
216
+ themeLayout: t.target.value
217
+ }, l(e), c(e);
218
+ });
219
+ },
220
+ onToggleStretch: () => {
221
+ n((t) => {
222
+ t.currentThemeSettings = {
223
+ ...t.currentThemeSettings,
224
+ themeStretch: !t.currentThemeSettings.themeStretch
225
+ }, l(t), c(t);
226
+ });
227
+ },
228
+ onResetSetting: () => {
229
+ n((t) => {
230
+ t.currentThemeSettings = {
231
+ ...p
232
+ }, l(t), c(t);
233
+ });
234
+ }
235
+ }
236
+ })),
237
+ { name: "ThemeSettingsStore" }
238
+ )
239
+ ), N = S(null);
240
+ function G({
241
+ children: r,
242
+ themeSettings: n
243
+ }) {
244
+ const {
245
+ networkOperation: o
246
+ } = x(), t = $(), [e, i] = M("theme_setting", {}), s = f();
247
+ return s.current || (s.current = _({
248
+ networkOperation: o,
249
+ currentThemeSettings: {
250
+ ...p,
251
+ ...n,
252
+ ...e
253
+ },
254
+ themeOptions: A,
255
+ colorOption: D,
256
+ open: !1,
257
+ setterThemeSettings: n ? void 0 : i
258
+ }), s.current.getState().settingsActions.init()), P(() => {
259
+ s.current?.getState().settingsActions.setThemeSettings({
260
+ isMobile: t
261
+ });
262
+ }, [t]), /* @__PURE__ */ y(N.Provider, {
263
+ value: s.current,
264
+ children: r
265
+ });
266
+ }
267
+ export {
268
+ W as R,
269
+ N as T,
270
+ F as a,
271
+ G as b,
272
+ p as d
273
+ };
@@ -1,7 +1,7 @@
1
1
  import { useRef as n, useEffect as r, useState as i, useContext as u, useLayoutEffect as c } from "react";
2
- import { H as m } from "../contexts/HostThemeContext/index-C5Z07fH1.js";
2
+ import { H as m } from "../contexts/HostThemeContext/index-L-9XyXob.js";
3
3
  import { u as a } from "../node_modules-BHhXVwYT.js";
4
- import { T as l } from "../contexts/index-CvzLutB3.js";
4
+ import { T as l } from "../contexts/index-B5tlaHe1.js";
5
5
  function S() {
6
6
  const e = n(!0);
7
7
  return r(
@@ -1,6 +1,6 @@
1
1
  import { useContext as t } from "react";
2
2
  import { u as r } from "../../node_modules-BHhXVwYT.js";
3
- import { R as n } from "../../contexts/index-CvzLutB3.js";
3
+ import { R as n } from "../../contexts/index-B5tlaHe1.js";
4
4
  import { useResponsive as i } from "@m4l/styles";
5
5
  function f(e, s) {
6
6
  const o = t(n);
package/index.js CHANGED
@@ -1,13 +1,13 @@
1
- import { G as s } from "./components/GlobalStyle/index-DHBkshRk.js";
1
+ import { G as s } from "./components/GlobalStyle/index-BwMNLyTC.js";
2
2
  import { L as r, a, g as i } from "./contexts/LocalesContext/index--VwMF60R.js";
3
3
  import { F as m, a as p } from "./contexts/FormatterContext/index-BHG3bJJo.js";
4
- import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-CvzLutB3.js";
5
- import { H as T, a as g } from "./contexts/HostThemeContext/index-C5Z07fH1.js";
4
+ import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-B5tlaHe1.js";
5
+ import { H as T, a as g } from "./contexts/HostThemeContext/index-L-9XyXob.js";
6
6
  import { u as R } from "./hooks/useFirstRender/index-B-Q0TTn0.js";
7
7
  import { u as c } from "./hooks/useFormatter/index-DfdAcbzw.js";
8
- import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-Cg3zl6cl.js";
8
+ import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-Ds71tnc2.js";
9
9
  import { u as z } from "./hooks/useLocales/index-mTHn9nqY.js";
10
- import { u as I, a as M } from "./hooks/useResponsive/index-Cq8kt3PV.js";
10
+ import { u as I, a as M } from "./hooks/useResponsive/index-2q6r6mFX.js";
11
11
  import { u as y } from "./hooks/useIsMobile/index-Bro0dV28.js";
12
12
  import { C as D, g as E } from "./utils/index-DZG6QXjf.js";
13
13
  export {
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@m4l/graphics",
3
- "version": "2.0.4",
3
+ "version": "3.0.1",
4
4
  "license": "UNLICENSED",
5
5
  "author": "M4L Team*",
6
6
  "dependencies": {
7
7
  "@m4l/core": "^2.0.0",
8
- "@m4l/styles": "^2.0.0",
8
+ "@m4l/styles": "^3.0.0",
9
9
  "date-fns": "^2.30.0",
10
10
  "zustand": "4.3.6",
11
11
  "immer": "^9.0.21"
@@ -1,44 +0,0 @@
1
- import { createContext as c, useMemo as a } from "react";
2
- import { CssBaseline as h } from "@mui/material";
3
- import { G as d } from "../../components/GlobalStyle/index-DHBkshRk.js";
4
- import { createTheme as p, experimental_extendTheme as x, Experimental_CssVarsProvider as f, StyledEngineProvider as u } from "@mui/material/styles";
5
- import { jsxs as s, jsx as t } from "react/jsx-runtime";
6
- const T = c(null);
7
- function H(m) {
8
- const {
9
- children: i,
10
- hostThemeOptions: o,
11
- fnComponentsOverrides: n
12
- } = m, l = a(() => {
13
- const e = p({
14
- ...o
15
- }), r = x({
16
- cssVarPrefix: "m4l",
17
- colorSchemes: {
18
- light: e,
19
- finalTheme: e,
20
- dark: e
21
- }
22
- });
23
- return r.components = n(r), r;
24
- }, []);
25
- return /* @__PURE__ */ s(f, {
26
- theme: l,
27
- children: [/* @__PURE__ */ t(d, {}), /* @__PURE__ */ t(T.Provider, {
28
- value: {
29
- hostThemeOptions: o,
30
- fnComponentsOverrides: n
31
- },
32
- children: /* @__PURE__ */ s(u, {
33
- injectFirst: !0,
34
- children: [/* @__PURE__ */ t(h, {
35
- enableColorScheme: !0
36
- }), i]
37
- })
38
- })]
39
- });
40
- }
41
- export {
42
- T as H,
43
- H as a
44
- };
@@ -1,278 +0,0 @@
1
- import { createContext as f, useRef as T, useMemo as O, useLayoutEffect as y } from "react";
2
- import { c as v, d as R, i as x, l as b } from "../node_modules-BHhXVwYT.js";
3
- import { jsx as P } from "react/jsx-runtime";
4
- import { useNetwork as E, useLocalStorageWithListener as M } from "@m4l/core";
5
- 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";
6
- import { alpha as _ } from "@mui/system";
7
- const u = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, I = (r) => {
8
- const n = {
9
- ...r
10
- };
11
- return v(
12
- R(
13
- x((o, t) => ({
14
- ...n,
15
- responsiveContainerActions: {
16
- setBreakpoint: (e) => {
17
- o((s) => {
18
- s.breakPoint = e, s.isUpSm = e !== "xs" && e !== "sm", s.isXs = e == "xs";
19
- });
20
- }
21
- }
22
- })),
23
- { name: "Responsive Relative Store" }
24
- )
25
- );
26
- }, U = f(null), J = (r) => {
27
- const {
28
- children: n,
29
- observedDivRef: o
30
- } = r, t = T();
31
- t.current || (t.current = I({
32
- breakPoint: "md",
33
- isUpSm: !1,
34
- isXs: !1
35
- }));
36
- const e = () => {
37
- const i = o;
38
- if (i instanceof HTMLElement && i.clientWidth) {
39
- const a = Object.keys(u);
40
- for (let c = 0; c < a.length; c++) {
41
- const m = a[c];
42
- if (i.clientWidth <= u[m]) {
43
- t.current?.getState().responsiveContainerActions.setBreakpoint(m);
44
- break;
45
- } else c === a.length - 1 && i.clientWidth >= u[m] && t.current?.getState().responsiveContainerActions.setBreakpoint(m);
46
- }
47
- }
48
- }, s = O(() => b.throttle(e, 200, {
49
- leading: !1,
50
- trailing: !0
51
- }), [e]);
52
- return y(() => {
53
- const i = () => {
54
- s();
55
- }, a = o;
56
- if (a && a instanceof Element) {
57
- const c = new ResizeObserver((m) => {
58
- i();
59
- });
60
- return c.observe(a), () => {
61
- c.disconnect();
62
- };
63
- }
64
- }, [o]), /* @__PURE__ */ P(U.Provider, {
65
- value: t.current,
66
- children: n
67
- });
68
- }, S = {
69
- themeMode: "light",
70
- themeDirection: "ltr",
71
- themeColorPresets: "patronus",
72
- themeLayout: "horizontal",
73
- themeStretch: !1
74
- };
75
- function k(r, n = "m4l") {
76
- const o = document.querySelector('[data-mui-color-scheme="light"]');
77
- if (!o) {
78
- console.error('Element with data-mui-color-scheme="light" not found.');
79
- return;
80
- }
81
- Object.keys(r).forEach((t) => {
82
- const e = r[t];
83
- if (typeof e == "string" || typeof e == "number") {
84
- const s = `--${n}-${t}`;
85
- o.style.setProperty(s, e.toString());
86
- } else typeof e == "object" && e !== null && k(e, `${n}-${t}`);
87
- });
88
- }
89
- const h = (r) => {
90
- const n = r.currentThemeSettings || S;
91
- console.log("getColorPresets", g(n.themeColorPresets)), console.log(
92
- "getColorState",
93
- d(n.themeColorPresets, n.themeMode)
94
- );
95
- const o = n.themeMode === "light";
96
- r.themeOptions = {
97
- ...r.themeOptions,
98
- typography: w,
99
- palette: {
100
- ...r.themeOptions?.palette ?? {},
101
- ...o ? C.light : C.dark,
102
- primary: g(n.themeColorPresets),
103
- state: d(n.themeColorPresets, n.themeMode),
104
- representative: n.themeMode === "light" ? g(n.themeColorPresets)?.light : g(n.themeColorPresets)?.darker,
105
- secondary: {
106
- ...L,
107
- contrastText: "",
108
- mainChannel: "",
109
- lightChannel: "",
110
- darkChannel: "",
111
- contrastTextChannel: ""
112
- },
113
- common: {
114
- ...A,
115
- black: "#000",
116
- white: "#fff",
117
- background: "",
118
- backgroundChannel: "",
119
- onBackground: "",
120
- onBackgroundChannel: ""
121
- },
122
- error: {
123
- ...N,
124
- contrastText: "",
125
- mainChannel: "",
126
- lightChannel: "",
127
- darkChannel: "",
128
- contrastTextChannel: ""
129
- },
130
- warning: {
131
- ...D,
132
- contrastText: "",
133
- mainChannel: "",
134
- lightChannel: "",
135
- darkChannel: "",
136
- contrastTextChannel: ""
137
- },
138
- info: {
139
- ...B,
140
- contrastText: "",
141
- mainChannel: "",
142
- lightChannel: "",
143
- darkChannel: "",
144
- contrastTextChannel: ""
145
- },
146
- success: {
147
- ...z,
148
- contrastText: "",
149
- mainChannel: "",
150
- lightChannel: "",
151
- darkChannel: "",
152
- contrastTextChannel: ""
153
- }
154
- },
155
- shape: { borderRadius: 8 },
156
- direction: n.themeDirection,
157
- shadows: o ? p.light : p.dark,
158
- customShadows: {
159
- primary: `0 8px 16px 0 ${_(
160
- g(n.themeColorPresets)?.main || "#fff",
161
- 0.2
162
- )}`,
163
- ...W(n.themeMode)
164
- },
165
- stretch: n.themeStretch
166
- }, k(r.themeOptions);
167
- }, l = (r) => {
168
- r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
169
- }, K = (r) => v(
170
- R(
171
- x((n, o) => ({
172
- ...r,
173
- settingsActions: {
174
- init: () => {
175
- n((t) => {
176
- h(t);
177
- });
178
- },
179
- // setThemeOptions: newObj => {
180
- // set(state => {
181
- // state.themeOptions = { ...state.themeOptions, ...newObj };
182
- // });
183
- // },
184
- setThemeSettings: (t) => {
185
- n((e) => {
186
- e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, l(e), h(e);
187
- });
188
- },
189
- onChangeMode: (t) => {
190
- n((e) => {
191
- e.currentThemeSettings = {
192
- ...e.currentThemeSettings,
193
- themeMode: t.target.value
194
- }, l(e), h(e);
195
- });
196
- },
197
- handleOpen: () => {
198
- n((t) => {
199
- t.open = !t.open;
200
- });
201
- },
202
- onChangeDirection: (t) => {
203
- n((e) => {
204
- e.currentThemeSettings = {
205
- ...e.currentThemeSettings,
206
- themeDirection: t.target.value
207
- }, l(e), h(e);
208
- });
209
- },
210
- onChangeColor: (t) => {
211
- n((e) => {
212
- e.currentThemeSettings = {
213
- ...e.currentThemeSettings,
214
- themeColorPresets: t.target.value
215
- }, l(e), h(e);
216
- });
217
- },
218
- onChangeLayout: (t) => {
219
- n((e) => {
220
- e.currentThemeSettings = {
221
- ...e.currentThemeSettings,
222
- themeLayout: t.target.value
223
- }, l(e), h(e);
224
- });
225
- },
226
- onToggleStretch: () => {
227
- n((t) => {
228
- t.currentThemeSettings = {
229
- ...t.currentThemeSettings,
230
- themeStretch: !t.currentThemeSettings.themeStretch
231
- }, l(t), h(t);
232
- });
233
- },
234
- onResetSetting: () => {
235
- n((t) => {
236
- t.currentThemeSettings = {
237
- ...S
238
- }, l(t), h(t);
239
- });
240
- }
241
- }
242
- })),
243
- { name: "ExampleStore" }
244
- )
245
- ), X = f(null);
246
- function Q({
247
- children: r,
248
- themeSettings: n
249
- }) {
250
- const {
251
- networkOperation: o
252
- } = E(), [t, e] = M("theme_setting", {}), s = T();
253
- return s.current || (s.current = K({
254
- networkOperation: o,
255
- currentThemeSettings: {
256
- ...S,
257
- ...n,
258
- ...t
259
- },
260
- themeOptions: $,
261
- colorOption: j.map((i) => ({
262
- name: i.name,
263
- value: i.main
264
- })),
265
- open: !1,
266
- setterThemeSettings: n ? void 0 : e
267
- }), s.current.getState().settingsActions.init()), /* @__PURE__ */ P(X.Provider, {
268
- value: s.current,
269
- children: r
270
- });
271
- }
272
- export {
273
- U as R,
274
- X as T,
275
- J as a,
276
- Q as b,
277
- S as d
278
- };