@zimyo/ui 1.1.7 → 1.1.9

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 (10) hide show
  1. package/dist/Button/index.esm.js +2 -12
  2. package/dist/Button/index.js +1 -11
  3. package/dist/Modal/index.d.ts +17 -0
  4. package/dist/Modal/index.esm.js +144 -0
  5. package/dist/Modal/index.js +149 -0
  6. package/dist/index.esm.js +58 -71
  7. package/dist/index.js +57 -70
  8. package/dist/theme/index.esm.js +56 -59
  9. package/dist/theme/index.js +56 -59
  10. package/package.json +6 -1
package/dist/Button/index.esm.js CHANGED
@@ -1,22 +1,12 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { useTheme, Button as Button$1, CircularProgress } from '@mui/material';
3
+ import { Button as Button$1, CircularProgress } from '@mui/material';
4
4
 
5
5
  const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
6
- useTheme();
7
6
  const showStartSpinner = loading && loaderPosition === 'start';
8
7
  const showEndSpinner = loading && loaderPosition === 'end';
9
8
  const showCenterSpinner = loading && loaderPosition === 'center';
10
- return (jsx(Button$1, { ref: ref, variant: variant, color: color, size: size, disabled: disabled || loading, startIcon: showStartSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: {
11
- // borderRadius: theme.radius.sm,
12
- fontWeight: 500,
13
- textTransform: 'none',
14
- letterSpacing: '0.5px',
15
- px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
16
- py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
17
- position: 'relative',
18
- ...sx,
19
- }, ...props, children: showCenterSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
9
+ return (jsx(Button$1, { ref: ref, variant: variant, color: color, disabled: disabled || loading, size: size, startIcon: showStartSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: { position: 'relative', ...sx }, ...props, children: showCenterSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
20
10
  });
21
11
  Button.displayName = 'Button';
22
12
 
package/dist/Button/index.js CHANGED
@@ -7,20 +7,10 @@ var React = require('react');
7
7
  var material = require('@mui/material');
8
8
 
9
9
  const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
10
- material.useTheme();
11
10
  const showStartSpinner = loading && loaderPosition === 'start';
12
11
  const showEndSpinner = loading && loaderPosition === 'end';
13
12
  const showCenterSpinner = loading && loaderPosition === 'center';
14
- return (jsxRuntime.jsx(material.Button, { ref: ref, variant: variant, color: color, size: size, disabled: disabled || loading, startIcon: showStartSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: {
15
- // borderRadius: theme.radius.sm,
16
- fontWeight: 500,
17
- textTransform: 'none',
18
- letterSpacing: '0.5px',
19
- px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
20
- py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
21
- position: 'relative',
22
- ...sx,
23
- }, ...props, children: showCenterSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
13
+ return (jsxRuntime.jsx(material.Button, { ref: ref, variant: variant, color: color, disabled: disabled || loading, size: size, startIcon: showStartSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: { position: 'relative', ...sx }, ...props, children: showCenterSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
24
14
  });
25
15
  Button.displayName = 'Button';
26
16
 
package/dist/Modal/index.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { DialogProps } from '@mui/material';
3
+ import { ReactNode } from 'react';
4
+
5
+ interface ModalProps extends Omit<DialogProps, 'title'> {
6
+ open: boolean;
7
+ onClose: () => void;
8
+ title?: ReactNode;
9
+ content?: ReactNode;
10
+ actions?: ReactNode;
11
+ maxWidth?: DialogProps['maxWidth'];
12
+ fullWidth?: boolean;
13
+ }
14
+ declare const Modal: ({ open, onClose, title, content, actions, fullWidth, maxWidth, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
15
+
16
+ export { Modal, Modal as default };
17
+ export type { ModalProps };
package/dist/Modal/index.esm.js ADDED
@@ -0,0 +1,144 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { Typography, useTheme, Dialog, DialogTitle, IconButton, DialogContent, DialogActions } from '@mui/material';
3
+ import { forwardRef, createElement } from 'react';
4
+
5
+ /**
6
+ * @license lucide-react v0.525.0 - ISC
7
+ *
8
+ * This source code is licensed under the ISC license.
9
+ * See the LICENSE file in the root directory of this source tree.
10
+ */
11
+
12
+ const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
13
+ const toCamelCase = (string) => string.replace(
14
+ /^([A-Z])|[\s-_]+(\w)/g,
15
+ (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
16
+ );
17
+ const toPascalCase = (string) => {
18
+ const camelCase = toCamelCase(string);
19
+ return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
20
+ };
21
+ const mergeClasses = (...classes) => classes.filter((className, index, array) => {
22
+ return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
23
+ }).join(" ").trim();
24
+ const hasA11yProp = (props) => {
25
+ for (const prop in props) {
26
+ if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
27
+ return true;
28
+ }
29
+ }
30
+ };
31
+
32
+ /**
33
+ * @license lucide-react v0.525.0 - ISC
34
+ *
35
+ * This source code is licensed under the ISC license.
36
+ * See the LICENSE file in the root directory of this source tree.
37
+ */
38
+
39
+ var defaultAttributes = {
40
+ xmlns: "http://www.w3.org/2000/svg",
41
+ width: 24,
42
+ height: 24,
43
+ viewBox: "0 0 24 24",
44
+ fill: "none",
45
+ stroke: "currentColor",
46
+ strokeWidth: 2,
47
+ strokeLinecap: "round",
48
+ strokeLinejoin: "round"
49
+ };
50
+
51
+ /**
52
+ * @license lucide-react v0.525.0 - ISC
53
+ *
54
+ * This source code is licensed under the ISC license.
55
+ * See the LICENSE file in the root directory of this source tree.
56
+ */
57
+
58
+
59
+ const Icon = forwardRef(
60
+ ({
61
+ color = "currentColor",
62
+ size = 24,
63
+ strokeWidth = 2,
64
+ absoluteStrokeWidth,
65
+ className = "",
66
+ children,
67
+ iconNode,
68
+ ...rest
69
+ }, ref) => createElement(
70
+ "svg",
71
+ {
72
+ ref,
73
+ ...defaultAttributes,
74
+ width: size,
75
+ height: size,
76
+ stroke: color,
77
+ strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
78
+ className: mergeClasses("lucide", className),
79
+ ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
80
+ ...rest
81
+ },
82
+ [
83
+ ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
84
+ ...Array.isArray(children) ? children : [children]
85
+ ]
86
+ )
87
+ );
88
+
89
+ /**
90
+ * @license lucide-react v0.525.0 - ISC
91
+ *
92
+ * This source code is licensed under the ISC license.
93
+ * See the LICENSE file in the root directory of this source tree.
94
+ */
95
+
96
+
97
+ const createLucideIcon = (iconName, iconNode) => {
98
+ const Component = forwardRef(
99
+ ({ className, ...props }, ref) => createElement(Icon, {
100
+ ref,
101
+ iconNode,
102
+ className: mergeClasses(
103
+ `lucide-${toKebabCase(toPascalCase(iconName))}`,
104
+ `lucide-${iconName}`,
105
+ className
106
+ ),
107
+ ...props
108
+ })
109
+ );
110
+ Component.displayName = toPascalCase(iconName);
111
+ return Component;
112
+ };
113
+
114
+ /**
115
+ * @license lucide-react v0.525.0 - ISC
116
+ *
117
+ * This source code is licensed under the ISC license.
118
+ * See the LICENSE file in the root directory of this source tree.
119
+ */
120
+
121
+
122
+ const __iconNode = [
123
+ ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
124
+ ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
125
+ ];
126
+ const X = createLucideIcon("x", __iconNode);
127
+
128
+ const Heading = ({ level = 1, ...props }) => {
129
+ const variant = `h${level}`;
130
+ return (jsx(Typography, { variant: variant, component: props.component || `h${level}`, fontWeight: 600, gutterBottom: true, ...props }));
131
+ };
132
+
133
+ const Modal = ({ open, onClose, title, content, actions, fullWidth = true, maxWidth = 'sm', ...rest }) => {
134
+ const theme = useTheme();
135
+ return (jsxs(Dialog, { open: open, onClose: onClose, fullWidth: fullWidth, maxWidth: maxWidth, scroll: "body", PaperProps: {
136
+ sx: {
137
+ borderRadius: 1.5,
138
+ p: 1,
139
+ backgroundColor: theme.palette.background.paper,
140
+ },
141
+ }, ...rest, children: [!!title && (jsxs(DialogTitle, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsx(Heading, { level: 6, children: title }), jsx(IconButton, { edge: "end", onClick: onClose, children: jsx(X, { size: 18, strokeWidth: 2 }) })] })), !!content && jsx(DialogContent, { dividers: true, children: content }), !!actions && jsx(DialogActions, { children: actions })] }));
142
+ };
143
+
144
+ export { Modal, Modal as default };
package/dist/Modal/index.js ADDED
@@ -0,0 +1,149 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var material = require('@mui/material');
7
+ var react = require('react');
8
+
9
+ /**
10
+ * @license lucide-react v0.525.0 - ISC
11
+ *
12
+ * This source code is licensed under the ISC license.
13
+ * See the LICENSE file in the root directory of this source tree.
14
+ */
15
+
16
+ const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
17
+ const toCamelCase = (string) => string.replace(
18
+ /^([A-Z])|[\s-_]+(\w)/g,
19
+ (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
20
+ );
21
+ const toPascalCase = (string) => {
22
+ const camelCase = toCamelCase(string);
23
+ return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
24
+ };
25
+ const mergeClasses = (...classes) => classes.filter((className, index, array) => {
26
+ return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
27
+ }).join(" ").trim();
28
+ const hasA11yProp = (props) => {
29
+ for (const prop in props) {
30
+ if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
31
+ return true;
32
+ }
33
+ }
34
+ };
35
+
36
+ /**
37
+ * @license lucide-react v0.525.0 - ISC
38
+ *
39
+ * This source code is licensed under the ISC license.
40
+ * See the LICENSE file in the root directory of this source tree.
41
+ */
42
+
43
+ var defaultAttributes = {
44
+ xmlns: "http://www.w3.org/2000/svg",
45
+ width: 24,
46
+ height: 24,
47
+ viewBox: "0 0 24 24",
48
+ fill: "none",
49
+ stroke: "currentColor",
50
+ strokeWidth: 2,
51
+ strokeLinecap: "round",
52
+ strokeLinejoin: "round"
53
+ };
54
+
55
+ /**
56
+ * @license lucide-react v0.525.0 - ISC
57
+ *
58
+ * This source code is licensed under the ISC license.
59
+ * See the LICENSE file in the root directory of this source tree.
60
+ */
61
+
62
+
63
+ const Icon = react.forwardRef(
64
+ ({
65
+ color = "currentColor",
66
+ size = 24,
67
+ strokeWidth = 2,
68
+ absoluteStrokeWidth,
69
+ className = "",
70
+ children,
71
+ iconNode,
72
+ ...rest
73
+ }, ref) => react.createElement(
74
+ "svg",
75
+ {
76
+ ref,
77
+ ...defaultAttributes,
78
+ width: size,
79
+ height: size,
80
+ stroke: color,
81
+ strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
82
+ className: mergeClasses("lucide", className),
83
+ ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
84
+ ...rest
85
+ },
86
+ [
87
+ ...iconNode.map(([tag, attrs]) => react.createElement(tag, attrs)),
88
+ ...Array.isArray(children) ? children : [children]
89
+ ]
90
+ )
91
+ );
92
+
93
+ /**
94
+ * @license lucide-react v0.525.0 - ISC
95
+ *
96
+ * This source code is licensed under the ISC license.
97
+ * See the LICENSE file in the root directory of this source tree.
98
+ */
99
+
100
+
101
+ const createLucideIcon = (iconName, iconNode) => {
102
+ const Component = react.forwardRef(
103
+ ({ className, ...props }, ref) => react.createElement(Icon, {
104
+ ref,
105
+ iconNode,
106
+ className: mergeClasses(
107
+ `lucide-${toKebabCase(toPascalCase(iconName))}`,
108
+ `lucide-${iconName}`,
109
+ className
110
+ ),
111
+ ...props
112
+ })
113
+ );
114
+ Component.displayName = toPascalCase(iconName);
115
+ return Component;
116
+ };
117
+
118
+ /**
119
+ * @license lucide-react v0.525.0 - ISC
120
+ *
121
+ * This source code is licensed under the ISC license.
122
+ * See the LICENSE file in the root directory of this source tree.
123
+ */
124
+
125
+
126
+ const __iconNode = [
127
+ ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
128
+ ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
129
+ ];
130
+ const X = createLucideIcon("x", __iconNode);
131
+
132
+ const Heading = ({ level = 1, ...props }) => {
133
+ const variant = `h${level}`;
134
+ return (jsxRuntime.jsx(material.Typography, { variant: variant, component: props.component || `h${level}`, fontWeight: 600, gutterBottom: true, ...props }));
135
+ };
136
+
137
+ const Modal = ({ open, onClose, title, content, actions, fullWidth = true, maxWidth = 'sm', ...rest }) => {
138
+ const theme = material.useTheme();
139
+ return (jsxRuntime.jsxs(material.Dialog, { open: open, onClose: onClose, fullWidth: fullWidth, maxWidth: maxWidth, scroll: "body", PaperProps: {
140
+ sx: {
141
+ borderRadius: 1.5,
142
+ p: 1,
143
+ backgroundColor: theme.palette.background.paper,
144
+ },
145
+ }, ...rest, children: [!!title && (jsxRuntime.jsxs(material.DialogTitle, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxRuntime.jsx(Heading, { level: 6, children: title }), jsxRuntime.jsx(material.IconButton, { edge: "end", onClick: onClose, children: jsxRuntime.jsx(X, { size: 18, strokeWidth: 2 }) })] })), !!content && jsxRuntime.jsx(material.DialogContent, { dividers: true, children: content }), !!actions && jsxRuntime.jsx(material.DialogActions, { children: actions })] }));
146
+ };
147
+
148
+ exports.Modal = Modal;
149
+ exports.default = Modal;
package/dist/index.esm.js CHANGED
@@ -1,25 +1,15 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import React, { forwardRef, createElement } from 'react';
3
- import { useTheme, Button as Button$1, CircularProgress, Card, CardHeader as CardHeader$1, Typography, CardActions as CardActions$1, Box, Skeleton, FormControl, Select as Select$1, OutlinedInput, IconButton, MenuItem, ListItemText, FormHelperText, Chip, Accordion as Accordion$1, AccordionSummary, AccordionDetails, FormControlLabel, Switch as Switch$1, TextField, InputAdornment, FormLabel, RadioGroup as RadioGroup$1, Radio, GlobalStyles, CssBaseline } from '@mui/material';
3
+ import { Button as Button$1, CircularProgress, useTheme, Card, CardHeader as CardHeader$1, Typography, CardActions as CardActions$1, Box, Skeleton, FormControl, Select as Select$1, OutlinedInput, IconButton, MenuItem, ListItemText, FormHelperText, Chip, Accordion as Accordion$1, AccordionSummary, AccordionDetails, FormControlLabel, Switch as Switch$1, TextField, InputAdornment, FormLabel, RadioGroup as RadioGroup$1, Radio, GlobalStyles, CssBaseline } from '@mui/material';
4
4
  import MuiCardContent from '@mui/material/CardContent';
5
5
  import CardMedia from '@mui/material/CardMedia';
6
6
  import { createTheme, ThemeProvider } from '@mui/material/styles';
7
7
 
8
8
  const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
9
- useTheme();
10
9
  const showStartSpinner = loading && loaderPosition === 'start';
11
10
  const showEndSpinner = loading && loaderPosition === 'end';
12
11
  const showCenterSpinner = loading && loaderPosition === 'center';
13
- return (jsx(Button$1, { ref: ref, variant: variant, color: color, size: size, disabled: disabled || loading, startIcon: showStartSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: {
14
- // borderRadius: theme.radius.sm,
15
- fontWeight: 500,
16
- textTransform: 'none',
17
- letterSpacing: '0.5px',
18
- px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
19
- py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
20
- position: 'relative',
21
- ...sx,
22
- }, ...props, children: showCenterSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
12
+ return (jsx(Button$1, { ref: ref, variant: variant, color: color, disabled: disabled || loading, size: size, startIcon: showStartSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: { position: 'relative', ...sx }, ...props, children: showCenterSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
23
13
  });
24
14
  Button.displayName = 'Button';
25
15
 
@@ -592,62 +582,62 @@ const createCustomTheme = (config = {}) => {
592
582
  typography: {
593
583
  fontFamily: designTokens.typography.fontFamily,
594
584
  fontSize: 14,
595
- h1: {
596
- fontSize: '3rem', // 48px
597
- fontWeight: 700,
598
- lineHeight: 1.2,
599
- },
600
- h2: {
601
- fontSize: '2.25rem', // 36px
602
- fontWeight: 600,
603
- lineHeight: 1.25,
604
- },
605
- h3: {
606
- fontSize: '1.875rem', // 30px
607
- fontWeight: 600,
608
- lineHeight: 1.3,
609
- },
610
- h4: {
611
- fontSize: '1.5rem', // 24px
612
- fontWeight: 500,
613
- lineHeight: 1.35,
614
- },
615
- h5: {
616
- fontSize: '1.25rem', // 20px
617
- fontWeight: 500,
618
- lineHeight: 1.4,
619
- },
620
- h6: {
621
- fontSize: '1rem', // 16px
622
- fontWeight: 500,
623
- lineHeight: 1.5,
624
- },
625
- body1: {
626
- fontSize: '1rem', // 16px
627
- lineHeight: '1.625rem', // 26px
628
- },
629
- body2: {
630
- fontSize: '0.875rem', // 14px
631
- lineHeight: '1.5rem', // 24px
632
- },
633
- caption: {
634
- fontSize: '0.875rem',
635
- lineHeight: '1.25rem', // 20px
636
- },
637
- button: {
638
- fontSize: '0.875rem',
639
- lineHeight: '1.5rem',
640
- textTransform: 'none',
641
- },
642
- subtitle1: {
643
- fontSize: '1rem', // 16px
644
- lineHeight: '1.5rem', // 24px
645
- // fontWeight: 500
646
- },
585
+ // h1: {
586
+ // fontSize: '3rem', // 48px
587
+ // fontWeight: 700,
588
+ // lineHeight: 1.2,
589
+ // },
590
+ // h2: {
591
+ // fontSize: '2.25rem', // 36px
592
+ // fontWeight: 600,
593
+ // lineHeight: 1.25,
594
+ // },
595
+ // h3: {
596
+ // fontSize: '1.875rem', // 30px
597
+ // fontWeight: 600,
598
+ // lineHeight: 1.3,
599
+ // },
600
+ // h4: {
601
+ // fontSize: '1.5rem', // 24px
602
+ // fontWeight: 500,
603
+ // lineHeight: 1.35,
604
+ // },
605
+ // h5: {
606
+ // fontSize: '1.25rem', // 20px
607
+ // fontWeight: 500,
608
+ // lineHeight: 1.4,
609
+ // },
610
+ // h6: {
611
+ // fontSize: '1rem', // 16px
612
+ // fontWeight: 500,
613
+ // lineHeight: 1.5,
614
+ // },
615
+ // body1: {
616
+ // fontSize: '1rem', // 16px
617
+ // lineHeight: '1.625rem',// 26px
618
+ // },
619
+ // body2: {
620
+ // fontSize: '0.875rem', // 14px
621
+ // lineHeight: '1.5rem', // 24px
622
+ // },
623
+ // caption: {
624
+ // fontSize: '0.875rem',
625
+ // lineHeight: '1.25rem', // 20px
626
+ // },
627
+ // button: {
628
+ // fontSize: '0.875rem',
629
+ // lineHeight: '1.5rem',
630
+ // textTransform: 'none',
631
+ // },
632
+ // subtitle1: {
633
+ // fontSize: '1rem', // 16px
634
+ // lineHeight: '1.5rem', // 24px
635
+ // // fontWeight: 500
636
+ // },
647
637
  },
648
638
  spacing: 8,
649
639
  shape: {
650
- borderRadius: 8,
640
+ borderRadius: 5,
651
641
  },
652
642
  radius: designTokens.radius,
653
643
  components: {
@@ -655,18 +645,15 @@ const createCustomTheme = (config = {}) => {
655
645
  styleOverrides: {
656
646
  root: {
657
647
  textTransform: 'none',
658
- borderRadius: designTokens.radius.md,
659
- // fontWeight: 600,
648
+ fontWeight: 500,
660
649
  letterSpacing: '0.5px',
661
650
  padding: '6px 12px',
662
651
  },
663
652
  sizeSmall: {
664
- padding: '4px 12px',
665
- // fontSize: '0.875rem',
653
+ padding: '4px 10px'
666
654
  },
667
655
  sizeLarge: {
668
- padding: '12px 24px',
669
- // fontSize: '1rem',
656
+ padding: '10px 24px'
670
657
  },
671
658
  },
672
659
  defaultProps: {
package/dist/index.js CHANGED
@@ -8,20 +8,10 @@ var CardMedia = require('@mui/material/CardMedia');
8
8
  var styles = require('@mui/material/styles');
9
9
 
10
10
  const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
11
- material.useTheme();
12
11
  const showStartSpinner = loading && loaderPosition === 'start';
13
12
  const showEndSpinner = loading && loaderPosition === 'end';
14
13
  const showCenterSpinner = loading && loaderPosition === 'center';
15
- return (jsxRuntime.jsx(material.Button, { ref: ref, variant: variant, color: color, size: size, disabled: disabled || loading, startIcon: showStartSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: {
16
- // borderRadius: theme.radius.sm,
17
- fontWeight: 500,
18
- textTransform: 'none',
19
- letterSpacing: '0.5px',
20
- px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
21
- py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
22
- position: 'relative',
23
- ...sx,
24
- }, ...props, children: showCenterSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
14
+ return (jsxRuntime.jsx(material.Button, { ref: ref, variant: variant, color: color, disabled: disabled || loading, size: size, startIcon: showStartSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: { position: 'relative', ...sx }, ...props, children: showCenterSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
25
15
  });
26
16
  Button.displayName = 'Button';
27
17
 
@@ -594,62 +584,62 @@ const createCustomTheme = (config = {}) => {
594
584
  typography: {
595
585
  fontFamily: designTokens.typography.fontFamily,
596
586
  fontSize: 14,
597
- h1: {
598
- fontSize: '3rem', // 48px
599
- fontWeight: 700,
600
- lineHeight: 1.2,
601
- },
602
- h2: {
603
- fontSize: '2.25rem', // 36px
604
- fontWeight: 600,
605
- lineHeight: 1.25,
606
- },
607
- h3: {
608
- fontSize: '1.875rem', // 30px
609
- fontWeight: 600,
610
- lineHeight: 1.3,
611
- },
612
- h4: {
613
- fontSize: '1.5rem', // 24px
614
- fontWeight: 500,
615
- lineHeight: 1.35,
616
- },
617
- h5: {
618
- fontSize: '1.25rem', // 20px
619
- fontWeight: 500,
620
- lineHeight: 1.4,
621
- },
622
- h6: {
623
- fontSize: '1rem', // 16px
624
- fontWeight: 500,
625
- lineHeight: 1.5,
626
- },
627
- body1: {
628
- fontSize: '1rem', // 16px
629
- lineHeight: '1.625rem', // 26px
630
- },
631
- body2: {
632
- fontSize: '0.875rem', // 14px
633
- lineHeight: '1.5rem', // 24px
634
- },
635
- caption: {
636
- fontSize: '0.875rem',
637
- lineHeight: '1.25rem', // 20px
638
- },
639
- button: {
640
- fontSize: '0.875rem',
641
- lineHeight: '1.5rem',
642
- textTransform: 'none',
643
- },
644
- subtitle1: {
645
- fontSize: '1rem', // 16px
646
- lineHeight: '1.5rem', // 24px
647
- // fontWeight: 500
648
- },
587
+ // h1: {
588
+ // fontSize: '3rem', // 48px
589
+ // fontWeight: 700,
590
+ // lineHeight: 1.2,
591
+ // },
592
+ // h2: {
593
+ // fontSize: '2.25rem', // 36px
594
+ // fontWeight: 600,
595
+ // lineHeight: 1.25,
596
+ // },
597
+ // h3: {
598
+ // fontSize: '1.875rem', // 30px
599
+ // fontWeight: 600,
600
+ // lineHeight: 1.3,
601
+ // },
602
+ // h4: {
603
+ // fontSize: '1.5rem', // 24px
604
+ // fontWeight: 500,
605
+ // lineHeight: 1.35,
606
+ // },
607
+ // h5: {
608
+ // fontSize: '1.25rem', // 20px
609
+ // fontWeight: 500,
610
+ // lineHeight: 1.4,
611
+ // },
612
+ // h6: {
613
+ // fontSize: '1rem', // 16px
614
+ // fontWeight: 500,
615
+ // lineHeight: 1.5,
616
+ // },
617
+ // body1: {
618
+ // fontSize: '1rem', // 16px
619
+ // lineHeight: '1.625rem',// 26px
620
+ // },
621
+ // body2: {
622
+ // fontSize: '0.875rem', // 14px
623
+ // lineHeight: '1.5rem', // 24px
624
+ // },
625
+ // caption: {
626
+ // fontSize: '0.875rem',
627
+ // lineHeight: '1.25rem', // 20px
628
+ // },
629
+ // button: {
630
+ // fontSize: '0.875rem',
631
+ // lineHeight: '1.5rem',
632
+ // textTransform: 'none',
633
+ // },
634
+ // subtitle1: {
635
+ // fontSize: '1rem', // 16px
636
+ // lineHeight: '1.5rem', // 24px
637
+ // // fontWeight: 500
638
+ // },
649
639
  },
650
640
  spacing: 8,
651
641
  shape: {
652
- borderRadius: 8,
642
+ borderRadius: 5,
653
643
  },
654
644
  radius: designTokens.radius,
655
645
  components: {
@@ -657,18 +647,15 @@ const createCustomTheme = (config = {}) => {
657
647
  styleOverrides: {
658
648
  root: {
659
649
  textTransform: 'none',
660
- borderRadius: designTokens.radius.md,
661
- // fontWeight: 600,
650
+ fontWeight: 500,
662
651
  letterSpacing: '0.5px',
663
652
  padding: '6px 12px',
664
653
  },
665
654
  sizeSmall: {
666
- padding: '4px 12px',
667
- // fontSize: '0.875rem',
655
+ padding: '4px 10px'
668
656
  },
669
657
  sizeLarge: {
670
- padding: '12px 24px',
671
- // fontSize: '1rem',
658
+ padding: '10px 24px'
672
659
  },
673
660
  },
674
661
  defaultProps: {
package/dist/theme/index.esm.js CHANGED
@@ -66,62 +66,62 @@ const createCustomTheme = (config = {}) => {
66
66
  typography: {
67
67
  fontFamily: designTokens.typography.fontFamily,
68
68
  fontSize: 14,
69
- h1: {
70
- fontSize: '3rem', // 48px
71
- fontWeight: 700,
72
- lineHeight: 1.2,
73
- },
74
- h2: {
75
- fontSize: '2.25rem', // 36px
76
- fontWeight: 600,
77
- lineHeight: 1.25,
78
- },
79
- h3: {
80
- fontSize: '1.875rem', // 30px
81
- fontWeight: 600,
82
- lineHeight: 1.3,
83
- },
84
- h4: {
85
- fontSize: '1.5rem', // 24px
86
- fontWeight: 500,
87
- lineHeight: 1.35,
88
- },
89
- h5: {
90
- fontSize: '1.25rem', // 20px
91
- fontWeight: 500,
92
- lineHeight: 1.4,
93
- },
94
- h6: {
95
- fontSize: '1rem', // 16px
96
- fontWeight: 500,
97
- lineHeight: 1.5,
98
- },
99
- body1: {
100
- fontSize: '1rem', // 16px
101
- lineHeight: '1.625rem', // 26px
102
- },
103
- body2: {
104
- fontSize: '0.875rem', // 14px
105
- lineHeight: '1.5rem', // 24px
106
- },
107
- caption: {
108
- fontSize: '0.875rem',
109
- lineHeight: '1.25rem', // 20px
110
- },
111
- button: {
112
- fontSize: '0.875rem',
113
- lineHeight: '1.5rem',
114
- textTransform: 'none',
115
- },
116
- subtitle1: {
117
- fontSize: '1rem', // 16px
118
- lineHeight: '1.5rem', // 24px
119
- // fontWeight: 500
120
- },
69
+ // h1: {
70
+ // fontSize: '3rem', // 48px
71
+ // fontWeight: 700,
72
+ // lineHeight: 1.2,
73
+ // },
74
+ // h2: {
75
+ // fontSize: '2.25rem', // 36px
76
+ // fontWeight: 600,
77
+ // lineHeight: 1.25,
78
+ // },
79
+ // h3: {
80
+ // fontSize: '1.875rem', // 30px
81
+ // fontWeight: 600,
82
+ // lineHeight: 1.3,
83
+ // },
84
+ // h4: {
85
+ // fontSize: '1.5rem', // 24px
86
+ // fontWeight: 500,
87
+ // lineHeight: 1.35,
88
+ // },
89
+ // h5: {
90
+ // fontSize: '1.25rem', // 20px
91
+ // fontWeight: 500,
92
+ // lineHeight: 1.4,
93
+ // },
94
+ // h6: {
95
+ // fontSize: '1rem', // 16px
96
+ // fontWeight: 500,
97
+ // lineHeight: 1.5,
98
+ // },
99
+ // body1: {
100
+ // fontSize: '1rem', // 16px
101
+ // lineHeight: '1.625rem',// 26px
102
+ // },
103
+ // body2: {
104
+ // fontSize: '0.875rem', // 14px
105
+ // lineHeight: '1.5rem', // 24px
106
+ // },
107
+ // caption: {
108
+ // fontSize: '0.875rem',
109
+ // lineHeight: '1.25rem', // 20px
110
+ // },
111
+ // button: {
112
+ // fontSize: '0.875rem',
113
+ // lineHeight: '1.5rem',
114
+ // textTransform: 'none',
115
+ // },
116
+ // subtitle1: {
117
+ // fontSize: '1rem', // 16px
118
+ // lineHeight: '1.5rem', // 24px
119
+ // // fontWeight: 500
120
+ // },
121
121
  },
122
122
  spacing: 8,
123
123
  shape: {
124
- borderRadius: 8,
124
+ borderRadius: 5,
125
125
  },
126
126
  radius: designTokens.radius,
127
127
  components: {
@@ -129,18 +129,15 @@ const createCustomTheme = (config = {}) => {
129
129
  styleOverrides: {
130
130
  root: {
131
131
  textTransform: 'none',
132
- borderRadius: designTokens.radius.md,
133
- // fontWeight: 600,
132
+ fontWeight: 500,
134
133
  letterSpacing: '0.5px',
135
134
  padding: '6px 12px',
136
135
  },
137
136
  sizeSmall: {
138
- padding: '4px 12px',
139
- // fontSize: '0.875rem',
137
+ padding: '4px 10px'
140
138
  },
141
139
  sizeLarge: {
142
- padding: '12px 24px',
143
- // fontSize: '1rem',
140
+ padding: '10px 24px'
144
141
  },
145
142
  },
146
143
  defaultProps: {
package/dist/theme/index.js CHANGED
@@ -68,62 +68,62 @@ const createCustomTheme = (config = {}) => {
68
68
  typography: {
69
69
  fontFamily: designTokens.typography.fontFamily,
70
70
  fontSize: 14,
71
- h1: {
72
- fontSize: '3rem', // 48px
73
- fontWeight: 700,
74
- lineHeight: 1.2,
75
- },
76
- h2: {
77
- fontSize: '2.25rem', // 36px
78
- fontWeight: 600,
79
- lineHeight: 1.25,
80
- },
81
- h3: {
82
- fontSize: '1.875rem', // 30px
83
- fontWeight: 600,
84
- lineHeight: 1.3,
85
- },
86
- h4: {
87
- fontSize: '1.5rem', // 24px
88
- fontWeight: 500,
89
- lineHeight: 1.35,
90
- },
91
- h5: {
92
- fontSize: '1.25rem', // 20px
93
- fontWeight: 500,
94
- lineHeight: 1.4,
95
- },
96
- h6: {
97
- fontSize: '1rem', // 16px
98
- fontWeight: 500,
99
- lineHeight: 1.5,
100
- },
101
- body1: {
102
- fontSize: '1rem', // 16px
103
- lineHeight: '1.625rem', // 26px
104
- },
105
- body2: {
106
- fontSize: '0.875rem', // 14px
107
- lineHeight: '1.5rem', // 24px
108
- },
109
- caption: {
110
- fontSize: '0.875rem',
111
- lineHeight: '1.25rem', // 20px
112
- },
113
- button: {
114
- fontSize: '0.875rem',
115
- lineHeight: '1.5rem',
116
- textTransform: 'none',
117
- },
118
- subtitle1: {
119
- fontSize: '1rem', // 16px
120
- lineHeight: '1.5rem', // 24px
121
- // fontWeight: 500
122
- },
71
+ // h1: {
72
+ // fontSize: '3rem', // 48px
73
+ // fontWeight: 700,
74
+ // lineHeight: 1.2,
75
+ // },
76
+ // h2: {
77
+ // fontSize: '2.25rem', // 36px
78
+ // fontWeight: 600,
79
+ // lineHeight: 1.25,
80
+ // },
81
+ // h3: {
82
+ // fontSize: '1.875rem', // 30px
83
+ // fontWeight: 600,
84
+ // lineHeight: 1.3,
85
+ // },
86
+ // h4: {
87
+ // fontSize: '1.5rem', // 24px
88
+ // fontWeight: 500,
89
+ // lineHeight: 1.35,
90
+ // },
91
+ // h5: {
92
+ // fontSize: '1.25rem', // 20px
93
+ // fontWeight: 500,
94
+ // lineHeight: 1.4,
95
+ // },
96
+ // h6: {
97
+ // fontSize: '1rem', // 16px
98
+ // fontWeight: 500,
99
+ // lineHeight: 1.5,
100
+ // },
101
+ // body1: {
102
+ // fontSize: '1rem', // 16px
103
+ // lineHeight: '1.625rem',// 26px
104
+ // },
105
+ // body2: {
106
+ // fontSize: '0.875rem', // 14px
107
+ // lineHeight: '1.5rem', // 24px
108
+ // },
109
+ // caption: {
110
+ // fontSize: '0.875rem',
111
+ // lineHeight: '1.25rem', // 20px
112
+ // },
113
+ // button: {
114
+ // fontSize: '0.875rem',
115
+ // lineHeight: '1.5rem',
116
+ // textTransform: 'none',
117
+ // },
118
+ // subtitle1: {
119
+ // fontSize: '1rem', // 16px
120
+ // lineHeight: '1.5rem', // 24px
121
+ // // fontWeight: 500
122
+ // },
123
123
  },
124
124
  spacing: 8,
125
125
  shape: {
126
- borderRadius: 8,
126
+ borderRadius: 5,
127
127
  },
128
128
  radius: designTokens.radius,
129
129
  components: {
@@ -131,18 +131,15 @@ const createCustomTheme = (config = {}) => {
131
131
  styleOverrides: {
132
132
  root: {
133
133
  textTransform: 'none',
134
- borderRadius: designTokens.radius.md,
135
- // fontWeight: 600,
134
+ fontWeight: 500,
136
135
  letterSpacing: '0.5px',
137
136
  padding: '6px 12px',
138
137
  },
139
138
  sizeSmall: {
140
- padding: '4px 12px',
141
- // fontSize: '0.875rem',
139
+ padding: '4px 10px'
142
140
  },
143
141
  sizeLarge: {
144
- padding: '12px 24px',
145
- // fontSize: '1rem',
142
+ padding: '10px 24px'
146
143
  },
147
144
  },
148
145
  defaultProps: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zimyo/ui",
3
- "version": "1.1.7",
3
+ "version": "1.1.9",
4
4
  "description": "Zimyo UI library built on MUI Material",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -58,6 +58,11 @@
58
58
  "require": "./dist/Switch/index.js",
59
59
  "types": "./dist/Switch/index.d.ts"
60
60
  },
61
+ "./Modal": {
62
+ "import": "./dist/Modal/index.esm.js",
63
+ "require": "./dist/Modal/index.js",
64
+ "types": "./dist/Modal/index.d.ts"
65
+ },
61
66
  "./theme": {
62
67
  "import": "./dist/theme/index.esm.js",
63
68
  "require": "./dist/theme/index.js",