reactjs-multi-stepper 1.3.0 → 1.3.1

package/dist/index.css

@@ -1 +1 @@
-:root{--color-primary: #0284c7;--color-primary-light: #38bdf8;--color-success: #16a34a;--color-error: #ef4444;--color-text: #111827;--color-text-light: #4b5563;--color-black: #000;--color-white: #fff;--color-border: #d1d5db;--color-border-light: #e2e8f0;--spacing-xs: .375rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--step-size: 2.5rem;--step-font-weight: 600;--step-radius: 50%;--spinner-size: 1.5rem;--spinner-thickness: 3px;--spinner-color: #3b82f6;--spinner-track: #e5e7eb;--spinner-speed: .8s}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}.app-container{padding-block:var(--spacing-lg);width:100%}.stepper-header{display:flex;justify-content:space-between}.step-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.step-item:not(:last-child):after{content:"";background-color:var(--color-border-light);position:absolute;width:calc(100% - var(--step-size));height:3px;left:calc(50% + (var(--step-size) / 2));top:calc(var(--step-size) / 2 - .125rem);transition:all .2s}.step{width:var(--step-size);height:var(--step-size);display:flex;align-items:center;justify-content:center;z-index:10;position:relative;border-radius:var(--step-radius);font-weight:var(--step-font-weight);color:var(--color-black);transition:all .2s;border:1px solid var(--color-border)}.step-active{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.step-complete{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-white)}.step-finished{background-color:var(--color-success);color:var(--color-white)}.active:not(:last-child):after{background-color:var(--color-border-light)}.complete:not(:last-child):after{background-color:var(--color-success)}.step-title{font-size:1rem;color:var(--color-text);font-weight:500;margin-top:var(--spacing-md)}.step-description{font-size:.85rem;color:var(--color-text-light);font-weight:300;margin-top:var(--spacing-sm)}.stepper-content{display:flex;justify-content:center;align-items:center}.stepper-footer{display:flex;justify-content:space-around;align-items:center;padding:var(--spacing-lg) var(--spacing-xl)}.stepper-button{padding:var(--spacing-xs) var(--spacing-xl);font-size:1rem;border-radius:.375rem;border:1px solid #9ca3af;background-color:transparent;color:inherit;cursor:pointer}.stepper-button-fill{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.test-step{padding:10vh;display:flex;justify-content:center;align-items:center;border-radius:1rem;width:50%;margin-block:2rem}.test-step h3{color:#fff}.step-text{text-align:center}@media (max-width: 768px){.stepper-header{border:2px solid red;padding:0%;margin:0%}}
+:root{--color-primary: #0284c7;--color-primary-light: #38bdf8;--color-success: #16a34a;--color-error: #ef4444;--color-text: #111827;--color-text-light: #4b5563;--color-black: #000;--color-white: #fff;--color-border: #d1d5db;--color-border-light: #e2e8f0;--spacing-xs: .375rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--step-size: 2.5rem;--step-font-weight: 600;--step-radius: 50%;--spinner-size: 1.5rem;--spinner-thickness: 3px;--spinner-color: #3b82f6;--spinner-track: #e5e7eb;--spinner-speed: .8s}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}.app-container{padding-block:var(--spacing-lg);width:100%}.stepper-header{display:flex;justify-content:space-between}.step-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.step-item:not(:last-child):after{content:"";background-color:var(--color-border-light);position:absolute;width:calc(100% - var(--step-size));height:3px;left:calc(50% + (var(--step-size) / 2));top:calc(var(--step-size) / 2 - .125rem);transition:all .2s}.step{width:var(--step-size);height:var(--step-size);display:flex;align-items:center;justify-content:center;z-index:10;position:relative;border-radius:var(--step-radius);font-weight:var(--step-font-weight);color:var(--color-black);transition:all .2s;border:1px solid var(--color-border)}.step-active{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.step-complete{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-white)}.step-finished{background-color:var(--color-success);color:var(--color-white)}.active:not(:last-child):after{background-color:var(--color-border-light)}.complete:not(:last-child):after{background-color:var(--color-success)}.step-title{font-size:1rem;color:var(--color-text);font-weight:500;margin-top:var(--spacing-md)}.step-description{font-size:.85rem;color:var(--color-text-light);font-weight:300;margin-top:var(--spacing-sm)}.stepper-content{display:flex;justify-content:center;align-items:center}.stepper-footer{display:flex;justify-content:space-around;align-items:center;padding:var(--spacing-lg) var(--spacing-xl)}.stepper-button{padding:var(--spacing-xs) var(--spacing-xl);font-size:1rem;border-radius:.375rem;border:1px solid #9ca3af;background-color:transparent;color:inherit;cursor:pointer}.stepper-button-fill{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.stepper-button-disabled{opacity:.5;cursor:not-allowed}.test-step{padding:10vh;display:flex;justify-content:center;align-items:center;border-radius:1rem;width:50%;margin-block:2rem}.test-step h3{color:#fff}.step-text{text-align:center}@media (max-width: 768px){.stepper-header{padding:0%;margin:0%}}

package/dist/multi-stepper.es.js

@@ -1,5 +1,5 @@
-import ce, { createContext as le, useContext as ie, useState as q, useEffect as ue, useCallback as g, useMemo as G, Fragment as $ } from "react";
-import './index.css';var P = { exports: {} }, j = {};
+import z, { createContext as se, useContext as ce, useState as U, useEffect as le, useCallback as h, useMemo as ie, Fragment as $ } from "react";
+import './index.css';var P = { exports: {} }, R = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ import './index.css';var P = { exports: {} }, j = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var J;
-function fe() {
-  if (J) return j;
-  J = 1;
-  var t = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
-  function i(n, u, f) {
-    var p = null;
-    if (f !== void 0 && (p = "" + f), u.key !== void 0 && (p = "" + u.key), "key" in u) {
-      f = {};
-      for (var h in u)
-        h !== "key" && (f[h] = u[h]);
-    } else f = u;
-    return u = f.ref, {
-      $$typeof: t,
-      type: n,
-      key: p,
-      ref: u !== void 0 ? u : null,
-      props: f
+var V;
+function ue() {
+  if (V) return R;
+  V = 1;
+  var n = Symbol.for("react.transitional.element"), u = Symbol.for("react.fragment");
+  function a(t, i, c) {
+    var m = null;
+    if (c !== void 0 && (m = "" + c), i.key !== void 0 && (m = "" + i.key), "key" in i) {
+      c = {};
+      for (var v in i)
+        v !== "key" && (c[v] = i[v]);
+    } else c = i;
+    return i = c.ref, {
+      $$typeof: n,
+      type: t,
+      key: m,
+      ref: i !== void 0 ? i : null,
+      props: c
     };
   }
-  return j.Fragment = s, j.jsx = i, j.jsxs = i, j;
+  return R.Fragment = u, R.jsx = a, R.jsxs = a, R;
 }
-var T = {};
+var j = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,123 +41,124 @@ var T = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var V;
-function de() {
-  return V || (V = 1, process.env.NODE_ENV !== "production" && function() {
-    function t(e) {
+var q;
+function fe() {
+  return q || (q = 1, process.env.NODE_ENV !== "production" && function() {
+    function n(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === oe ? null : e.displayName || e.name || null;
+        return e.$$typeof === ne ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case v:
+        case O:
           return "Fragment";
-        case H:
-          return "Profiler";
         case B:
+          return "Profiler";
+        case X:
           return "StrictMode";
-        case ee:
+        case K:
           return "Suspense";
-        case re:
+        case ee:
           return "SuspenseList";
-        case ne:
+        case re:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case c:
+          case E:
             return "Portal";
-          case Q:
-            return (e.displayName || "Context") + ".Provider";
           case Z:
+            return e.displayName || "Context";
+          case H:
             return (e._context.displayName || "Context") + ".Consumer";
-          case K:
+          case Q:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case te:
-            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
-          case F:
+            return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
+          case A:
             r = e._payload, e = e._init;
             try {
-              return t(e(r));
+              return n(e(r));
             } catch {
             }
         }
       return null;
     }
-    function s(e) {
+    function u(e) {
       return "" + e;
     }
-    function i(e) {
+    function a(e) {
       try {
-        s(e);
+        u(e);
         var r = !1;
       } catch {
         r = !0;
       }
       if (r) {
         r = console;
-        var a = r.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return a.call(
+        var s = r.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return s.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
-        ), s(e);
+          f
+        ), u(e);
       }
     }
-    function n(e) {
-      if (e === v) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === F)
+    function t(e) {
+      if (e === O) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === A)
         return "<...>";
       try {
-        var r = t(e);
+        var r = n(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function u() {
-      var e = A.A;
+    function i() {
+      var e = y.A;
       return e === null ? null : e.getOwner();
     }
-    function f() {
+    function c() {
       return Error("react-stack-top-frame");
     }
-    function p(e) {
-      if (I.call(e, "key")) {
+    function m(e) {
+      if (F.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function h(e, r) {
-      function a() {
+    function v(e, r) {
+      function s() {
         M || (M = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
       }
-      a.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: a,
+      s.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: s,
         configurable: !0
       });
     }
     function S() {
-      var e = t(this.type);
-      return D[e] || (D[e] = !0, console.error(
+      var e = n(this.type);
+      return I[e] || (I[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function N(e, r, a, d, E, x, y, C) {
-      return a = x.ref, e = {
-        $$typeof: b,
+    function T(e, r, s, f, N, C) {
+      var d = s.ref;
+      return e = {
+        $$typeof: l,
         type: e,
         key: r,
-        props: x,
-        _owner: E
-      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        props: s,
+        _owner: f
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
         get: S
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
@@ -174,7 +175,7 @@ function de() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: y
+        value: N
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
@@ -182,185 +183,179 @@ function de() {
         value: C
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function R(e, r, a, d, E, x, y, C) {
-      var m = r.children;
-      if (m !== void 0)
-        if (d)
-          if (se(m)) {
-            for (d = 0; d < m.length; d++)
-              k(m[d]);
-            Object.freeze && Object.freeze(m);
+    function x(e, r, s, f, N, C) {
+      var d = r.children;
+      if (d !== void 0)
+        if (f)
+          if (oe(d)) {
+            for (f = 0; f < d.length; f++)
+              k(d[f]);
+            Object.freeze && Object.freeze(d);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else k(m);
-      if (I.call(r, "key")) {
-        m = t(e);
+        else k(d);
+      if (F.call(r, "key")) {
+        d = n(e);
         var _ = Object.keys(r).filter(function(ae) {
           return ae !== "key";
         });
-        d = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", U[m + d] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
+        f = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", W[d + f] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
+          f,
           d,
-          m,
           _,
-          m
-        ), U[m + d] = !0);
+          d
+        ), W[d + f] = !0);
       }
-      if (m = null, a !== void 0 && (i(a), m = "" + a), p(r) && (i(r.key), m = "" + r.key), "key" in r) {
-        a = {};
+      if (d = null, s !== void 0 && (a(s), d = "" + s), m(r) && (a(r.key), d = "" + r.key), "key" in r) {
+        s = {};
         for (var Y in r)
-          Y !== "key" && (a[Y] = r[Y]);
-      } else a = r;
-      return m && h(
-        a,
+          Y !== "key" && (s[Y] = r[Y]);
+      } else s = r;
+      return d && v(
+        s,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), N(
+      ), T(
         e,
-        m,
-        x,
-        E,
-        u(),
-        a,
-        y,
+        d,
+        s,
+        i(),
+        N,
         C
       );
     }
     function k(e) {
-      typeof e == "object" && e !== null && e.$$typeof === b && e._store && (e._store.validated = 1);
+      p(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === A && (e._payload.status === "fulfilled" ? p(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    var l = ce, b = Symbol.for("react.transitional.element"), c = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), B = Symbol.for("react.strict_mode"), H = Symbol.for("react.profiler"), Z = Symbol.for("react.consumer"), Q = Symbol.for("react.context"), K = Symbol.for("react.forward_ref"), ee = Symbol.for("react.suspense"), re = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), ne = Symbol.for("react.activity"), oe = Symbol.for("react.client.reference"), A = l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, se = Array.isArray, w = console.createTask ? console.createTask : function() {
+    function p(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === l;
+    }
+    var b = z, l = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), X = Symbol.for("react.strict_mode"), B = Symbol.for("react.profiler"), H = Symbol.for("react.consumer"), Z = Symbol.for("react.context"), Q = Symbol.for("react.forward_ref"), K = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), re = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), y = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, oe = Array.isArray, w = console.createTask ? console.createTask : function() {
       return null;
     };
-    l = {
+    b = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var M, D = {}, L = l.react_stack_bottom_frame.bind(
-      l,
-      f
-    )(), W = w(n(f)), U = {};
-    T.Fragment = v, T.jsx = function(e, r, a, d, E) {
-      var x = 1e4 > A.recentlyCreatedOwnerStacks++;
-      return R(
+    var M, I = {}, D = b.react_stack_bottom_frame.bind(
+      b,
+      c
+    )(), L = w(t(c)), W = {};
+    j.Fragment = O, j.jsx = function(e, r, s) {
+      var f = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return x(
         e,
         r,
-        a,
+        s,
         !1,
-        d,
-        E,
-        x ? Error("react-stack-top-frame") : L,
-        x ? w(n(e)) : W
+        f ? Error("react-stack-top-frame") : D,
+        f ? w(t(e)) : L
       );
-    }, T.jsxs = function(e, r, a, d, E) {
-      var x = 1e4 > A.recentlyCreatedOwnerStacks++;
-      return R(
+    }, j.jsxs = function(e, r, s) {
+      var f = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return x(
         e,
         r,
-        a,
+        s,
         !0,
-        d,
-        E,
-        x ? Error("react-stack-top-frame") : L,
-        x ? w(n(e)) : W
+        f ? Error("react-stack-top-frame") : D,
+        f ? w(t(e)) : L
       );
     };
-  }()), T;
+  }()), j;
 }
-var z;
-function me() {
-  return z || (z = 1, process.env.NODE_ENV === "production" ? P.exports = fe() : P.exports = de()), P.exports;
+var J;
+function de() {
+  return J || (J = 1, process.env.NODE_ENV === "production" ? P.exports = ue() : P.exports = fe()), P.exports;
 }
-var o = me();
-const X = le(
+var o = de();
+const G = se(
   void 0
-), O = () => {
-  const t = ie(X);
-  if (!t)
+), g = () => {
+  const n = ce(G);
+  if (!n)
     throw new Error(
       "useMultiStepperForm must be used within a MultiStepperProvider"
     );
-  return t;
-}, Ee = ({ children: t, steppers: s, options: i }) => {
-  const [n, u] = q(0), [f, p] = q([]);
-  ue(() => {
-    if (s.length) {
-      const l = [...s];
-      l[0].active = !0, p(l);
+  return n;
+}, _e = ({ children: n, steppers: u, options: a }) => {
+  const [t, i] = U(0), [c, m] = U([]);
+  le(() => {
+    if (u.length) {
+      const p = [...u];
+      p[0].active = !0, m(p);
     }
-  }, [s, s.length]);
-  const h = g((l) => {
-    p((b) => {
-      const c = [...b];
-      if (l > b.length - 1) return b;
-      c[n] && (c[n] = { ...c[n], active: !1 }), c[l] && (c[l] = { ...c[l], active: !0 });
-      for (let v = 0; v < l; v++)
-        c[v] = { ...c[v], completed: !0 };
-      for (let v = l; v < c.length; v++)
-        c[v] = { ...c[v], completed: !1 };
-      return c;
-    }), u(l);
-  }, [n]), S = g(() => {
-    n < f.length - 1 ? h(n + 1) : p((l) => {
-      const b = [...l];
-      return b[n] = { ...b[n], completed: !0 }, b;
+  }, [u, u.length]);
+  const v = h((p) => {
+    m((b) => {
+      const l = [...b];
+      if (p > b.length - 1) return b;
+      l[t] && (l[t] = { ...l[t], active: !1 }), l[p] && (l[p] = { ...l[p], active: !0 });
+      for (let E = 0; E < p; E++)
+        l[E] = { ...l[E], completed: !0 };
+      for (let E = p; E < l.length; E++)
+        l[E] = { ...l[E], completed: !1 };
+      return l;
+    }), i(p);
+  }, [t]), S = h(() => {
+    t < c.length - 1 ? v(t + 1) : m((p) => {
+      const b = [...p];
+      return b[t] = { ...b[t], completed: !0 }, b;
     });
-  }, [n, f.length, h]), N = g(() => {
-    n > 0 && h(n - 1);
-  }, [n, h]), R = g(
-    (l) => {
-      p((b) => {
-        const c = [...b];
-        return c[n] && (c[n] = {
-          ...c[n],
+  }, [t, c.length, v]), T = h(() => {
+    t > 0 && v(t - 1);
+  }, [t, v]), x = h(
+    (p) => {
+      m((b) => {
+        const l = [...b];
+        return l[t] && (l[t] = {
+          ...l[t],
           active: !1,
           completed: !1
-        }, c[n][l] = !0), c;
+        }, l[t][p] = !0), l;
       });
     },
-    [n]
-  ), k = G(
+    [t]
+  ), k = ie(
     () => ({
-      currentStep: n,
-      steps: f,
+      currentStep: t,
+      steps: c,
       handleNextStep: S,
-      handlePrevStep: N,
-      updateSteps: h,
-      setStepStatus: R,
+      handlePrevStep: T,
+      updateSteps: v,
+      setStepStatus: x,
       // styles,
-      options: i
+      options: a
     }),
-    [n, f, S, N, h, R, i]
+    [t, c, S, T, v, x, a]
   );
-  return /* @__PURE__ */ o.jsx(X.Provider, { value: k, children: t });
+  return /* @__PURE__ */ o.jsx(G.Provider, { value: k, children: n });
 }, pe = () => {
-  const { steps: t, currentStep: s } = O();
-  return /* @__PURE__ */ o.jsx("div", { className: "stepper-content", children: t[s] && t[s].children && t[s].children });
-}, ve = ({ onClickNext: t }) => {
-  const { handlePrevStep: s, currentStep: i, steps: n } = O(), u = i === n.length - 1, f = () => {
-    n[i].completed || t();
-  }, p = G(() => ({
-    button: "stepper-button",
-    fill: "stepper-button-fill"
-  }), []);
+  const { steps: n, currentStep: u } = g(), a = n?.[u];
+  return !a || !a.children ? null : /* @__PURE__ */ o.jsx("div", { className: "stepper-content", children: a.children });
+}, me = z.memo(({ onClickNext: n }) => {
+  const { handlePrevStep: u, currentStep: a, steps: t } = g(), i = a === t.length - 1, c = a === 0, m = h(() => {
+    t[a].completed || n();
+  }, [t, a, n]), v = h(() => {
+    c || u();
+  }, [c, u]);
   return /* @__PURE__ */ o.jsxs("div", { className: "stepper-footer", children: [
     /* @__PURE__ */ o.jsx(
       "button",
       {
         type: "button",
-        className: p.button,
-        onClick: s,
-        disabled: i < 0,
-        style: {
-          cursor: i <= 0 ? "not-allowed" : "pointer"
-        },
+        className: `stepper-button 
+        ${c ? "stepper-button-disbled" : ""}`,
+        onClick: v,
+        disabled: a < 0,
         children: "Prev"
       }
     ),
@@ -368,46 +363,47 @@ const X = le(
       "button",
       {
         type: "button",
-        className: `${u ? `${p.button} ${p.fill}` : p.button}`,
-        onClick: f,
-        children: u ? "Finish" : "Next"
+        className: i ? "stepper-button stepper-button-fill" : "stepper-button",
+        onClick: m,
+        children: i ? "Finish" : "Next"
       }
     )
   ] });
-}, he = ({
-  step: t,
-  index: s
+}), ve = ({
+  step: n,
+  index: u
 }) => {
-  const { steps: i, options: n } = O();
-  return i.length ? t.loading ? /* @__PURE__ */ o.jsx("div", { className: "step step-active", children: /* @__PURE__ */ o.jsx("div", { className: "spinner", role: "status", "aria-label": "Loading" }) }) : t.error ? /* @__PURE__ */ o.jsx("div", { className: "step step-error", children: t.icon ? t.icon : n?.errorIcon ?? /* @__PURE__ */ o.jsx("span", { className: "text-white", children: "✗" }) }) : t.completed ? /* @__PURE__ */ o.jsx("div", { className: "step step-complete", children: t.icon ? t.icon : n?.completedIcon ?? /* @__PURE__ */ o.jsx("span", { className: "text-white", children: "✓" }) }) : t.finshed ? /* @__PURE__ */ o.jsx("div", { className: "step step-complete", children: t.icon }) : t.active ? /* @__PURE__ */ o.jsx("div", { className: "step step-active", children: t.icon ? t.icon : n?.activeIcon ?? /* @__PURE__ */ o.jsx("h2", { className: "text-white", children: s }) }) : /* @__PURE__ */ o.jsx("div", { className: "step step-default", children: t.icon ?? /* @__PURE__ */ o.jsx("h2", { children: s }) }) : /* @__PURE__ */ o.jsx($, {});
+  const { steps: a, options: t } = g();
+  return a.length ? n.completed ? /* @__PURE__ */ o.jsx("div", { className: "step step-complete", children: n.icon ? n.icon : t?.completedIcon ?? /* @__PURE__ */ o.jsx("span", { className: "text-white", children: "✓" }) }) : n.active ? /* @__PURE__ */ o.jsx("div", { className: "step step-active", children: n.icon ? n.icon : t?.activeIcon ?? /* @__PURE__ */ o.jsx("h2", { className: "text-white", children: u }) }) : /* @__PURE__ */ o.jsx("div", { className: "step step-default", children: n.icon ?? /* @__PURE__ */ o.jsx("h2", { children: u }) }) : /* @__PURE__ */ o.jsx($, {});
 }, be = () => {
-  const { steps: t } = O();
-  return t.length ? /* @__PURE__ */ o.jsx("div", { className: "app-container", children: /* @__PURE__ */ o.jsx("ol", { className: "stepper-header", children: t.map((s, i) => {
-    const n = !!s.active, u = !!s.completed;
+  const { steps: n, updateSteps: u } = g(), a = (t) => u(t);
+  return n.length ? /* @__PURE__ */ o.jsx("div", { className: "app-container", children: /* @__PURE__ */ o.jsx("ol", { className: "stepper-header", children: n.map((t, i) => {
+    const c = !!t.active, m = !!t.completed;
     return /* @__PURE__ */ o.jsxs(
       "div",
       {
-        className: `step-item ${n ? "active" : ""} ${u ? "complete" : ""}`,
+        onClick: () => a(i),
+        className: `step-item ${c ? "active" : ""} ${m ? "complete" : ""}`,
         children: [
-          /* @__PURE__ */ o.jsx(he, { index: i + 1, step: s }),
+          /* @__PURE__ */ o.jsx(ve, { index: i + 1, step: t }),
           /* @__PURE__ */ o.jsxs("div", { className: "step-text", children: [
-            s.title && /* @__PURE__ */ o.jsx("h3", { className: "step-title", children: s.title }),
-            s.description && /* @__PURE__ */ o.jsx("h3", { className: "step-description", children: s.description })
+            t.title && /* @__PURE__ */ o.jsx("h3", { className: "step-title", children: t.title }),
+            t.description && /* @__PURE__ */ o.jsx("h3", { className: "step-description", children: t.description })
           ] })
         ]
       },
-      s.id ?? i
+      t.id ?? i
     );
   }) }) }) : /* @__PURE__ */ o.jsx($, {});
-}, _e = ({
-  onClickNext: t
+}, he = ({
+  onClickNext: n
 }) => /* @__PURE__ */ o.jsxs($, { children: [
   /* @__PURE__ */ o.jsx(be, {}),
   /* @__PURE__ */ o.jsx(pe, {}),
-  /* @__PURE__ */ o.jsx(ve, { onClickNext: t })
+  /* @__PURE__ */ o.jsx(me, { onClickNext: n })
 ] });
 export {
-  _e as MultiStepper,
-  Ee as MultiStepperProvider,
-  O as useMultiStepper
+  he as MultiStepper,
+  _e as MultiStepperProvider,
+  g as useMultiStepper
 };

package/dist/multi-stepper.umd.js

@@ -1,5 +1,5 @@
-(function(E,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],i):(E=typeof globalThis<"u"?globalThis:E||self,i(E["multi-stepper"]={},E.React))})(this,function(E,i){"use strict";var Y=document.createElement("style");Y.textContent=`:root{--color-primary: #0284c7;--color-primary-light: #38bdf8;--color-success: #16a34a;--color-error: #ef4444;--color-text: #111827;--color-text-light: #4b5563;--color-black: #000;--color-white: #fff;--color-border: #d1d5db;--color-border-light: #e2e8f0;--spacing-xs: .375rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--step-size: 2.5rem;--step-font-weight: 600;--step-radius: 50%;--spinner-size: 1.5rem;--spinner-thickness: 3px;--spinner-color: #3b82f6;--spinner-track: #e5e7eb;--spinner-speed: .8s}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}.app-container{padding-block:var(--spacing-lg);width:100%}.stepper-header{display:flex;justify-content:space-between}.step-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.step-item:not(:last-child):after{content:"";background-color:var(--color-border-light);position:absolute;width:calc(100% - var(--step-size));height:3px;left:calc(50% + (var(--step-size) / 2));top:calc(var(--step-size) / 2 - .125rem);transition:all .2s}.step{width:var(--step-size);height:var(--step-size);display:flex;align-items:center;justify-content:center;z-index:10;position:relative;border-radius:var(--step-radius);font-weight:var(--step-font-weight);color:var(--color-black);transition:all .2s;border:1px solid var(--color-border)}.step-active{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.step-complete{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-white)}.step-finished{background-color:var(--color-success);color:var(--color-white)}.active:not(:last-child):after{background-color:var(--color-border-light)}.complete:not(:last-child):after{background-color:var(--color-success)}.step-title{font-size:1rem;color:var(--color-text);font-weight:500;margin-top:var(--spacing-md)}.step-description{font-size:.85rem;color:var(--color-text-light);font-weight:300;margin-top:var(--spacing-sm)}.stepper-content{display:flex;justify-content:center;align-items:center}.stepper-footer{display:flex;justify-content:space-around;align-items:center;padding:var(--spacing-lg) var(--spacing-xl)}.stepper-button{padding:var(--spacing-xs) var(--spacing-xl);font-size:1rem;border-radius:.375rem;border:1px solid #9ca3af;background-color:transparent;color:inherit;cursor:pointer}.stepper-button-fill{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.test-step{padding:10vh;display:flex;justify-content:center;align-items:center;border-radius:1rem;width:50%;margin-block:2rem}.test-step h3{color:#fff}.step-text{text-align:center}@media (max-width: 768px){.stepper-header{border:2px solid red;padding:0%;margin:0%}}
-/*$vite$:1*/`,document.head.appendChild(Y);var T={exports:{}},R={};/**
+(function(x,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],c):(x=typeof globalThis<"u"?globalThis:x||self,c(x["multi-stepper"]={},x.React))})(this,function(x,c){"use strict";var Y=document.createElement("style");Y.textContent=`:root{--color-primary: #0284c7;--color-primary-light: #38bdf8;--color-success: #16a34a;--color-error: #ef4444;--color-text: #111827;--color-text-light: #4b5563;--color-black: #000;--color-white: #fff;--color-border: #d1d5db;--color-border-light: #e2e8f0;--spacing-xs: .375rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--step-size: 2.5rem;--step-font-weight: 600;--step-radius: 50%;--spinner-size: 1.5rem;--spinner-thickness: 3px;--spinner-color: #3b82f6;--spinner-track: #e5e7eb;--spinner-speed: .8s}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}.app-container{padding-block:var(--spacing-lg);width:100%}.stepper-header{display:flex;justify-content:space-between}.step-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.step-item:not(:last-child):after{content:"";background-color:var(--color-border-light);position:absolute;width:calc(100% - var(--step-size));height:3px;left:calc(50% + (var(--step-size) / 2));top:calc(var(--step-size) / 2 - .125rem);transition:all .2s}.step{width:var(--step-size);height:var(--step-size);display:flex;align-items:center;justify-content:center;z-index:10;position:relative;border-radius:var(--step-radius);font-weight:var(--step-font-weight);color:var(--color-black);transition:all .2s;border:1px solid var(--color-border)}.step-active{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.step-complete{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-white)}.step-finished{background-color:var(--color-success);color:var(--color-white)}.active:not(:last-child):after{background-color:var(--color-border-light)}.complete:not(:last-child):after{background-color:var(--color-success)}.step-title{font-size:1rem;color:var(--color-text);font-weight:500;margin-top:var(--spacing-md)}.step-description{font-size:.85rem;color:var(--color-text-light);font-weight:300;margin-top:var(--spacing-sm)}.stepper-content{display:flex;justify-content:center;align-items:center}.stepper-footer{display:flex;justify-content:space-around;align-items:center;padding:var(--spacing-lg) var(--spacing-xl)}.stepper-button{padding:var(--spacing-xs) var(--spacing-xl);font-size:1rem;border-radius:.375rem;border:1px solid #9ca3af;background-color:transparent;color:inherit;cursor:pointer}.stepper-button-fill{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.stepper-button-disabled{opacity:.5;cursor:not-allowed}.test-step{padding:10vh;display:flex;justify-content:center;align-items:center;border-radius:1rem;width:50%;margin-block:2rem}.test-step h3{color:#fff}.step-text{text-align:center}@media (max-width: 768px){.stepper-header{padding:0%;margin:0%}}
+/*$vite$:1*/`,document.head.appendChild(Y);var S={exports:{}},E={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -7,7 +7,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var I;function H(){if(I)return R;I=1;var r=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function u(n,d,p){var v=null;if(p!==void 0&&(v=""+p),d.key!==void 0&&(v=""+d.key),"key"in d){p={};for(var b in d)b!=="key"&&(p[b]=d[b])}else p=d;return d=p.ref,{$$typeof:r,type:n,key:v,ref:d!==void 0?d:null,props:p}}return R.Fragment=s,R.jsx=u,R.jsxs=u,R}var k={};/**
+ */var z;function X(){if(z)return E;z=1;var o=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function a(t,u,l){var v=null;if(l!==void 0&&(v=""+l),u.key!==void 0&&(v=""+u.key),"key"in u){l={};for(var b in u)b!=="key"&&(l[b]=u[b])}else l=u;return u=l.ref,{$$typeof:o,type:t,key:v,ref:u!==void 0?u:null,props:l}}return E.Fragment=d,E.jsx=a,E.jsxs=a,E}var k={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -15,9 +15,10 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var z;function Z(){return z||(z=1,process.env.NODE_ENV!=="production"&&function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===pe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case h:return"Fragment";case oe:return"Profiler";case ne:return"StrictMode";case ie:return"Suspense";case le:return"SuspenseList";case de:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case c:return"Portal";case ae:return(e.displayName||"Context")+".Provider";case se:return(e._context.displayName||"Context")+".Consumer";case ce:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case U:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function s(e){return""+e}function u(e){try{s(e);var t=!1}catch{t=!0}if(t){t=console;var a=t.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),s(e)}}function n(e){if(e===h)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===U)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function d(){var e=O.A;return e===null?null:e.getOwner()}function p(){return Error("react-stack-top-frame")}function v(e){if(W.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function b(e,t){function a(){J||(J=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function w(){var e=r(this.type);return V[e]||(V[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function N(e,t,a,f,_,x,C,M){return a=x.ref,e={$$typeof:g,type:e,key:t,props:x,_owner:_},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:w}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function y(e,t,a,f,_,x,C,M){var m=t.children;if(m!==void 0)if(f)if(fe(m)){for(f=0;f<m.length;f++)P(m[f]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else P(m);if(W.call(t,"key")){m=r(e);var j=Object.keys(t).filter(function(me){return me!=="key"});f=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",X[m+f]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var I;function H(){return I||(I=1,process.env.NODE_ENV!=="production"&&function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===de?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case N:return"Fragment";case oe:return"Profiler";case re:return"StrictMode";case ce:return"Suspense";case le:return"SuspenseList";case ue:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case g:return"Portal";case ae:return e.displayName||"Context";case ne:return(e._context.displayName||"Context")+".Consumer";case se:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ie:return r=e.displayName||null,r!==null?r:o(e.type)||"Memo";case O:r=e._payload,e=e._init;try{return o(e(r))}catch{}}return null}function d(e){return""+e}function a(e){try{d(e);var r=!1}catch{r=!0}if(r){r=console;var s=r.error,p=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return s.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",p),d(e)}}function t(e){if(e===N)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var r=o(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function u(){var e=A.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function v(e){if(U.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function s(){W||(W=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}s.isReactWarning=!0,Object.defineProperty(e,"key",{get:s,configurable:!0})}function j(){var e=o(this.type);return V[e]||(V[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function T(e,r,s,p,P,M){var f=s.ref;return e={$$typeof:i,type:e,key:r,props:s,_owner:p},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:j}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function R(e,r,s,p,P,M){var f=r.children;if(f!==void 0)if(p)if(pe(f)){for(p=0;p<f.length;p++)w(f[p]);Object.freeze&&Object.freeze(f)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(f);if(U.call(r,"key")){f=o(e);var _=Object.keys(r).filter(function(fe){return fe!=="key"});p=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",B[f+p]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,f,m,j,m),X[m+f]=!0)}if(m=null,a!==void 0&&(u(a),m=""+a),v(t)&&(u(t.key),m=""+t.key),"key"in t){a={};for(var F in t)F!=="key"&&(a[F]=t[F])}else a=t;return m&&b(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),N(e,m,x,_,d(),a,C,M)}function P(e){typeof e=="object"&&e!==null&&e.$$typeof===g&&e._store&&(e._store.validated=1)}var l=i,g=Symbol.for("react.transitional.element"),c=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),ne=Symbol.for("react.strict_mode"),oe=Symbol.for("react.profiler"),se=Symbol.for("react.consumer"),ae=Symbol.for("react.context"),ce=Symbol.for("react.forward_ref"),ie=Symbol.for("react.suspense"),le=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),U=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),pe=Symbol.for("react.client.reference"),O=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,fe=Array.isArray,A=console.createTask?console.createTask:function(){return null};l={react_stack_bottom_frame:function(e){return e()}};var J,V={},G=l.react_stack_bottom_frame.bind(l,p)(),B=A(n(p)),X={};k.Fragment=h,k.jsx=function(e,t,a,f,_){var x=1e4>O.recentlyCreatedOwnerStacks++;return y(e,t,a,!1,f,_,x?Error("react-stack-top-frame"):G,x?A(n(e)):B)},k.jsxs=function(e,t,a,f,_){var x=1e4>O.recentlyCreatedOwnerStacks++;return y(e,t,a,!0,f,_,x?Error("react-stack-top-frame"):G,x?A(n(e)):B)}}()),k}var D;function Q(){return D||(D=1,process.env.NODE_ENV==="production"?T.exports=H():T.exports=Z()),T.exports}var o=Q();const L=i.createContext(void 0),S=()=>{const r=i.useContext(L);if(!r)throw new Error("useMultiStepperForm must be used within a MultiStepperProvider");return r},K=({children:r,steppers:s,options:u})=>{const[n,d]=i.useState(0),[p,v]=i.useState([]);i.useEffect(()=>{if(s.length){const l=[...s];l[0].active=!0,v(l)}},[s,s.length]);const b=i.useCallback(l=>{v(g=>{const c=[...g];if(l>g.length-1)return g;c[n]&&(c[n]={...c[n],active:!1}),c[l]&&(c[l]={...c[l],active:!0});for(let h=0;h<l;h++)c[h]={...c[h],completed:!0};for(let h=l;h<c.length;h++)c[h]={...c[h],completed:!1};return c}),d(l)},[n]),w=i.useCallback(()=>{n<p.length-1?b(n+1):v(l=>{const g=[...l];return g[n]={...g[n],completed:!0},g})},[n,p.length,b]),N=i.useCallback(()=>{n>0&&b(n-1)},[n,b]),y=i.useCallback(l=>{v(g=>{const c=[...g];return c[n]&&(c[n]={...c[n],active:!1,completed:!1},c[n][l]=!0),c})},[n]),P=i.useMemo(()=>({currentStep:n,steps:p,handleNextStep:w,handlePrevStep:N,updateSteps:b,setStepStatus:y,options:u}),[n,p,w,N,b,y,u]);return o.jsx(L.Provider,{value:P,children:r})},q=()=>{const{steps:r,currentStep:s}=S();return o.jsx("div",{className:"stepper-content",children:r[s]&&r[s].children&&r[s].children})},$=({onClickNext:r})=>{const{handlePrevStep:s,currentStep:u,steps:n}=S(),d=u===n.length-1,p=()=>{n[u].completed||r()},v=i.useMemo(()=>({button:"stepper-button",fill:"stepper-button-fill"}),[]);return o.jsxs("div",{className:"stepper-footer",children:[o.jsx("button",{type:"button",className:v.button,onClick:s,disabled:u<0,style:{cursor:u<=0?"not-allowed":"pointer"},children:"Prev"}),o.jsx("button",{type:"button",className:`${d?`${v.button} ${v.fill}`:v.button}`,onClick:p,children:d?"Finish":"Next"})]})},ee=({step:r,index:s})=>{const{steps:u,options:n}=S();return u.length?r.loading?o.jsx("div",{className:"step step-active",children:o.jsx("div",{className:"spinner",role:"status","aria-label":"Loading"})}):r.error?o.jsx("div",{className:"step step-error",children:r.icon?r.icon:n?.errorIcon??o.jsx("span",{className:"text-white",children:"✗"})}):r.completed?o.jsx("div",{className:"step step-complete",children:r.icon?r.icon:n?.completedIcon??o.jsx("span",{className:"text-white",children:"✓"})}):r.finshed?o.jsx("div",{className:"step step-complete",children:r.icon}):r.active?o.jsx("div",{className:"step step-active",children:r.icon?r.icon:n?.activeIcon??o.jsx("h2",{className:"text-white",children:s})}):o.jsx("div",{className:"step step-default",children:r.icon??o.jsx("h2",{children:s})}):o.jsx(i.Fragment,{})},te=()=>{const{steps:r}=S();return r.length?o.jsx("div",{className:"app-container",children:o.jsx("ol",{className:"stepper-header",children:r.map((s,u)=>{const n=!!s.active,d=!!s.completed;return o.jsxs("div",{className:`step-item ${n?"active":""} ${d?"complete":""}`,children:[o.jsx(ee,{index:u+1,step:s}),o.jsxs("div",{className:"step-text",children:[s.title&&o.jsx("h3",{className:"step-title",children:s.title}),s.description&&o.jsx("h3",{className:"step-description",children:s.description})]})]},s.id??u)})})}):o.jsx(i.Fragment,{})},re=({onClickNext:r})=>o.jsxs(i.Fragment,{children:[o.jsx(te,{}),o.jsx(q,{}),o.jsx($,{onClickNext:r})]});E.MultiStepper=re,E.MultiStepperProvider=K,E.useMultiStepper=S,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
+  <%s key={someKey} {...props} />`,p,f,_,f),B[f+p]=!0)}if(f=null,s!==void 0&&(a(s),f=""+s),v(r)&&(a(r.key),f=""+r.key),"key"in r){s={};for(var F in r)F!=="key"&&(s[F]=r[F])}else s=r;return f&&b(s,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,f,s,u(),P,M)}function w(e){m(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?m(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function m(e){return typeof e=="object"&&e!==null&&e.$$typeof===i}var h=c,i=Symbol.for("react.transitional.element"),g=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),re=Symbol.for("react.strict_mode"),oe=Symbol.for("react.profiler"),ne=Symbol.for("react.consumer"),ae=Symbol.for("react.context"),se=Symbol.for("react.forward_ref"),ce=Symbol.for("react.suspense"),le=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),de=Symbol.for("react.client.reference"),A=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U=Object.prototype.hasOwnProperty,pe=Array.isArray,C=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var W,V={},J=h.react_stack_bottom_frame.bind(h,l)(),G=C(t(l)),B={};k.Fragment=N,k.jsx=function(e,r,s){var p=1e4>A.recentlyCreatedOwnerStacks++;return R(e,r,s,!1,p?Error("react-stack-top-frame"):J,p?C(t(e)):G)},k.jsxs=function(e,r,s){var p=1e4>A.recentlyCreatedOwnerStacks++;return R(e,r,s,!0,p?Error("react-stack-top-frame"):J,p?C(t(e)):G)}}()),k}var D;function Z(){return D||(D=1,process.env.NODE_ENV==="production"?S.exports=X():S.exports=H()),S.exports}var n=Z();const L=c.createContext(void 0),y=()=>{const o=c.useContext(L);if(!o)throw new Error("useMultiStepperForm must be used within a MultiStepperProvider");return o},Q=({children:o,steppers:d,options:a})=>{const[t,u]=c.useState(0),[l,v]=c.useState([]);c.useEffect(()=>{if(d.length){const m=[...d];m[0].active=!0,v(m)}},[d,d.length]);const b=c.useCallback(m=>{v(h=>{const i=[...h];if(m>h.length-1)return h;i[t]&&(i[t]={...i[t],active:!1}),i[m]&&(i[m]={...i[m],active:!0});for(let g=0;g<m;g++)i[g]={...i[g],completed:!0};for(let g=m;g<i.length;g++)i[g]={...i[g],completed:!1};return i}),u(m)},[t]),j=c.useCallback(()=>{t<l.length-1?b(t+1):v(m=>{const h=[...m];return h[t]={...h[t],completed:!0},h})},[t,l.length,b]),T=c.useCallback(()=>{t>0&&b(t-1)},[t,b]),R=c.useCallback(m=>{v(h=>{const i=[...h];return i[t]&&(i[t]={...i[t],active:!1,completed:!1},i[t][m]=!0),i})},[t]),w=c.useMemo(()=>({currentStep:t,steps:l,handleNextStep:j,handlePrevStep:T,updateSteps:b,setStepStatus:R,options:a}),[t,l,j,T,b,R,a]);return n.jsx(L.Provider,{value:w,children:o})},K=()=>{const{steps:o,currentStep:d}=y(),a=o?.[d];return!a||!a.children?null:n.jsx("div",{className:"stepper-content",children:a.children})},q=c.memo(({onClickNext:o})=>{const{handlePrevStep:d,currentStep:a,steps:t}=y(),u=a===t.length-1,l=a===0,v=c.useCallback(()=>{t[a].completed||o()},[t,a,o]),b=c.useCallback(()=>{l||d()},[l,d]);return n.jsxs("div",{className:"stepper-footer",children:[n.jsx("button",{type:"button",className:`stepper-button 
+        ${l?"stepper-button-disbled":""}`,onClick:b,disabled:a<0,children:"Prev"}),n.jsx("button",{type:"button",className:u?"stepper-button stepper-button-fill":"stepper-button",onClick:v,children:u?"Finish":"Next"})]})}),$=({step:o,index:d})=>{const{steps:a,options:t}=y();return a.length?o.completed?n.jsx("div",{className:"step step-complete",children:o.icon?o.icon:t?.completedIcon??n.jsx("span",{className:"text-white",children:"✓"})}):o.active?n.jsx("div",{className:"step step-active",children:o.icon?o.icon:t?.activeIcon??n.jsx("h2",{className:"text-white",children:d})}):n.jsx("div",{className:"step step-default",children:o.icon??n.jsx("h2",{children:d})}):n.jsx(c.Fragment,{})},ee=()=>{const{steps:o,updateSteps:d}=y(),a=t=>d(t);return o.length?n.jsx("div",{className:"app-container",children:n.jsx("ol",{className:"stepper-header",children:o.map((t,u)=>{const l=!!t.active,v=!!t.completed;return n.jsxs("div",{onClick:()=>a(u),className:`step-item ${l?"active":""} ${v?"complete":""}`,children:[n.jsx($,{index:u+1,step:t}),n.jsxs("div",{className:"step-text",children:[t.title&&n.jsx("h3",{className:"step-title",children:t.title}),t.description&&n.jsx("h3",{className:"step-description",children:t.description})]})]},t.id??u)})})}):n.jsx(c.Fragment,{})},te=({onClickNext:o})=>n.jsxs(c.Fragment,{children:[n.jsx(ee,{}),n.jsx(K,{}),n.jsx(q,{onClickNext:o})]});x.MultiStepper=te,x.MultiStepperProvider=Q,x.useMultiStepper=y,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -3,7 +3,7 @@
   "main": "./dist/multi-stepper.umd.js",
   "module": "./dist/multi-stepper.es.js",
   "types": "./dist/index.d.ts",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "repository": {
     "url": "https://github.com/UppiliSrinivas/react-stepper/tree/multi-stepper"
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@vitejs/plugin-react-swc": "^3.11.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2"
   },
@@ -43,8 +43,8 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.1.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.6.0",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.30.1",