@zimyo/ui 1.2.0 → 1.2.1

package/dist/index.d.ts

@@ -143,6 +143,16 @@ interface ModalProps extends Omit<DialogProps, 'title'> {
 }
 declare const Modal: ({ open, onClose, title, content, actions, fullWidth, maxWidth, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
 
+interface AnimatedDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    anchor?: "left" | "right";
+    width?: number;
+    children: React$1.ReactNode;
+    closeButton?: boolean;
+}
+declare const Drawer: React$1.FC<AnimatedDrawerProps>;
+
 interface UILibraryThemeProviderProps {
     children: React$1.ReactNode;
     primaryColor?: string;
@@ -229,5 +239,5 @@ declare const designTokens: {
     };
 };
 
-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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Blockquote, Button, Caption, Code, Drawer, Heading, Lead, Modal, Muted, RadioGroup, Select, Strong, Switch, Text, TextInput, UILibraryThemeProvider, createCustomTheme, designTokens, theme };
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, AnimatedDrawerProps, 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, Dialog, DialogTitle, DialogContent, DialogActions, 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, Drawer as Drawer$1, Stack, GlobalStyles, CssBaseline } from '@mui/material';
 import MuiCardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -529,6 +529,13 @@ const Modal = ({ open, onClose, title, content, actions, fullWidth = true, maxWi
         }, ...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 Drawer = ({ open, onClose, anchor = "right", width = 420, children, closeButton = true, }) => {
+    return (jsxs(Drawer$1, { anchor: anchor, open: open, onClose: onClose, transitionDuration: 400, PaperProps: {
+            elevation: 0,
+            sx: { width, overflow: 'hidden' }
+        }, children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", p: 1, children: [jsx(Text, { size: "sm", fontWeight: 500, children: "Edit profile" }), jsx(IconButton, { size: "small", children: jsx(X, { style: { fontSize: 18 } }) })] }), jsx(Box, { overflow: 'hidden auto', flexGrow: 1, children: children }), jsxs(Stack, { direction: 'row', gap: 1, p: 1.5, justifyContent: "flex-end", children: [jsx(Button, { loading: true, loaderPosition: "end", variant: "outlined", children: "Cancel" }), jsx(Button, { loading: true, loadingText: "Saving..", children: "Save Changes" })] })] }));
+};
+
 const designTokens = {
     colors: {
         primary: {
@@ -656,7 +663,7 @@ const createCustomTheme = (config = {}) => {
                 styleOverrides: {
                     root: {
                         textTransform: 'none',
-                        fontWeight: 400,
+                        fontWeight: 'normal',
                         letterSpacing: '0.5px',
                         padding: '6px 12px',
                     },
@@ -758,4 +765,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, Modal, Muted, RadioGroup, Select, Strong, Switch, Text, TextInput, UILibraryThemeProvider, createCustomTheme, designTokens, theme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Blockquote, Button, Caption, Code, Drawer, Heading, Lead, Modal, Muted, RadioGroup, Select, Strong, Switch, Text, TextInput, UILibraryThemeProvider, createCustomTheme, designTokens, theme };

package/dist/index.js

@@ -531,6 +531,13 @@ const Modal = ({ open, onClose, title, content, actions, fullWidth = true, maxWi
         }, ...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 Drawer = ({ open, onClose, anchor = "right", width = 420, children, closeButton = true, }) => {
+    return (jsxRuntime.jsxs(material.Drawer, { anchor: anchor, open: open, onClose: onClose, transitionDuration: 400, PaperProps: {
+            elevation: 0,
+            sx: { width, overflow: 'hidden' }
+        }, children: [jsxRuntime.jsxs(material.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", p: 1, children: [jsxRuntime.jsx(Text, { size: "sm", fontWeight: 500, children: "Edit profile" }), jsxRuntime.jsx(material.IconButton, { size: "small", children: jsxRuntime.jsx(X, { style: { fontSize: 18 } }) })] }), jsxRuntime.jsx(material.Box, { overflow: 'hidden auto', flexGrow: 1, children: children }), jsxRuntime.jsxs(material.Stack, { direction: 'row', gap: 1, p: 1.5, justifyContent: "flex-end", children: [jsxRuntime.jsx(Button, { loading: true, loaderPosition: "end", variant: "outlined", children: "Cancel" }), jsxRuntime.jsx(Button, { loading: true, loadingText: "Saving..", children: "Save Changes" })] })] }));
+};
+
 const designTokens = {
     colors: {
         primary: {
@@ -658,7 +665,7 @@ const createCustomTheme = (config = {}) => {
                 styleOverrides: {
                     root: {
                         textTransform: 'none',
-                        fontWeight: 400,
+                        fontWeight: 'normal',
                         letterSpacing: '0.5px',
                         padding: '6px 12px',
                     },
@@ -768,6 +775,7 @@ exports.Blockquote = Blockquote;
 exports.Button = Button;
 exports.Caption = Caption;
 exports.Code = Code;
+exports.Drawer = Drawer;
 exports.Heading = Heading;
 exports.Lead = Lead;
 exports.Modal = Modal;

package/dist/theme/index.esm.js

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

package/dist/theme/index.js

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

package/package.json

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