import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils.js";
const INDETERMINATE_ARC_RATIO = 0.25;
const CircularProgress = React.forwardRef(
  ({
    value,
    size = 24,
    label,
    affix,
    className,
    "aria-label": ariaLabel,
    ...props
  }, ref) => {
    const isDeterminate = typeof value === "number";
    const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 0;
    const strokeWidth = Math.max(2, Math.round(size / 10));
    const radius = (size - strokeWidth) / 2;
    const circumference = 2 * Math.PI * radius;
    const dashOffset = isDeterminate ? circumference * (1 - clampedValue / 100) : circumference * (1 - INDETERMINATE_ARC_RATIO);
    const hasLabel = typeof label === "string" && label.length > 0;
    const hasAriaLabel = typeof ariaLabel === "string" && ariaLabel.length > 0;
    const shouldAnnounce = hasAriaLabel || hasLabel;
    let affixNode = null;
    if (isDeterminate) {
      if (affix === "value") {
        affixNode = /* @__PURE__ */ jsxs("span", { className: "text-caption text-foreground tabular-nums shrink-0", children: [
          Math.round(clampedValue),
          "%"
        ] });
      } else if (React.isValidElement(affix) || typeof affix === "string" || typeof affix === "number") {
        affixNode = affix;
      }
    }
    const a11yRole = isDeterminate ? "progressbar" : shouldAnnounce ? "status" : void 0;
    const a11yLabel = hasAriaLabel ? ariaLabel : hasLabel ? label : void 0;
    const a11yValueAttrs = isDeterminate ? {
      "aria-valuenow": Math.round(clampedValue),
      "aria-valuemin": 0,
      "aria-valuemax": 100
    } : {};
    const graphic = /* @__PURE__ */ jsx(
      "span",
      {
        ref,
        role: a11yRole,
        "aria-label": a11yLabel,
        "aria-hidden": !a11yRole ? true : void 0,
        ...a11yValueAttrs,
        className: cn(
          // align-middle:inline context 內讓 SVG 對齊 adjacent text 的 x-height 中線
          //(不加會按 baseline 對齊,在 inline-flex cell 裡視覺下沉 1-2px 看起來歪)
          "inline-flex shrink-0 align-middle text-info",
          // motion-reduce:Material 流派 — prefers-reduced-motion 時不停止旋轉(loading 仍需可見回饋),
          // 而是放慢到 3s/cycle(預設 1s),保留資訊不刺激前庭。
          !isDeterminate && "animate-spin motion-reduce:[animation-duration:3s]",
          className
        ),
        style: { width: size, height: size },
        ...props,
        children: /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${size} ${size}`, width: size, height: size, "aria-hidden": true, children: [
          /* @__PURE__ */ jsx(
            "circle",
            {
              cx: size / 2,
              cy: size / 2,
              r: radius,
              fill: "none",
              stroke: "var(--secondary)",
              strokeWidth
            }
          ),
          /* @__PURE__ */ jsx(
            "circle",
            {
              cx: size / 2,
              cy: size / 2,
              r: radius,
              fill: "none",
              stroke: "currentColor",
              strokeWidth,
              strokeDasharray: circumference,
              strokeDashoffset: dashOffset,
              strokeLinecap: "round",
              transform: `rotate(-90 ${size / 2} ${size / 2})`,
              className: isDeterminate ? "transition-[stroke-dashoffset] duration-300" : void 0
            }
          )
        ] })
      }
    );
    if (!hasLabel && !affixNode) return graphic;
    return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center", (hasLabel || affixNode) && "gap-2"), children: [
      graphic,
      hasLabel && /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: label }),
      affixNode
    ] });
  }
);
CircularProgress.displayName = "CircularProgress";
const circularProgressMeta = {
  component: "CircularProgress",
  family: null,
  // non-family composite / overlay / layout
  variants: {},
  sizes: {},
  states: ["default"],
  // 無 hover / focus / active(spec);disabled 屬 consumer host(spec「邊界案例」)
  tokens: {
    bg: [],
    fg: ["text-fg-muted", "text-foreground", "text-info"],
    ring: []
  }
};
export {
  CircularProgress,
  circularProgressMeta
};
//# sourceMappingURL=circular-progress.js.map
