/*! 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/ProgressBar.tsx
var ProgressBar = ({ value, max, color = "primary", height = 8, label, showValue = true, className = "" }) => {
	const { pct, animated } = useProgressAnimation(value, max);
	const resolvedColor = resolveColor(color);
	const widthPct = `${(animated ? pct : 0) * 100}%`;
	return /* @__PURE__ */ jsxs("div", {
		className,
		children: [(label || showValue) && /* @__PURE__ */ jsxs("div", {
			className: "flex justify-between mb-1 text-sm",
			children: [label && /* @__PURE__ */ jsx("span", {
				className: "font-medium text-(--text-muted)",
				children: label
			}), showValue && /* @__PURE__ */ jsxs("span", {
				className: "text-(--text-subtle)",
				children: [
					value,
					" / ",
					max
				]
			})]
		}), /* @__PURE__ */ jsx("div", {
			role: "progressbar",
			"aria-valuenow": Math.min(Math.max(value, 0), max),
			"aria-valuemin": 0,
			"aria-valuemax": max,
			className: "w-full overflow-hidden",
			style: {
				height,
				borderRadius: height / 2,
				background: "var(--color-neutral-50, #f9fafb)"
			},
			children: /* @__PURE__ */ jsx("div", { style: {
				width: widthPct,
				height: "100%",
				borderRadius: height / 2,
				background: `linear-gradient(90deg, ${resolvedColor}, color-mix(in srgb, ${resolvedColor} 80%, transparent))`,
				transition: "width 1s cubic-bezier(0.4, 0, 0.2, 1)"
			} })
		})]
	});
};
//#endregion
export { ProgressBar };

//# sourceMappingURL=ProgressBar.js.map