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

Design System do EventX

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { colors, spacing, borderRadius, transitions } from '../tokens/design-tokens';
// Container do checkbox
const CheckboxContainer = styled.label `
  display: inline-flex;
  align-items: center;
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  user-select: none;
  gap: ${spacing[2]};
  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
`;
// Input nativo (escondido)
const HiddenInput = styled.input `
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
`;
// Checkbox customizado
const CheckboxBox = styled.div `
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${colors.neutral[50]};
  border: 2px solid ${colors.neutral[300]};
  border-radius: ${borderRadius.base};
  transition: all ${transitions.duration[200]} ${transitions.easing.inOut};
  flex-shrink: 0;

  ${({ size }) => {
    switch (size) {
        case 'sm':
            return css `
          width: 16px;
          height: 16px;
        `;
        case 'lg':
            return css `
          width: 24px;
          height: 24px;
        `;
        default:
            return css `
          width: 20px;
          height: 20px;
        `;
    }
}}

  ${({ checked, variant }) => {
    if (checked) {
        switch (variant) {
            case 'error':
                return css `
            background-color: ${colors.semantic.error[500]};
            border-color: ${colors.semantic.error[500]};
          `;
            case 'success':
                return css `
            background-color: ${colors.semantic.success[500]};
            border-color: ${colors.semantic.success[500]};
          `;
            default:
                return css `
            background-color: ${colors.brand.primary[950]};
            border-color: ${colors.brand.primary[950]};
          `;
        }
    }
    return css ``;
}}

  ${({ disabled, checked, variant }) => {
    if (!disabled) {
        if (checked) {
            switch (variant) {
                case 'error':
                    return css `
              &:hover {
                background-color: ${colors.semantic.error[600]};
                border-color: ${colors.semantic.error[600]};
              }
            `;
                case 'success':
                    return css `
              &:hover {
                background-color: ${colors.semantic.success[600]};
                border-color: ${colors.semantic.success[600]};
              }
            `;
                default:
                    return css `
              &:hover {
                background-color: ${colors.brand.primary[900]};
                border-color: ${colors.brand.primary[900]};
              }
            `;
            }
        }
        else {
            return css `
          &:hover {
            border-color: ${colors.neutral[400]};
          }
        `;
        }
    }
    return css ``;
}}

  ${({ disabled }) => disabled &&
    css `
      background-color: ${colors.neutral[100]};
      border-color: ${colors.neutral[300]};
      cursor: not-allowed;
    `}
`;
// Ícone de check
const CheckIcon = styled.svg `
  width: ${({ size }) => {
    switch (size) {
        case 'sm':
            return '10px';
        case 'lg':
            return '16px';
        default:
            return '12px';
    }
}};
  height: ${({ size }) => {
    switch (size) {
        case 'sm':
            return '10px';
        case 'lg':
            return '16px';
        default:
            return '12px';
    }
}};
  fill: ${colors.neutral[50]};
  opacity: 0;
  transition: opacity ${transitions.duration[200]} ${transitions.easing.inOut};

  ${({ size }) => {
    switch (size) {
        case 'sm':
            return css `
          margin: 2px;
        `;
        case 'lg':
            return css `
          margin: 3px;
        `;
        default:
            return css `
          margin: 2px;
        `;
    }
}}
`;
// Label do checkbox
const CheckboxLabel = styled.span `
  font-family: inherit;
  color: ${colors.neutral[950]};
  line-height: 1.4;

  ${({ size }) => {
    switch (size) {
        case 'sm':
            return css `
          font-size: 14px;
        `;
        case 'lg':
            return css `
          font-size: 18px;
        `;
        default:
            return css `
          font-size: 16px;
        `;
    }
}}
`;
export const Checkbox = forwardRef(({ checked = false, onChange, disabled = false, label, size = 'md', variant = 'default', className, name, id, required = false, ...props }, ref) => {
    const handleChange = (event) => {
        if (!disabled) {
            onChange?.(event.target.checked);
        }
    };
    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
    return (_jsxs(CheckboxContainer, { disabled: disabled, className: className, children: [_jsx(HiddenInput, { ref: ref, type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled, name: name, id: checkboxId, required: required, ...props }), _jsx(CheckboxBox, { checked: checked, disabled: disabled, size: size, variant: variant, children: checked && (_jsx(CheckIcon, { size: size, viewBox: "0 0 24 24", children: _jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) })) }), label && (_jsx(CheckboxLabel, { size: size, children: label }))] }));
});
Checkbox.displayName = 'Checkbox';