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

Design System do EventX

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { colors, typography, spacing, borderRadius, transitions } from '../tokens/design-tokens';
// Container do tag
const TagContainer = styled.div `
  display: inline-flex;
  align-items: center;
  gap: ${spacing[1]};
  border-radius: ${borderRadius.full};
  font-family: ${typography.fontFamily.primary};
  font-weight: ${typography.fontWeight.medium};
  white-space: nowrap;
  transition: all ${transitions.duration[200]} ${transitions.easing.inOut};

  ${({ size }) => {
    switch (size) {
        case 'sm':
            return css `
          padding: ${spacing[1]} ${spacing[2]};
          font-size: ${typography.fontSize.xs};
          line-height: ${typography.lineHeight.tight};
          min-height: 20px;
        `;
        case 'lg':
            return css `
          padding: ${spacing[2]} ${spacing[4]};
          font-size: ${typography.fontSize.base};
          line-height: ${typography.lineHeight.relaxed};
          min-height: 32px;
        `;
        default:
            return css `
          padding: ${spacing[1]} ${spacing[3]};
          font-size: ${typography.fontSize.sm};
          line-height: ${typography.lineHeight.normal};
          min-height: 24px;
        `;
    }
}}
`;
// 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]};
  `,
    outline: css `
    background-color: transparent;
    color: ${colors.neutral[700]};
    border: 1px solid ${colors.neutral[300]};
  `,
};
const StyledTag = styled(TagContainer) `
  ${({ variant = 'primary' }) => variantStyles[variant]}
`;
// Botão de remoção
const RemoveButton = styled.button `
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: ${borderRadius.full};
  cursor: pointer;
  padding: 0;
  margin-left: ${spacing[1]};
  transition: all ${transitions.duration[200]} ${transitions.easing.inOut};
  color: inherit;
  opacity: 0.7;

  &:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
  }

  &:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  ${({ size }) => {
    switch (size) {
        case 'sm':
            return css `
          width: 14px;
          height: 14px;
        `;
        case 'lg':
            return css `
          width: 20px;
          height: 20px;
        `;
        default:
            return css `
          width: 16px;
          height: 16px;
        `;
    }
}}
`;
// Ícone de remoção
const RemoveIcon = styled.svg `
  width: ${({ size }) => {
    switch (size) {
        case 'sm':
            return '8px';
        case 'lg':
            return '12px';
        default:
            return '10px';
    }
}};
  height: ${({ size }) => {
    switch (size) {
        case 'sm':
            return '8px';
        case 'lg':
            return '12px';
        default:
            return '10px';
    }
}};
  fill: currentColor;
`;
export const Tag = ({ variant = 'primary', size = 'md', children, onRemove, removable = false, className, ...props }) => {
    const handleRemove = (event) => {
        event.stopPropagation();
        onRemove?.();
    };
    return (_jsxs(StyledTag, { variant: variant, size: size, className: className, ...props, children: [_jsx("span", { children: children }), removable && (_jsx(RemoveButton, { size: size, onClick: handleRemove, "aria-label": "Remover tag", type: "button", children: _jsx(RemoveIcon, { size: size, viewBox: "0 0 24 24", children: _jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }))] }));
};