@veracity/vui/dist/spinner/spinner.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { T } from "../t/t.js";
import { spinnerPositionMapping, spinnerSpeedMapping } from "./consts.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/spinner/spinner.tsx
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.
*/
const Spinner = vui((props, ref) => {
	const { className, emptyColor, size, speed: speedProp = "normal", text, textPosition = "bottom", thickness, "aria-label": ariaLabel = typeof text === "string" && text ? text : "Loading", ...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 : void 0,
		w: isCustomSize ? size : void 0
	});
	return /* @__PURE__ */ jsxs(Box, {
		"aria-atomic": "true",
		"aria-label": ariaLabel,
		center: true,
		className: cs("vui-spinner", className),
		gap: 1,
		ref,
		role: "status",
		transitionDuration: "fast",
		...positionProps.container,
		...styles.container,
		...rest,
		children: [/* @__PURE__ */ jsx(SpinnerCircle, {
			animation: `vui-spin ${speed} linear infinite`,
			"aria-hidden": "true",
			className: "vui-spinnerCircle",
			...styles.circle,
			...circleProps
		}), !!text && /* @__PURE__ */ jsx(T, {
			"aria-hidden": "true",
			className: "vui-spinnerText",
			...styles.text,
			children: text
		})]
	});
});
Spinner.displayName = "Spinner";

//#endregion
export { Spinner, Spinner as default, SpinnerCircle };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=spinner.js.map