@zimyo/ui 1.1.0 → 1.1.2

package/dist/index.esm.js

@@ -0,0 +1,253 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { useTheme, Button as Button$1, CircularProgress, Card as Card$1, CardHeader as CardHeader$1, Typography, CardActions as CardActions$1, Box, Skeleton, CssBaseline } from '@mui/material';
+import MuiCardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
+    const theme = useTheme();
+    const showStartSpinner = loading && loaderPosition === 'start';
+    const showEndSpinner = loading && loaderPosition === 'end';
+    const showCenterSpinner = loading && loaderPosition === 'center';
+    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: {
+            borderRadius: theme.radius.sm,
+            fontWeight: 500,
+            textTransform: 'none',
+            letterSpacing: '0.5px',
+            px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
+            py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
+            position: 'relative',
+            ...sx,
+        }, ...props, children: showCenterSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
+});
+Button.displayName = 'Button';
+
+const CardRoot = ({ children, sx = {}, elevation = 1, variant = 'elevated', ...props }) => {
+    const theme = useTheme();
+    return (jsx(Card$1, { elevation: variant === 'elevated' ? elevation : 0, variant: variant === 'outlined' ? 'outlined' : 'elevation', sx: {
+            borderRadius: theme.radius?.sm || 8,
+            border: variant === 'bordered' ? `1px solid ${theme.palette.divider}` : 'none',
+            overflow: 'hidden',
+            backgroundColor: theme.palette.background.paper,
+            ...sx,
+        }, ...props, children: children }));
+};
+
+const CardHeader = ({ title, subtitle, action, }) => (jsx(CardHeader$1, { title: typeof title === 'string' ? (jsx(Typography, { variant: "h6", fontWeight: 600, children: title })) : (title), subheader: typeof subtitle === 'string' ? (jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : (subtitle), action: action }));
+
+const CardContent = ({ children, sx }) => (jsx(MuiCardContent, { sx: sx, children: children }));
+
+const CardActions = ({ children, sx }) => (jsx(CardActions$1, { sx: sx, children: children }));
+
+const CardImage = ({ src, height = 160, alt = 'card image' }) => (jsx(CardMedia, { component: "img", height: height, image: src, alt: alt }));
+
+const CardSkeleton = ({ lines = 3 }) => (jsxs(Box, { p: 2, children: [jsx(Skeleton, { variant: "rectangular", height: 140 }), [...Array(lines)].map((_, i) => (jsx(Skeleton, { variant: "text", height: 20, sx: { mt: 1 } }, i)))] }));
+
+const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Content: CardContent,
+    Body: CardContent, // alias
+    Actions: CardActions,
+    Image: CardImage,
+    Skeleton: CardSkeleton,
+});
+
+const Heading = ({ level = 1, ...props }) => {
+    const variant = `h${level}`;
+    return (jsx(Typography, { variant: variant, component: props.component || `h${level}`, fontWeight: 600, gutterBottom: true, ...props }));
+};
+
+const Text = ({ size = 'md', ...props }) => {
+    const variantMap = {
+        sm: 'body2',
+        md: 'body1',
+        lg: 'subtitle1',
+    };
+    return (jsx(Typography, { variant: variantMap[size], component: props.component || 'p', ...props }));
+};
+
+const Lead = (props) => {
+    return (jsx(Typography, { variant: "subtitle1", component: props.component || 'p', fontWeight: 400, color: "text.secondary", ...props }));
+};
+
+const Muted = (props) => {
+    return (jsx(Typography, { variant: "body2", component: props.component || 'span', color: "text.disabled", ...props }));
+};
+
+const Strong = (props) => {
+    return (jsx(Typography, { component: props.component || 'strong', fontWeight: 700, display: "inline", ...props }));
+};
+
+const Caption = (props) => {
+    return (jsx(Typography, { variant: "caption", color: "text.secondary", component: props.component || 'span', ...props }));
+};
+
+const Blockquote = (props) => {
+    return (jsx(Typography, { component: "blockquote", sx: {
+            borderLeft: '4px solid',
+            borderColor: 'divider',
+            pl: 2,
+            color: 'text.secondary',
+            fontStyle: 'italic',
+        }, ...props }));
+};
+
+const Code = ({ children, sx }) => {
+    return (jsx(Box, { component: "code", sx: {
+            fontFamily: 'monospace',
+            backgroundColor: 'grey.100',
+            color: 'primary.main',
+            px: 0.5,
+            py: 0.25,
+            borderRadius: 1,
+            fontSize: '0.875rem',
+            ...sx,
+        }, children: children }));
+};
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Blockquote: Blockquote,
+    Caption: Caption,
+    Code: Code,
+    Heading: Heading,
+    Lead: Lead,
+    Muted: Muted,
+    Strong: Strong,
+    Text: Text
+});
+
+const designTokens = {
+    colors: {
+        primary: {
+            50: '#e3f2fd',
+            100: '#bbdefb',
+            500: '#2196f3',
+            900: '#0d47a1',
+        },
+        secondary: {
+            50: '#fce4ec',
+            100: '#f8bbd9',
+            500: '#e91e63',
+            900: '#880e4f',
+        },
+        neutral: {
+            50: '#fafafa',
+            100: '#f5f5f5',
+            200: '#eeeeee',
+            500: '#9e9e9e',
+            900: '#212121',
+        },
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+    radius: {
+        xs: "2px",
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px',
+    },
+    typography: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.25rem',
+            xl: '1.5rem',
+        },
+    },
+};
+
+const createCustomTheme = (config = {}) => {
+    const { primaryColor = designTokens.colors.primary[500], secondaryColor = designTokens.colors.secondary[500], } = config;
+    return createTheme({
+        palette: {
+            primary: {
+                main: primaryColor,
+            },
+            secondary: {
+                main: secondaryColor,
+            },
+        },
+        typography: {
+            fontFamily: designTokens.typography.fontFamily,
+            h1: { fontWeight: 600 },
+            h2: { fontWeight: 600 },
+            h3: { fontWeight: 600 },
+            h4: { fontWeight: 600 },
+            h5: { fontWeight: 600 },
+            h6: { fontWeight: 600 },
+        },
+        spacing: 8,
+        shape: {
+            borderRadius: 8,
+        },
+        radius: designTokens.radius,
+        components: {
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                        borderRadius: '4px',
+                        // fontWeight: 600,
+                        letterSpacing: '0.5px',
+                        padding: '8px 16px',
+                    },
+                    sizeSmall: {
+                        padding: '4px 12px',
+                        fontSize: '0.875rem',
+                    },
+                    sizeLarge: {
+                        padding: '12px 24px',
+                        fontSize: '1rem',
+                    },
+                },
+                defaultProps: {
+                    disableElevation: true
+                }
+            },
+            MuiCard: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: '12px',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    },
+                },
+            },
+            MuiTextField: {
+                styleOverrides: {
+                    root: {
+                        '& .MuiOutlinedInput-root': {
+                            borderRadius: '8px',
+                        },
+                    },
+                },
+            },
+        },
+    });
+};
+// Default theme
+const theme = createCustomTheme();
+
+const UILibraryThemeProvider = ({ children, primaryColor, secondaryColor, enableCssBaseline = true, }) => {
+    const themeConfig = {};
+    if (primaryColor) {
+        themeConfig.primaryColor = primaryColor;
+    }
+    if (secondaryColor) {
+        themeConfig.secondaryColor = secondaryColor;
+    }
+    const theme = createCustomTheme(themeConfig);
+    return (jsxs(ThemeProvider, { theme: theme, children: [enableCssBaseline && jsx(CssBaseline, {}), children] }));
+};
+
+export { Button, Card, index as Typography, UILibraryThemeProvider, createCustomTheme, designTokens, theme };

package/dist/index.js

@@ -0,0 +1,261 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var MuiCardContent = require('@mui/material/CardContent');
+var CardMedia = require('@mui/material/CardMedia');
+var styles = require('@mui/material/styles');
+
+const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
+    const theme = material.useTheme();
+    const showStartSpinner = loading && loaderPosition === 'start';
+    const showEndSpinner = loading && loaderPosition === 'end';
+    const showCenterSpinner = loading && loaderPosition === 'center';
+    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: {
+            borderRadius: theme.radius.sm,
+            fontWeight: 500,
+            textTransform: 'none',
+            letterSpacing: '0.5px',
+            px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
+            py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
+            position: 'relative',
+            ...sx,
+        }, ...props, children: showCenterSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
+});
+Button.displayName = 'Button';
+
+const CardRoot = ({ children, sx = {}, elevation = 1, variant = 'elevated', ...props }) => {
+    const theme = material.useTheme();
+    return (jsxRuntime.jsx(material.Card, { elevation: variant === 'elevated' ? elevation : 0, variant: variant === 'outlined' ? 'outlined' : 'elevation', sx: {
+            borderRadius: theme.radius?.sm || 8,
+            border: variant === 'bordered' ? `1px solid ${theme.palette.divider}` : 'none',
+            overflow: 'hidden',
+            backgroundColor: theme.palette.background.paper,
+            ...sx,
+        }, ...props, children: children }));
+};
+
+const CardHeader = ({ title, subtitle, action, }) => (jsxRuntime.jsx(material.CardHeader, { title: typeof title === 'string' ? (jsxRuntime.jsx(material.Typography, { variant: "h6", fontWeight: 600, children: title })) : (title), subheader: typeof subtitle === 'string' ? (jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : (subtitle), action: action }));
+
+const CardContent = ({ children, sx }) => (jsxRuntime.jsx(MuiCardContent, { sx: sx, children: children }));
+
+const CardActions = ({ children, sx }) => (jsxRuntime.jsx(material.CardActions, { sx: sx, children: children }));
+
+const CardImage = ({ src, height = 160, alt = 'card image' }) => (jsxRuntime.jsx(CardMedia, { component: "img", height: height, image: src, alt: alt }));
+
+const CardSkeleton = ({ lines = 3 }) => (jsxRuntime.jsxs(material.Box, { p: 2, children: [jsxRuntime.jsx(material.Skeleton, { variant: "rectangular", height: 140 }), [...Array(lines)].map((_, i) => (jsxRuntime.jsx(material.Skeleton, { variant: "text", height: 20, sx: { mt: 1 } }, i)))] }));
+
+const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Content: CardContent,
+    Body: CardContent, // alias
+    Actions: CardActions,
+    Image: CardImage,
+    Skeleton: CardSkeleton,
+});
+
+const Heading = ({ level = 1, ...props }) => {
+    const variant = `h${level}`;
+    return (jsxRuntime.jsx(material.Typography, { variant: variant, component: props.component || `h${level}`, fontWeight: 600, gutterBottom: true, ...props }));
+};
+
+const Text = ({ size = 'md', ...props }) => {
+    const variantMap = {
+        sm: 'body2',
+        md: 'body1',
+        lg: 'subtitle1',
+    };
+    return (jsxRuntime.jsx(material.Typography, { variant: variantMap[size], component: props.component || 'p', ...props }));
+};
+
+const Lead = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { variant: "subtitle1", component: props.component || 'p', fontWeight: 400, color: "text.secondary", ...props }));
+};
+
+const Muted = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { variant: "body2", component: props.component || 'span', color: "text.disabled", ...props }));
+};
+
+const Strong = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { component: props.component || 'strong', fontWeight: 700, display: "inline", ...props }));
+};
+
+const Caption = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", component: props.component || 'span', ...props }));
+};
+
+const Blockquote = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { component: "blockquote", sx: {
+            borderLeft: '4px solid',
+            borderColor: 'divider',
+            pl: 2,
+            color: 'text.secondary',
+            fontStyle: 'italic',
+        }, ...props }));
+};
+
+const Code = ({ children, sx }) => {
+    return (jsxRuntime.jsx(material.Box, { component: "code", sx: {
+            fontFamily: 'monospace',
+            backgroundColor: 'grey.100',
+            color: 'primary.main',
+            px: 0.5,
+            py: 0.25,
+            borderRadius: 1,
+            fontSize: '0.875rem',
+            ...sx,
+        }, children: children }));
+};
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Blockquote: Blockquote,
+    Caption: Caption,
+    Code: Code,
+    Heading: Heading,
+    Lead: Lead,
+    Muted: Muted,
+    Strong: Strong,
+    Text: Text
+});
+
+const designTokens = {
+    colors: {
+        primary: {
+            50: '#e3f2fd',
+            100: '#bbdefb',
+            500: '#2196f3',
+            900: '#0d47a1',
+        },
+        secondary: {
+            50: '#fce4ec',
+            100: '#f8bbd9',
+            500: '#e91e63',
+            900: '#880e4f',
+        },
+        neutral: {
+            50: '#fafafa',
+            100: '#f5f5f5',
+            200: '#eeeeee',
+            500: '#9e9e9e',
+            900: '#212121',
+        },
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+    radius: {
+        xs: "2px",
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px',
+    },
+    typography: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.25rem',
+            xl: '1.5rem',
+        },
+    },
+};
+
+const createCustomTheme = (config = {}) => {
+    const { primaryColor = designTokens.colors.primary[500], secondaryColor = designTokens.colors.secondary[500], } = config;
+    return styles.createTheme({
+        palette: {
+            primary: {
+                main: primaryColor,
+            },
+            secondary: {
+                main: secondaryColor,
+            },
+        },
+        typography: {
+            fontFamily: designTokens.typography.fontFamily,
+            h1: { fontWeight: 600 },
+            h2: { fontWeight: 600 },
+            h3: { fontWeight: 600 },
+            h4: { fontWeight: 600 },
+            h5: { fontWeight: 600 },
+            h6: { fontWeight: 600 },
+        },
+        spacing: 8,
+        shape: {
+            borderRadius: 8,
+        },
+        radius: designTokens.radius,
+        components: {
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                        borderRadius: '4px',
+                        // fontWeight: 600,
+                        letterSpacing: '0.5px',
+                        padding: '8px 16px',
+                    },
+                    sizeSmall: {
+                        padding: '4px 12px',
+                        fontSize: '0.875rem',
+                    },
+                    sizeLarge: {
+                        padding: '12px 24px',
+                        fontSize: '1rem',
+                    },
+                },
+                defaultProps: {
+                    disableElevation: true
+                }
+            },
+            MuiCard: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: '12px',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    },
+                },
+            },
+            MuiTextField: {
+                styleOverrides: {
+                    root: {
+                        '& .MuiOutlinedInput-root': {
+                            borderRadius: '8px',
+                        },
+                    },
+                },
+            },
+        },
+    });
+};
+// Default theme
+const theme = createCustomTheme();
+
+const UILibraryThemeProvider = ({ children, primaryColor, secondaryColor, enableCssBaseline = true, }) => {
+    const themeConfig = {};
+    if (primaryColor) {
+        themeConfig.primaryColor = primaryColor;
+    }
+    if (secondaryColor) {
+        themeConfig.secondaryColor = secondaryColor;
+    }
+    const theme = createCustomTheme(themeConfig);
+    return (jsxRuntime.jsxs(styles.ThemeProvider, { theme: theme, children: [enableCssBaseline && jsxRuntime.jsx(material.CssBaseline, {}), children] }));
+};
+
+exports.Button = Button;
+exports.Card = Card;
+exports.Typography = index;
+exports.UILibraryThemeProvider = UILibraryThemeProvider;
+exports.createCustomTheme = createCustomTheme;
+exports.designTokens = designTokens;
+exports.theme = theme;

package/dist/theme/index.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Theme } from '@mui/material/styles';
+
+interface UILibraryThemeProviderProps {
+    children: React.ReactNode;
+    primaryColor?: string;
+    secondaryColor?: string;
+    enableCssBaseline?: boolean;
+}
+declare const UILibraryThemeProvider: React.FC<UILibraryThemeProviderProps>;
+
+declare module '@mui/material/styles' {
+    interface Theme {
+        radius: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            full: string;
+        };
+    }
+    interface ThemeOptions {
+        radius?: {
+            xs?: string;
+            sm?: string;
+            md?: string;
+            lg?: string;
+            xl?: string;
+            full?: string;
+        };
+    }
+}
+interface ThemeConfig {
+    primaryColor?: string;
+    secondaryColor?: string;
+}
+declare const createCustomTheme: (config?: ThemeConfig) => Theme;
+declare const theme: Theme;
+
+declare const designTokens: {
+    colors: {
+        primary: {
+            50: string;
+            100: string;
+            500: string;
+            900: string;
+        };
+        secondary: {
+            50: string;
+            100: string;
+            500: string;
+            900: string;
+        };
+        neutral: {
+            50: string;
+            100: string;
+            200: string;
+            500: string;
+            900: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    radius: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    typography: {
+        fontFamily: string;
+        fontSize: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
+};
+
+export { UILibraryThemeProvider, createCustomTheme, designTokens, theme };
+export type { ThemeConfig, UILibraryThemeProviderProps };