import { o as B } from "./rolldown-runtime.js";
import { i as q, t as G } from "./vendor/react.js";
import { t as P } from "./Avatar.js";
import { s as U, t as R } from "./useRenderElement.js";
import { t as S } from "./dist.js";
import { t as y } from "./utils.js";
import { t as X } from "./useValueAsRef.js";
import { t as Z } from "./visuallyHidden.js";
import { r as J, t as K } from "./valueToPercent.js";
var u = /* @__PURE__ */ B(q()), E = /* @__PURE__ */ u.createContext(void 0);
function z() {
  const r = u.useContext(E);
  if (r === void 0) throw new Error(U(51));
  return r;
}
var M = /* @__PURE__ */ (function(r) {
  return r.complete = "data-complete", r.indeterminate = "data-indeterminate", r.progressing = "data-progressing", r;
})({}), C = { status(r) {
  return r === "progressing" ? { [M.progressing]: "" } : r === "complete" ? { [M.complete]: "" } : r === "indeterminate" ? { [M.indeterminate]: "" } : null;
} }, e = G();
function Q(r, t) {
  return t == null ? "indeterminate progress" : r || `${t}%`;
}
var Y = /* @__PURE__ */ u.forwardRef(function(t, s) {
  const { format: o, getAriaValueText: d = Q, locale: m, max: a = 100, min: l = 0, value: n, render: i, className: x, children: g, style: w, ..._ } = t, [h, p] = u.useState(), f = X(o);
  let c = "indeterminate";
  Number.isFinite(n) && (c = n === a ? "complete" : "progressing");
  const b = J(n, m, f.current), v = u.useMemo(() => ({ status: c }), [c]), j = {
    "aria-labelledby": h,
    "aria-valuemax": a,
    "aria-valuemin": l,
    "aria-valuenow": n ?? void 0,
    "aria-valuetext": d(b, n),
    role: "progressbar",
    children: /* @__PURE__ */ (0, e.jsxs)(u.Fragment, { children: [g, /* @__PURE__ */ (0, e.jsx)("span", {
      role: "presentation",
      style: Z,
      children: "x"
    })] })
  }, N = u.useMemo(() => ({
    formattedValue: b,
    max: a,
    min: l,
    setLabelId: p,
    state: v,
    status: c,
    value: n
  }), [
    b,
    a,
    l,
    p,
    v,
    c,
    n
  ]), k = R("div", t, {
    state: v,
    ref: s,
    props: [j, _],
    stateAttributesMapping: C
  });
  return /* @__PURE__ */ (0, e.jsx)(E.Provider, {
    value: N,
    children: k
  });
}), ee = /* @__PURE__ */ u.forwardRef(function(t, s) {
  const { render: o, className: d, style: m, ...a } = t, { state: l } = z();
  return R("div", t, {
    state: l,
    ref: s,
    props: a,
    stateAttributesMapping: C
  });
}), re = /* @__PURE__ */ u.forwardRef(function(t, s) {
  const { render: o, className: d, style: m, ...a } = t, { max: l, min: n, value: i, state: x } = z(), g = Number.isFinite(i) && i !== null ? K(i, n, l) : null;
  return R("div", t, {
    state: x,
    ref: s,
    props: [{ style: u.useCallback(() => g == null ? {} : {
      insetInlineStart: 0,
      height: "inherit",
      width: `${g}%`
    }, [g])() }, a],
    stateAttributesMapping: C
  });
}), te = [
  25,
  50,
  75
], se = S("", {
  variants: { size: {
    sm: "h-1.5",
    md: "h-2",
    lg: "h-3"
  } },
  defaultVariants: { size: "md" }
}), ae = S("rounded-l-full transition-all duration-300 ease-out motion-reduce:transition-none", {
  variants: { variant: {
    default: "bg-primary",
    success: "bg-success",
    warning: "bg-warning",
    destructive: "bg-destructive",
    info: "bg-info",
    gradient: "bg-gradient-to-r from-primary/60 to-primary"
  } },
  defaultVariants: { variant: "default" }
}), ne = S("rounded-full h-4 w-1 transition-[background-color,transform] duration-200 ease-out motion-reduce:transition-none", {
  variants: {
    variant: {
      default: "",
      success: "",
      warning: "",
      destructive: "",
      info: "",
      gradient: ""
    },
    filled: {
      true: "",
      false: "bg-primary/20"
    }
  },
  compoundVariants: [
    {
      variant: "default",
      filled: !0,
      className: "bg-primary"
    },
    {
      variant: "success",
      filled: !0,
      className: "bg-success"
    },
    {
      variant: "warning",
      filled: !0,
      className: "bg-warning"
    },
    {
      variant: "destructive",
      filled: !0,
      className: "bg-destructive"
    },
    {
      variant: "info",
      filled: !0,
      className: "bg-info"
    },
    {
      variant: "gradient",
      filled: !0,
      className: "bg-primary"
    }
  ],
  defaultVariants: {
    variant: "default",
    filled: !1
  }
}), ie = 25, oe = {
  sm: {
    dimension: 80,
    strokeWidth: 6,
    fontSize: "text-sm"
  },
  md: {
    dimension: 100,
    strokeWidth: 8,
    fontSize: "text-base"
  },
  lg: {
    dimension: 120,
    strokeWidth: 10,
    fontSize: "text-lg"
  }
}, le = {
  default: "text-muted-foreground",
  success: "text-success",
  warning: "text-warning",
  destructive: "text-destructive",
  info: "text-info",
  gradient: "text-muted-foreground"
}, ce = {
  default: "var(--primary)",
  success: "var(--success)",
  warning: "var(--warning)",
  destructive: "var(--destructive)",
  info: "var(--info)",
  gradient: "var(--primary)"
};
function de({ className: r, size: t, ...s }) {
  return /* @__PURE__ */ (0, e.jsx)(ee, {
    className: y("bg-primary/20 rounded-full relative flex w-full items-center overflow-hidden", se({ size: t }), r),
    "data-slot": "progress-track",
    ...s
  });
}
function me({ className: r, variant: t, value: s, ...o }) {
  const d = u.useRef(s ?? 0), [m, a] = u.useState(!1);
  return u.useEffect(() => {
    const l = d.current, n = s ?? 0;
    if (d.current = n, te.some((i) => l < i && n >= i && n < 100)) {
      a(!0);
      const i = setTimeout(() => a(!1), 500);
      return () => clearTimeout(i);
    }
  }, [s]), /* @__PURE__ */ (0, e.jsx)(re, {
    "data-slot": "progress-indicator",
    className: y(ae({ variant: t }), s === 100 && "rounded-full animate-[progress-complete_600ms_ease-out_1] motion-reduce:animate-none", m && "animate-[delight-pulse-once_500ms_ease-out_1] motion-reduce:animate-none", r),
    style: s === 100 ? { boxShadow: "0 0 8px 2px color-mix(in srgb, currentColor 30%, transparent)" } : void 0,
    ...o
  });
}
function ue({ value: r, formattedValue: t }) {
  return /* @__PURE__ */ (0, e.jsx)("div", {
    "data-slot": "progress-floating-tooltip",
    className: "absolute top-full -translate-x-1/2 z-10 mt-1 animate-[delight-fade-in-up_200ms_ease-out] motion-reduce:animate-none",
    style: { left: `${Math.max(0, Math.min(100, r))}%` },
    children: /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "flex flex-col items-center",
      children: [/* @__PURE__ */ (0, e.jsx)("div", { className: "w-0 h-0 border-l-[5px] border-r-[5px] border-b-[6px] border-l-transparent border-r-transparent border-b-foreground" }), /* @__PURE__ */ (0, e.jsx)("div", {
        className: "bg-foreground text-background px-3 py-1.5 text-xs font-medium rounded-md whitespace-nowrap",
        children: t
      })]
    })
  });
}
function fe({ value: r, avatarSrc: t, avatarFallback: s }) {
  return /* @__PURE__ */ (0, e.jsx)("div", {
    "data-slot": "progress-avatar-tooltip",
    className: "absolute bottom-full -translate-x-1/2 z-10 mb-1 animate-[delight-fade-in-up_200ms_ease-out] motion-reduce:animate-none",
    style: { left: `${Math.max(0, Math.min(100, r))}%` },
    children: /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "flex flex-col items-center",
      children: [/* @__PURE__ */ (0, e.jsx)(P, {
        src: t,
        fallback: s,
        ring: "primary",
        className: "size-9 shadow-md"
      }), /* @__PURE__ */ (0, e.jsx)("div", { className: "w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-primary -mt-px" })]
    })
  });
}
function ge({ value: r, variant: t, size: s, label: o, subLabel: d, showValue: m, labelPosition: a, formattedValue: l, icon: n, avatarSrc: i, avatarFallback: x, className: g, ref: w, ..._ }) {
  const h = o || m && a === "inline", p = a === "tooltip", f = i && !o;
  return /* @__PURE__ */ (0, e.jsxs)(Y, {
    ref: w,
    value: r,
    "aria-label": o || `Progress: ${l}`,
    "data-slot": "progress",
    className: y("flex flex-col gap-2 w-full", g),
    ..._,
    children: [
      h && /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex items-center justify-between gap-2",
        children: [/* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex items-center gap-2 flex-1 min-w-0",
          children: [i && o && /* @__PURE__ */ (0, e.jsx)(P, {
            src: i,
            fallback: x,
            className: "size-6 shrink-0"
          }), o && /* @__PURE__ */ (0, e.jsx)("span", {
            className: "text-sm font-medium text-foreground truncate",
            children: o
          })]
        }), m && a === "inline" && /* @__PURE__ */ (0, e.jsx)("span", {
          className: "text-sm font-medium text-foreground shrink-0",
          children: l
        })]
      }),
      /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex items-center gap-2",
        children: [n && /* @__PURE__ */ (0, e.jsx)("div", {
          className: "shrink-0 flex items-center justify-center size-6 rounded-xl border border-dashed border-muted-foreground p-1",
          children: n
        }), /* @__PURE__ */ (0, e.jsxs)("div", {
          className: y("relative flex-1", (p || f) && "overflow-visible"),
          children: [
            p && /* @__PURE__ */ (0, e.jsx)(ue, {
              value: r,
              formattedValue: l
            }),
            f && /* @__PURE__ */ (0, e.jsx)(fe, {
              value: r,
              avatarSrc: i,
              avatarFallback: x
            }),
            /* @__PURE__ */ (0, e.jsx)(de, {
              size: s,
              children: /* @__PURE__ */ (0, e.jsx)(me, {
                variant: t,
                value: r
              })
            })
          ]
        })]
      }),
      d && /* @__PURE__ */ (0, e.jsx)("span", {
        className: y("text-sm", le[t]),
        children: d
      })
    ]
  });
}
function xe({ value: r, variant: t, label: s, showValue: o, formattedValue: d, segments: m, className: a, ref: l, ...n }) {
  const i = Math.round(r / 100 * m), x = u.useRef(i), g = u.useId(), w = i >= x.current ? 1 : -1;
  return u.useEffect(() => {
    x.current = i;
  }), /* @__PURE__ */ (0, e.jsxs)("div", {
    ref: l,
    "data-slot": "progress",
    className: y("flex flex-col gap-2 w-full", a),
    ...n,
    children: [(s || o) && /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "flex items-center justify-between gap-2",
      children: [s && /* @__PURE__ */ (0, e.jsx)("span", {
        id: g,
        className: "text-sm font-medium text-foreground",
        children: s
      }), o && /* @__PURE__ */ (0, e.jsx)("span", {
        className: "text-sm font-medium text-foreground",
        children: d
      })]
    }), /* @__PURE__ */ (0, e.jsx)("div", {
      className: "flex gap-1",
      role: "progressbar",
      "aria-valuenow": r,
      "aria-valuemin": 0,
      "aria-valuemax": 100,
      "aria-valuetext": d,
      ...s ? { "aria-labelledby": g } : { "aria-label": `Progress: ${d}` },
      children: Array.from({ length: m }).map((_, h) => {
        const p = h < i, f = w >= 0 ? h : m - 1 - h;
        return /* @__PURE__ */ (0, e.jsx)("div", {
          className: ne({
            variant: t,
            filled: p
          }),
          style: { transitionDelay: `${f * 20}ms` }
        }, h);
      })
    })]
  });
}
function pe({ value: r, variant: t, size: s, shape: o, label: d, showValue: m, formattedValue: a, avatarSrc: l, avatarFallback: n, strokeWidth: i, color: x, trackColor: g, className: w, ref: _, ...h }) {
  const p = oe[s], f = i || p.strokeWidth, c = p.dimension, b = (c - f * 2 - f) / 2, v = c / 2, j = 2 * Math.PI * b, N = Math.min(100, Math.max(0, r)), k = o === "half", I = k ? 0.5 : 1, V = j * (1 - N / 100 * I), L = j * (1 - I), O = k ? 180 : -90, D = k ? c / 2 + f : c, $ = k ? c / 2 + f : c, H = x || ce[t], W = g || "color-mix(in srgb, var(--primary) 20%, transparent)", F = s === "sm" ? "size-10" : s === "md" ? "size-12" : "size-16", T = k ? c / 2 : v, A = `rotate(${O} ${v} ${T})`;
  return /* @__PURE__ */ (0, e.jsxs)("div", {
    ref: _,
    "data-slot": "progress",
    className: y("relative flex items-center justify-center", w),
    style: {
      width: c,
      height: $
    },
    role: "progressbar",
    "aria-valuenow": N,
    "aria-valuemin": 0,
    "aria-valuemax": 100,
    "aria-valuetext": a,
    "aria-label": d || `Progress: ${a}`,
    ...h,
    children: [/* @__PURE__ */ (0, e.jsxs)("svg", {
      width: c,
      height: $,
      viewBox: `0 0 ${c} ${D}`,
      className: "overflow-visible",
      children: [/* @__PURE__ */ (0, e.jsx)("circle", {
        cx: v,
        cy: T,
        r: b,
        fill: "none",
        stroke: W,
        strokeWidth: f,
        strokeLinecap: "round",
        strokeDasharray: j,
        strokeDashoffset: L,
        transform: A
      }), /* @__PURE__ */ (0, e.jsx)("circle", {
        cx: v,
        cy: T,
        r: b,
        fill: "none",
        stroke: H,
        strokeWidth: f,
        strokeLinecap: "round",
        strokeDasharray: j,
        strokeDashoffset: V,
        transform: A,
        className: y("transition-[stroke-dashoffset,filter] duration-500 ease-out motion-reduce:transition-none", N === 100 && "drop-shadow-[0_0_6px_var(--primary)] motion-reduce:drop-shadow-none")
      })]
    }), /* @__PURE__ */ (0, e.jsx)("div", {
      className: y("absolute flex flex-col items-center justify-center", k && "translate-y-[20%]"),
      children: l ? /* @__PURE__ */ (0, e.jsx)(P, {
        src: l,
        fallback: n,
        className: F
      }) : m && /* @__PURE__ */ (0, e.jsx)("span", {
        className: y("font-medium text-foreground tracking-tight", p.fontSize, N === 100 && "animate-[scale-in_300ms_ease-out] motion-reduce:animate-none"),
        children: a
      })
    })]
  });
}
var he = (0, u.forwardRef)(({ type: r, value: t = 0, circular: s, segments: o, variant: d = "default", size: m = "md", label: a, subLabel: l, showValue: n = !1, labelPosition: i = "inline", valueFormat: x, icon: g, avatarSrc: w, avatarFallback: _, strokeWidth: h, color: p, trackColor: f, className: c, ...b }, v) => {
  const j = r || (s ? "circular" : o !== void 0 ? "segmented" : "linear"), N = x ? x(t) : `${Math.round(t)}%`;
  return j === "circular" || j === "half" ? /* @__PURE__ */ (0, e.jsx)(pe, {
    ref: v,
    value: t,
    variant: d,
    size: m,
    shape: j === "half" ? "half" : "circle",
    label: a,
    showValue: n,
    formattedValue: N,
    avatarSrc: w,
    avatarFallback: _,
    strokeWidth: h,
    color: p,
    trackColor: f,
    className: c,
    ...b
  }) : j === "segmented" ? /* @__PURE__ */ (0, e.jsx)(xe, {
    ref: v,
    value: t,
    variant: d,
    label: a,
    showValue: n,
    formattedValue: N,
    segments: o ?? ie,
    className: c,
    ...b
  }) : /* @__PURE__ */ (0, e.jsx)(ge, {
    ref: v,
    value: t,
    variant: d,
    size: m,
    label: a,
    subLabel: l,
    showValue: n,
    labelPosition: i,
    formattedValue: N,
    icon: g,
    avatarSrc: w,
    avatarFallback: _,
    className: c,
    ...b
  });
});
he.displayName = "Progress";
export {
  he as t
};

//# sourceMappingURL=Progress.js.map