/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { resolveColor, useProgressAnimation } from "./useProgressAnimation.js";
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/visuals/Progress/ProgressRing.tsx
var ProgressRing = ({ value, max = 100, color = "primary", size = 120, strokeWidth = 8, roundCaps = false, label, className = "", children }) => {
	const { pct, animated } = useProgressAnimation(value, max);
	const resolvedColor = resolveColor(color);
	const r = (size - strokeWidth) / 2;
	const C = 2 * Math.PI * r;
	const offset = C - pct * C;
	return /* @__PURE__ */ jsxs("div", {
		role: "meter",
		"aria-label": label ?? `${value} of ${max}`,
		"aria-valuenow": Math.min(Math.max(value, 0), max),
		"aria-valuemin": 0,
		"aria-valuemax": max,
		className: `relative inline-flex items-center justify-center ${className}`.trim(),
		style: {
			width: size,
			height: size
		},
		children: [/* @__PURE__ */ jsxs("svg", {
			width: size,
			height: size,
			className: "-rotate-90",
			children: [/* @__PURE__ */ jsx("circle", {
				cx: size / 2,
				cy: size / 2,
				r,
				fill: "none",
				stroke: "var(--color-neutral-100, #e5e7eb)",
				strokeWidth
			}), /* @__PURE__ */ jsx("circle", {
				cx: size / 2,
				cy: size / 2,
				r,
				fill: "none",
				stroke: resolvedColor,
				strokeWidth,
				strokeLinecap: roundCaps ? "round" : "butt",
				strokeDasharray: C,
				strokeDashoffset: animated ? offset : C,
				style: { transition: "stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1)" }
			})]
		}), children && /* @__PURE__ */ jsx("div", {
			className: "absolute inset-0 flex flex-col items-center justify-center",
			children
		})]
	});
};
//#endregion
export { ProgressRing };

//# sourceMappingURL=ProgressRing.js.map