@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
76 lines • 3 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Tooltip as MuiTooltip, Fade, Grow, Slide, Zoom, } from '@mui/material';
import { styled } from '@mui/material/styles';
const StyledTooltip = styled(MuiTooltip, {
shouldForwardProp: (prop) => prop !== 'variant',
})(({ theme, variant = 'default' }) => {
const getVariantStyles = () => {
switch (variant) {
case 'light':
return {
backgroundColor: theme.palette.common.white,
color: theme.palette.text.primary,
border: `1px solid ${theme.palette.divider}`,
boxShadow: theme.shadows[2],
};
case 'dark':
return {
backgroundColor: theme.palette.grey[800],
color: theme.palette.common.white,
};
case 'error':
return {
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText,
};
case 'warning':
return {
backgroundColor: theme.palette.warning.main,
color: theme.palette.warning.contrastText,
};
case 'info':
return {
backgroundColor: theme.palette.info.main,
color: theme.palette.info.contrastText,
};
case 'success':
return {
backgroundColor: theme.palette.success.main,
color: theme.palette.success.contrastText,
};
default:
return {};
}
};
return {
'& .MuiTooltip-tooltip': {
...getVariantStyles(),
fontSize: theme.typography.pxToRem(12),
fontWeight: 500,
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(0.75, 1.5),
maxWidth: 300,
},
'& .MuiTooltip-arrow': {
color: variant === 'light' ? theme.palette.common.white : undefined,
},
};
});
const getTransitionComponent = (animation) => {
switch (animation) {
case 'grow':
return Grow;
case 'slide':
return Slide;
case 'zoom':
return Zoom;
case 'fade':
default:
return Fade;
}
};
export const Tooltip = ({ children, title, variant = 'default', animation = 'fade', arrow = false, enterDelay = 500, leaveDelay = 0, interactive = false, placement = 'top', ...props }) => {
const TransitionComponent = getTransitionComponent(animation);
return (_jsx(StyledTooltip, { title: title, variant: variant, arrow: arrow, enterDelay: enterDelay, leaveDelay: leaveDelay, disableInteractive: !interactive, placement: placement, TransitionComponent: TransitionComponent, ...props, children: children }));
};
//# sourceMappingURL=Tooltip.js.map