@mxenabled/mxui 1.6.0-alpha.5 → 2.0.0

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.
Files changed (29) hide show
  1. package/README.md +32 -0
  2. package/dist/components/icon/Icon.d.ts +1 -9
  3. package/dist/components/icon/icons/index.d.ts +0 -13
  4. package/dist/components/icon/index.d.ts +1 -1
  5. package/dist/components/selectionbox/SelectionBox.d.ts +3 -1
  6. package/dist/index.d.ts +0 -1
  7. package/dist/index.es.js +568 -928
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/themes/Augmentations.d.ts +0 -43
  10. package/dist/themes/Palette.d.ts +0 -21
  11. package/dist/themes/Typography.d.ts +55 -31
  12. package/package.json +42 -48
  13. package/dist/components/icon/icons/AccountsFilledIcon.d.ts +0 -3
  14. package/dist/components/icon/icons/AccountsIcon.d.ts +0 -3
  15. package/dist/components/icon/icons/ArrowLeftIcon.d.ts +0 -3
  16. package/dist/components/icon/icons/AttentionFilledIcon.d.ts +0 -3
  17. package/dist/components/icon/icons/CalendarIcon.d.ts +0 -3
  18. package/dist/components/icon/icons/CheckmarkFilledIcon.d.ts +0 -3
  19. package/dist/components/icon/icons/ChevronDownIcon.d.ts +0 -3
  20. package/dist/components/icon/icons/ChevronLeftIcon.d.ts +0 -3
  21. package/dist/components/icon/icons/ChevronRightIcon.d.ts +0 -3
  22. package/dist/components/icon/icons/CloseIcon.d.ts +0 -3
  23. package/dist/components/icon/icons/EditIcon.d.ts +0 -3
  24. package/dist/components/icon/icons/FilterIcon.d.ts +0 -3
  25. package/dist/components/icon/icons/HeartIcon.d.ts +0 -3
  26. package/dist/components/tokenprovider/Constants.d.ts +0 -9
  27. package/dist/components/tokenprovider/Hooks.d.ts +0 -1
  28. package/dist/components/tokenprovider/TokenProvider.d.ts +0 -11
  29. package/dist/components/tokenprovider/index.d.ts +0 -3
package/dist/themes/Augmentations.d.ts CHANGED
@@ -1,19 +1,10 @@
1
1
  import { CSSProperties } from 'react';
2
2
  declare module '@mui/material/styles' {
3
- type Border = {
4
- light: string;
5
- lighter: string;
6
- main: string;
7
- dark: string;
8
- darker: string;
9
- };
10
3
  interface TypeBackground {
11
4
  highlight?: string;
12
5
  highlightPrimary?: string;
13
6
  }
14
7
  interface PaletteColor {
15
- lighter?: string;
16
- darker?: string;
17
8
  50?: string;
18
9
  100?: string;
19
10
  200?: string;
@@ -26,8 +17,6 @@ declare module '@mui/material/styles' {
26
17
  900?: string;
27
18
  }
28
19
  interface SimplePaletteColorOptions {
29
- lighter?: string;
30
- darker?: string;
31
20
  50?: string;
32
21
  100?: string;
33
22
  200?: string;
@@ -40,30 +29,10 @@ declare module '@mui/material/styles' {
40
29
  900?: string;
41
30
  }
42
31
  interface TypographyVariantsOptions {
43
- Body?: CSSProperties;
44
- Button?: CSSProperties;
45
- H1?: CSSProperties;
46
- H2?: CSSProperties;
47
- H3?: CSSProperties;
48
- Paragraph?: CSSProperties;
49
- ParagraphSmall?: CSSProperties;
50
- Small?: CSSProperties;
51
- Tiny?: CSSProperties;
52
32
  tiny?: CSSProperties;
53
- XSmall?: CSSProperties;
54
33
  }
55
34
  interface TypographyVariants {
56
- Body: CSSProperties;
57
- Button: CSSProperties;
58
- H1: CSSProperties;
59
- H2: CSSProperties;
60
- H3: CSSProperties;
61
- Paragraph: CSSProperties;
62
- ParagraphSmall: CSSProperties;
63
- Small: CSSProperties;
64
- Tiny: CSSProperties;
65
35
  tiny?: CSSProperties;
66
- XSmall: CSSProperties;
67
36
  }
68
37
  interface TypeCategory {
69
38
  autoTransport?: string;
@@ -107,14 +76,12 @@ declare module '@mui/material/styles' {
107
76
  chartMono6?: string;
108
77
  }
109
78
  interface Palette {
110
- border: Border;
111
79
  categories: TypeCategory;
112
80
  chart: TypeChart;
113
81
  chartMono: TypeChartMono;
114
82
  neutral: PaletteColor;
115
83
  }
116
84
  interface PaletteOptions {
117
- border: Partial<Border>;
118
85
  categories: Partial<TypeCategory>;
119
86
  chart: Partial<TypeChart>;
120
87
  chartMono: Partial<TypeChartMono>;
@@ -123,17 +90,7 @@ declare module '@mui/material/styles' {
123
90
  }
124
91
  declare module '@mui/material/Typography' {
125
92
  interface TypographyPropsVariantOverrides {
126
- Body: true;
127
- Button: true;
128
- H1: true;
129
- H2: true;
130
- H3: true;
131
- Paragraph: true;
132
- ParagraphSmall: true;
133
- Small: true;
134
- Tiny: true;
135
93
  tiny: true;
136
- XSmall: true;
137
94
  }
138
95
  }
139
96
  declare module '@mui/material/Button' {
package/dist/themes/Palette.d.ts CHANGED
@@ -2,23 +2,14 @@ import { PaletteMode } from '@mui/material';
2
2
  import { ClientCustomizations } from '../types/ClientCustomizations';
3
3
  export declare const getPalette: (mode: PaletteMode, paletteCustomizations?: ClientCustomizations["paletteOptions"]) => {
4
4
  mode: PaletteMode;
5
- border: {
6
- lighter: string;
7
- light: string;
8
- main: string;
9
- dark: string;
10
- darker: string;
11
- };
12
5
  common: {
13
6
  white: string;
14
7
  black: string;
15
8
  };
16
9
  primary: {
17
- lighter: string;
18
10
  light: string;
19
11
  main: string;
20
12
  dark: string;
21
- darker: string;
22
13
  50: string;
23
14
  100: string;
24
15
  200: string;
@@ -31,11 +22,9 @@ export declare const getPalette: (mode: PaletteMode, paletteCustomizations?: Cli
31
22
  900: string;
32
23
  };
33
24
  secondary: {
34
- lighter: string;
35
25
  light: string;
36
26
  main: string;
37
27
  dark: string;
38
- darker: string;
39
28
  50: string;
40
29
  100: string;
41
30
  200: string;
@@ -48,11 +37,9 @@ export declare const getPalette: (mode: PaletteMode, paletteCustomizations?: Cli
48
37
  900: string;
49
38
  };
50
39
  neutral: {
51
- lighter: string;
52
40
  light: string;
53
41
  main: string;
54
42
  dark: string;
55
- darker: string;
56
43
  contrastText: string;
57
44
  50: string;
58
45
  100: string;
@@ -71,11 +58,9 @@ export declare const getPalette: (mode: PaletteMode, paletteCustomizations?: Cli
71
58
  disabled: string;
72
59
  };
73
60
  error: {
74
- lighter: string;
75
61
  light: string;
76
62
  main: string;
77
63
  dark: string;
78
- darker: string;
79
64
  50: string;
80
65
  100: string;
81
66
  200: string;
@@ -88,11 +73,9 @@ export declare const getPalette: (mode: PaletteMode, paletteCustomizations?: Cli
88
73
  900: string;
89
74
  };
90
75
  warning: {
91
- lighter: string;
92
76
  light: string;
93
77
  main: string;
94
78
  dark: string;
95
- darker: string;
96
79
  50: string;
97
80
  100: string;
98
81
  200: string;
@@ -105,11 +88,9 @@ export declare const getPalette: (mode: PaletteMode, paletteCustomizations?: Cli
105
88
  900: string;
106
89
  };
107
90
  info: {
108
- lighter: string;
109
91
  light: string;
110
92
  main: string;
111
93
  dark: string;
112
- darker: string;
113
94
  50: string;
114
95
  100: string;
115
96
  200: string;
@@ -122,11 +103,9 @@ export declare const getPalette: (mode: PaletteMode, paletteCustomizations?: Cli
122
103
  900: string;
123
104
  };
124
105
  success: {
125
- lighter: string;
126
106
  light: string;
127
107
  main: string;
128
108
  dark: string;
129
- darker: string;
130
109
  50: string;
131
110
  100: string;
132
111
  200: string;
package/dist/themes/Typography.d.ts CHANGED
@@ -1,36 +1,60 @@
1
- import { TypographyOptions } from '@mui/material/styles/createTypography';
1
+ export type TypographyOptions = {
2
+ fontFamily?: string;
3
+ };
2
4
  export declare const INTER = "Inter, Helvetica, Arial, sans-serif";
3
5
  export declare const getTypography: (typographyOptions?: TypographyOptions) => {
4
- Body: import('react').CSSProperties;
5
- Button: import('react').CSSProperties;
6
- H1: import('react').CSSProperties;
7
- H2: import('react').CSSProperties;
8
- H3: import('react').CSSProperties;
9
- Paragraph: import('react').CSSProperties;
10
- ParagraphSmall: import('react').CSSProperties;
11
- Small: import('react').CSSProperties;
12
- Tiny: import('react').CSSProperties;
13
- tiny: import('react').CSSProperties;
14
- XSmall: import('react').CSSProperties;
15
- button: import('@mui/material/styles/createTypography').TypographyStyleOptions;
16
- caption: import('@mui/material/styles/createTypography').TypographyStyleOptions;
17
- h1: import('@mui/material/styles/createTypography').TypographyStyleOptions;
18
- h2: import('@mui/material/styles/createTypography').TypographyStyleOptions;
19
- h3: import('@mui/material/styles/createTypography').TypographyStyleOptions;
20
- h4?: import('@mui/material/styles/createTypography').TypographyStyleOptions | undefined;
21
- h5?: import('@mui/material/styles/createTypography').TypographyStyleOptions | undefined;
22
- h6?: import('@mui/material/styles/createTypography').TypographyStyleOptions | undefined;
23
- overline?: import('@mui/material/styles/createTypography').TypographyStyleOptions | undefined;
24
- body2: import('@mui/material/styles/createTypography').TypographyStyleOptions;
25
- body1: import('@mui/material/styles/createTypography').TypographyStyleOptions;
26
- subtitle1: import('@mui/material/styles/createTypography').TypographyStyleOptions;
27
- subtitle2: import('@mui/material/styles/createTypography').TypographyStyleOptions;
28
- allVariants?: React.CSSProperties;
29
6
  fontFamily: string;
30
7
  fontSize: number;
31
- fontWeightLight?: React.CSSProperties["fontWeight"];
32
- fontWeightRegular?: React.CSSProperties["fontWeight"];
33
- fontWeightMedium?: React.CSSProperties["fontWeight"];
34
- fontWeightBold?: React.CSSProperties["fontWeight"];
35
- htmlFontSize?: number | undefined;
8
+ body1: {
9
+ fontFamily: string;
10
+ fontSize: number;
11
+ lineHeight: string;
12
+ };
13
+ body2: {
14
+ fontFamily: string;
15
+ fontSize: number;
16
+ lineHeight: string;
17
+ };
18
+ button: {
19
+ fontFamily: string;
20
+ fontSize: number;
21
+ };
22
+ caption: {
23
+ fontFamily: string;
24
+ fontSize: number;
25
+ lineHeight: string;
26
+ };
27
+ h1: {
28
+ fontFamily: string;
29
+ fontWeight: number;
30
+ fontSize: number;
31
+ lineHeight: string;
32
+ };
33
+ h2: {
34
+ fontFamily: string;
35
+ fontWeight: number;
36
+ fontSize: number;
37
+ lineHeight: string;
38
+ };
39
+ h3: {
40
+ fontFamily: string;
41
+ fontWeight: number;
42
+ fontSize: number;
43
+ lineHeight: string;
44
+ };
45
+ subtitle1: {
46
+ fontFamily: string;
47
+ fontSize: number;
48
+ lineHeight: string;
49
+ };
50
+ subtitle2: {
51
+ fontFamily: string;
52
+ fontSize: number;
53
+ lineHeight: string;
54
+ };
55
+ tiny: {
56
+ fontFamily: string;
57
+ fontSize: number;
58
+ lineHeight: string;
59
+ };
36
60
  };
package/package.json CHANGED
@@ -1,9 +1,10 @@
1
1
  {
2
2
  "name": "@mxenabled/mxui",
3
- "version": "1.6.0-alpha.5",
3
+ "version": "2.0.0",
4
4
  "description": "Package containing MX theme and common controls for MUI",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",
7
+ "type": "module",
7
8
  "author": "MX",
8
9
  "license": "MIT",
9
10
  "publishConfig": {
@@ -20,72 +21,65 @@
20
21
  },
21
22
  "dependencies": {
22
23
  "@emotion/react": "^11.14.0",
23
- "@emotion/styled": "^11.14.0",
24
- "@mui/material": "^5.16.14",
25
- "@mui/system": "^5.16.14",
26
- "@mui/x-data-grid-pro": "^7.27.3",
27
- "@mui/x-date-pickers": "^7.27.3",
28
- "@mui/x-date-pickers-pro": "^7.27.3",
29
- "@mui/x-license-pro": "^6.10.2",
30
- "@mxenabled/design-tokens": "^1.0.3",
31
- "@mxenabled/mx-icons": "^1.5.1",
24
+ "@emotion/styled": "^11.14.1",
25
+ "@mui/material": "^7.3.4",
26
+ "@mui/system": "^7.3.3",
27
+ "@mui/x-data-grid-pro": "^8.14.0",
28
+ "@mui/x-date-pickers": "^8.14.0",
29
+ "@mui/x-date-pickers-pro": "^8.14.0",
30
+ "@mui/x-license": "^8.14.0",
31
+ "@mxenabled/mx-icons": "^2.1.0",
32
32
  "date-fns": "^4.1.0",
33
- "react": "^18.3.1",
34
- "react-dom": "^18.3.1"
33
+ "react": "^19.2.0",
34
+ "react-dom": "^19.2.0"
35
35
  },
36
36
  "devDependencies": {
37
- "@babel/core": "^7.24.7",
38
- "@babel/eslint-parser": "^7.24.7",
39
- "@eslint/compat": "^1.1.0",
40
- "@eslint/eslintrc": "^3.1.0",
41
- "@eslint/js": "^9.6.0",
42
- "@storybook/addon-a11y": "^8.6.3",
43
- "@storybook/addon-essentials": "^8.6.3",
44
- "@storybook/addon-interactions": "^8.6.3",
45
- "@storybook/addon-links": "^8.6.3",
46
- "@storybook/addon-mdx-gfm": "^8.6.3",
47
- "@storybook/blocks": "^8.6.3",
48
- "@storybook/react": "^8.6.3",
49
- "@storybook/react-vite": "^8.6.3",
50
- "@storybook/test": "^8.6.3",
51
- "@types/react": "^18.3.18",
52
- "@types/react-dom": "^18.3.5",
37
+ "@babel/core": "^7.26.10",
38
+ "@babel/eslint-parser": "^7.27.0",
39
+ "@eslint/compat": "^1.2.8",
40
+ "@eslint/eslintrc": "^3.3.1",
41
+ "@eslint/js": "^9.25.1",
42
+ "@storybook/addon-a11y": "^9.1.10",
43
+ "@storybook/addon-docs": "^9.1.10",
44
+ "@storybook/addon-links": "^9.1.10",
45
+ "@storybook/react-vite": "^9.1.10",
46
+ "@types/react": "^19.2.2",
47
+ "@types/react-dom": "^19.2.2",
53
48
  "@typescript-eslint/eslint-plugin": "^7.18.0",
54
49
  "@typescript-eslint/parser": "^7.18.0",
55
- "@vitejs/plugin-react": "^4.3.4",
56
- "@yarnpkg/sdks": "^3.2.1",
50
+ "@vitejs/plugin-react": "^5.0.4",
51
+ "@vueless/storybook-dark-mode": "^9.0.9",
52
+ "@yarnpkg/sdks": "^3.2.3",
57
53
  "eslint": "^8.57.1",
58
54
  "eslint-config-mx": "^4.0.0",
59
55
  "eslint-config-prettier": "^9.1.0",
60
- "eslint-plugin-jsx-a11y": "^6.9.0",
61
- "eslint-plugin-react": "^7.34.3",
56
+ "eslint-plugin-jsx-a11y": "^6.10.2",
57
+ "eslint-plugin-react": "^7.37.5",
62
58
  "eslint-plugin-react-hooks": "^4.6.2",
63
- "eslint-plugin-react-refresh": "^0.4.7",
64
- "eslint-plugin-storybook": "^0.8.0",
65
- "globals": "^15.8.0",
59
+ "eslint-plugin-react-refresh": "^0.4.20",
60
+ "eslint-plugin-storybook": "^9.1.4",
66
61
  "husky": "^9.1.7",
67
- "lint-staged": "^15.4.3",
62
+ "lint-staged": "^16.2.4",
68
63
  "path": "^0.12.7",
69
- "prettier": "^3.5.3",
70
- "rollup-plugin-visualizer": "^5.14.0",
71
- "storybook": "^8.6.3",
72
- "storybook-dark-mode": "4.0.1",
73
- "typescript": "^5.6.2",
74
- "vite": "^5.4.14",
75
- "vite-plugin-dts": "^4.5.3"
64
+ "prettier": "^3.6.2",
65
+ "rollup-plugin-visualizer": "^6.0.4",
66
+ "storybook": "^9.1.10",
67
+ "typescript": "^5.9.3",
68
+ "vite": "^7.1.9",
69
+ "vite-plugin-dts": "^4.5.4"
76
70
  },
77
71
  "peerDependencies": {
78
- "@mui/material": "^5",
72
+ "@mui/material": "^7",
79
73
  "@mui/x-data-grid-pro": "^7",
80
74
  "@mui/x-date-pickers": "^7",
81
75
  "@mui/x-date-pickers-pro": "^7",
82
- "@mxenabled/mxui": "^1",
76
+ "@mxenabled/mx-icons": "^2",
83
77
  "date-fns": "^4",
84
- "react": "^18",
85
- "react-dom": "^18"
78
+ "react": "^19",
79
+ "react-dom": "^19"
86
80
  },
87
81
  "files": [
88
82
  "dist"
89
83
  ],
90
- "packageManager": "yarn@4.9.2"
84
+ "packageManager": "yarn@4.10.3"
91
85
  }
package/dist/components/icon/icons/AccountsFilledIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const AccountsFilledIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/AccountsIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const AccountsIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/ArrowLeftIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const ArrowLeftIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/AttentionFilledIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const AttentionFilledIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/CalendarIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const CalendarIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/CheckmarkFilledIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const CheckmarkFilledIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/ChevronDownIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const ChevronDownIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/ChevronLeftIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const ChevronLeftIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/ChevronRightIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const ChevronRightIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/CloseIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const CloseIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/EditIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const EditIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/FilterIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const FilterIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/icon/icons/HeartIcon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { default as React } from 'react';
2
- import { IconProps } from '../BaseIcon';
3
- export declare const HeartIcon: React.FC<React.PropsWithChildren<IconProps>>;
package/dist/components/tokenprovider/Constants.d.ts DELETED
@@ -1,9 +0,0 @@
1
- export declare const TARGETS: {
2
- REACT: string;
3
- REACT_NATIVE: string;
4
- NATIVE: string;
5
- };
6
- export declare const THEMES: {
7
- LIGHT: string;
8
- DARK: string;
9
- };
package/dist/components/tokenprovider/Hooks.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const useTokens: (target?: string, tokenOverrides?: {}) => import('@mxenabled/design-tokens').TokenTypes;
package/dist/components/tokenprovider/TokenProvider.d.ts DELETED
@@ -1,11 +0,0 @@
1
- import { default as React } from 'react';
2
- export declare const TokenContext: React.Context<import('@mxenabled/design-tokens').TokenTypes>;
3
- export declare const ReactNativeTokenContext: React.Context<import('@mxenabled/design-tokens').TokenTypes>;
4
- interface TokenProviderProps {
5
- children: React.ReactNode;
6
- target?: string;
7
- theme?: string;
8
- tokenOverrides?: any;
9
- }
10
- export declare const TokenProvider: React.FC<TokenProviderProps>;
11
- export {};
package/dist/components/tokenprovider/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export { TokenProvider } from './TokenProvider';
2
- export { useTokens } from './Hooks';
3
- export { TARGETS, THEMES } from './Constants';