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

Patreon Studio Design System

'use client';
import cx from 'classnames';
import React from 'react';
import { useTokenModes } from '~/components/TokenModeProvider';
import styles from './LoadingSpinner.module.css';
const WIDTH = 64;
const RADIUS = WIDTH / 2;
export function LoadingSpinner({ ariaLabel = 'Loading', color = 'default', size = 'lg', id, 'data-tag': dataTag, className, style, }) {
    const { currentColorMode } = useTokenModes();
    const classList = cx(styles.root, {
        [styles.colorPrimary]: color === 'default',
        [styles.colorLight]: color === 'light',
        [styles.colorDark]: color === 'dark',
        [styles.colorInverted]: color === 'inverted',
        [styles.colorActionBase]: color === 'actionBase',
        [styles.sizeXxs]: size === 'xxs',
        [styles.sizeXs]: size === 'xs',
        [styles.sizeSm]: size === 'sm',
        [styles.sizeMd]: size === 'md',
        [styles.sizeLg]: size === 'lg',
        [styles.colorModeDark]: currentColorMode === 'dark',
        [styles.colorModeAuto]: currentColorMode === 'auto',
    }, className);
    return (<svg viewBox={`0 0 ${WIDTH} ${WIDTH}`} id={id} aria-label={ariaLabel} data-tag={dataTag} className={classList} style={style}>
      <circle cx={RADIUS} cy={RADIUS} r={RADIUS} className={styles.circle}/>
      <circle color={color} cx={RADIUS} cy={RADIUS} r={RADIUS} strokeLinecap="round" className={styles.arc}/>
    </svg>);
}
//# sourceMappingURL=index.jsx.map