import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '../box';
import { styled, useStyleConfig, vui } from '../core';
import T from '../t';
import { cs, filterUndefined } from '../utils';
import { spinnerPositionMapping, spinnerSpeedMapping } from './consts';
export const SpinnerCircle = styled.divBox `
  border-radius: round;
  display: flex;
  flex-shrink: 0;
`;
/**
 * Displays a spinning circular element with optional text to signify loading content.
 *
 * Handles different positioning scenarios, speeds and coloring of the circle.
 */
export const Spinner = vui((props, ref) => {
    const { className, emptyColor, size, speed: speedProp = 'normal', text, textPosition = 'bottom', thickness, ...rest } = props;
    const styles = useStyleConfig('Spinner', props);
    const isCustomSize = typeof size === 'number';
    const positionProps = spinnerPositionMapping[textPosition];
    const speed = spinnerSpeedMapping[speedProp] ?? speedProp;
    const circleProps = filterUndefined({
        borderColor: emptyColor,
        borderWidth: isCustomSize ? (thickness ?? 4) : thickness,
        h: isCustomSize ? size : undefined,
        w: isCustomSize ? size : undefined,
    });
    return (_jsxs(Box, { center: true, className: cs('vui-spinner', className), gap: 1, ref: ref, transitionDuration: "fast", ...positionProps.container, ...styles.container, ...rest, children: [_jsx(SpinnerCircle, { animation: `vui-spin ${speed} linear infinite`, className: "vui-spinnerCircle", ...styles.circle, ...circleProps }), !!text && (_jsx(T, { className: "vui-spinnerText", ...styles.text, children: text }))] }));
});
Spinner.displayName = 'Spinner';
export default Spinner;
//# sourceMappingURL=spinner.js.map