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

Design System do EventX

import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { colors, spacing, borderRadius, shadows, transitions } from '../tokens/design-tokens';
// Estilos base do card
const baseCardStyles = css `
  background-color: ${colors.neutral[50]};
  border-radius: ${borderRadius.lg};
  transition: all ${transitions.duration[200]} ${transitions.easing.inOut};
  box-sizing: border-box;
`;
// Variantes do card
const variantStyles = {
    default: css `
    box-shadow: ${shadows.sm};
    border: 1px solid ${colors.neutral[200]};
  `,
    elevated: css `
    box-shadow: ${shadows.lg};
    border: none;
  `,
    outlined: css `
    box-shadow: none;
    border: 2px solid ${colors.neutral[300]};
  `,
};
// Tamanhos de padding
const paddingStyles = {
    sm: css `
    padding: ${spacing[3]};
  `,
    md: css `
    padding: ${spacing[6]};
  `,
    lg: css `
    padding: ${spacing[8]};
  `,
    xl: css `
    padding: ${spacing[12]};
  `,
};
// Estilos interativos
const interactiveStyles = css `
  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
    box-shadow: ${shadows.xl};
  }

  &:active {
    transform: translateY(0);
  }
`;
const StyledCard = styled.div `
  ${baseCardStyles}
  ${({ variant = 'default' }) => variantStyles[variant]}
  ${({ padding = 'md' }) => paddingStyles[padding]}
  ${({ interactive }) => interactive && interactiveStyles}
`;
export const Card = ({ variant = 'default', padding = 'md', children, className, onClick, interactive = false, ...props }) => {
    return (_jsx(StyledCard, { variant: variant, padding: padding, className: className, onClick: onClick, interactive: interactive, ...props, children: children }));
};
Card.displayName = 'Card';