impact-nova 1.7.50 → 1.7.51

package/dist/components/ui/wizard/wizard.js

@@ -0,0 +1,312 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as a from "react";
+import { useControllableState as C } from "@radix-ui/react-use-controllable-state";
+import { cn as c } from "../../../lib/utils.js";
+import R from "../../../icons/assets/createFlowImage.svg.js";
+const N = a.createContext(null), S = a.createContext(null), W = () => {
+  const t = a.useContext(N);
+  if (!t)
+    throw new Error("Wizard.* components must be used within WizardRoot");
+  return t;
+}, y = () => {
+  const t = a.useContext(S);
+  if (!t)
+    throw new Error("Wizard content and footer must be used within WizardBody");
+  return t;
+};
+function O() {
+  const { value: t, totalSteps: e, setValue: o } = W();
+  return a.useMemo(
+    () => ({
+      value: t,
+      totalSteps: e,
+      setValue: o,
+      goNext: () => o(Math.min(t + 1, e)),
+      goBack: () => o(Math.max(t - 1, 1)),
+      isFirstStep: t <= 1,
+      isLastStep: t >= e
+    }),
+    [t, e, o]
+  );
+}
+const E = ({
+  value: t,
+  defaultValue: e = 1,
+  onValueChange: o,
+  totalSteps: r,
+  steps: s = [],
+  children: i
+}) => {
+  const [p, m] = C({
+    prop: t,
+    defaultProp: e,
+    onChange: o
+  }), [u, l] = a.useState([]), x = a.useCallback((b) => {
+    l((v) => v.includes(b) ? v : [...v, b].sort((g, w) => g - w));
+  }, []), d = a.useCallback((b) => {
+    l((v) => v.filter((g) => g !== b));
+  }, []), f = r ?? (u.length > 0 ? Math.max(...u) : s.length), h = a.useMemo(
+    () => ({
+      value: p ?? e,
+      totalSteps: f,
+      steps: s,
+      setValue: m,
+      registerStep: x,
+      unregisterStep: d
+    }),
+    [p, e, f, s, m, x, d]
+  );
+  return /* @__PURE__ */ n(N.Provider, { value: h, children: i });
+};
+E.displayName = "WizardRoot";
+const k = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: c(
+        "flex flex-row bg-canvas-elevated rounded-lg shadow-elevation-card overflow-hidden w-[83%] mx-auto min-h-0 min-w-0 flex-1",
+        t
+      ),
+      ...o,
+      children: e
+    }
+  )
+);
+k.displayName = "WizardLayout";
+const _ = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      className: c(
+        "hidden lg:flex flex-col w-[300px] xl:w-[427px] shrink-0 bg-canvas-elevated border-r border-stroke-hairline pt-[100px]",
+        t
+      ),
+      "data-slot": "sidebar",
+      ...o,
+      children: e
+    }
+  )
+);
+_.displayName = "WizardSidebar";
+const M = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "h1",
+    {
+      ref: r,
+      className: c("font-manrope text-[24px] font-[800] leading-[36px] text-[#0D152C] mb-3 px-6 lg:px-10 xl:px-[64px]", t),
+      ...o,
+      children: e
+    }
+  )
+);
+M.displayName = "WizardTitle";
+const D = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "p",
+    {
+      ref: r,
+      className: c("font-manrope text-[12px] font-[500] leading-[16px] text-[#7A8294] px-6 lg:px-10 xl:px-[64px]", t),
+      ...o,
+      children: e
+    }
+  )
+);
+D.displayName = "WizardDescription";
+const L = a.forwardRef(
+  ({ className: t, src: e, alt: o = "Wizard illustration", children: r, ...s }, i) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: i,
+      className: c(
+        "mt-auto shrink-0 w-[200px] xl:w-[280px] h-[120px] xl:h-[166px] mx-auto xl:ml-[73px] xl:mr-[73px] mb-[100px]",
+        t
+      ),
+      "data-slot": "media",
+      ...s,
+      children: r || (e ? /* @__PURE__ */ n("img", { src: e, alt: o, className: "w-full h-full object-contain" }) : /* @__PURE__ */ n(R, { className: "w-full h-full", role: "img", "aria-label": o }))
+    }
+  )
+);
+L.displayName = "WizardMedia";
+const F = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => {
+    const [s, i] = a.useState({ top: !1, bottom: !1 });
+    return /* @__PURE__ */ n(S.Provider, { value: { edges: s, setEdges: i }, children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: r,
+        className: c(
+          "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden pt-[50px] px-6 sm:px-10 md:px-16 lg:px-20 xl:px-[60px] 2xl:px-[190px] pb-[73px]",
+          t
+        ),
+        "data-slot": "body",
+        ...o,
+        children: e
+      }
+    ) });
+  }
+);
+F.displayName = "WizardBody";
+const P = a.forwardRef(
+  ({ className: t, interactive: e = !0, linear: o = !1, ...r }, s) => {
+    const { value: i, totalSteps: p, steps: m, setValue: u } = W();
+    if (p <= 0) return null;
+    const l = (x) => {
+      e && (o && x > i || u(x));
+    };
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: s,
+        className: c("flex gap-2 mb-[42px] shrink-0", t),
+        "data-slot": "progress",
+        role: "list",
+        ...r,
+        children: Array.from({ length: p }, (x, d) => {
+          const f = d + 1, h = d === i - 1, b = d < i - 1, g = m[d]?.label ?? `Step ${f} of ${p}`, w = e && (!o || f <= i);
+          return /* @__PURE__ */ n(
+            "div",
+            {
+              role: "listitem",
+              "aria-label": g,
+              "aria-current": h ? "step" : void 0,
+              tabIndex: w ? 0 : void 0,
+              onClick: () => l(f),
+              onKeyDown: w ? (z) => {
+                (z.key === "Enter" || z.key === " ") && (z.preventDefault(), l(f));
+              } : void 0,
+              className: c(
+                "h-2 flex-1 max-w-[132px] rounded-[4px] transition-colors duration-300",
+                h || b ? "bg-[#4259ee]" : "bg-[#e8eaf6]",
+                w ? "cursor-pointer" : "cursor-default"
+              )
+            },
+            d
+          );
+        })
+      }
+    );
+  }
+);
+P.displayName = "WizardProgress";
+const A = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "h2",
+    {
+      ref: r,
+      className: c("font-manrope text-[14px] font-[800] leading-[21px] text-[#0D152C]", t),
+      ...o,
+      children: e
+    }
+  )
+);
+A.displayName = "WizardHeader";
+const B = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => /* @__PURE__ */ n(
+    "p",
+    {
+      ref: r,
+      className: c("text-[14px] font-normal leading-relaxed text-content-muted", t),
+      ...o,
+      children: e
+    }
+  )
+);
+B.displayName = "WizardStepDescription";
+const H = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => {
+    const { edges: s, setEdges: i } = y(), p = a.useRef(null), m = a.useCallback(
+      (l) => {
+        p.current = l, typeof r == "function" ? r(l) : r && (r.current = l);
+      },
+      [r]
+    ), u = a.useCallback(() => {
+      const l = p.current;
+      if (!l) return;
+      const { scrollTop: x, scrollHeight: d, clientHeight: f } = l, h = 1, b = x > h, v = x + f < d - h;
+      i((g) => g.top === b && g.bottom === v ? g : { top: b, bottom: v });
+    }, [i]);
+    return a.useEffect(() => {
+      const l = p.current;
+      if (!l) return;
+      const x = () => {
+        requestAnimationFrame(u);
+      };
+      x(), l.addEventListener("scroll", u, { passive: !0 });
+      const d = new ResizeObserver(x);
+      d.observe(l);
+      const f = l.firstElementChild;
+      return f && d.observe(f), () => {
+        l.removeEventListener("scroll", u), d.disconnect();
+      };
+    }, [u, e]), /* @__PURE__ */ n(
+      "div",
+      {
+        className: c(
+          "flex flex-col flex-1 min-h-0 transition-[box-shadow] duration-200",
+          s.top && "shadow-[inset_0_1px_0_0_var(--color-border-hairline)]"
+        ),
+        "data-slot": "content-wrapper",
+        "data-scroll-top": s.top || void 0,
+        "data-scroll-bottom": s.bottom || void 0,
+        children: /* @__PURE__ */ n(
+          "div",
+          {
+            ref: m,
+            className: c("flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-0.5", t),
+            "data-slot": "content",
+            ...o,
+            children: e
+          }
+        )
+      }
+    );
+  }
+);
+H.displayName = "WizardContent";
+const T = a.forwardRef(
+  ({ className: t, value: e, children: o, ...r }, s) => {
+    const { value: i, registerStep: p, unregisterStep: m } = W();
+    return a.useEffect(() => (p(e), () => m(e)), [e, p, m]), i !== e ? null : /* @__PURE__ */ n("div", { ref: s, className: c(t), "data-step": e, ...r, children: o });
+  }
+);
+T.displayName = "WizardStep";
+const j = a.forwardRef(
+  ({ className: t, children: e, ...o }, r) => {
+    const { edges: s } = y();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: r,
+        className: c(
+          "relative z-10 mt-auto flex shrink-0 items-center justify-between bg-canvas-elevated pt-6 pb-[27px] transition-[box-shadow,border-color] duration-200",
+          s.bottom && "border-t border-stroke-hairline shadow-[0_-4px_8px_-6px_rgba(13,21,44,0.08)]",
+          t
+        ),
+        "data-slot": "footer",
+        "data-scroll-bottom": s.bottom || void 0,
+        ...o,
+        children: e
+      }
+    );
+  }
+);
+j.displayName = "WizardFooter";
+export {
+  F as WizardBody,
+  H as WizardContent,
+  D as WizardDescription,
+  j as WizardFooter,
+  A as WizardHeader,
+  k as WizardLayout,
+  L as WizardMedia,
+  P as WizardProgress,
+  E as WizardRoot,
+  _ as WizardSidebar,
+  T as WizardStep,
+  B as WizardStepDescription,
+  M as WizardTitle,
+  O as useWizard
+};