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

Patreon Studio Design System

'use client';
import cx from 'classnames';
import React, { useCallback } from 'react';
import { IconCheckmark } from '~/components/Icon';
import { LoadingSpinner } from '~/components/LoadingSpinner';
import { filterForAriaProps } from '~/utilities/accessibility';
import styles from './Toggle.module.css';
export function Toggle({ disabled, id, onClick, isLoading, isOn, ...props }) {
    const handleClick = useCallback((e) => {
        if (!disabled) {
            onClick?.(e);
        }
    }, [disabled, onClick]);
    const handleKeyPress = useCallback((e) => {
        if (['Space', 'Enter'].includes(e.key)) {
            handleClick(e);
        }
    }, [handleClick]);
    return (<button className={cx(styles.container, {
            [styles.isOn]: isOn,
            [styles.disabled]: disabled,
            [styles.isLoading]: isLoading,
        })} aria-checked={isOn} aria-live="polite" aria-readonly={disabled} disabled={disabled} id={id} onClick={handleClick} onKeyPress={handleKeyPress} role="switch" type="button" {...filterForAriaProps(props)}>
      <div className={styles.handle}>
        <IconCheckmark color="inherit"/>
      </div>
      <div className={styles.loadingSpinnerWrapper}>
        <LoadingSpinner color="actionBase" size="xs"/>
      </div>
    </button>);
}
//# sourceMappingURL=index.jsx.map