@zimyo/ui 1.1.4 → 1.1.5

package/dist/RadioGroup/index.esm.js

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useTheme, FormControl, FormLabel, Typography, RadioGroup as RadioGroup$1, Box, FormControlLabel, Radio, FormHelperText } from '@mui/material';
+
+const RadioGroup = React.forwardRef(({ label, options = [], value, defaultValue, onChange, name, disabled = false, required = false, error = false, helperText, row = false, size = 'medium', color = 'primary', sx = {}, radioSx = {}, labelSx = {}, ...props }, ref) => {
+    const theme = useTheme();
+    const [internalValue, setInternalValue] = React.useState(value || defaultValue || '');
+    // Sync with external value prop
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    };
+    const currentValue = value !== undefined ? value : internalValue;
+    return (jsxs(FormControl, { ref: ref, component: "fieldset", variant: "standard", disabled: disabled, required: required, error: error, sx: {
+            borderRadius: '8px',
+            ...sx,
+        }, ...props, children: [label && (jsxs(FormLabel, { component: "legend", sx: {
+                    fontWeight: 500,
+                    fontSize: size === 'small' ? '0.875rem' : '1rem',
+                    color: disabled
+                        ? theme.palette.text.disabled
+                        : error
+                            ? theme.palette.error.main
+                            : theme.palette.text.primary,
+                    '&.Mui-focused': {
+                        color: error
+                            ? theme.palette.error.main
+                            : `${theme.palette[color].main}`,
+                    },
+                    mb: 1,
+                    ...labelSx,
+                }, children: [label, required && (jsx(Typography, { component: "span", sx: {
+                            color: theme.palette.error.main,
+                            ml: 0.5,
+                            fontSize: 'inherit',
+                        }, children: "*" }))] })), jsx(RadioGroup$1, { name: name, value: currentValue, onChange: handleChange, row: row, sx: {
+                    gap: size === 'small' ? 1 : 1.5,
+                    '& .MuiFormControlLabel-root': {
+                        marginLeft: 0,
+                        marginRight: row ? 2 : 0,
+                    },
+                }, children: options.map((option) => (jsx(Box, { children: jsx(FormControlLabel, { value: option.value, disabled: disabled || option.disabled, control: jsx(Radio, { size: size, color: color, sx: {
+                                '&.Mui-checked': {
+                                    color: error
+                                        ? theme.palette.error.main
+                                        : `${theme.palette[color].main}`,
+                                },
+                                alignSelf: option.description ? 'flex-start' : 'center',
+                                mt: option.description ? 0.25 : 0,
+                                ...radioSx,
+                            } }), label: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [jsx(Typography, { variant: size === 'small' ? 'body2' : 'body1', sx: {
+                                        fontWeight: 400,
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.primary,
+                                        lineHeight: 1.5,
+                                    }, children: option.label }), option.description && (jsx(Typography, { variant: "caption", sx: {
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.secondary,
+                                        mt: 0.25,
+                                        lineHeight: 1.4,
+                                    }, children: option.description }))] }), sx: {
+                            alignItems: option.description ? 'flex-start' : 'center',
+                            margin: 0,
+                            display: 'flex',
+                            '& .MuiFormControlLabel-label': {
+                                ml: 1,
+                                flex: 1,
+                            },
+                            '& .MuiButtonBase-root': {
+                                p: size === 'small' ? 0.5 : 1,
+                            },
+                        } }) }, option.value))) }), helperText && (jsx(FormHelperText, { sx: {
+                    mt: 1,
+                    fontSize: size === 'small' ? '0.75rem' : '0.875rem',
+                    color: error
+                        ? theme.palette.error.main
+                        : theme.palette.text.secondary,
+                }, children: helperText }))] }));
+});
+
+export { RadioGroup, RadioGroup as default };

package/dist/RadioGroup/index.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+const RadioGroup = React.forwardRef(({ label, options = [], value, defaultValue, onChange, name, disabled = false, required = false, error = false, helperText, row = false, size = 'medium', color = 'primary', sx = {}, radioSx = {}, labelSx = {}, ...props }, ref) => {
+    const theme = material.useTheme();
+    const [internalValue, setInternalValue] = React.useState(value || defaultValue || '');
+    // Sync with external value prop
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    };
+    const currentValue = value !== undefined ? value : internalValue;
+    return (jsxRuntime.jsxs(material.FormControl, { ref: ref, component: "fieldset", variant: "standard", disabled: disabled, required: required, error: error, sx: {
+            borderRadius: '8px',
+            ...sx,
+        }, ...props, children: [label && (jsxRuntime.jsxs(material.FormLabel, { component: "legend", sx: {
+                    fontWeight: 500,
+                    fontSize: size === 'small' ? '0.875rem' : '1rem',
+                    color: disabled
+                        ? theme.palette.text.disabled
+                        : error
+                            ? theme.palette.error.main
+                            : theme.palette.text.primary,
+                    '&.Mui-focused': {
+                        color: error
+                            ? theme.palette.error.main
+                            : `${theme.palette[color].main}`,
+                    },
+                    mb: 1,
+                    ...labelSx,
+                }, children: [label, required && (jsxRuntime.jsx(material.Typography, { component: "span", sx: {
+                            color: theme.palette.error.main,
+                            ml: 0.5,
+                            fontSize: 'inherit',
+                        }, children: "*" }))] })), jsxRuntime.jsx(material.RadioGroup, { name: name, value: currentValue, onChange: handleChange, row: row, sx: {
+                    gap: size === 'small' ? 1 : 1.5,
+                    '& .MuiFormControlLabel-root': {
+                        marginLeft: 0,
+                        marginRight: row ? 2 : 0,
+                    },
+                }, children: options.map((option) => (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(material.FormControlLabel, { value: option.value, disabled: disabled || option.disabled, control: jsxRuntime.jsx(material.Radio, { size: size, color: color, sx: {
+                                '&.Mui-checked': {
+                                    color: error
+                                        ? theme.palette.error.main
+                                        : `${theme.palette[color].main}`,
+                                },
+                                alignSelf: option.description ? 'flex-start' : 'center',
+                                mt: option.description ? 0.25 : 0,
+                                ...radioSx,
+                            } }), label: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.Typography, { variant: size === 'small' ? 'body2' : 'body1', sx: {
+                                        fontWeight: 400,
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.primary,
+                                        lineHeight: 1.5,
+                                    }, children: option.label }), option.description && (jsxRuntime.jsx(material.Typography, { variant: "caption", sx: {
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.secondary,
+                                        mt: 0.25,
+                                        lineHeight: 1.4,
+                                    }, children: option.description }))] }), sx: {
+                            alignItems: option.description ? 'flex-start' : 'center',
+                            margin: 0,
+                            display: 'flex',
+                            '& .MuiFormControlLabel-label': {
+                                ml: 1,
+                                flex: 1,
+                            },
+                            '& .MuiButtonBase-root': {
+                                p: size === 'small' ? 0.5 : 1,
+                            },
+                        } }) }, option.value))) }), helperText && (jsxRuntime.jsx(material.FormHelperText, { sx: {
+                    mt: 1,
+                    fontSize: size === 'small' ? '0.75rem' : '0.875rem',
+                    color: error
+                        ? theme.palette.error.main
+                        : theme.palette.text.secondary,
+                }, children: helperText }))] }));
+});
+
+exports.RadioGroup = RadioGroup;
+exports.default = RadioGroup;

package/dist/Select/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SelectProps as SelectProps$1, SelectChangeEvent } from '@mui/material';
+
+interface OptionType {
+    label: string;
+    value: string | number;
+}
+interface SelectProps extends Omit<SelectProps$1, '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 Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<any>>;
+
+export { Select, Select as default };
+export type { SelectProps };

package/dist/Select/index.esm.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { useTheme, FormControl, Select as Select$1, OutlinedInput, IconButton, MenuItem, ListItemText, FormHelperText, Box, Chip } from '@mui/material';
+import { ExpandMore, Clear } from '@mui/icons-material';
+
+const Select = 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$1, { 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 })] }));
+});
+
+export { Select, Select as default };

package/dist/Select/index.js

@@ -0,0 +1,67 @@
+'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 Select = 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 })] }));
+});
+
+exports.Select = Select;
+exports.default = Select;

package/dist/Switch/index.d.ts

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

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 as Switch$1, FormHelperText } from '@mui/material';
+
+const Switch = 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$1, { 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 { Switch, Switch as default };

package/dist/Switch/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+const Switch = 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 })] }));
+});
+
+exports.Switch = Switch;
+exports.default = Switch;

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 };