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

Design System do EventX

import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { colors, typography, spacing, borderRadius, transitions } from '../tokens/design-tokens';
// Estilos base do badge
const baseBadgeStyles = css `
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: ${borderRadius.full};
  font-family: ${typography.fontFamily.primary};
  font-weight: ${typography.fontWeight.medium};
  text-transform: uppercase;
  letter-spacing: ${typography.letterSpacing.wide};
  transition: all ${transitions.duration[200]} ${transitions.easing.inOut};
  white-space: nowrap;
`;
// Variantes de cor
const variantStyles = {
    primary: css `
    background-color: ${colors.brand.primary[100]};
    color: ${colors.brand.primary[800]};
  `,
    secondary: css `
    background-color: ${colors.brand.secondary[100]};
    color: ${colors.brand.secondary[800]};
  `,
    success: css `
    background-color: ${colors.semantic.success[100]};
    color: ${colors.semantic.success[700]};
  `,
    error: css `
    background-color: ${colors.semantic.error[100]};
    color: ${colors.semantic.error[700]};
  `,
    warning: css `
    background-color: ${colors.semantic.warning[100]};
    color: ${colors.semantic.warning[700]};
  `,
    info: css `
    background-color: ${colors.semantic.info[100]};
    color: ${colors.semantic.info[700]};
  `,
};
// Tamanhos do badge
const sizeStyles = {
    sm: css `
    padding: ${spacing[1]} ${spacing[2]};
    font-size: ${typography.fontSize.xs};
    line-height: ${typography.lineHeight.tight};
    min-height: 20px;
  `,
    md: css `
    padding: ${spacing[2]} ${spacing[3]};
    font-size: ${typography.fontSize.sm};
    line-height: ${typography.lineHeight.normal};
    min-height: 24px;
  `,
    lg: css `
    padding: ${spacing[3]} ${spacing[4]};
    font-size: ${typography.fontSize.base};
    line-height: ${typography.lineHeight.relaxed};
    min-height: 28px;
  `,
};
const StyledBadge = styled.span `
  ${baseBadgeStyles}
  ${({ variant = 'primary' }) => variantStyles[variant]}
  ${({ size = 'md' }) => sizeStyles[size]}
`;
export const Badge = ({ variant = 'primary', size = 'md', children, className, ...props }) => {
    return (_jsx(StyledBadge, { variant: variant, size: size, className: className, ...props, children: children }));
};
Badge.displayName = 'Badge';