@veracity/vui/dist/progressCircular/progressCircular.js

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

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 { absCenterStyles } from "./consts.js";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/progressCircular/progressCircular.tsx
const ProgressCircularBase = styled.divBox`
  display: flex;
  position: relative;
  width: 100%;
`;
const MainCircle = styled.circle`
  fill: transparent;
`;
const ProgressCircle = styled(MainCircle)`
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s ease-out;
`;
/** Indicates a process progress. */
const ProgressCircular = vui((props, ref) => {
	const { children, className, label, value = 0, showPercentage, ...rest } = props;
	const styles = useStyleConfig("ProgressCircular", props);
	const [progress, setProgress] = useState(value);
	useEffect(() => {
		setProgress(value ? Math.ceil(value) : 0);
	}, [value]);
	useEffect(() => {
		const w = !value ? 0 : Math.ceil(value);
		setProgress(w > 100 ? 100 : w);
	}, [value]);
	const radius = 100 / 2 - styles.strokeWidth * 2;
	const angle = radius * 2 * Math.PI;
	const offset = angle - progress / 100 * angle;
	return /* @__PURE__ */ jsxs(ProgressCircularBase, {
		className: cs("vui-progress-circular", className),
		ref,
		w: styles.width,
		...rest,
		children: [
			/* @__PURE__ */ jsxs("svg", {
				"aria-valuemax": 100,
				"aria-valuemin": 0,
				"aria-valuenow": progress,
				height: styles.width,
				role: "meter",
				version: "1.1",
				viewBox: "0 0 100 100",
				width: styles.width,
				xmlns: "http://www.w3.org/2000/svg",
				children: [/* @__PURE__ */ jsx(MainCircle, {
					cx: "50",
					cy: "50",
					r: radius,
					stroke: styles.stroke.main,
					strokeWidth: styles.strokeWidth
				}), /* @__PURE__ */ jsx(ProgressCircle, {
					cx: "50",
					cy: "50",
					r: radius,
					stroke: styles.stroke.progress,
					strokeDasharray: `${angle} ${angle}`,
					strokeDashoffset: offset,
					strokeWidth: styles.strokeWidth
				})]
			}),
			/* @__PURE__ */ jsx(Box, {
				...absCenterStyles,
				top: styles.top,
				children: children ? children : showPercentage ? /* @__PURE__ */ jsxs(T, {
					color: styles.color,
					fontSize: styles.fontSize,
					children: [progress, "%"]
				}) : null
			}),
			!!label && /* @__PURE__ */ jsx(Box, {
				...absCenterStyles,
				bottom: -16,
				children: /* @__PURE__ */ jsx(T, {
					color: styles.color,
					fontSize: styles.fontSize,
					children: label
				})
			})
		]
	});
});
ProgressCircular.displayName = "ProgressCircular";

//#endregion
export { ProgressCircular, ProgressCircular as default, ProgressCircularBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=progressCircular.js.map