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

Design System do EventX

import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { colors, typography, spacing, borderRadius, shadows, transitions } from '../tokens/design-tokens';
// Estilos base do botão
const baseButtonStyles = css `
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: ${borderRadius.base};
  font-family: ${typography.fontFamily.primary};
  font-weight: ${typography.fontWeight.semibold};
  text-decoration: none;
  cursor: pointer;
  transition: all ${transitions.duration[200]} ${transitions.easing.inOut};
  position: relative;
  overflow: hidden;

  &:focus {
    outline: 2px solid ${colors.brand.primary[500]};
    outline-offset: 2px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
`;
// Variantes de cor
const variantStyles = {
    primary: css `
    background-color: ${colors.brand.primary[950]};
    color: ${colors.neutral[50]};
    box-shadow: ${shadows.sm};

    &:hover:not(:disabled) {
      background-color: ${colors.brand.primary[900]};
      box-shadow: ${shadows.md};
      transform: translateY(-1px);
    }

    &:active:not(:disabled) {
      background-color: ${colors.brand.primary[800]};
      transform: translateY(0);
    }
  `,
    secondary: css `
    background-color: ${colors.brand.secondary[950]};
    color: ${colors.neutral[50]};
    box-shadow: ${shadows.sm};

    &:hover:not(:disabled) {
      background-color: ${colors.brand.secondary[900]};
      box-shadow: ${shadows.md};
      transform: translateY(-1px);
    }

    &:active:not(:disabled) {
      background-color: ${colors.brand.secondary[800]};
      transform: translateY(0);
    }
  `,
    outline: css `
    background-color: transparent;
    color: ${colors.brand.primary[950]};
    border: 2px solid ${colors.brand.primary[950]};

    &:hover:not(:disabled) {
      background-color: ${colors.brand.primary[950]};
      color: ${colors.neutral[50]};
      transform: translateY(-1px);
    }

    &:active:not(:disabled) {
      background-color: ${colors.brand.primary[900]};
      transform: translateY(0);
    }
  `,
    ghost: css `
    background-color: transparent;
    color: ${colors.brand.primary[950]};

    &:hover:not(:disabled) {
      background-color: ${colors.brand.primary[50]};
    }

    &:active:not(:disabled) {
      background-color: ${colors.brand.primary[100]};
    }
  `,
    danger: css `
    background-color: ${colors.semantic.error[500]};
    color: ${colors.neutral[50]};
    box-shadow: ${shadows.sm};

    &:hover:not(:disabled) {
      background-color: ${colors.semantic.error[600]};
      box-shadow: ${shadows.md};
      transform: translateY(-1px);
    }

    &:active:not(:disabled) {
      background-color: ${colors.semantic.error[700]};
      transform: translateY(0);
    }
  `,
};
// Tamanhos do botão
const sizeStyles = {
    sm: css `
    padding: ${spacing[2]} ${spacing[4]};
    font-size: ${typography.fontSize.sm};
    line-height: ${typography.lineHeight.tight};
    min-height: 32px;
  `,
    md: css `
    padding: ${spacing[3]} ${spacing[6]};
    font-size: ${typography.fontSize.base};
    line-height: ${typography.lineHeight.normal};
    min-height: 40px;
  `,
    lg: css `
    padding: ${spacing[4]} ${spacing[8]};
    font-size: ${typography.fontSize.lg};
    line-height: ${typography.lineHeight.relaxed};
    min-height: 48px;
  `,
};
// Componente styled do botão
const StyledButton = styled.button `
  ${baseButtonStyles}
  ${({ variant = 'primary' }) => variantStyles[variant]}
  ${({ size = 'md' }) => sizeStyles[size]}
  ${({ fullWidth }) => fullWidth && css `width: 100%;`}
`;
export const Button = ({ variant = 'primary', size = 'md', disabled = false, fullWidth = false, children, onClick, type = 'button', className, ...props }) => {
    return (_jsx(StyledButton, { variant: variant, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick, type: type, className: className, ...props, children: children }));
};