welcome-ui/dist/Stepper.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './Stepper.css';
import { jsx as o, jsxs as k } from "react/jsx-runtime";
import { forwardRef as I, useState as b, useRef as R, useEffect as u } from "react";
import { Icon as i } from "./Icon.js";
import { c as x } from "./index-B6iGEm-i.js";
import { Text as L } from "./Text.js";
const F = "_root_e6wyb_2", j = "_wrapper_e6wyb_16", z = "_separator_e6wyb_49", E = "_item_e6wyb_53", C = "_clickable_e6wyb_87", O = "_completed_e6wyb_96", V = {
  root: F,
  wrapper: j,
  "fade-left": "_fade-left_e6wyb_28",
  "fade-right": "_fade-right_e6wyb_28",
  separator: z,
  item: E,
  clickable: C,
  completed: O
};
function W({
  icon: s,
  isCompleted: c,
  isOpen: e
}) {
  return s || (c ? /* @__PURE__ */ o(i, { name: "check-circle" }) : e ? /* @__PURE__ */ o(i, { name: "folder-open" }) : /* @__PURE__ */ o(i, { name: "folder" }));
}
const m = x(V), h = I(
  ({ children: s, className: c, wrapperProps: e }, a) => {
    const [l, f] = b(!1), [d, S] = b(!1), g = R(null), n = a || g;
    return u(() => {
      const t = n.current;
      if (!t) return;
      const r = () => {
        const { clientWidth: v, scrollLeft: _, scrollWidth: N } = t;
        f(_ > 0), S(_ < N - v - 1);
      };
      r(), t.addEventListener("scroll", r);
      const p = new ResizeObserver(r);
      return p.observe(t), () => {
        t.removeEventListener("scroll", r), p.disconnect();
      };
    }, [n]), u(() => {
      const t = n.current;
      if (!t) return;
      const r = t.querySelector('[aria-current="true"]');
      r && r.scrollIntoView && r.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
    }, [s, n]), /* @__PURE__ */ o("div", { ...e, className: m("root", e == null ? void 0 : e.className), children: /* @__PURE__ */ o(
      "ol",
      {
        className: m(
          "wrapper",
          c,
          l && "fade-left",
          d && "fade-right"
        ),
        ref: n,
        children: s
      }
    ) });
  }
);
h.displayName = "Stepper";
const w = () => /* @__PURE__ */ o("div", { className: m("separator"), children: /* @__PURE__ */ o(i, { name: "angle-right-b", size: "lg" }) });
w.displayName = "Stepper.Separator";
const y = ({ children: s, icon: c, isCompleted: e, isOpen: a, onClick: l }) => {
  const f = W({ icon: c, isCompleted: e, isOpen: a });
  return /* @__PURE__ */ k(
    "li",
    {
      "aria-current": a,
      className: m("item", !!l && "clickable", e && "completed"),
      onClick: l,
      children: [
        f,
        /* @__PURE__ */ o(L, { variant: "label-md", children: s })
      ]
    }
  );
};
y.displayName = "Stepper.Item";
const G = Object.assign(h, {
  Item: y,
  Separator: w
});
export {
  G as Stepper,
  V as stepperClasses
};