@zimyo/ui 1.1.1 → 1.1.2

package/dist/Tabs/index.js

@@ -0,0 +1,207 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var material = require('@mui/material');
+
+// Custom Tab Component
+const CustomTab = React.forwardRef(({ badge, sx, label, ...props }, ref) => {
+    const theme = material.useTheme();
+    const tabLabel = badge ? React.createElement(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } }, label, React.createElement(material.Box, {
+        component: 'span',
+        sx: {
+            backgroundColor: theme.palette.error.main,
+            color: theme.palette.error.contrastText,
+            borderRadius: '10px',
+            padding: '2px 6px',
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            minWidth: '18px',
+            height: '18px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            lineHeight: 1,
+        }
+    }, badge)) : label;
+    return React.createElement(material.Tab, {
+        ref,
+        sx: {
+            position: 'relative',
+            ...sx,
+        },
+        label: tabLabel,
+        ...props
+    });
+});
+CustomTab.displayName = 'CustomTab';
+// Main Tabs Component
+const Tabs = React.forwardRef(({ items, value, onChange, variant = 'standard', orientation = 'horizontal', styleVariant = 'default', size = 'medium', centered = false, allowScrollButtonsMobile = false, scrollButtons = 'auto', sx = {}, tabSx = {}, iconPosition = 'start', indicatorColor = 'primary', textColor = 'primary', ...props }, ref) => {
+    const theme = material.useTheme();
+    // Get size-based styling
+    const getSizeStyles = () => {
+        switch (size) {
+            case 'small':
+                return {
+                    minHeight: 36,
+                    fontSize: '0.875rem',
+                    padding: '6px 12px',
+                };
+            case 'large':
+                return {
+                    minHeight: 56,
+                    fontSize: '1rem',
+                    padding: '12px 24px',
+                };
+            default:
+                return {
+                    minHeight: 48,
+                    fontSize: '0.9375rem',
+                    padding: '8px 16px',
+                };
+        }
+    };
+    // Get style variant specific styling
+    const getStyleVariantStyles = () => {
+        const baseStyles = getSizeStyles();
+        switch (styleVariant) {
+            case 'filled':
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                        backgroundColor: material.alpha(theme.palette.action.hover, 0.08),
+                        borderRadius: theme.shape.borderRadius,
+                        margin: '0 4px',
+                        border: 'none',
+                        '&.Mui-selected': {
+                            backgroundColor: theme.palette.primary.main,
+                            color: theme.palette.primary.contrastText,
+                        },
+                        '&:hover': {
+                            backgroundColor: material.alpha(theme.palette.action.hover, 0.12),
+                        },
+                    },
+                    '& .MuiTabs-indicator': {
+                        display: 'none',
+                    },
+                };
+            case 'outlined':
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                        border: `1px solid ${material.alpha(theme.palette.divider, 0.5)}`,
+                        borderRadius: theme.shape.borderRadius,
+                        margin: '0 2px',
+                        '&.Mui-selected': {
+                            borderColor: theme.palette.primary.main,
+                            backgroundColor: material.alpha(theme.palette.primary.main, 0.08),
+                            color: theme.palette.primary.main,
+                        },
+                        '&:hover': {
+                            borderColor: material.alpha(theme.palette.primary.main, 0.5),
+                        },
+                    },
+                    '& .MuiTabs-indicator': {
+                        display: 'none',
+                    },
+                };
+            case 'pills':
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                        borderRadius: 25,
+                        margin: '0 4px',
+                        backgroundColor: 'transparent',
+                        border: `1px solid transparent`,
+                        '&.Mui-selected': {
+                            backgroundColor: theme.palette.primary.main,
+                            color: theme.palette.primary.contrastText,
+                        },
+                        '&:hover': {
+                            backgroundColor: material.alpha(theme.palette.action.hover, 0.08),
+                        },
+                    },
+                    '& .MuiTabs-indicator': {
+                        display: 'none',
+                    },
+                };
+            case 'underlined':
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                        borderBottom: `2px solid transparent`,
+                        '&.Mui-selected': {
+                            borderBottomColor: theme.palette.primary.main,
+                        },
+                    },
+                    '& .MuiTabs-indicator': {
+                        display: 'none',
+                    },
+                };
+            default:
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                    },
+                };
+        }
+    };
+    return React.createElement(material.Box, { ref }, React.createElement(material.Tabs, {
+        value,
+        onChange,
+        variant,
+        orientation,
+        centered,
+        allowScrollButtonsMobile,
+        scrollButtons,
+        indicatorColor,
+        textColor,
+        sx: {
+            ...getStyleVariantStyles(),
+            '& .MuiTab-root': {
+                textTransform: 'none',
+                fontWeight: 500,
+                letterSpacing: '0.5px',
+                transition: 'all 0.2s ease-in-out',
+                ...getStyleVariantStyles()['& .MuiTab-root'],
+                ...tabSx,
+            },
+            ...sx,
+        },
+        ...props,
+    }, ...items.map((item) => {
+        // Create the label content based on icon position
+        let labelContent;
+        if (item.icon) {
+            switch (iconPosition) {
+                case 'end':
+                    labelContent = React.createElement(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexDirection: 'row-reverse' } }, item.icon, item.label);
+                    break;
+                case 'top':
+                    labelContent = React.createElement(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5, flexDirection: 'column' } }, item.icon, item.label);
+                    break;
+                case 'bottom':
+                    labelContent = React.createElement(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5, flexDirection: 'column-reverse' } }, item.icon, item.label);
+                    break;
+                default: // 'start'
+                    labelContent = React.createElement(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } }, item.icon, item.label);
+                    break;
+            }
+        }
+        else {
+            labelContent = item.label;
+        }
+        return React.createElement(CustomTab, {
+            key: item.value,
+            value: item.value,
+            disabled: item.disabled,
+            badge: item.badge,
+            label: labelContent,
+        });
+    })));
+});
+Tabs.displayName = 'Tabs';
+
+exports.Tabs = Tabs;
+exports.default = Tabs;

package/dist/TextInput/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TextFieldProps } from '@mui/material';
+
+interface TextInputProps extends Omit<TextFieldProps, 'variant'> {
+    label?: string;
+    placeholder?: string;
+    IS_MANDATORY?: boolean | number | string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    error?: boolean;
+    variant?: 'outlined' | 'filled' | 'standard';
+    helperText?: string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'search';
+}
+declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { TextInput as default };
+export type { TextInputProps };

package/dist/TextInput/index.esm.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { TextField, InputAdornment } from '@mui/material';
+
+const TextInput = React.forwardRef(({ label = '', placeholder, IS_MANDATORY = false, 
+//   multiline = false,
+startIcon, endIcon, error = false, helperText, type = 'text', variant = 'outlined', ...rest }, ref) => {
+    return (jsx(TextField, { fullWidth: true, inputRef: ref, type: type, 
+        // multiline={multiline}
+        label: label, placeholder: placeholder, required: (IS_MANDATORY == 1 || IS_MANDATORY == true) ? true : false, error: error, InputLabelProps: !label ? { shrink: false } : undefined, sx: {
+            '& .MuiInputLabel-outlined': {
+                top: '-4px',
+                fontSize: '13px',
+                fontWeight: 500,
+            },
+            '& .MuiOutlinedInput-root': {
+                minHeight: '44px',
+                borderRadius: '10px',
+            },
+            '& input': {
+                padding: '10.5px 14px',
+            },
+            '& input::placeholder': {
+                fontSize: '13px',
+                opacity: 0.5,
+            },
+        }, helperText: helperText, InputProps: {
+            startAdornment: startIcon ? (jsx(InputAdornment, { position: "start", children: startIcon })) : undefined,
+            endAdornment: endIcon ? (jsx(InputAdornment, { position: "end", children: endIcon })) : undefined,
+        }, variant: variant, ...rest }));
+});
+TextInput.displayName = 'TextInput';
+
+export { TextInput as default };

package/dist/TextInput/index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+const TextInput = React.forwardRef(({ label = '', placeholder, IS_MANDATORY = false, 
+//   multiline = false,
+startIcon, endIcon, error = false, helperText, type = 'text', variant = 'outlined', ...rest }, ref) => {
+    return (jsxRuntime.jsx(material.TextField, { fullWidth: true, inputRef: ref, type: type, 
+        // multiline={multiline}
+        label: label, placeholder: placeholder, required: (IS_MANDATORY == 1 || IS_MANDATORY == true) ? true : false, error: error, InputLabelProps: !label ? { shrink: false } : undefined, sx: {
+            '& .MuiInputLabel-outlined': {
+                top: '-4px',
+                fontSize: '13px',
+                fontWeight: 500,
+            },
+            '& .MuiOutlinedInput-root': {
+                minHeight: '44px',
+                borderRadius: '10px',
+            },
+            '& input': {
+                padding: '10.5px 14px',
+            },
+            '& input::placeholder': {
+                fontSize: '13px',
+                opacity: 0.5,
+            },
+        }, helperText: helperText, InputProps: {
+            startAdornment: startIcon ? (jsxRuntime.jsx(material.InputAdornment, { position: "start", children: startIcon })) : undefined,
+            endAdornment: endIcon ? (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: endIcon })) : undefined,
+        }, variant: variant, ...rest }));
+});
+TextInput.displayName = 'TextInput';
+
+module.exports = TextInput;

package/dist/index.d.ts

@@ -0,0 +1,185 @@
+import * as React$1 from 'react';
+import React__default from 'react';
+import { ButtonProps as ButtonProps$1, CardProps, TypographyProps, SxProps as SxProps$1 } from '@mui/material';
+import { SxProps } from '@mui/system';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Theme } from '@mui/material/styles';
+
+interface ButtonProps extends Omit<ButtonProps$1, 'sx'> {
+    loading?: boolean;
+    loadingText?: string;
+    sx?: SxProps;
+    loaderSize?: number;
+    loaderPosition?: 'start' | 'end' | 'center';
+}
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface CardRootProps extends CardProps {
+    sx?: SxProps;
+    variant?: 'elevated' | 'outlined' | 'bordered';
+    children: React__default.ReactNode;
+}
+
+declare const Card: React$1.FC<CardRootProps> & {
+    Header: ({ title, subtitle, action, }: {
+        title?: string | React.ReactNode;
+        subtitle?: string | React.ReactNode;
+        action?: React.ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    Content: ({ children, sx }: {
+        children: React.ReactNode;
+        sx?: any;
+    }) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, sx }: {
+        children: React.ReactNode;
+        sx?: any;
+    }) => react_jsx_runtime.JSX.Element;
+    Actions: ({ children, sx }: {
+        children: React.ReactNode;
+        sx?: any;
+    }) => react_jsx_runtime.JSX.Element;
+    Image: ({ src, height, alt }: {
+        src: string;
+        height?: number | string;
+        alt?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Skeleton: ({ lines }: {
+        lines?: number;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+interface HeadingProps extends TypographyProps {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const Heading: ({ level, ...props }: HeadingProps) => react_jsx_runtime.JSX.Element;
+
+interface TextProps extends TypographyProps {
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Text: ({ size, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
+
+declare const Lead: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+declare const Muted: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+declare const Strong: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+declare const Caption: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+declare const Blockquote: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+interface CodeProps {
+    children: React.ReactNode;
+    sx?: SxProps$1;
+}
+declare const Code: ({ children, sx }: CodeProps) => react_jsx_runtime.JSX.Element;
+
+declare const index_Blockquote: typeof Blockquote;
+declare const index_Caption: typeof Caption;
+declare const index_Code: typeof Code;
+declare const index_Heading: typeof Heading;
+declare const index_Lead: typeof Lead;
+declare const index_Muted: typeof Muted;
+declare const index_Strong: typeof Strong;
+declare const index_Text: typeof Text;
+declare namespace index {
+  export {
+    index_Blockquote as Blockquote,
+    index_Caption as Caption,
+    index_Code as Code,
+    index_Heading as Heading,
+    index_Lead as Lead,
+    index_Muted as Muted,
+    index_Strong as Strong,
+    index_Text as Text,
+  };
+}
+
+interface UILibraryThemeProviderProps {
+    children: React__default.ReactNode;
+    primaryColor?: string;
+    secondaryColor?: string;
+    enableCssBaseline?: boolean;
+}
+declare const UILibraryThemeProvider: React__default.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 { Button, Card, index as Typography, UILibraryThemeProvider, createCustomTheme, designTokens, theme };
+export type { ButtonProps, ThemeConfig, UILibraryThemeProviderProps };