eventx-design-system/dist/components/Divider.js

Design System do EventX

import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { colors, spacing, typography } from '../tokens/design-tokens';
// Estilos base do divider
const baseDividerStyles = css `
  border: none;
  background-color: ${colors.neutral[300]};
  margin: 0;
`;
// Orientação do divider
const orientationStyles = {
    horizontal: css `
    width: 100%;
    height: 1px;
    margin: ${spacing[4]} 0;
  `,
    vertical: css `
    width: 1px;
    height: 100%;
    margin: 0 ${spacing[4]};
  `,
};
// Variantes do divider
const variantStyles = {
    solid: css `
    background-color: ${colors.neutral[300]};
  `,
    dashed: css `
    background: repeating-linear-gradient(
      to right,
      ${colors.neutral[300]} 0,
      ${colors.neutral[300]} 4px,
      transparent 4px,
      transparent 8px
    );
  `,
    dotted: css `
    background: repeating-linear-gradient(
      to right,
      ${colors.neutral[300]} 0,
      ${colors.neutral[300]} 2px,
      transparent 2px,
      transparent 6px
    );
  `,
};
// Tamanhos do divider
const sizeStyles = {
    sm: css `
    ${({ orientation }) => orientation === 'vertical'
        ? 'width: 1px;'
        : 'height: 1px;'}
  `,
    md: css `
    ${({ orientation }) => orientation === 'vertical'
        ? 'width: 2px;'
        : 'height: 2px;'}
  `,
    lg: css `
    ${({ orientation }) => orientation === 'vertical'
        ? 'width: 4px;'
        : 'height: 4px;'}
  `,
};
// Estilos para divider com texto
const textDividerStyles = css `
  display: flex;
  align-items: center;
  text-align: center;
  color: ${colors.neutral[600]};
  font-family: ${typography.fontFamily.primary};
  font-size: ${typography.fontSize.sm};
  font-weight: ${typography.fontWeight.medium};
  margin: ${spacing[6]} 0;

  &::before,
  &::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid ${colors.neutral[300]};
  }

  &::before {
    margin-right: ${spacing[4]};
  }

  &::after {
    margin-left: ${spacing[4]};
  }
`;
const StyledDivider = styled.hr `
  ${baseDividerStyles}
  ${({ orientation = 'horizontal' }) => orientationStyles[orientation]}
  ${({ variant = 'solid' }) => variantStyles[variant]}
  ${({ size = 'md' }) => sizeStyles[size]}
  ${({ children }) => children && textDividerStyles}
`;
const DividerText = styled.span `
  padding: 0 ${spacing[2]};
`;
export const Divider = ({ orientation = 'horizontal', variant = 'solid', size = 'md', children, className, ...props }) => {
    if (children) {
        return (_jsx(StyledDivider, { orientation: orientation, variant: variant, size: size, className: className, ...props, children: _jsx(DividerText, { children: children }) }));
    }
    return (_jsx(StyledDivider, { orientation: orientation, variant: variant, size: size, className: className, ...props }));
};