@zimyo/ui 1.1.2 → 1.1.4

package/dist/index.esm.js

@@ -1,253 +0,0 @@
-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

@@ -1,261 +0,0 @@
-'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

@@ -1,91 +0,0 @@
-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 };