import { clsx } from 'clsx';
import LoaderIcon from '#/icons/original/Loader.svg';
import type { iconSize } from '#/styles/tokens.css';
import * as styles from './Spinner.css';
type SpinnerProps = {
className?: string;
/** Tint applied to the spinner. */
color?: 'white' | 'default';
/** Accessible label announced by the `progressbar` role (e.g. "Loading GIF"). */
label: string | null;
/** Icon size token; defaults to `_3xl`. */
size?: keyof typeof iconSize;
};
/**
* Web loading spinner: a continuously rotating {@link LoaderIcon} wrapped in a `progressbar` live region.
*
* @param color tint applied to the spinner; defaults to 'white'
* @param label accessible label for the `progressbar` role
* @param size icon size token; defaults to `_3xl`
*/
export function Spinner({ className, color = 'white', label, size = '_3xl' }: SpinnerProps) {
return (
<span
aria-hidden={label === null}
aria-label={label || undefined}
className={clsx(styles.spinner({ color }), className)}
role="progressbar"
>
<LoaderIcon className={styles.icon[size]} />
</span>
);
}