@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
83 lines • 3.15 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Paper as MuiPaper, } from '@mui/material';
import { styled } from '@mui/material/styles';
const StyledPaper = styled(MuiPaper, {
shouldForwardProp: (prop) => !['customVariant', 'padding', 'borderRadius'].includes(prop),
})(({ theme, customVariant = 'elevation', padding = 'medium', borderRadius = 'medium' }) => ({
transition: theme.transitions.create(['box-shadow', 'transform'], {
duration: theme.transitions.duration.short,
}),
// Padding variants
...(padding === 'small' && {
padding: theme.spacing(1),
}),
...(padding === 'medium' && {
padding: theme.spacing(2),
}),
...(padding === 'large' && {
padding: theme.spacing(3),
}),
// Border radius variants
...(borderRadius === 'none' && {
borderRadius: 0,
}),
...(borderRadius === 'small' && {
borderRadius: `calc(${theme.shape.borderRadius}px * 0.5)`,
}),
...(borderRadius === 'medium' && {
borderRadius: theme.shape.borderRadius,
}),
...(borderRadius === 'large' && {
borderRadius: `calc(${theme.shape.borderRadius}px * 2)`,
}),
...(borderRadius === 'circular' && {
borderRadius: '50%',
}),
// Variant styles
...(customVariant === 'filled' && {
backgroundColor: theme.palette.grey[50],
border: 'none',
boxShadow: 'none',
'&:hover': {
backgroundColor: theme.palette.grey[100],
},
}),
}));
export const Paper = ({ variant = 'elevation', elevation = 1, padding = 'medium', borderRadius = 'medium', interactive = false, clickable = false, onClick, children, width, height, centered = false, backgroundColor, textColor, ...props }) => {
const handleClick = () => {
if (clickable && onClick) {
onClick();
}
};
// Map custom variants to MUI variants
const getMuiVariant = () => {
if (variant === 'outlined')
return 'outlined';
if (variant === 'elevation')
return 'elevation';
return undefined; // For 'filled' variant, we use custom styling
};
return (_jsx(StyledPaper, { variant: getMuiVariant(), customVariant: variant, elevation: variant === 'elevation' ? elevation : 0, padding: padding, borderRadius: borderRadius, onClick: handleClick, ...props, sx: {
width,
height,
cursor: clickable ? 'pointer' : 'default',
backgroundColor,
color: textColor,
...(interactive && {
'&:hover': {
transform: 'translateY(-2px)',
boxShadow: (theme) => variant === 'elevation'
? theme.shadows[Math.min(elevation + 2, 24)]
: theme.shadows[2],
},
}),
...(centered && {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
}),
...props.sx,
}, children: children }));
};
//# sourceMappingURL=Paper.js.map