@m4l/graphics 0.1.31 → 0.1.33

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.
@@ -4,3 +4,4 @@ export * from './LocalesContext';
4
4
  export type { NetworkLocaleType, LocaleType } from './LocalesContext/types';
5
5
  export { getLocaleFromNetwork } from './LocalesContext/helper';
6
6
  export * from './HostThemeContext';
7
+ export type { HostThemeType } from './HostThemeContext/types';
@@ -1 +1 @@
1
- export declare const useHostTheme: () => import("../../contexts/HostThemeContext/types").HostThemeType;
1
+ export declare const useHostTheme: () => import("../..").HostThemeType;
package/index.js CHANGED
@@ -1,13 +1,13 @@
1
- import { P } from "./components/ProgressBarStyle/index.fb6fd9ed.js";
2
- import { F as n, a as d } from "./contexts/FormatterContext/index.92336f4c.js";
3
- import { L as c, a as g, g as v } from "./contexts/LocalesContext/index.5b555637.js";
4
- import { H as T, a as L } from "./contexts/HostThemeContext/index.9fe9854f.js";
5
- import { u as h } from "./hooks/useFirstRender/index.1e9b02fb.js";
6
- import { u as b } from "./hooks/useFormatter/index.57ac8cca.js";
7
- import { b as k, u as y, a as z } from "./hooks/index.64cf4fc4.js";
8
- import { u as B } from "./hooks/useLocales/index.f676279e.js";
9
- import { u as I, a as M } from "./hooks/useResponsive/index.fc5e1b4f.js";
10
- import { C as O, b as V, c as j, a as q, d as A, g as E, i as G, o as J, p as K, f as Q, r as U, e as W, h as X } from "./utils/index.42a6be21.js";
1
+ import { P as x } from "./components/ProgressBarStyle/index.fb6fd9ed.js";
2
+ import { F as l, a as F } from "./contexts/FormatterContext/index.92336f4c.js";
3
+ import { L as v, a as C, g as L } from "./contexts/LocalesContext/index.5b555637.js";
4
+ import { H as c, a as H } from "./contexts/HostThemeContext/index.9fe9854f.js";
5
+ import { u as T } from "./hooks/useFirstRender/index.1e9b02fb.js";
6
+ import { u as h } from "./hooks/useFormatter/index.57ac8cca.js";
7
+ import { b as S, u as b, a as w } from "./hooks/index.64cf4fc4.js";
8
+ import { u as z } from "./hooks/useLocales/index.f676279e.js";
9
+ import { u as D, a as I } from "./hooks/useResponsive/index.fc5e1b4f.js";
10
+ import { C as N } from "./utils/index.54cae015.js";
11
11
  import "@mui/material/styles";
12
12
  import "@mui/material";
13
13
  import "react/jsx-runtime";
@@ -17,35 +17,22 @@ import "@mui/x-date-pickers/AdapterDateFns";
17
17
  import "@mui/x-date-pickers";
18
18
  import "date-fns/locale/en-US";
19
19
  import "@mui/material/useMediaQuery";
20
- import "./vendor.353501da.js";
21
20
  export {
22
- O as Capitalize,
23
- n as FormatterContext,
24
- d as FormatterProvider,
25
- T as HostThemeContext,
26
- L as HostThemeProvider,
27
- c as LocalesContext,
28
- g as LocalesProvider,
29
- P as ProgressBarStyle,
30
- V as bluePreset,
31
- j as colorPresets,
32
- q as cyanPreset,
33
- A as defaultPreset,
34
- E as getColorPresets,
35
- G as getFontValue,
36
- v as getLocaleFromNetwork,
37
- J as orangePreset,
38
- K as purplePreset,
39
- Q as pxToRem,
40
- U as redPreset,
41
- W as remToPx,
42
- X as responsiveFontSizes,
43
- h as useFirstRender,
44
- b as useFormatter,
45
- k as useHostTheme,
46
- y as useIsMountedRef,
47
- B as useLocales,
48
- z as useOffSetTop,
49
- I as useResponsive,
50
- M as useResponsiveDesktop
21
+ N as Capitalize,
22
+ l as FormatterContext,
23
+ F as FormatterProvider,
24
+ c as HostThemeContext,
25
+ H as HostThemeProvider,
26
+ v as LocalesContext,
27
+ C as LocalesProvider,
28
+ x as ProgressBarStyle,
29
+ L as getLocaleFromNetwork,
30
+ T as useFirstRender,
31
+ h as useFormatter,
32
+ S as useHostTheme,
33
+ b as useIsMountedRef,
34
+ z as useLocales,
35
+ w as useOffSetTop,
36
+ D as useResponsive,
37
+ I as useResponsiveDesktop
51
38
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/graphics",
3
- "version": "0.1.31",
3
+ "version": "0.1.33",
4
4
  "license": "UNLICENSED",
5
5
  "author": "M4L Team",
6
6
  "dependencies": {
@@ -0,0 +1,4 @@
1
+ const a = (e) => e && e[0].toUpperCase() + e.slice(1) || "";
2
+ export {
3
+ a as C
4
+ };
package/utils/index.d.ts CHANGED
@@ -1,3 +1 @@
1
- export * from './getColorPresets';
2
- export * from './getFontValue';
3
1
  export * from './strings';
@@ -1,170 +0,0 @@
1
- import { ThemeColorPresets } from '../../../m4l_styles/src/types';
2
- export declare const colorPresets: ({
3
- LightSelected: string;
4
- LightSelectedHover: string;
5
- DarkSelected: string;
6
- DarkSelectedHover: string;
7
- contrastText: string;
8
- lighter: string;
9
- light: string;
10
- main: string;
11
- dark: string;
12
- darker: string;
13
- name: string;
14
- } | {
15
- name: string;
16
- lighter: string;
17
- light: string;
18
- main: string;
19
- dark: string;
20
- darker: string;
21
- contrastText: string;
22
- })[];
23
- export declare const defaultPreset: {
24
- LightSelected: string;
25
- LightSelectedHover: string;
26
- DarkSelected: string;
27
- DarkSelectedHover: string;
28
- contrastText: string;
29
- lighter: string;
30
- light: string;
31
- main: string;
32
- dark: string;
33
- darker: string;
34
- name: string;
35
- } | {
36
- name: string;
37
- lighter: string;
38
- light: string;
39
- main: string;
40
- dark: string;
41
- darker: string;
42
- contrastText: string;
43
- };
44
- export declare const purplePreset: {
45
- LightSelected: string;
46
- LightSelectedHover: string;
47
- DarkSelected: string;
48
- DarkSelectedHover: string;
49
- contrastText: string;
50
- lighter: string;
51
- light: string;
52
- main: string;
53
- dark: string;
54
- darker: string;
55
- name: string;
56
- } | {
57
- name: string;
58
- lighter: string;
59
- light: string;
60
- main: string;
61
- dark: string;
62
- darker: string;
63
- contrastText: string;
64
- };
65
- export declare const cyanPreset: {
66
- LightSelected: string;
67
- LightSelectedHover: string;
68
- DarkSelected: string;
69
- DarkSelectedHover: string;
70
- contrastText: string;
71
- lighter: string;
72
- light: string;
73
- main: string;
74
- dark: string;
75
- darker: string;
76
- name: string;
77
- } | {
78
- name: string;
79
- lighter: string;
80
- light: string;
81
- main: string;
82
- dark: string;
83
- darker: string;
84
- contrastText: string;
85
- };
86
- export declare const bluePreset: {
87
- LightSelected: string;
88
- LightSelectedHover: string;
89
- DarkSelected: string;
90
- DarkSelectedHover: string;
91
- contrastText: string;
92
- lighter: string;
93
- light: string;
94
- main: string;
95
- dark: string;
96
- darker: string;
97
- name: string;
98
- } | {
99
- name: string;
100
- lighter: string;
101
- light: string;
102
- main: string;
103
- dark: string;
104
- darker: string;
105
- contrastText: string;
106
- };
107
- export declare const orangePreset: {
108
- LightSelected: string;
109
- LightSelectedHover: string;
110
- DarkSelected: string;
111
- DarkSelectedHover: string;
112
- contrastText: string;
113
- lighter: string;
114
- light: string;
115
- main: string;
116
- dark: string;
117
- darker: string;
118
- name: string;
119
- } | {
120
- name: string;
121
- lighter: string;
122
- light: string;
123
- main: string;
124
- dark: string;
125
- darker: string;
126
- contrastText: string;
127
- };
128
- export declare const redPreset: {
129
- LightSelected: string;
130
- LightSelectedHover: string;
131
- DarkSelected: string;
132
- DarkSelectedHover: string;
133
- contrastText: string;
134
- lighter: string;
135
- light: string;
136
- main: string;
137
- dark: string;
138
- darker: string;
139
- name: string;
140
- } | {
141
- name: string;
142
- lighter: string;
143
- light: string;
144
- main: string;
145
- dark: string;
146
- darker: string;
147
- contrastText: string;
148
- };
149
- export declare function getColorPresets(presetsKey: ThemeColorPresets): {
150
- LightSelected: string;
151
- LightSelectedHover: string;
152
- DarkSelected: string;
153
- DarkSelectedHover: string;
154
- contrastText: string;
155
- lighter: string;
156
- light: string;
157
- main: string;
158
- dark: string;
159
- darker: string;
160
- name: string;
161
- } | {
162
- name: string;
163
- lighter: string;
164
- light: string;
165
- main: string;
166
- dark: string;
167
- darker: string;
168
- contrastText: string;
169
- };
170
- export default getColorPresets;
@@ -1,24 +0,0 @@
1
- import type { Variant } from '@mui/material/styles/createTypography';
2
- export declare function remToPx(value: string): number;
3
- export declare function pxToRem(value: number): string;
4
- export declare function responsiveFontSizes({ sm, md, lg }: {
5
- sm: number;
6
- md: number;
7
- lg: number;
8
- }): {
9
- '@media (min-width:600px)': {
10
- fontSize: string;
11
- };
12
- '@media (min-width:900px)': {
13
- fontSize: string;
14
- };
15
- '@media (min-width:1200px)': {
16
- fontSize: string;
17
- };
18
- };
19
- export declare function getFontValue(variant: Variant): {
20
- fontSize: number;
21
- lineHeight: number;
22
- fontWeight: import("csstype").Property.FontWeight | undefined;
23
- letterSpacing: import("csstype").Property.LetterSpacing<string | number> | undefined;
24
- };
@@ -1,118 +0,0 @@
1
- import { useTheme as c } from "@mui/material/styles";
2
- import "react";
3
- import "../contexts/FormatterContext/index.92336f4c.js";
4
- import "../contexts/LocalesContext/index.5b555637.js";
5
- import "../contexts/HostThemeContext/index.9fe9854f.js";
6
- import { u as d } from "../hooks/useResponsive/index.fc5e1b4f.js";
7
- import { p as s } from "../vendor.353501da.js";
8
- import "@mui/material/useMediaQuery";
9
- const o = [
10
- {
11
- name: "default",
12
- ...s.light.primary,
13
- LightSelected: "#EBF9F1",
14
- LightSelectedHover: "#D6F2E3",
15
- DarkSelected: "#142827",
16
- DarkSelectedHover: "#12342B"
17
- },
18
- {
19
- name: "purple",
20
- lighter: "#EBD6FD",
21
- light: "#B985F4",
22
- main: "#7635dc",
23
- dark: "#431A9E",
24
- darker: "#200A69",
25
- contrastText: "#fff"
26
- },
27
- {
28
- name: "cyan",
29
- lighter: "#D1FFFC",
30
- light: "#76F2FF",
31
- main: "#1CCAFF",
32
- dark: "#0E77B7",
33
- darker: "#053D7A",
34
- contrastText: s.light.grey[800]
35
- },
36
- {
37
- name: "blue",
38
- lighter: "#D1E9FC",
39
- light: "#76B0F1",
40
- main: "#2065D1",
41
- dark: "#103996",
42
- darker: "#061B64",
43
- contrastText: "#fff"
44
- },
45
- {
46
- name: "orange",
47
- lighter: "#FEF4D4",
48
- light: "#FED680",
49
- main: "#fda92d",
50
- dark: "#B66816",
51
- darker: "#793908",
52
- contrastText: s.light.grey[800]
53
- },
54
- {
55
- name: "red",
56
- lighter: "#FFE3D5",
57
- light: "#FFC1AC",
58
- main: "#FF3030",
59
- dark: "#B71833",
60
- darker: "#7A0930",
61
- contrastText: "#fff"
62
- }
63
- ], u = o[0], f = o[1], F = o[2], y = o[3], k = o[4], x = o[5];
64
- function H(e) {
65
- return {
66
- purple: f,
67
- cyan: F,
68
- blue: y,
69
- orange: k,
70
- red: x,
71
- default: u
72
- }[e];
73
- }
74
- function D(e) {
75
- return Math.round(parseFloat(e) * 16);
76
- }
77
- function a(e) {
78
- return `${e / 16}rem`;
79
- }
80
- function R({ sm: e, md: t, lg: r }) {
81
- return {
82
- "@media (min-width:600px)": {
83
- fontSize: a(e)
84
- },
85
- "@media (min-width:900px)": {
86
- fontSize: a(t)
87
- },
88
- "@media (min-width:1200px)": {
89
- fontSize: a(r)
90
- }
91
- };
92
- }
93
- function S() {
94
- return [...c().breakpoints.keys].reverse().reduce((r, n) => {
95
- const i = d("up", n);
96
- return !r && i ? n : r;
97
- }, null) || "xs";
98
- }
99
- function w(e) {
100
- const t = c(), r = S(), n = t.breakpoints.up(r === "xl" ? "lg" : r), h = (e === "h1" || e === "h2" || e === "h3" || e === "h4" || e === "h5" || e === "h6") && t.typography[e][n] ? t.typography[e][n] : t.typography[e], p = D(h.fontSize), l = Number(t.typography[e].lineHeight) * p, { fontWeight: m, letterSpacing: g } = t.typography[e];
101
- return { fontSize: p, lineHeight: l, fontWeight: m, letterSpacing: g };
102
- }
103
- const L = (e) => e && e[0].toUpperCase() + e.slice(1) || "";
104
- export {
105
- L as C,
106
- F as a,
107
- y as b,
108
- o as c,
109
- u as d,
110
- D as e,
111
- a as f,
112
- H as g,
113
- R as h,
114
- w as i,
115
- k as o,
116
- f as p,
117
- x as r
118
- };
@@ -1,135 +0,0 @@
1
- import { alpha as t } from "@mui/material/styles";
2
- import "./components/ProgressBarStyle/index.fb6fd9ed.js";
3
- import "./contexts/FormatterContext/index.92336f4c.js";
4
- import "./contexts/LocalesContext/index.5b555637.js";
5
- import "./contexts/HostThemeContext/index.9fe9854f.js";
6
- import "./hooks/useFirstRender/index.1e9b02fb.js";
7
- import "./hooks/useFormatter/index.57ac8cca.js";
8
- import "./hooks/index.64cf4fc4.js";
9
- import "./hooks/useLocales/index.f676279e.js";
10
- import "./hooks/useResponsive/index.fc5e1b4f.js";
11
- import "./utils/index.42a6be21.js";
12
- function r(c, l) {
13
- return `linear-gradient(to bottom, ${c}, ${l})`;
14
- }
15
- const a = {
16
- lighter: "#C8FACD",
17
- light: "#5BE584",
18
- main: "#00AB55",
19
- dark: "#007B55",
20
- darker: "#005249"
21
- }, A = {
22
- lighter: "#D6E4FF",
23
- light: "#84A9FF",
24
- main: "#3366FF",
25
- dark: "#1939B7",
26
- darker: "#091A7A"
27
- }, i = {
28
- lighter: "#D0F2FF",
29
- light: "#74CAFF",
30
- main: "#1890FF",
31
- dark: "#0C53B7",
32
- darker: "#04297A"
33
- }, o = {
34
- lighter: "#E9FCD4",
35
- light: "#AAF27F",
36
- main: "#54D62C",
37
- dark: "#229A16",
38
- darker: "#08660D"
39
- }, n = {
40
- lighter: "#FFF7CD",
41
- light: "#FFE16A",
42
- main: "#FFC107",
43
- dark: "#B78103",
44
- darker: "#7A4F01"
45
- }, d = {
46
- lighter: "#FFE7D9",
47
- light: "#FFA48D",
48
- main: "#FF4842",
49
- dark: "#B72136",
50
- darker: "#7A0C2E"
51
- }, F = {
52
- 0: "#FFFFFF",
53
- 100: "#F9FAFB",
54
- 200: "#F4F6F8",
55
- 300: "#DFE3E8",
56
- 400: "#C4CDD5",
57
- 500: "#919EAB",
58
- 600: "#637381",
59
- 700: "#454F5B",
60
- 800: "#212B36",
61
- 900: "#161C24",
62
- 5008: t("#919EAB", 0.08),
63
- 50012: t("#919EAB", 0.12),
64
- 50016: t("#919EAB", 0.16),
65
- 50024: t("#919EAB", 0.24),
66
- 50032: t("#919EAB", 0.32),
67
- 50048: t("#919EAB", 0.48),
68
- 50056: t("#919EAB", 0.56),
69
- 50080: t("#919EAB", 0.8)
70
- }, s = {
71
- primary: r(a.light, a.main),
72
- info: r(i.light, i.main),
73
- success: r(o.light, o.main),
74
- warning: r(n.light, n.main),
75
- error: r(d.light, d.main)
76
- }, m = {
77
- violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
78
- blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
79
- green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
80
- yellow: ["#FFE700", "#FFEF5A", "#FFF7AE", "#FFF3D6"],
81
- red: ["#FF6C40", "#FF8F6D", "#FFBD98", "#FFF2D4"]
82
- }, e = {
83
- common: { black: "#000", white: "#fff" },
84
- primary: { ...a, contrastText: "#fff" },
85
- secondary: { ...A, contrastText: "#fff" },
86
- info: { ...i, contrastText: "#fff" },
87
- success: { ...o, contrastText: F[800] },
88
- warning: { ...n, contrastText: F[800] },
89
- error: { ...d, contrastText: "#fff" },
90
- grey: F,
91
- gradients: s,
92
- chart: m,
93
- divider: F[50024],
94
- action: {
95
- hover: F[5008],
96
- selected: F[50016],
97
- disabled: F[50080],
98
- disabledBackground: F[50024],
99
- focus: F[50024],
100
- hoverOpacity: 0.08,
101
- disabledOpacity: 0.48
102
- }
103
- }, R = {
104
- light: {
105
- ...e,
106
- mode: "light",
107
- text: { primary: F[800], secondary: F[700], disabled: F[500] },
108
- background: {
109
- paper: "#fff",
110
- default: "#fff",
111
- neutral: F[200],
112
- autocomplete: F[100],
113
- header: "#F6F7F9"
114
- },
115
- action: { active: F[600], ...e.action },
116
- grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
117
- },
118
- dark: {
119
- ...e,
120
- mode: "dark",
121
- text: { primary: "#fff", secondary: F[500], disabled: F[600] },
122
- background: {
123
- paper: F[800],
124
- default: F[900],
125
- neutral: F[50016],
126
- autocomplete: F[800],
127
- header: "#29313A"
128
- },
129
- action: { active: F[500], ...e.action },
130
- grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
131
- }
132
- };
133
- export {
134
- R as p
135
- };