@zimyo/ui 1.1.1 → 1.1.2

package/README.md

@@ -0,0 +1,15 @@
+# 📦 @zimyo/ui
+
+A scalable and customizable UI component library built on top of [MUI (Material UI)](https://mui.com/) — optimized for performance, accessibility, and developer experience.
+
+> Built with [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), and bundled using [Rollup](https://rollupjs.org/).  
+> Versioned and released via [Changesets](https://github.com/changesets/changesets).
+
+---
+
+## 📋 Prerequisites & Installation
+
+To install `@zimyo/ui` **with all required peer dependencies**, run:
+
+```bash
+npm install @zimyo/ui @mui/material@5 @emotion/react @emotion/styled

package/dist/Accordion/index.esm.js

@@ -1,11 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useTheme, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from '@mui/material';
-import { createSvgIcon } from '@mui/material/utils';
-
-var ExpandMoreIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
-  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-}), 'ExpandMore');
+import { ExpandMore } from '@mui/icons-material';
 
 const AccordionContext = React.createContext({});
 // Main Accordion Container Component
@@ -79,7 +75,7 @@ const AccordionItem = React.forwardRef(({ value: itemValue, children, sx = {}, .
 // AccordionTrigger Component
 const AccordionTrigger = React.forwardRef(({ children, sx = {}, expandIcon, ...props }, ref) => {
     const theme = useTheme();
-    const defaultExpandIcon = expandIcon !== undefined ? expandIcon : jsx(ExpandMoreIcon, {});
+    const defaultExpandIcon = expandIcon !== undefined ? expandIcon : jsx(ExpandMore, {});
     return (jsx(AccordionSummary, { ref: ref, expandIcon: defaultExpandIcon, sx: {
             borderRadius: theme.radius?.sm || theme.shape.borderRadius,
             minHeight: 56,

package/dist/Accordion/index.js

@@ -5,11 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var material = require('@mui/material');
-var utils = require('@mui/material/utils');
-
-var ExpandMoreIcon = utils.createSvgIcon(/*#__PURE__*/jsxRuntime.jsx("path", {
-  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-}), 'ExpandMore');
+var iconsMaterial = require('@mui/icons-material');
 
 const AccordionContext = React.createContext({});
 // Main Accordion Container Component
@@ -83,7 +79,7 @@ const AccordionItem = React.forwardRef(({ value: itemValue, children, sx = {}, .
 // AccordionTrigger Component
 const AccordionTrigger = React.forwardRef(({ children, sx = {}, expandIcon, ...props }, ref) => {
     const theme = material.useTheme();
-    const defaultExpandIcon = expandIcon !== undefined ? expandIcon : jsxRuntime.jsx(ExpandMoreIcon, {});
+    const defaultExpandIcon = expandIcon !== undefined ? expandIcon : jsxRuntime.jsx(iconsMaterial.ExpandMore, {});
     return (jsxRuntime.jsx(material.AccordionSummary, { ref: ref, expandIcon: defaultExpandIcon, sx: {
             borderRadius: theme.radius?.sm || theme.shape.borderRadius,
             minHeight: 56,

package/dist/Select/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SelectProps, SelectChangeEvent } from '@mui/material';
+
+interface OptionType {
+    label: string;
+    value: string | number;
+}
+interface CustomSelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
+    label?: string;
+    options: OptionType[];
+    error?: boolean;
+    helperText?: string;
+    required?: boolean;
+    placeholder?: string;
+    value?: any;
+    onChange?: (event: SelectChangeEvent<any>) => void;
+    isMulti?: boolean;
+}
+declare const CustomSelect: React.ForwardRefExoticComponent<Omit<CustomSelectProps, "ref"> & React.RefAttributes<any>>;
+
+export { CustomSelect, CustomSelect as default };
+export type { CustomSelectProps, OptionType };

package/dist/Select/index.esm.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { useTheme, FormControl, Select, OutlinedInput, IconButton, MenuItem, ListItemText, FormHelperText, Box, Chip } from '@mui/material';
+import { ExpandMore, Clear } from '@mui/icons-material';
+
+const CustomSelect = React.forwardRef(({ label = '', options = [], value, onChange, error = false, helperText = '', required = false, placeholder = 'Select...', isMulti = false, disabled = false, ...rest }, ref) => {
+    useTheme();
+    const handleRemoveChip = (chipValue) => (e) => {
+        e.stopPropagation();
+        const newValue = value.filter((v) => v !== chipValue);
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: newValue,
+            },
+        });
+    };
+    const renderValue = (selected) => {
+        if (isMulti && Array.isArray(selected)) {
+            return (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: selected.map((val) => {
+                    const label = options.find((o) => o.value === val)?.label || val;
+                    return jsx(Box, { onMouseDown: (e) => e.stopPropagation(), children: jsx(Chip, { onDelete: handleRemoveChip(val), label: label, sx: { borderRadius: '12px' } }) }, val);
+                }) }));
+        }
+        return options.find((o) => o.value === selected)?.label || placeholder;
+    };
+    const handleClearSelection = (e) => {
+        e.stopPropagation();
+        const emptyValue = isMulti ? [] : '';
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: emptyValue,
+            },
+        });
+    };
+    return (jsxs(FormControl, { fullWidth: true, error: error, disabled: disabled, sx: {
+            '& .MuiOutlinedInput-root': {
+                borderRadius: '8px',
+                minHeight: '44px',
+                // backgroundColor: theme.palette.background.paper,
+                fontSize: '14px'
+            },
+            '& .MuiSelect-select': {
+                fontSize: '14px',
+                padding: '10px 14px',
+            },
+            '& .MuiSelect-placeholder': {
+                fontSize: '14px',
+            },
+            '& .MuiMenuItem-root': {
+                fontSize: '14px',
+            },
+            '& .MuiChip-label': {
+                fontSize: '14px',
+            },
+        }, children: [jsx(Select, { displayEmpty: true, 
+                //   labelId={labelId}
+                multiple: isMulti, value: value || (isMulti ? [] : ''), onChange: onChange, input: jsx(OutlinedInput, { label: label }), renderValue: renderValue, ref: ref, IconComponent: ExpandMore, endAdornment: value && !isMulti && ((isMulti && value.length > 0) || (!isMulti && value !== '')) ? (jsx(IconButton, { sx: { marginRight: '1rem' }, size: "small", onClick: handleClearSelection, children: jsx(Clear, { fontSize: "small" }) })) : null, variant: "outlined", ...rest, children: options && options.map((option) => (jsx(MenuItem, { value: option.value, children: isMulti ? (jsx(Fragment, { children: jsx(ListItemText, { primary: option.label }) })) : (option.label || placeholder) }, option.value))) }), helperText && jsx(FormHelperText, { children: helperText })] }));
+});
+CustomSelect.displayName = 'CustomSelect';
+
+export { CustomSelect, CustomSelect as default };

package/dist/Select/index.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var iconsMaterial = require('@mui/icons-material');
+
+const CustomSelect = React.forwardRef(({ label = '', options = [], value, onChange, error = false, helperText = '', required = false, placeholder = 'Select...', isMulti = false, disabled = false, ...rest }, ref) => {
+    material.useTheme();
+    const handleRemoveChip = (chipValue) => (e) => {
+        e.stopPropagation();
+        const newValue = value.filter((v) => v !== chipValue);
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: newValue,
+            },
+        });
+    };
+    const renderValue = (selected) => {
+        if (isMulti && Array.isArray(selected)) {
+            return (jsxRuntime.jsx(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: selected.map((val) => {
+                    const label = options.find((o) => o.value === val)?.label || val;
+                    return jsxRuntime.jsx(material.Box, { onMouseDown: (e) => e.stopPropagation(), children: jsxRuntime.jsx(material.Chip, { onDelete: handleRemoveChip(val), label: label, sx: { borderRadius: '12px' } }) }, val);
+                }) }));
+        }
+        return options.find((o) => o.value === selected)?.label || placeholder;
+    };
+    const handleClearSelection = (e) => {
+        e.stopPropagation();
+        const emptyValue = isMulti ? [] : '';
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: emptyValue,
+            },
+        });
+    };
+    return (jsxRuntime.jsxs(material.FormControl, { fullWidth: true, error: error, disabled: disabled, sx: {
+            '& .MuiOutlinedInput-root': {
+                borderRadius: '8px',
+                minHeight: '44px',
+                // backgroundColor: theme.palette.background.paper,
+                fontSize: '14px'
+            },
+            '& .MuiSelect-select': {
+                fontSize: '14px',
+                padding: '10px 14px',
+            },
+            '& .MuiSelect-placeholder': {
+                fontSize: '14px',
+            },
+            '& .MuiMenuItem-root': {
+                fontSize: '14px',
+            },
+            '& .MuiChip-label': {
+                fontSize: '14px',
+            },
+        }, children: [jsxRuntime.jsx(material.Select, { displayEmpty: true, 
+                //   labelId={labelId}
+                multiple: isMulti, value: value || (isMulti ? [] : ''), onChange: onChange, input: jsxRuntime.jsx(material.OutlinedInput, { label: label }), renderValue: renderValue, ref: ref, IconComponent: iconsMaterial.ExpandMore, endAdornment: value && !isMulti && ((isMulti && value.length > 0) || (!isMulti && value !== '')) ? (jsxRuntime.jsx(material.IconButton, { sx: { marginRight: '1rem' }, size: "small", onClick: handleClearSelection, children: jsxRuntime.jsx(iconsMaterial.Clear, { fontSize: "small" }) })) : null, variant: "outlined", ...rest, children: options && options.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.value, children: isMulti ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.ListItemText, { primary: option.label }) })) : (option.label || placeholder) }, option.value))) }), helperText && jsxRuntime.jsx(material.FormHelperText, { children: helperText })] }));
+});
+CustomSelect.displayName = 'CustomSelect';
+
+exports.CustomSelect = CustomSelect;
+exports.default = CustomSelect;

package/dist/Switch/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SwitchProps } from '@mui/material';
+
+interface SwitchInputProps extends Omit<SwitchProps, 'onChange'> {
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean | number;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+}
+declare const SwitchInput: React.ForwardRefExoticComponent<Omit<SwitchInputProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { SwitchInput as default };
+export type { SwitchInputProps };

package/dist/Switch/index.esm.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { FormControl, FormControlLabel, Switch, FormHelperText } from '@mui/material';
+
+const SwitchInput = React.forwardRef(({ label = '', helperText = '', error = false, onChange, checked, required = false, disabled = false, ...rest }, ref) => {
+    return (jsxs(FormControl, { error: error, disabled: disabled, component: "fieldset", children: [jsx(FormControlLabel, { control: jsx(Switch, { inputRef: ref, checked: checked, onChange: (e, checked) => onChange?.(e, checked), disabled: disabled, required: required == 1 || required === true ? true : false, ...rest }), label: label }), helperText && jsx(FormHelperText, { children: helperText })] }));
+});
+
+export { SwitchInput as default };

package/dist/Switch/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+const SwitchInput = React.forwardRef(({ label = '', helperText = '', error = false, onChange, checked, required = false, disabled = false, ...rest }, ref) => {
+    return (jsxRuntime.jsxs(material.FormControl, { error: error, disabled: disabled, component: "fieldset", children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Switch, { inputRef: ref, checked: checked, onChange: (e, checked) => onChange?.(e, checked), disabled: disabled, required: required == 1 || required === true ? true : false, ...rest }), label: label }), helperText && jsxRuntime.jsx(material.FormHelperText, { children: helperText })] }));
+});
+
+module.exports = SwitchInput;

package/dist/Tabs/index.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TabProps, TabsProps as TabsProps$1 } from '@mui/material';
+import { SxProps, Theme } from '@mui/system';
+
+interface TabItem {
+    label: string;
+    value: string | number;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    badge?: string | number;
+}
+interface CustomTabProps extends Omit<TabProps, 'sx'> {
+    sx?: SxProps<Theme>;
+    badge?: string | number;
+}
+interface TabsProps extends Omit<TabsProps$1, 'children' | 'sx' | 'indicatorColor' | 'textColor'> {
+    items: TabItem[];
+    value: string | number;
+    onChange: (event: React.SyntheticEvent, newValue: string | number) => void;
+    variant?: 'standard' | 'scrollable' | 'fullWidth';
+    orientation?: 'horizontal' | 'vertical';
+    styleVariant?: 'default' | 'filled' | 'outlined' | 'pills' | 'underlined';
+    size?: 'small' | 'medium' | 'large';
+    centered?: boolean;
+    allowScrollButtonsMobile?: boolean;
+    scrollButtons?: boolean | 'auto';
+    sx?: SxProps<Theme>;
+    tabSx?: SxProps<Theme>;
+    iconPosition?: 'start' | 'end' | 'top' | 'bottom';
+    indicatorColor?: TabsProps$1['indicatorColor'];
+    textColor?: TabsProps$1['textColor'];
+}
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, Tabs as default };
+export type { CustomTabProps, TabItem, TabsProps };

package/dist/Tabs/index.esm.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import { useTheme, Box, Tab, Tabs as Tabs$1, alpha } from '@mui/material';
+
+// Custom Tab Component
+const CustomTab = React.forwardRef(({ badge, sx, label, ...props }, ref) => {
+    const theme = useTheme();
+    const tabLabel = badge ? React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } }, label, React.createElement(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(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 = 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: 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: alpha(theme.palette.action.hover, 0.12),
+                        },
+                    },
+                    '& .MuiTabs-indicator': {
+                        display: 'none',
+                    },
+                };
+            case 'outlined':
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                        border: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
+                        borderRadius: theme.shape.borderRadius,
+                        margin: '0 2px',
+                        '&.Mui-selected': {
+                            borderColor: theme.palette.primary.main,
+                            backgroundColor: alpha(theme.palette.primary.main, 0.08),
+                            color: theme.palette.primary.main,
+                        },
+                        '&:hover': {
+                            borderColor: 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: 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(Box, { ref }, React.createElement(Tabs$1, {
+        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(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexDirection: 'row-reverse' } }, item.icon, item.label);
+                    break;
+                case 'top':
+                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5, flexDirection: 'column' } }, item.icon, item.label);
+                    break;
+                case 'bottom':
+                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5, flexDirection: 'column-reverse' } }, item.icon, item.label);
+                    break;
+                default: // 'start'
+                    labelContent = React.createElement(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';
+
+export { Tabs, Tabs as default };