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

Design System do EventX

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { colors, typography, spacing, borderRadius, transitions } from '../tokens/design-tokens';
// Estilos base do input
const baseInputStyles = css `
  display: block;
  width: 100%;
  border: 2px solid ${colors.neutral[300]};
  border-radius: ${borderRadius.base};
  background-color: ${colors.neutral[50]};
  color: ${colors.neutral[950]};
  font-family: ${typography.fontFamily.secondary};
  font-weight: ${typography.fontWeight.normal};
  transition: all ${transitions.duration[200]} ${transitions.easing.inOut};
  box-sizing: border-box;

  &::placeholder {
    color: ${colors.neutral[500]};
  }

  &:focus {
    outline: none;
    border-color: ${colors.brand.primary[500]};
    box-shadow: 0 0 0 3px ${colors.brand.primary[100]};
  }

  &:disabled {
    background-color: ${colors.neutral[100]};
    color: ${colors.neutral[500]};
    cursor: not-allowed;
    opacity: 0.6;
  }

  &:read-only {
    background-color: ${colors.neutral[100]};
    color: ${colors.neutral[700]};
  }
`;
// Variantes de estado
const variantStyles = {
    default: css `
    border-color: ${colors.neutral[300]};

    &:hover:not(:disabled):not(:read-only) {
      border-color: ${colors.neutral[400]};
    }
  `,
    error: css `
    border-color: ${colors.semantic.error[500]};

    &:focus {
      border-color: ${colors.semantic.error[500]};
      box-shadow: 0 0 0 3px ${colors.semantic.error[100]};
    }

    &:hover:not(:disabled):not(:read-only) {
      border-color: ${colors.semantic.error[600]};
    }
  `,
    success: css `
    border-color: ${colors.semantic.success[500]};

    &:focus {
      border-color: ${colors.semantic.success[500]};
      box-shadow: 0 0 0 3px ${colors.semantic.success[100]};
    }

    &:hover:not(:disabled):not(:read-only) {
      border-color: ${colors.semantic.success[600]};
    }
  `,
};
// Tamanhos do input
const sizeStyles = {
    sm: css `
    padding: ${spacing[2]} ${spacing[3]};
    font-size: ${typography.fontSize.sm};
    line-height: ${typography.lineHeight.normal};
    min-height: 32px;
  `,
    md: css `
    padding: ${spacing[3]} ${spacing[4]};
    font-size: ${typography.fontSize.base};
    line-height: ${typography.lineHeight.normal};
    min-height: 40px;
  `,
    lg: css `
    padding: ${spacing[4]} ${spacing[5]};
    font-size: ${typography.fontSize.lg};
    line-height: ${typography.lineHeight.relaxed};
    min-height: 48px;
  `,
};
// Componente styled do input
const StyledInput = styled.input `
  ${baseInputStyles}
  ${({ variant = 'default' }) => variantStyles[variant]}
  ${({ size = 'md' }) => sizeStyles[size]}
  ${({ fullWidth }) => fullWidth && css `width: 100%;`}
`;
export const Input = forwardRef(({ variant = 'default', size = 'md', disabled = false, fullWidth = true, placeholder, value, onChange, onFocus, onBlur, type = 'text', name, id, required = false, autoComplete, maxLength, minLength, pattern, readOnly = false, autoFocus = false, className, ...props }, ref) => {
    return (_jsx(StyledInput, { ref: ref, variant: variant, size: size, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, type: type, name: name, id: id, required: required, autoComplete: autoComplete, maxLength: maxLength, minLength: minLength, pattern: pattern, readOnly: readOnly, autoFocus: autoFocus, className: className, ...props }));
});
Input.displayName = 'Input';