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

Patreon Studio Design System

'use client';
import cx from 'classnames';
import React, { useEffect, useRef } from 'react';
import { BodyText } from '~/components/BodyText';
import { IconCheckmark, IconIndeterminate } from '~/components/Icon';
import styles from './Checkbox.module.css';
const sizeToSizeClass = {
    sm: styles.sizeSm,
    md: styles.sizeMd,
    lg: styles.sizeLg,
};
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, ellipsis, }, givenRef) {
    const localRef = useRef(null);
    const ref = givenRef ?? localRef;
    const isChecked = checked || false;
    useEffect(() => {
        if (ref.current) {
            ref.current.indeterminate = indeterminate;
        }
    });
    const classList = cx(styles.root, sizeToSizeClass[size], {
        [styles.labelPositionLeft]: labelPosition === 'left',
        [styles.disabled]: disabled,
    });
    return (<label className={classList}>
      <div className={styles.checkboxContainer}>
        <input className={styles.checkbox} 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} type={type} value={value}/>

        <div className={styles.syntheticCheckbox} data-tag="synthetic-container">
          {indeterminate ? <IconIndeterminate color="inherit"/> : isChecked ? <IconCheckmark color="inherit"/> : null}
        </div>
      </div>

      {!hideLabel && (<BodyText ellipsis={ellipsis} as="span" size={size} color="inherit" data-tag="label" className={cx(styles.labelContainer, { [styles.elementContainer]: typeof label !== 'string' })}>
          {label}
        </BodyText>)}
    </label>);
});
//# sourceMappingURL=index.jsx.map