@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
43 lines • 1.6 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { styled } from '@mui/material/styles';
import { Tabs, Tab, Box } from '@mui/material';
export const StyledTabs = styled(Tabs)(({ theme }) => ({
borderBottom: `1px solid ${theme.palette.divider}`,
minHeight: '48px',
'& .MuiTabs-indicator': {
height: '3px',
borderRadius: '3px 3px 0 0',
},
'& .MuiTabs-flexContainer': {
gap: theme.spacing(1),
},
}));
export const StyledTab = styled(Tab)(({ theme }) => ({
textTransform: 'none',
minWidth: '0',
minHeight: '48px',
padding: theme.spacing(1, 2),
fontSize: theme.typography.body1.fontSize,
fontWeight: theme.typography.fontWeightMedium,
color: theme.palette.text.secondary,
borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`,
'&:hover': {
color: theme.palette.primary.main,
backgroundColor: theme.palette.action.hover,
},
'&.Mui-selected': {
color: theme.palette.primary.main,
fontWeight: theme.typography.fontWeightMedium,
},
'&.Mui-disabled': {
color: theme.palette.text.disabled,
},
'& .MuiTab-iconWrapper': {
marginBottom: '0',
marginRight: theme.spacing(1),
},
}));
export const TabPanel = ({ children, value, index, ...other }) => {
return (_jsx(Box, { role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, ...other, children: value === index && (_jsx(Box, { sx: { p: 3 }, children: children })) }));
};
//# sourceMappingURL=Tabs.style.js.map