@patreon/studio/module/components/Checkbox/index.jsx

Patreon Studio Design System

'use client';
import React, { useEffect, useRef } from 'react';
import { BodyText } from '../BodyText';
import { CheckMark, Indeterminate } from './Icons';
import { StyledCheckbox, StyledCheckboxContainer, StyledLabel, StyledSynthethicCheckbox, TextContainer, } from './styled-components';
export const Checkbox = React.forwardRef(function Checkbox({ autoFocus, checked, 'data-tag': dataTag, disabled, hideLabel, id, indeterminate = false, label, labelPosition = 'right', name, onBlur, onChange, onFocus, role = 'checkbox', size = 'md', type = 'checkbox', value, }, givenRef) {
    const localRef = useRef(null);
    const ref = givenRef ?? localRef;
    const isChecked = checked || false;
    useEffect(() => {
        if (ref.current) {
            ref.current.indeterminate = indeterminate;
        }
    });
    return (<StyledLabel disabled={disabled} labelPosition={labelPosition}>
      <StyledCheckboxContainer labelPosition={labelPosition} sizeValue={size}>
        <StyledCheckbox aria-checked={indeterminate ? 'mixed' : isChecked} aria-label={hideLabel && typeof label === 'string' ? label : undefined} 
    // TODO (legacied jsx-a11y/no-autofocus)
    // This failure is legacied in and should be updated. DO NOT COPY.
    // eslint-disable-next-line jsx-a11y/no-autofocus
    autoFocus={autoFocus} checked={isChecked} data-tag={dataTag} disabled={disabled} id={id} name={name} onBlur={onBlur} onChange={onChange} onFocus={onFocus} ref={ref} role={role} sizeValue={size} type={type} value={value}/>
        <StyledSynthethicCheckbox sizeValue={size} data-tag="synthetic-container">
          {indeterminate ? <Indeterminate size={size}/> : isChecked ? <CheckMark size={size}/> : null}
        </StyledSynthethicCheckbox>
      </StyledCheckboxContainer>

      {!hideLabel && (<TextContainer>
          <BodyText as="span" size={size} data-tag="label">
            {label}
          </BodyText>
        </TextContainer>)}
    </StyledLabel>);
});
//# sourceMappingURL=index.jsx.map