import { assignInlineVars } from "@vanilla-extract/dynamic";
import { cx, getLength } from "../../utils";
import * as styles from "./loading.css";
/**
 * A pulsing circle loading indicator.
 *
 * @param props - The component props.
 * @returns The rendered loading indicator.
 *
 * @example
 * ```tsx
 * <Pulse size={24} color="blue" />
 * ```
 */
export let Pulse = ({ size, color, className = "", style = {}, ...props }) => {
    let classes = cx(className, styles.pulse);
    let vars = assignInlineVars({
        [styles.loadingSize]: getLength(size),
        [styles.loadingColor]: color,
    });
    return <div {...props} style={{ ...vars, ...style }} className={classes}/>;
};
/**
 * A bouncing dots loading indicator.
 *
 * @param props - The component props.
 * @returns The rendered loading indicator.
 *
 * @example
 * ```tsx
 * <Bounce size="2em" />
 * ```
 */
export let Bounce = ({ className, size, color, style, ...props }) => {
    let classes = cx(className, styles.bounce);
    let vars = assignInlineVars({
        [styles.loadingSize]: getLength(size),
        [styles.loadingColor]: color,
    });
    return (<div {...props} style={{ ...vars, ...style }} className={classes}>
			<div className={styles.bounceDot}/>
			<div className={styles.bounceDot}/>
		</div>);
};
/**
 * A flowing dots loading indicator.
 *
 * @param props - The component props.
 * @returns The rendered loading indicator.
 *
 * @example
 * ```tsx
 * <Flow />
 * ```
 */
export let Flow = ({ className, size, color, style, ...props }) => {
    let classes = cx(className, styles.flow);
    let vars = assignInlineVars({
        [styles.loadingSize]: getLength(size),
        [styles.loadingColor]: color,
    });
    return (<div {...props} style={{ ...vars, ...style }} className={classes}>
			<div className={styles.flowDot}/>
			<div className={styles.flowDot}/>
			<div className={styles.flowDot}/>
		</div>);
};
/**
 * A circle fade loading indicator (spinner).
 *
 * @param props - The component props.
 * @returns The rendered loading indicator.
 *
 * @example
 * ```tsx
 * <CircleFade size={48} />
 * ```
 */
export let CircleFade = ({ className, size, color, style, ...props }) => {
    let classes = cx(className, styles.circleFade);
    let vars = assignInlineVars({
        [styles.loadingSize]: getLength(size),
        [styles.loadingColor]: color,
    });
    return (<div {...props} style={{ ...vars, ...style }} className={classes}>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
			<div className={styles.circleFadeDot}/>
		</div>);
};