import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef, useMemo } from "react";
import { cssUtils } from "../cssUtils.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { bem } from "../utils/bem.js";
import { getPercentage } from "../utils/getPercentage.js";
const styles = bem("rmd-circular-progress");
/**
 * **Server Component**
 *
 * @example
 * Indeterminate Example
 * ```tsx
 * import { CircularProgress } from "@react-md/core":
 * import { type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return <CircularProgress aria-label="Loading" />;
 * }
 * ```
 *
 * @example
 * Determinate Example
 * ```tsx
 * import { CircularProgress } from "@react-md/core":
 * import { useState, type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   // a number from 0 - 100
 *   const [progress, setProgress] = useState(0);
 *
 *   return <CircularProgress aria-label="File upload" value={progress} />;
 * }
 * ```
 *
 * @remarks \@since 6.0.0 Updated the determinate circular progress to no longer
 * rotate while increasing the value and require a label for accessibility.
 */ export const CircularProgress = /*#__PURE__*/ forwardRef(function CircularProgress(props, ref) {
    const { id: propId, className, svgStyle, svgClassName, circleStyle: propCircleStyle, circleClassName, value, min = 0, max = 100, radius = 30, center = 33, viewBox = "0 0 66 66", theme = "primary", dense = false, dashoffset = 187, disableShrink = false, disableCentered = false, disableTransition = false, ...remaining } = props;
    const id = useEnsuredId(propId, "circular-progress");
    let progress;
    if (typeof value === "number") {
        progress = getPercentage({
            min,
            max,
            value,
            validate: true
        });
    }
    const circleStyle = useMemo(()=>{
        if (typeof progress !== "number") {
            return propCircleStyle;
        }
        return {
            ...propCircleStyle,
            strokeDashoffset: dashoffset - dashoffset * progress
        };
    }, [
        progress,
        propCircleStyle,
        dashoffset
    ]);
    const determinate = typeof progress === "number";
    const indeterminate = !determinate;
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        id: id,
        ref: ref,
        role: "progressbar",
        "aria-valuemin": min,
        "aria-valuemax": max,
        "aria-valuenow": value,
        className: cnb(styles({
            dense,
            centered: !disableCentered
        }), theme !== "current-color" && cssUtils({
            textColor: theme
        }), className),
        children: /*#__PURE__*/ _jsx("svg", {
            style: svgStyle,
            className: cnb(styles("svg", {
                determinate,
                indeterminate: indeterminate && !disableShrink,
                "rotate-only": indeterminate && disableShrink
            }), svgClassName),
            viewBox: viewBox,
            children: /*#__PURE__*/ _jsx("circle", {
                style: circleStyle,
                className: cnb(styles("circle", {
                    animate: !disableTransition && determinate,
                    determinate,
                    indeterminate: indeterminate && !disableShrink,
                    "rotate-only": indeterminate && disableShrink
                }), circleClassName),
                r: radius,
                cx: center,
                cy: center
            })
        })
    });
});

//# sourceMappingURL=CircularProgress.js.map