import { jsx as r, jsxs as R, Fragment as Z } from "react/jsx-runtime";
import { forwardRef as z, isValidElement as x, useRef as S, useEffect as H, useState as O, Children as j } from "react";
import { c as B, B as V } from "./button-DBX_tvfJ.mjs";
import { l as rr } from "./chevron-left.es-UFhf3v35.mjs";
import { n as tr } from "./chevron-right.es-D7aVK4ER.mjs";
import { I as er, R as F } from "./index-IpWiejWQ.mjs";
import { R as sr, V as pr, S as nr, T as or } from "./index-B8Mazo6u.mjs";
import { c as L } from "./bind-CU-R61T-.mjs";
import { b as ir } from "./tooltip-DXi7ikUT.mjs";
import { a as lr } from "./checkmark.es-DdgIZN2R.mjs";
import { V as ur } from "./visually-hidden-BYFkJEp1.mjs";
const ar = {
  PRIMARY: "primary"
}, I = {
  SMALL_SCREEN: "small-screen",
  LARGE_SCREEN: "large-screen",
  ALWAYS: "always"
}, _r = {
  "purpur-stepper__nav-container": "_purpur-stepper__nav-container_1rouo_1",
  "purpur-stepper__nav": "_purpur-stepper__nav_1rouo_1",
  "purpur-stepper": "_purpur-stepper_1rouo_1",
  "purpur-stepper__scroll-button": "_purpur-stepper__scroll-button_1rouo_7",
  "purpur-stepper__scroll-button--left": "_purpur-stepper__scroll-button--left_1rouo_18",
  "purpur-stepper__scroll-button--right": "_purpur-stepper__scroll-button--right_1rouo_21",
  "purpur-stepper__scroll-button-icon": "_purpur-stepper__scroll-button-icon_1rouo_24",
  "purpur-stepper__hidden": "_purpur-stepper__hidden_1rouo_27"
}, cr = {
  "purpur-stepper-container": "_purpur-stepper-container_162zw_1",
  "purpur-stepper-container__inner--align-with-grid": "_purpur-stepper-container__inner--align-with-grid_162zw_5",
  "purpur-stepper-container--primary": "_purpur-stepper-container--primary_162zw_18",
  "purpur-stepper-container--secondary": "_purpur-stepper-container--secondary_162zw_21"
}, Y = L.bind(cr), v = "purpur-stepper-container", dr = ({
  ["data-testid"]: t = "purpur-stepper-container",
  children: e,
  className: s,
  alignWithGrid: p,
  variant: i,
  ...n
}) => {
  const b = Y(s, v, {
    [`${v}--${i}`]: i,
    [`${v}--align-with-grid`]: p
  });
  return /* @__PURE__ */ r("div", { className: b, "data-testid": t, ...n, children: /* @__PURE__ */ r(
    "div",
    {
      className: Y(`${v}__inner`, {
        [`${v}__inner--align-with-grid`]: p
      }),
      children: e
    }
  ) });
}, br = z(
  ({ children: t, ...e }, s) => {
    const { finished: p, ...i } = e;
    return /* @__PURE__ */ r("div", { ...i, ref: s, children: t });
  }
), mr = (t) => !!t && x(t) && !!t.props.label, hr = {
  "purpur-stepper-button": "_purpur-stepper-button_wjiph_1",
  "purpur-stepper-button__trigger-outline": "_purpur-stepper-button__trigger-outline_wjiph_21",
  "purpur-stepper-button--first": "_purpur-stepper-button--first_wjiph_33",
  "purpur-stepper-button--current": "_purpur-stepper-button--current_wjiph_33",
  "purpur-stepper-button--middle": "_purpur-stepper-button--middle_wjiph_38",
  "purpur-stepper-button--last": "_purpur-stepper-button--last_wjiph_48",
  "purpur-stepper-button--visibility-small-screen": "_purpur-stepper-button--visibility-small-screen_wjiph_58",
  "purpur-stepper-button--visibility-large-screen": "_purpur-stepper-button--visibility-large-screen_wjiph_66",
  "purpur-stepper-button__icon": "_purpur-stepper-button__icon_wjiph_90",
  "purpur-stepper-button__step-number": "_purpur-stepper-button__step-number_wjiph_97",
  "purpur-stepper-button__step-number--current": "_purpur-stepper-button__step-number--current_wjiph_108",
  "purpur-stepper-button__step-number--disabled": "_purpur-stepper-button__step-number--disabled_wjiph_112",
  "purpur-stepper-button__step-label": "_purpur-stepper-button__step-label_wjiph_117",
  "arrow-forward": "_arrow-forward_wjiph_121",
  "purpur-stepper-button--primary": "_purpur-stepper-button--primary_wjiph_133",
  "purpur-stepper-button--disabled": "_purpur-stepper-button--disabled_wjiph_136",
  "purpur-stepper-button--secondary": "_purpur-stepper-button--secondary_wjiph_142",
  "arrow-tail": "_arrow-tail_wjiph_152",
  "sr-only--lg-down": "_sr-only--lg-down_wjiph_171"
}, N = L.bind(hr), c = "purpur-stepper-button", fr = ({
  ["data-testid"]: t,
  current: e,
  disabled: s,
  stepNumber: p
}) => /* @__PURE__ */ r(
  "div",
  {
    "data-testid": t,
    className: N([
      `${c}__step-number`,
      {
        [`${c}__step-number--current`]: e
      },
      {
        [`${c}__step-number--disabled`]: s
      }
    ]),
    children: p
  }
), A = z(
  ({
    className: t,
    ["data-testid"]: e,
    variant: s,
    step: p,
    indexOfLastItem: i,
    index: n,
    currentStepIndex: b,
    whenToBeVisible: m,
    handleStepChange: l,
    handleStepFocus: a,
    completedStepLabel: o,
    ...u
  }, d) => {
    const g = n === 0 ? "first" : n === i ? "last" : "middle", $ = n === b;
    return /* @__PURE__ */ r(er, { asChild: !0, children: /* @__PURE__ */ r(
      B,
      {
        ...u,
        ref: d,
        className: N(
          t,
          c,
          `${c}--${g}`,
          `${c}--${s}`,
          `${c}--visibility-${m}`,
          {
            [`${c}--current`]: $
          },
          {
            [`${c}--disabled`]: p.disabled
          },
          {
            "arrow-tail": g !== "first"
          },
          {
            "arrow-forward": g !== "last"
          }
        ),
        id: `stepper-trigger-button-${n}`,
        variant: V.TERTIARY_PURPLE,
        "data-testid": `${e}-step-trigger-item-${n}`,
        disabled: p.disabled,
        "aria-current": $ && "step",
        onClick: (T) => l(T, n),
        onFocus: a,
        children: /* @__PURE__ */ R("span", { className: N(`${c}__trigger-outline`), children: [
          p.finished && !$ ? /* @__PURE__ */ r(
            lr,
            {
              className: N(`${c}__icon`),
              "data-testid": `${e}-step-finished-icon`,
              size: "sm"
            }
          ) : /* @__PURE__ */ r(
            fr,
            {
              "data-testid": `${e}-step-number`,
              current: $,
              disabled: p.disabled,
              stepNumber: n + 1
            }
          ),
          /* @__PURE__ */ R(
            "span",
            {
              className: N(`${c}__step-label`, {
                "sr-only--lg-down": !$
              }),
              children: [
                p.finished && /* @__PURE__ */ r(ur, { children: `${n + 1} ${o}` }),
                p.label
              ]
            }
          )
        ] })
      }
    ) });
  }
), gr = {
  "purpur-stepper-nav-items__list": "_purpur-stepper-nav-items__list_lgkh0_1",
  "purpur-stepper-nav-items__list-item": "_purpur-stepper-nav-items__list-item_lgkh0_7",
  "purpur-stepper-nav-items__list-item--current": "_purpur-stepper-nav-items__list-item--current_lgkh0_25",
  "purpur-stepper-nav-items__tooltip-content": "_purpur-stepper-nav-items__tooltip-content_lgkh0_31",
  "purpur-stepper-nav-items__tooltip-trigger-item-container": "_purpur-stepper-nav-items__tooltip-trigger-item-container_lgkh0_34"
}, C = L.bind(gr), y = "purpur-stepper-nav-items", $r = z(
  ({
    ["data-testid"]: t,
    variant: e,
    handleStepChange: s,
    handleStepFocus: p,
    steps: i,
    firstStepRef: n,
    lastStepRef: b,
    currentStepIndex: m,
    completedStepLabel: l
  }, a) => {
    const o = i.map((u, d) => {
      const g = u.disabled ? /* @__PURE__ */ r("span", { className: C(`${y}__tooltip-trigger-item-container`), children: /* @__PURE__ */ r(
        A,
        {
          "data-testid": `${t}-disabled-sm`,
          variant: e,
          step: u,
          indexOfLastItem: i.length - 1,
          index: d,
          currentStepIndex: m,
          whenToBeVisible: I.SMALL_SCREEN,
          completedStepLabel: l,
          handleStepChange: s,
          handleStepFocus: p
        }
      ) }) : null;
      return /* @__PURE__ */ r(
        "li",
        {
          className: C(`${y}__list-item`, {
            [`${y}__list-item--current`]: d === m
          }),
          ref: d === 0 ? n : d === i.length - 1 ? b : null,
          children: u.disabled ? /* @__PURE__ */ R(Z, { children: [
            /* @__PURE__ */ r(
              ir,
              {
                contentClassName: C(`${y}__tooltip-content`),
                triggerElement: g,
                children: u.label
              }
            ),
            /* @__PURE__ */ r(
              A,
              {
                "data-testid": `${t}-disabled-lg`,
                variant: e,
                step: u,
                indexOfLastItem: i.length - 1,
                index: d,
                currentStepIndex: m,
                whenToBeVisible: I.LARGE_SCREEN,
                completedStepLabel: l,
                handleStepChange: s,
                handleStepFocus: p
              }
            )
          ] }) : /* @__PURE__ */ r(
            A,
            {
              "data-testid": t,
              variant: e,
              step: u,
              indexOfLastItem: i.length - 1,
              index: d,
              currentStepIndex: m,
              whenToBeVisible: I.ALWAYS,
              completedStepLabel: l,
              handleStepChange: s,
              handleStepFocus: p
            }
          )
        },
        u.label
      );
    });
    return /* @__PURE__ */ r(F, { loop: !1, dir: "ltr", children: /* @__PURE__ */ r("ol", { ref: a, className: C(`${y}__list`), children: o }) });
  }
), wr = (t) => {
  const e = S(!0), s = S(null);
  return H(() => {
    !e.current && s.current !== null && s.current.focus(), e.current = !1;
  }, [t]), {
    contentRef: s
  };
}, E = {
  LEFT: "left",
  RIGHT: "right"
}, Rr = () => {
  const t = S(null), e = S(null), s = S(null), [p, i] = O(!1), [n, b] = O(!1), m = (l) => {
    if (!t.current)
      return;
    const a = t.current, o = a.clientWidth, u = a.scrollLeft;
    l === E.LEFT && a.scroll({
      behavior: "smooth",
      left: u - o / 2
    }), l === E.RIGHT && a.scroll({
      behavior: "smooth",
      left: u + o / 2
    });
  };
  return H(() => {
    if (e.current && s.current && t.current) {
      const l = new IntersectionObserver(
        (a) => {
          for (const o of a) {
            if (o.target === e.current) {
              o.isIntersecting ? i(!1) : i(!0);
              continue;
            }
            o.target === s.current && (o.isIntersecting ? b(!1) : b(!0));
          }
        },
        {
          root: t.current,
          threshold: 0.95
        }
      );
      return l.observe(e.current), l.observe(s.current), () => l.disconnect();
    }
  }, [e, s, t]), {
    scrollContainer: t,
    firstStepRef: e,
    lastStepRef: s,
    displayLeftScrollButton: p,
    displayRightScrollButton: n,
    handleHorizontalScroll: m
  };
}, f = L.bind(_r), _ = "purpur-stepper", D = ({
  ["aria-label"]: t,
  ["data-testid"]: e,
  children: s,
  className: p,
  completedStepLabel: i,
  currentStepIndex: n = 0,
  onStepChange: b,
  alignWithGrid: m = !1,
  leftScrollButtonAriaLabel: l,
  rightScrollButtonAriaLabel: a,
  variant: o = ar.PRIMARY,
  ...u
}) => {
  const d = j.toArray(s).filter(mr), g = j.map(d, (h) => {
    const { disabled: w, finished: Q, label: X } = h.props;
    return {
      disabled: w ?? !1,
      finished: Q ?? !1,
      label: X
    };
  }), { contentRef: $ } = wr(n), {
    scrollContainer: T,
    firstStepRef: G,
    lastStepRef: M,
    displayLeftScrollButton: U,
    displayRightScrollButton: W,
    handleHorizontalScroll: P
  } = Rr(), q = f([
    p,
    _,
    {
      [`${_}--${o}`]: o
    }
  ]), k = (h) => {
    h.target.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center"
    });
  }, J = (h, w) => {
    h.preventDefault(), k(h), b(w);
  }, K = (h) => {
    k(h);
  };
  return /* @__PURE__ */ R("div", { className: q, ...u, children: [
    /* @__PURE__ */ r(dr, { variant: o, alignWithGrid: m, children: /* @__PURE__ */ R("div", { className: f(`${_}__nav-container`), children: [
      /* @__PURE__ */ R(sr, { children: [
        /* @__PURE__ */ r(pr, { ref: T, children: /* @__PURE__ */ r(
          "div",
          {
            "aria-label": t,
            "data-testid": e,
            className: f([
              `${_}__nav`,
              {
                [`${_}__nav--${o}`]: o
              }
            ]),
            children: /* @__PURE__ */ r(F, { loop: !1, dir: "ltr", children: /* @__PURE__ */ r(
              $r,
              {
                "data-testid": e,
                variant: o,
                firstStepRef: G,
                lastStepRef: M,
                steps: g,
                currentStepIndex: n,
                handleStepChange: J,
                handleStepFocus: K,
                completedStepLabel: i
              }
            ) })
          }
        ) }),
        /* @__PURE__ */ r(nr, { orientation: "horizontal", children: /* @__PURE__ */ r(or, {}) })
      ] }),
      U && /* @__PURE__ */ r(
        B,
        {
          "aria-label": l,
          className: f([
            `${_}__scroll-button`,
            `${_}__scroll-button--left`
          ]),
          variant: V.TERTIARY_PURPLE,
          tabIndex: -1,
          iconOnly: !0,
          onClick: () => {
            P(E.LEFT);
          },
          children: /* @__PURE__ */ r(rr, { className: f(`${_}__scroll-button-icon`), size: "md" })
        }
      ),
      W && /* @__PURE__ */ r(
        B,
        {
          "aria-label": a,
          className: f([
            `${_}__scroll-button`,
            `${_}__scroll-button--right`
          ]),
          variant: V.TERTIARY_PURPLE,
          tabIndex: -1,
          iconOnly: !0,
          onClick: () => {
            P(E.RIGHT);
          },
          children: /* @__PURE__ */ r(tr, { className: f(`${_}__scroll-button-icon`), size: "md" })
        }
      )
    ] }) }),
    /* @__PURE__ */ r(
      "div",
      {
        tabIndex: -1,
        "aria-labelledby": `stepper-trigger-button-${n}`,
        ref: $,
        style: { outline: "none" },
        children: /* @__PURE__ */ r("div", { "aria-live": "polite", children: j.map(d, (h, w) => /* @__PURE__ */ r(
          "div",
          {
            className: f({
              [`${_}__hidden`]: w !== n
            }),
            hidden: w !== n,
            children: h
          }
        )) })
      }
    )
  ] });
};
D.Content = br;
D.displayName = "Stepper";
export {
  D as S
};
//# sourceMappingURL=stepper-BfIbJwZn.mjs.map
