@unicity/design-system/dist/components/ToggleButton/ToggleButton.js

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ToggleButton as MuiToggleButton, ToggleButtonGroup as MuiToggleButtonGroup, Box, Typography, } from '@mui/material';
import { styled } from '@mui/material/styles';
const StyledToggleButtonGroup = styled(MuiToggleButtonGroup)(({ theme, variant = 'default', size = 'medium' }) => ({
    '& .MuiToggleButton-root': {
        border: 'none',
        borderRadius: theme.shape.borderRadius,
        margin: theme.spacing(0.25),
        transition: theme.transitions.create(['background-color', 'box-shadow'], {
            duration: theme.transitions.duration.short,
        }),
        ...(size === 'small' && {
            padding: theme.spacing(0.5, 1),
            fontSize: theme.typography.body2.fontSize,
        }),
        ...(size === 'large' && {
            padding: theme.spacing(1.5, 2),
            fontSize: theme.typography.h6.fontSize,
        }),
        ...(variant === 'outlined' && {
            border: `1px solid ${theme.palette.divider}`,
            '&.Mui-selected': {
                border: `1px solid ${theme.palette.primary.main}`,
                backgroundColor: theme.palette.primary.main + '10',
            },
        }),
        ...(variant === 'contained' && {
            backgroundColor: theme.palette.grey[100],
            '&.Mui-selected': {
                backgroundColor: theme.palette.primary.main,
                color: theme.palette.primary.contrastText,
                '&:hover': {
                    backgroundColor: theme.palette.primary.dark,
                },
            },
            '&:hover': {
                backgroundColor: theme.palette.grey[200],
            },
        }),
    },
}));
const StyledToggleButton = styled(MuiToggleButton)(({ theme, variant = 'default', size = 'medium', color = 'primary' }) => ({
    border: 'none',
    borderRadius: theme.shape.borderRadius,
    transition: theme.transitions.create(['background-color', 'box-shadow'], {
        duration: theme.transitions.duration.short,
    }),
    ...(size === 'small' && {
        padding: theme.spacing(0.5, 1),
        fontSize: theme.typography.body2.fontSize,
    }),
    ...(size === 'large' && {
        padding: theme.spacing(1.5, 2),
        fontSize: theme.typography.h6.fontSize,
    }),
    ...(variant === 'outlined' && {
        border: `1px solid ${theme.palette.divider}`,
        '&.Mui-selected': {
            border: `1px solid ${theme.palette[color].main}`,
            backgroundColor: theme.palette[color].main + '10',
            color: theme.palette[color].main,
        },
    }),
    ...(variant === 'contained' && {
        backgroundColor: theme.palette.grey[100],
        '&.Mui-selected': {
            backgroundColor: theme.palette[color].main,
            color: theme.palette[color].contrastText,
            '&:hover': {
                backgroundColor: theme.palette[color].dark,
            },
        },
        '&:hover': {
            backgroundColor: theme.palette.grey[200],
        },
    }),
}));
export const ToggleButton = ({ value, selected = false, variant = 'default', size = 'medium', color = 'primary', children, ...props }) => {
    return (_jsx(StyledToggleButton, { value: value, selected: selected, variant: variant, size: size, color: color, ...props, children: children }));
};
export const ToggleButtonGroup = ({ options, value, onChange, multiple = false, variant = 'default', size = 'medium', color = 'primary', orientation = 'horizontal', exclusive = true, disabled = false, required = false, fullWidth = false, sx, }) => {
    const handleChange = (event, newValue) => {
        if (disabled)
            return;
        // Handle required constraint
        if (required && (!newValue || (Array.isArray(newValue) && newValue.length === 0))) {
            return;
        }
        onChange?.(newValue);
    };
    return (_jsx(StyledToggleButtonGroup, { value: value, onChange: handleChange, exclusive: exclusive, variant: variant, size: size, orientation: orientation, disabled: disabled, sx: {
            ...(fullWidth && {
                width: '100%',
                '& .MuiToggleButton-root': {
                    flex: 1,
                },
            }),
            ...sx,
        }, children: options.map((option) => (_jsxs(MuiToggleButton, { value: option.value, disabled: option.disabled || disabled, title: option.tooltip, sx: {
                display: 'flex',
                alignItems: 'center',
                gap: 1,
                ...(size === 'small' && {
                    padding: 0.5,
                    fontSize: '0.875rem',
                }),
                ...(size === 'large' && {
                    padding: 1.5,
                    fontSize: '1.125rem',
                }),
            }, children: [option.icon, option.label && (_jsx(Box, { component: "span", children: typeof option.label === 'string' ? (_jsx(Typography, { variant: "inherit", component: "span", children: option.label })) : (option.label) }))] }, option.value))) }));
};
//# sourceMappingURL=ToggleButton.js.map