@zimyo/ui 1.1.10 → 1.2.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import React$1 from 'react';
-import { ButtonProps as ButtonProps$1, SelectProps as SelectProps$1, SelectChangeEvent, AccordionProps as AccordionProps$1, AccordionSummaryProps, AccordionDetailsProps, SwitchProps as SwitchProps$1, TextFieldProps, TypographyProps, SxProps as SxProps$1 } from '@mui/material';
+import React$1, { ReactNode } from 'react';
+import { ButtonProps as ButtonProps$1, SelectProps as SelectProps$1, SelectChangeEvent, AccordionProps as AccordionProps$1, AccordionSummaryProps, AccordionDetailsProps, SwitchProps as SwitchProps$1, TextFieldProps, TypographyProps, SxProps as SxProps$1, DialogProps } from '@mui/material';
 import { SxProps } from '@mui/system';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Theme } from '@mui/material/styles';
@@ -132,6 +132,17 @@ interface CodeProps {
 }
 declare const Code: ({ children, sx }: CodeProps) => react_jsx_runtime.JSX.Element;
 
+interface ModalProps extends Omit<DialogProps, 'title'> {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    content?: ReactNode;
+    actions?: ReactNode;
+    maxWidth?: DialogProps['maxWidth'];
+    fullWidth?: boolean;
+}
+declare const Modal: ({ open, onClose, title, content, actions, fullWidth, maxWidth, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
+
 interface UILibraryThemeProviderProps {
     children: React$1.ReactNode;
     primaryColor?: string;
@@ -218,5 +229,5 @@ declare const designTokens: {
     };
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Blockquote, Button, Caption, Code, Heading, Lead, Muted, RadioGroup, Select, Strong, Switch, Text, TextInput, UILibraryThemeProvider, createCustomTheme, designTokens, theme };
-export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, ButtonProps, RadioGroupProps, RadioOption, SelectProps, SwitchProps, TextInputProps, ThemeConfig, UILibraryThemeProviderProps };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Blockquote, Button, Caption, Code, Heading, Lead, Modal, Muted, RadioGroup, Select, Strong, Switch, Text, TextInput, UILibraryThemeProvider, createCustomTheme, designTokens, theme };
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, ButtonProps, ModalProps, RadioGroupProps, RadioOption, SelectProps, SwitchProps, TextInputProps, ThemeConfig, UILibraryThemeProviderProps };

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, createElement } from 'react';
-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';
+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, Dialog, DialogTitle, DialogContent, DialogActions, GlobalStyles, CssBaseline } from '@mui/material';
 import MuiCardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -518,6 +518,17 @@ const Code = ({ children, sx }) => {
         }, children: children }));
 };
 
+const Modal = ({ open, onClose, title, content, actions, fullWidth = true, maxWidth = 'sm', ...rest }) => {
+    const theme = useTheme();
+    return (jsxs(Dialog, { open: open, onClose: onClose, fullWidth: fullWidth, maxWidth: maxWidth, scroll: "body", PaperProps: {
+            sx: {
+                borderRadius: 1.5,
+                p: 1,
+                backgroundColor: theme.palette.background.paper,
+            },
+        }, ...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 })] }));
+};
+
 const designTokens = {
     colors: {
         primary: {
@@ -645,7 +656,7 @@ const createCustomTheme = (config = {}) => {
                 styleOverrides: {
                     root: {
                         textTransform: 'none',
-                        fontWeight: 500,
+                        fontWeight: 400,
                         letterSpacing: '0.5px',
                         padding: '6px 12px',
                     },
@@ -747,4 +758,4 @@ const UILibraryThemeProvider = ({ children, primaryColor, secondaryColor, enable
     return (jsxs(ThemeProvider, { theme: theme, children: [enableCssBaseline && jsx(CssBaseline, {}), jsx(Fonts, {}), children] }));
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Blockquote, Button, Caption, Code, Heading, Lead, Muted, RadioGroup, Select, Strong, Switch, Text, TextInput, UILibraryThemeProvider, createCustomTheme, designTokens, theme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Blockquote, Button, Caption, Code, Heading, Lead, Modal, Muted, RadioGroup, Select, Strong, Switch, Text, TextInput, UILibraryThemeProvider, createCustomTheme, designTokens, theme };

package/dist/index.js

@@ -520,6 +520,17 @@ const Code = ({ children, sx }) => {
         }, children: children }));
 };
 
+const Modal = ({ open, onClose, title, content, actions, fullWidth = true, maxWidth = 'sm', ...rest }) => {
+    const theme = material.useTheme();
+    return (jsxRuntime.jsxs(material.Dialog, { open: open, onClose: onClose, fullWidth: fullWidth, maxWidth: maxWidth, scroll: "body", PaperProps: {
+            sx: {
+                borderRadius: 1.5,
+                p: 1,
+                backgroundColor: theme.palette.background.paper,
+            },
+        }, ...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 })] }));
+};
+
 const designTokens = {
     colors: {
         primary: {
@@ -647,7 +658,7 @@ const createCustomTheme = (config = {}) => {
                 styleOverrides: {
                     root: {
                         textTransform: 'none',
-                        fontWeight: 500,
+                        fontWeight: 400,
                         letterSpacing: '0.5px',
                         padding: '6px 12px',
                     },
@@ -759,6 +770,7 @@ exports.Caption = Caption;
 exports.Code = Code;
 exports.Heading = Heading;
 exports.Lead = Lead;
+exports.Modal = Modal;
 exports.Muted = Muted;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;

package/dist/theme/index.esm.js

@@ -129,7 +129,7 @@ const createCustomTheme = (config = {}) => {
                 styleOverrides: {
                     root: {
                         textTransform: 'none',
-                        fontWeight: 500,
+                        fontWeight: 400,
                         letterSpacing: '0.5px',
                         padding: '6px 12px',
                     },

package/dist/theme/index.js

@@ -131,7 +131,7 @@ const createCustomTheme = (config = {}) => {
                 styleOverrides: {
                     root: {
                         textTransform: 'none',
-                        fontWeight: 500,
+                        fontWeight: 400,
                         letterSpacing: '0.5px',
                         padding: '6px 12px',
                     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zimyo/ui",
-  "version": "1.1.10",
+  "version": "1.2.0",
   "description": "Zimyo UI library built on MUI Material",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",