import { jsxs as a, jsx as n, Fragment as I } from "react/jsx-runtime";
import { forwardRef as w, useId as A } from "react";
import { cx as m } from "../../utils/classNames.js";
import { useArrowTheme as S } from "../../hooks/useArrowTheme.js";
const y = "Changing an option may cause a new page to load";
function j(i, o, e) {
  return Math.min(Math.max(o, i), e);
}
const F = w(
  ({
    id: i,
    currentStep: o,
    steps: e,
    variant: r = "text",
    focused: h = !1,
    inverse: u,
    className: f,
    onStepChange: c
  }, g) => {
    const _ = S(), N = u ?? _.inverse, x = A().replace(/:/g, "");
    if (e.length === 0)
      return null;
    const s = i ?? "step-indicator-" + x, t = j(1, o, e.length), p = "Step " + t + " of " + e.length + ", " + e[t - 1], b = (l) => {
      c == null || c(Number(l.target.value));
    };
    return /* @__PURE__ */ a(
      "div",
      {
        ref: g,
        className: m("tdds-step-indicator", f),
        role: r === "select" ? "group" : void 0,
        "aria-label": r === "select" ? p : void 0,
        ...N ? { "data-inverse": "true" } : {},
        children: [
          /* @__PURE__ */ n(
            "progress",
            {
              value: t,
              max: e.length,
              "aria-label": r === "text" ? p : void 0,
              "aria-hidden": r === "select" || void 0,
              children: t
            }
          ),
          r === "text" ? /* @__PURE__ */ a("div", { className: "tdds-step-info", "aria-hidden": "true", children: [
            /* @__PURE__ */ n("span", { className: "tdds-step-info__label", children: "Step:" }),
            /* @__PURE__ */ a("span", { className: "tdds-step-info__title-text", children: [
              t,
              ". ",
              e[t - 1]
            ] }),
            /* @__PURE__ */ a("span", { className: "tdds-step-info__support-text", children: [
              t,
              " of ",
              e.length
            ] })
          ] }) : /* @__PURE__ */ a(I, { children: [
            /* @__PURE__ */ a("label", { className: "tdds-step-info", htmlFor: s + "-step-selector", children: [
              /* @__PURE__ */ n("span", { className: "tdds-step-info__label", children: "Step:" }),
              /* @__PURE__ */ n(
                "select",
                {
                  id: s + "-step-selector",
                  className: m("tdds-step-info__title-text", {
                    "force-focus": h
                  }),
                  value: t,
                  onChange: b,
                  "aria-describedby": s + "-page-load-warning",
                  "aria-label": "Choose a Step",
                  children: e.map((l, v) => {
                    const d = v + 1;
                    return /* @__PURE__ */ a(
                      "option",
                      {
                        value: d,
                        disabled: d > t,
                        children: [
                          d,
                          ". ",
                          l
                        ]
                      },
                      l + d
                    );
                  })
                }
              ),
              /* @__PURE__ */ a("span", { className: "tdds-step-info__support-text", children: [
                t,
                " of ",
                e.length
              ] })
            ] }),
            /* @__PURE__ */ n(
              "span",
              {
                className: "tdds-step-info__warning",
                id: s + "-page-load-warning",
                "aria-hidden": "true",
                children: y
              }
            )
          ] })
        ]
      }
    );
  }
);
F.displayName = "StepIndicator";
export {
  F as StepIndicator
};
//# sourceMappingURL=StepIndicator.js.map
