jcicl 3.0.1 → 4.0.2

package/DesktopStepper/DesktopStepper.d.ts

@@ -7,18 +7,22 @@ export type StepProps = {
 export declare const Step: React.FC<PropsWithChildren<StepProps>>;
 /** Imperative handle for driving the stepper from a parent (e.g. jumping to a step with errors). */
 export type DesktopStepperHandle = {
-    /** Animate to the given step index (clamped to the valid range). */
+    /** Animate to the given step index unless validation errors are found during onNext (clamped to the valid range). */
     goToStep: (index: number) => void;
 };
 export type DesktopStepperProps = {
     onNext?: (step?: number) => boolean;
     onFinish: () => Promise<void>;
     onBack?: () => void;
+    /** Determines which step titles are clickable. 'next' allows clicking on the next and all previous steps, 'back' allows clicking on previous steps (default), 'all' allows clicking on all steps, and 'none' disables clicking. */
+    clickVariant?: 'next' | 'back' | 'all' | 'none';
+    submitButtonLabel?: string;
     /** If true, the stepper will maintain the height of the tallest step. */
     staticHeight?: boolean;
     /** Optional imperative handle exposing `goToStep` for programmatic navigation. */
     ref?: React.Ref<DesktopStepperHandle>;
     children: React.ReactElement<StepProps>[];
+    className?: string;
 };
-declare const DesktopStepper: ({ onNext, onBack, onFinish, staticHeight, ref, children, }: PropsWithChildren<DesktopStepperProps>) => import("react/jsx-runtime").JSX.Element;
+declare const DesktopStepper: ({ onNext, onBack, onFinish, staticHeight, clickVariant, submitButtonLabel, ref, children, className, }: PropsWithChildren<DesktopStepperProps>) => import("react/jsx-runtime").JSX.Element;
 export default DesktopStepper;

package/DesktopStepper/DesktopStepper.js

@@ -1,204 +1,245 @@
-import { jsx as t, jsxs as p, Fragment as G } from "react/jsx-runtime";
-import { useState as y, useRef as N, Children as le, isValidElement as se, useLayoutEffect as oe, useEffect as ie, useCallback as J, useImperativeHandle as ne, Fragment as ce } from "react";
-import { flushSync as C } from "react-dom";
-import { cn as s } from "../cn.js";
-import { Button as K } from "../Button/Button.js";
-import { Flex as T } from "../Flex/Flex.js";
-import { SlideOut as ae, SlideIn as ue, SlideInReverse as P, SlideOutReverse as de } from "../animation/Slide/Slide.js";
-import { useThemeColors as O } from "../ThemeContext.js";
-import x from "../theme.js";
-import { useIsMobile as U } from "../utils.js";
-import { C as me } from "../.chunks/check.js";
-const Me = ({ title: i, children: n, className: o }) => /* @__PURE__ */ t("div", { title: i, className: s("p-2.5 w-full", o), children: n }), pe = ({ label: i, number: n, completed: o, active: c }) => {
-  const h = O(), R = U(), e = {
+import { jsx as l, jsxs as h, Fragment as X } from "react/jsx-runtime";
+import { useState as C, useRef as x, Children as ae, isValidElement as ue, useLayoutEffect as me, useEffect as de, useCallback as L, useImperativeHandle as fe } from "react";
+import { flushSync as Y } from "react-dom";
+import { cn as n } from "../cn.js";
+import { Button as Z } from "../Button/Button.js";
+import { Flex as _ } from "../Flex/Flex.js";
+import { SlideOut as he, SlideIn as pe, SlideInReverse as V, SlideOutReverse as be } from "../animation/Slide/Slide.js";
+import { useThemeColors as A } from "../ThemeContext.js";
+import g from "../theme.js";
+import { useIsMobile as ee } from "../utils.js";
+import { C as ve } from "../.chunks/check.js";
+const _e = ({ children: s, className: i }) => /* @__PURE__ */ l("div", { className: n("p-2.5 w-full", i), children: s }), Ce = ({ label: s, number: i, completed: u, active: c, onClick: m }) => {
+  const b = A(), j = ee(), N = {
     "--item-circle-transition-delay": c ? "0.3s" : "0s",
-    "--item-circle-border": h.themeColor,
-    "--item-circle-bg": c || o ? h.themeColor : "transparent",
-    "--item-circle-color": c || o ? x.colors.white : h.themeColor,
-    "--label-color": h.themeColor,
-    "--label-opacity": c ? 1 : 0.7
+    "--item-circle-border": b.themeColor,
+    "--item-circle-bg": c || u ? b.themeColor : "transparent",
+    "--item-circle-color": c || u ? g.colors.white : b.themeColor,
+    "--label-color": b.themeColor,
+    "--label-opacity": c ? 1 : 0.8,
+    "--label-weight": c ? "500" : "400"
   };
-  return /* @__PURE__ */ t("div", { style: e, className: s("stepperTitleItem font-medium justify-center items-center"), children: /* @__PURE__ */ p(T, { column: !0, alignItems: "center", gap: "4px", children: [
-    /* @__PURE__ */ t("div", { className: s("itemCircle", "justify-center flex box-border items-center select-none transition-all duration-300 delay-(--item-circle-transition-delay) ease-in-out w-[35px] h-[35px] mx-[8px] rounded-full border-[2px] border-(--item-circle-border) bg-(--item-circle-bg) text-(--item-circle-color)"), children: o ? /* @__PURE__ */ t(me, { size: 18, strokeWidth: 3 }) : n }),
-    /* @__PURE__ */ t("div", { className: s("label", "text-(--label-color) text-center opacity-(--label-opacity) transition-[all_0.5s_ease]", R && "px-[5px]"), children: i })
+  return /* @__PURE__ */ l("div", { style: N, className: n("stepperTitleItem font-medium justify-center items-center"), children: /* @__PURE__ */ h(_, { column: !0, alignItems: "center", gap: "4px", children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: n("itemCircle", "font-[inherit] font-medium! justify-center flex box-border items-center select-none transition-all duration-300 delay-(--item-circle-transition-delay) ease-in-out w-[35px] h-[35px] mx-[8px] rounded-full border-[2px] border-(--item-circle-border) bg-(--item-circle-bg) text-(--item-circle-color)", m && "cursor-pointer"),
+        onClick: m,
+        disabled: !m,
+        children: u ? /* @__PURE__ */ l(ve, { size: 18, strokeWidth: 3 }) : i
+      }
+    ),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: n("label", "cursor-default text-sm mx-1 text-(--label-color) text-center opacity-(--label-opacity) font-(--label-weight) transition-[all_0.5s_ease]", j && "px-[5px]", m && "cursor-pointer"),
+        onClick: m,
+        children: s
+      }
+    )
   ] }) });
-}, he = ({ activated: i }) => {
-  const n = O(), o = {
-    "--title-slider-active-color": n.themeColor,
-    "--title-slider-active-percent": i ? "50%" : "49%",
-    "--title-slider-inactive-color": n.themeLightA,
-    "--title-slider-position": i ? "left bottom" : "right bottom"
+}, ge = ({ activated: s }) => {
+  const i = A(), u = {
+    "--title-slider-active-color": i.themeColor,
+    "--title-slider-active-percent": s ? "50%" : "49%",
+    "--title-slider-inactive-color": i.themeLightA,
+    "--title-slider-position": s ? "left bottom" : "right bottom"
   };
-  return /* @__PURE__ */ t("div", { className: s("flex-1 h-[3px] rounded-[2px] self-start mt-[16px] bg-[linear-gradient(to_right,var(--title-slider-active-color)_var(--title-slider-active-percent),var(--title-slider-inactive-color)_50%)] bg-size-[200%_100%] bg-[position:var(--title-slider-position)] transition-background-position duration-500 ease-in-out"), style: o });
-}, fe = "relative w-full h-full flex items-center justify-between flex-col gap-[15px] m-0 bg-transparent overflow-hidden", Q = "absolute top-0 w-full h-full", be = "relative w-full [&_.jcSlideContainer]:justify-items-center", Ce = "will-change-[height] transition-[height] duration-500 ease-[cubic-bezier(0.2,0,0,1)]", Ee = ({
-  onNext: i = () => !0,
-  onBack: n,
-  onFinish: o,
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: n(
+        "absolute top-4 left-[calc(50%+25px)] h-0.75 w-[calc(100%-50px)] rounded-sm bg-size-[200%_100%] duration-500 ease-in-out",
+        "bg-[linear-gradient(to_right,var(--title-slider-active-color)_var(--title-slider-active-percent),var(--title-slider-inactive-color)_50%)] bg-position-(--title-slider-position)"
+      ),
+      style: u
+    }
+  );
+}, Se = "relative w-full h-full flex items-center justify-between flex-col gap-[15px] m-0 bg-transparent overflow-hidden", F = "absolute top-0 w-full h-full", ye = "relative w-full [&_.jcSlideContainer]:justify-items-center", we = "will-change-[height] transition-[height] duration-500 ease-[cubic-bezier(0.2,0,0,1)]", Ae = ({
+  onNext: s = () => !0,
+  onBack: i,
+  onFinish: u,
   staticHeight: c = !1,
-  ref: h,
-  children: R
+  clickVariant: m = "back",
+  submitButtonLabel: b,
+  ref: j,
+  children: N,
+  className: D
 }) => {
-  const [e, w] = y(0), [v, f] = y("forward"), [z, I] = y(null), [B, k] = y(!1), [_, A] = y(!1), D = N(null), L = N([]), M = N(null), g = N(0), d = O(), H = U(), a = le.toArray(R).filter(
-    (l) => se(l)
-  ), E = a.map((l) => l.props.title || ""), X = E.some((l) => l !== ""), u = a.length, Y = {
+  const [e, te] = C(0), [S, H] = C("forward"), [W, k] = C(null), [T, R] = C(!1), [B, $] = C(!1), q = x(null), G = x([]), M = x(null), O = x(0), d = A(), J = ee(), a = ae.toArray(N).filter(
+    (t) => ue(t)
+  ), E = a.map((t) => t.props.title || ""), re = E.some((t) => t !== ""), y = a.length, p = e === y - 1, le = {
     "--progress-bar-bg": d.themeLightA,
     "--progress-bar-border": d.themeColor,
     "--progress-bar-color": d.themeColor
   };
-  oe(() => {
+  me(() => {
     if (c) {
-      const $ = L.current, V = () => {
-        let m = 0;
-        $.forEach((S) => {
-          if (S) {
-            const F = S.getBoundingClientRect().height;
-            F > m && (m = F);
+      const I = G.current, P = () => {
+        let f = 0;
+        I.forEach((v) => {
+          if (v) {
+            const U = v.getBoundingClientRect().height;
+            U > f && (f = U);
           }
-        }), I(m ? Math.ceil(m) : null);
+        }), k(f ? Math.ceil(f) : null);
       };
-      if (V(), typeof ResizeObserver > "u") return;
-      const q = [];
-      return $.forEach((m) => {
-        if (m) {
-          const S = new ResizeObserver(V);
-          S.observe(m), q.push(S);
+      if (P(), typeof ResizeObserver > "u") return;
+      const Q = [];
+      return I.forEach((f) => {
+        if (f) {
+          const v = new ResizeObserver(P);
+          v.observe(f), Q.push(v);
         }
-      }), () => q.forEach((m) => m.disconnect());
+      }), () => Q.forEach((f) => f.disconnect());
     }
-    const l = D.current;
-    if (!l) return;
+    const t = q.current;
+    if (!t) return;
     const r = () => {
-      I(Math.ceil(l.getBoundingClientRect().height));
+      k(Math.ceil(t.getBoundingClientRect().height));
     };
     if (r(), typeof ResizeObserver > "u") return;
-    const b = new ResizeObserver(r);
-    return b.observe(l), () => b.disconnect();
-  }, [e, u, c]), ie(() => () => clearTimeout(M.current ?? void 0), []);
-  const j = J(() => {
-    A(!0), clearTimeout(M.current ?? void 0), M.current = setTimeout(() => {
-      A(!1);
+    const o = new ResizeObserver(r);
+    return o.observe(t), () => o.disconnect();
+  }, [e, y, c]), de(() => () => clearTimeout(M.current ?? void 0), []);
+  const K = L(() => {
+    $(!0), clearTimeout(M.current ?? void 0), M.current = setTimeout(() => {
+      $(!1);
     }, 550);
-  }, []), Z = async () => {
-    if (e === u - 1) {
-      k(!0);
+  }, []), w = L(
+    (t, r) => {
+      K(), O.current = e, Y(() => H("none")), Y(() => H(t)), te(r);
+    },
+    [K, e]
+  ), se = async () => {
+    if (p) {
+      R(!0);
       try {
-        await (o == null ? void 0 : o());
+        await (u == null ? void 0 : u());
       } finally {
-        k(!1);
+        R(!1);
       }
     } else {
-      if (!(i == null ? void 0 : i(e))) {
-        k(!1);
+      if (!(s == null ? void 0 : s(e))) {
+        R(!1);
         return;
       }
-      j(), g.current = e, C(() => f("none")), C(() => f("forward")), w((r) => r + 1);
+      w("forward", e + 1);
     }
-  }, ee = () => {
-    j(), g.current = e, C(() => f("none")), C(() => f("reverse")), w((l) => l - 1), n == null || n();
-  }, W = J(
-    (l) => {
-      const r = Math.max(0, Math.min(l, u - 1));
-      if (r === e) return;
-      j(), g.current = e;
-      const b = r > e ? "forward" : "reverse";
-      C(() => f("none")), C(() => f(b)), w(r);
+  }, ie = () => {
+    w("reverse", e - 1), i == null || i();
+  }, z = L(
+    (t) => {
+      let r = Math.max(0, Math.min(t, y - 1));
+      for (let o = e; o > r; o--)
+        i == null || i();
+      for (let o = e; o < r; o++)
+        if (!(s == null ? void 0 : s(o))) {
+          r = o;
+          break;
+        }
+      r !== e && w(r > e ? "forward" : "reverse", r);
     },
-    [e, u, j]
+    [e, y, w, s, i]
   );
-  ne(h, () => ({ goToStep: W }), [W]);
-  const te = () => /* @__PURE__ */ t(
-    K,
+  fe(j, () => ({ goToStep: z }), [z]);
+  const oe = () => /* @__PURE__ */ l(
+    Z,
     {
       variant: "custom",
-      onClick: Z,
-      backgroundColor: e === u - 1 ? x.colors.gold : d.themeColor,
-      hoverColor: e === u - 1 ? x.colors.goldHover : d.themeDark,
-      textColor: e === u - 1 ? x.colors.black : x.colors.white,
-      disabled: B,
-      children: e === u - 1 ? B ? "Submitting..." : "Submit" : "Next"
+      onClick: se,
+      backgroundColor: p ? g.colors.gold : d.themeColor,
+      hoverColor: p ? g.colors.goldHover : d.themeDark,
+      textColor: p ? g.colors.black : g.colors.white,
+      disabled: T,
+      children: p ? T ? "Submitting..." : b || "Submit" : "Next"
     }
-  ), re = () => /* @__PURE__ */ t(
-    K,
+  ), ne = () => /* @__PURE__ */ l(
+    Z,
     {
       variant: "custom",
-      onClick: ee,
+      onClick: ie,
       backgroundColor: d.themeLight,
       borderColor: d.themeColor,
       hoverColor: d.themeMediumB,
       textColor: d.themeColor,
       children: "Back"
     }
-  );
-  return /* @__PURE__ */ p(T, { column: !0, justifyContent: "center", gap: "10px", className: s("jcStep"), children: [
-    /* @__PURE__ */ t(T, { justifyContent: "space-between", width: "90%", className: s("jcDesktopStepHeader", "self-center"), children: E.map((l, r) => /* @__PURE__ */ p(ce, { children: [
-      /* @__PURE__ */ t(
-        pe,
+  ), ce = (t) => {
+    if (!T && !(m === "none" || t === e) && !(m === "back" && t > e) && !(m === "next" && t > e + 1))
+      return () => z(t);
+  };
+  return /* @__PURE__ */ h(_, { column: !0, justifyContent: "center", gap: "10px", className: n("jcStep", D), children: [
+    /* @__PURE__ */ l("ol", { className: "m-0 mb-1 flex w-full list-none items-start p-0", children: E.map((t, r) => /* @__PURE__ */ h("li", { className: "relative flex min-w-0 flex-1 flex-col items-center", children: [
+      /* @__PURE__ */ l(
+        Ce,
         {
-          label: l,
+          label: t,
           number: r + 1,
           completed: r < e,
-          active: r === e
-        },
-        r
+          active: r === e,
+          onClick: ce(r)
+        }
       ),
-      r < E.length - 1 && (H !== X || !H) && /* @__PURE__ */ t(he, { activated: r < e })
+      r < E.length - 1 && (J !== re || !J) && /* @__PURE__ */ l(ge, { activated: r < e })
     ] }, r)) }),
-    /* @__PURE__ */ p("div", { className: s("jcStep", fe), style: Y, children: [
-      /* @__PURE__ */ p(
+    /* @__PURE__ */ h("div", { className: n("jcStep", Se), style: le, children: [
+      /* @__PURE__ */ h(
         "div",
         {
-          className: s(be, _ && Ce),
+          className: n(ye, B && we),
           style: {
-            height: c || z != null && _ ? `${z}px` : "auto"
+            height: c || W != null && B ? `${W}px` : "auto"
           },
           children: [
-            c ? /* @__PURE__ */ t(
+            c ? /* @__PURE__ */ l(
               "div",
               {
                 "aria-hidden": "true",
                 className: "jcStepperMeasure pointer-events-none absolute left-0 top-0 invisible w-full",
-                children: a.map((l, r) => /* @__PURE__ */ t(
+                children: a.map((t, r) => /* @__PURE__ */ l(
                   "div",
                   {
-                    ref: (b) => {
-                      L.current[r] = b;
+                    ref: (o) => {
+                      G.current[r] = o;
                     },
                     className: "w-full",
-                    children: l
+                    children: t
                   },
                   r
                 ))
               }
-            ) : /* @__PURE__ */ t(
+            ) : /* @__PURE__ */ l(
               "div",
               {
-                ref: D,
+                ref: q,
                 "aria-hidden": "true",
                 className: "jcStepperMeasure pointer-events-none absolute left-0 top-0 invisible w-full",
                 children: a[e] ?? null
               }
             ),
-            e === 0 && v === "forward" && /* @__PURE__ */ t("div", { className: s("jcSlideContainer"), children: a[e] ?? null }),
-            e !== 0 && v === "forward" && /* @__PURE__ */ p(G, { children: [
-              /* @__PURE__ */ t("div", { className: s("jcSlideOutContainer", Q), children: /* @__PURE__ */ t(ae, { className: "jcSlideContainer", children: a[g.current] ?? null }) }),
-              /* @__PURE__ */ t(ue, { className: "jcSlideContainer", children: a[e] ?? null })
+            e === 0 && S === "forward" && /* @__PURE__ */ l("div", { className: n("jcSlideContainer"), children: a[e] ?? null }),
+            e !== 0 && S === "forward" && /* @__PURE__ */ h(X, { children: [
+              /* @__PURE__ */ l("div", { className: n("jcSlideOutContainer", F), children: /* @__PURE__ */ l(he, { className: "jcSlideContainer", children: a[O.current] ?? null }) }),
+              /* @__PURE__ */ l(pe, { className: "jcSlideContainer", children: a[e] ?? null })
             ] }),
-            e === u - 1 && v === "reverse" && /* @__PURE__ */ t(P, { className: "jcSlideContainer", children: a[e] ?? null }),
-            e !== u - 1 && v === "reverse" && /* @__PURE__ */ p(G, { children: [
-              /* @__PURE__ */ t("div", { className: s("jcSlideOutContainer", Q), children: /* @__PURE__ */ t(de, { className: "jcSlideContainer", children: a[g.current] ?? null }) }),
-              /* @__PURE__ */ t(P, { className: "jcSlideContainer", children: a[e] ?? null })
+            p && S === "reverse" && /* @__PURE__ */ l(V, { className: "jcSlideContainer", children: a[e] ?? null }),
+            !p && S === "reverse" && /* @__PURE__ */ h(X, { children: [
+              /* @__PURE__ */ l("div", { className: n("jcSlideOutContainer", F), children: /* @__PURE__ */ l(be, { className: "jcSlideContainer", children: a[O.current] ?? null }) }),
+              /* @__PURE__ */ l(V, { className: "jcSlideContainer", children: a[e] ?? null })
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ p(T, { gap: "10px", className: "self-end mb-[5px] mr-[5px]", children: [
-        e !== 0 && re(),
-        te()
+      /* @__PURE__ */ h(_, { gap: "10px", className: "self-end mb-[5px] mr-[5px]", children: [
+        e !== 0 && ne(),
+        oe()
       ] })
     ] })
   ] });
 };
 export {
-  Me as Step,
-  Ee as default
+  _e as Step,
+  Ae as default
 };