@konstructio/ui/dist/components/Stepper/Stepper.js

A set of reusable and customizable React components built for konstruct.io

import { t as s } from "../../utils-COaoD3PI.js";
import { stepItemVariants as S, stepListVariants as b, stepperVariants as k } from "./Stepper.variants.js";
import { StepItem as C } from "./components/StepItem/StepItem.js";
import { useMemo as I } from "react";
import { jsx as e } from "react/jsx-runtime";
var P = ({ className: u, classNames: r, clickable: c = !1, currentStep: a, icons: f, orientation: p = "vertical", showConnector: v = !0, size: h = "sm", steps: l, theme: d, variant: g = "inline", onStepClick: z }) => {
  const m = g ?? "inline", o = m === "horizontal" ? "horizontal" : p ?? "vertical", V = h ?? "sm", n = I(() => l.map((t, i) => t.status ? t : a !== void 0 ? i < a ? {
    ...t,
    status: "completed"
  } : i === a ? {
    ...t,
    status: "active"
  } : {
    ...t,
    status: "pending"
  } : {
    ...t,
    status: "pending"
  }), [l, a]);
  return /* @__PURE__ */ e("nav", {
    className: s(k({ orientation: o }), u, r?.root),
    "data-theme": d,
    "aria-label": "Progress steps",
    children: /* @__PURE__ */ e("ol", {
      className: s(b({ orientation: o }), r?.list),
      children: n.map((t, i) => /* @__PURE__ */ e("li", {
        className: s(S({ orientation: o }), r?.item),
        children: /* @__PURE__ */ e(C, {
          step: t,
          index: i,
          isLast: i === n.length - 1,
          orientation: o,
          clickable: c ?? !1,
          onClick: () => z?.(t, i),
          size: V,
          showConnector: v ?? !0,
          nextStepStatus: n[i + 1]?.status,
          variant: m,
          classNames: r,
          icons: f
        })
      }, t.id))
    })
  });
};
export {
  P as Stepper
};