import { borders } from '@mui/system';

const borders = compose(
  border,
  borderTop,
  borderRight,
  borderBottom,
  borderLeft,
  borderColor,
  borderTopColor,
  borderRightColor,
  borderBottomColor,
  borderLeftColor,
  borderRadius,
  outline,
  outlineColor,
);

<Box border={1}>1px solid border</Box>
<Box border={2}>2px solid border</Box>
<Box border={0}>No border</Box>

export function borderTransform(value) {
  if (typeof value !== 'number') {
    return value;
  }
  return `${value}px solid`;
}

export const border = createBorderStyle('border', borderTransform);

<Box borderTop={1}>Top border</Box>
<Box borderRight={2}>Right border</Box>
<Box borderBottom={1}>Bottom border</Box>
<Box borderLeft={1}>Left border</Box>

export const borderTop = createBorderStyle('borderTop', borderTransform);
export const borderRight = createBorderStyle('borderRight', borderTransform);
export const borderBottom = createBorderStyle('borderBottom', borderTransform);
export const borderLeft = createBorderStyle('borderLeft', borderTransform);

<Box border={1} borderColor="primary.main">
  Primary border
</Box>

<Box border={1} borderColor="error.main">
  Error border
</Box>

<Box border={1} borderColor="divider">
  Divider border
</Box>

<Box
  border={1}
  borderTopColor="primary.main"
  borderRightColor="secondary.main"
  borderBottomColor="error.main"
  borderLeftColor="warning.main"
>
  Multi-color borders
</Box>

export const borderColor = createBorderStyle('borderColor');
export const borderTopColor = createBorderStyle('borderTopColor');
export const borderRightColor = createBorderStyle('borderRightColor');
export const borderBottomColor = createBorderStyle('borderBottomColor');
export const borderLeftColor = createBorderStyle('borderLeftColor');

<Box border={1} borderRadius={1}>
  Default radius (theme.shape.borderRadius)
</Box>

<Box border={1} borderRadius={2}>
  2x theme radius
</Box>

<Box border={1} borderRadius="50%">
  Circle
</Box>

<Box border={1} borderRadius="4px">
  Custom radius
</Box>

export const borderRadius = (props) => {
  if (props.borderRadius !== undefined && props.borderRadius !== null) {
    const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
    const styleFromPropValue = (propValue) => ({
      borderRadius: getValue(transformer, propValue),
    });
    return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
  }
  return null;
};

<Box outline={1}>1px solid outline</Box>
<Box outline={2}>2px solid outline</Box>

export const outline = createBorderStyle('outline', borderTransform);

<Box outline={2} outlineColor="primary.main">
  Primary outline
</Box>

export const outlineColor = createBorderStyle('outlineColor');

<Box
  border={{ xs: 0, sm: 1, md: 2 }}
  borderColor={{ xs: 'divider', md: 'primary.main' }}
  borderRadius={{ xs: 1, md: 2 }}
>
  Responsive borders
</Box>

<Box
  border={1}
  borderColor="divider"
  borderRadius={2}
  p={2}
>
  Card with border
</Box>

<Box
  sx={{
    border: 1,
    borderColor: 'divider',
    '&:focus': {
      outline: 2,
      outlineColor: 'primary.main',
    },
  }}
>
  Focus me
</Box>

<Box
  sx={{
    border: '2px dashed',
    borderColor: 'text.secondary',
    borderRadius: 1,
  }}
>
  Dashed border
</Box>

<Box
  sx={{
    border: '2px solid transparent',
    borderRadius: 2,
    backgroundImage: (theme) =>
      `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}), ` +
      `linear-gradient(to right, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
    backgroundOrigin: 'border-box',
    backgroundClip: 'padding-box, border-box',
  }}
>
  Gradient border
</Box>

<Box
  sx={{
    border: 1,
    borderColor: 'divider',
    borderRadius: 1,
    '&:hover': {
      borderColor: 'primary.main',
    },
  }}
>
  Hover for border color change
</Box>

import { createTheme } from '@mui/system';

const theme = createTheme({
  shape: {
    borderRadius: 4, // Default border radius in px
  },
  palette: {
    divider: 'rgba(0, 0, 0, 0.12)',
  },
});

import { Box } from '@mui/system';

function BorderedCard() {
  return (
    <Box
      border={1}
      borderColor="divider"
      borderRadius={2}
      p={2}
    >
      Type-safe borders
    </Box>
  );
}