reactjs-multi-stepper 1.2.9 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.css +1 -1
- package/dist/multi-stepper.es.js +204 -208
- package/dist/multi-stepper.umd.js +6 -5
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ It allows you to create step-based workflows such as onboarding, multi-step form
|
|
|
5
5
|
|
|
6
6
|
## 🎬 Demo
|
|
7
7
|
|
|
8
|
-
|
|
9
9
|
|
|
10
10
|
---
|
|
11
11
|
|
package/dist/index.css
CHANGED
|
@@ -1 +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{
|
|
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)}.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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import './index.css';var P = { exports: {} },
|
|
1
|
+
import z, { createContext as se, useContext as ce, useState as U, useEffect as le, useCallback as h, useMemo as ie, Fragment as $ } from "react";
|
|
2
|
+
import './index.css';var P = { exports: {} }, R = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
5
5
|
* react-jsx-runtime.production.js
|
|
@@ -9,29 +9,29 @@ import './index.css';var P = { exports: {} }, j = {};
|
|
|
9
9
|
* This source code is licensed under the MIT license found in the
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
|
-
var
|
|
13
|
-
function
|
|
14
|
-
if (
|
|
15
|
-
|
|
16
|
-
var
|
|
17
|
-
function
|
|
18
|
-
var
|
|
19
|
-
if (
|
|
20
|
-
|
|
21
|
-
for (var
|
|
22
|
-
|
|
23
|
-
} else
|
|
24
|
-
return
|
|
25
|
-
$$typeof:
|
|
26
|
-
type:
|
|
27
|
-
key:
|
|
28
|
-
ref:
|
|
29
|
-
props:
|
|
12
|
+
var V;
|
|
13
|
+
function ue() {
|
|
14
|
+
if (V) return R;
|
|
15
|
+
V = 1;
|
|
16
|
+
var n = Symbol.for("react.transitional.element"), u = Symbol.for("react.fragment");
|
|
17
|
+
function a(t, i, c) {
|
|
18
|
+
var m = null;
|
|
19
|
+
if (c !== void 0 && (m = "" + c), i.key !== void 0 && (m = "" + i.key), "key" in i) {
|
|
20
|
+
c = {};
|
|
21
|
+
for (var v in i)
|
|
22
|
+
v !== "key" && (c[v] = i[v]);
|
|
23
|
+
} else c = i;
|
|
24
|
+
return i = c.ref, {
|
|
25
|
+
$$typeof: n,
|
|
26
|
+
type: t,
|
|
27
|
+
key: m,
|
|
28
|
+
ref: i !== void 0 ? i : null,
|
|
29
|
+
props: c
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
return
|
|
32
|
+
return R.Fragment = u, R.jsx = a, R.jsxs = a, R;
|
|
33
33
|
}
|
|
34
|
-
var
|
|
34
|
+
var j = {};
|
|
35
35
|
/**
|
|
36
36
|
* @license React
|
|
37
37
|
* react-jsx-runtime.development.js
|
|
@@ -41,123 +41,124 @@ var T = {};
|
|
|
41
41
|
* This source code is licensed under the MIT license found in the
|
|
42
42
|
* LICENSE file in the root directory of this source tree.
|
|
43
43
|
*/
|
|
44
|
-
var
|
|
45
|
-
function
|
|
46
|
-
return
|
|
47
|
-
function
|
|
44
|
+
var q;
|
|
45
|
+
function fe() {
|
|
46
|
+
return q || (q = 1, process.env.NODE_ENV !== "production" && function() {
|
|
47
|
+
function n(e) {
|
|
48
48
|
if (e == null) return null;
|
|
49
49
|
if (typeof e == "function")
|
|
50
|
-
return e.$$typeof ===
|
|
50
|
+
return e.$$typeof === ne ? null : e.displayName || e.name || null;
|
|
51
51
|
if (typeof e == "string") return e;
|
|
52
52
|
switch (e) {
|
|
53
|
-
case
|
|
53
|
+
case O:
|
|
54
54
|
return "Fragment";
|
|
55
|
-
case H:
|
|
56
|
-
return "Profiler";
|
|
57
55
|
case B:
|
|
56
|
+
return "Profiler";
|
|
57
|
+
case X:
|
|
58
58
|
return "StrictMode";
|
|
59
|
-
case
|
|
59
|
+
case K:
|
|
60
60
|
return "Suspense";
|
|
61
|
-
case
|
|
61
|
+
case ee:
|
|
62
62
|
return "SuspenseList";
|
|
63
|
-
case
|
|
63
|
+
case re:
|
|
64
64
|
return "Activity";
|
|
65
65
|
}
|
|
66
66
|
if (typeof e == "object")
|
|
67
67
|
switch (typeof e.tag == "number" && console.error(
|
|
68
68
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
69
69
|
), e.$$typeof) {
|
|
70
|
-
case
|
|
70
|
+
case E:
|
|
71
71
|
return "Portal";
|
|
72
|
-
case Q:
|
|
73
|
-
return (e.displayName || "Context") + ".Provider";
|
|
74
72
|
case Z:
|
|
73
|
+
return e.displayName || "Context";
|
|
74
|
+
case H:
|
|
75
75
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
76
|
-
case
|
|
76
|
+
case Q:
|
|
77
77
|
var r = e.render;
|
|
78
78
|
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
79
79
|
case te:
|
|
80
|
-
return r = e.displayName || null, r !== null ? r :
|
|
81
|
-
case
|
|
80
|
+
return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
|
|
81
|
+
case A:
|
|
82
82
|
r = e._payload, e = e._init;
|
|
83
83
|
try {
|
|
84
|
-
return
|
|
84
|
+
return n(e(r));
|
|
85
85
|
} catch {
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
return null;
|
|
89
89
|
}
|
|
90
|
-
function
|
|
90
|
+
function u(e) {
|
|
91
91
|
return "" + e;
|
|
92
92
|
}
|
|
93
|
-
function
|
|
93
|
+
function a(e) {
|
|
94
94
|
try {
|
|
95
|
-
|
|
95
|
+
u(e);
|
|
96
96
|
var r = !1;
|
|
97
97
|
} catch {
|
|
98
98
|
r = !0;
|
|
99
99
|
}
|
|
100
100
|
if (r) {
|
|
101
101
|
r = console;
|
|
102
|
-
var
|
|
103
|
-
return
|
|
102
|
+
var s = r.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
103
|
+
return s.call(
|
|
104
104
|
r,
|
|
105
105
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
106
|
-
|
|
107
|
-
),
|
|
106
|
+
f
|
|
107
|
+
), u(e);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
function
|
|
111
|
-
if (e ===
|
|
112
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
110
|
+
function t(e) {
|
|
111
|
+
if (e === O) return "<>";
|
|
112
|
+
if (typeof e == "object" && e !== null && e.$$typeof === A)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
115
|
-
var r =
|
|
115
|
+
var r = n(e);
|
|
116
116
|
return r ? "<" + r + ">" : "<...>";
|
|
117
117
|
} catch {
|
|
118
118
|
return "<...>";
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
|
-
function
|
|
122
|
-
var e =
|
|
121
|
+
function i() {
|
|
122
|
+
var e = y.A;
|
|
123
123
|
return e === null ? null : e.getOwner();
|
|
124
124
|
}
|
|
125
|
-
function
|
|
125
|
+
function c() {
|
|
126
126
|
return Error("react-stack-top-frame");
|
|
127
127
|
}
|
|
128
|
-
function
|
|
129
|
-
if (
|
|
128
|
+
function m(e) {
|
|
129
|
+
if (F.call(e, "key")) {
|
|
130
130
|
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
131
131
|
if (r && r.isReactWarning) return !1;
|
|
132
132
|
}
|
|
133
133
|
return e.key !== void 0;
|
|
134
134
|
}
|
|
135
|
-
function
|
|
136
|
-
function
|
|
135
|
+
function v(e, r) {
|
|
136
|
+
function s() {
|
|
137
137
|
M || (M = !0, console.error(
|
|
138
138
|
"%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)",
|
|
139
139
|
r
|
|
140
140
|
));
|
|
141
141
|
}
|
|
142
|
-
|
|
143
|
-
get:
|
|
142
|
+
s.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
143
|
+
get: s,
|
|
144
144
|
configurable: !0
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
147
|
function S() {
|
|
148
|
-
var e =
|
|
149
|
-
return
|
|
148
|
+
var e = n(this.type);
|
|
149
|
+
return I[e] || (I[e] = !0, console.error(
|
|
150
150
|
"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."
|
|
151
151
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
152
152
|
}
|
|
153
|
-
function
|
|
154
|
-
|
|
155
|
-
|
|
153
|
+
function T(e, r, s, f, N, C) {
|
|
154
|
+
var d = s.ref;
|
|
155
|
+
return e = {
|
|
156
|
+
$$typeof: l,
|
|
156
157
|
type: e,
|
|
157
158
|
key: r,
|
|
158
|
-
props:
|
|
159
|
-
_owner:
|
|
160
|
-
}, (
|
|
159
|
+
props: s,
|
|
160
|
+
_owner: f
|
|
161
|
+
}, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
|
|
161
162
|
enumerable: !1,
|
|
162
163
|
get: S
|
|
163
164
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
@@ -174,7 +175,7 @@ function de() {
|
|
|
174
175
|
configurable: !1,
|
|
175
176
|
enumerable: !1,
|
|
176
177
|
writable: !0,
|
|
177
|
-
value:
|
|
178
|
+
value: N
|
|
178
179
|
}), Object.defineProperty(e, "_debugTask", {
|
|
179
180
|
configurable: !1,
|
|
180
181
|
enumerable: !1,
|
|
@@ -182,185 +183,179 @@ function de() {
|
|
|
182
183
|
value: C
|
|
183
184
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
184
185
|
}
|
|
185
|
-
function
|
|
186
|
-
var
|
|
187
|
-
if (
|
|
188
|
-
if (
|
|
189
|
-
if (
|
|
190
|
-
for (
|
|
191
|
-
k(
|
|
192
|
-
Object.freeze && Object.freeze(
|
|
186
|
+
function x(e, r, s, f, N, C) {
|
|
187
|
+
var d = r.children;
|
|
188
|
+
if (d !== void 0)
|
|
189
|
+
if (f)
|
|
190
|
+
if (oe(d)) {
|
|
191
|
+
for (f = 0; f < d.length; f++)
|
|
192
|
+
k(d[f]);
|
|
193
|
+
Object.freeze && Object.freeze(d);
|
|
193
194
|
} else
|
|
194
195
|
console.error(
|
|
195
196
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
196
197
|
);
|
|
197
|
-
else k(
|
|
198
|
-
if (
|
|
199
|
-
|
|
198
|
+
else k(d);
|
|
199
|
+
if (F.call(r, "key")) {
|
|
200
|
+
d = n(e);
|
|
200
201
|
var _ = Object.keys(r).filter(function(ae) {
|
|
201
202
|
return ae !== "key";
|
|
202
203
|
});
|
|
203
|
-
|
|
204
|
+
f = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", W[d + f] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
204
205
|
`A props object containing a "key" prop is being spread into JSX:
|
|
205
206
|
let props = %s;
|
|
206
207
|
<%s {...props} />
|
|
207
208
|
React keys must be passed directly to JSX without using spread:
|
|
208
209
|
let props = %s;
|
|
209
210
|
<%s key={someKey} {...props} />`,
|
|
211
|
+
f,
|
|
210
212
|
d,
|
|
211
|
-
m,
|
|
212
213
|
_,
|
|
213
|
-
|
|
214
|
-
),
|
|
214
|
+
d
|
|
215
|
+
), W[d + f] = !0);
|
|
215
216
|
}
|
|
216
|
-
if (
|
|
217
|
-
|
|
217
|
+
if (d = null, s !== void 0 && (a(s), d = "" + s), m(r) && (a(r.key), d = "" + r.key), "key" in r) {
|
|
218
|
+
s = {};
|
|
218
219
|
for (var Y in r)
|
|
219
|
-
Y !== "key" && (
|
|
220
|
-
} else
|
|
221
|
-
return
|
|
222
|
-
|
|
220
|
+
Y !== "key" && (s[Y] = r[Y]);
|
|
221
|
+
} else s = r;
|
|
222
|
+
return d && v(
|
|
223
|
+
s,
|
|
223
224
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
224
|
-
),
|
|
225
|
+
), T(
|
|
225
226
|
e,
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
a,
|
|
231
|
-
y,
|
|
227
|
+
d,
|
|
228
|
+
s,
|
|
229
|
+
i(),
|
|
230
|
+
N,
|
|
232
231
|
C
|
|
233
232
|
);
|
|
234
233
|
}
|
|
235
234
|
function k(e) {
|
|
236
|
-
typeof e == "object" && e !== null && e.$$typeof ===
|
|
235
|
+
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));
|
|
237
236
|
}
|
|
238
|
-
|
|
237
|
+
function p(e) {
|
|
238
|
+
return typeof e == "object" && e !== null && e.$$typeof === l;
|
|
239
|
+
}
|
|
240
|
+
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() {
|
|
239
241
|
return null;
|
|
240
242
|
};
|
|
241
|
-
|
|
243
|
+
b = {
|
|
242
244
|
react_stack_bottom_frame: function(e) {
|
|
243
245
|
return e();
|
|
244
246
|
}
|
|
245
247
|
};
|
|
246
|
-
var M,
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
)(),
|
|
250
|
-
|
|
251
|
-
var
|
|
252
|
-
return
|
|
248
|
+
var M, I = {}, D = b.react_stack_bottom_frame.bind(
|
|
249
|
+
b,
|
|
250
|
+
c
|
|
251
|
+
)(), L = w(t(c)), W = {};
|
|
252
|
+
j.Fragment = O, j.jsx = function(e, r, s) {
|
|
253
|
+
var f = 1e4 > y.recentlyCreatedOwnerStacks++;
|
|
254
|
+
return x(
|
|
253
255
|
e,
|
|
254
256
|
r,
|
|
255
|
-
|
|
257
|
+
s,
|
|
256
258
|
!1,
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
x ? Error("react-stack-top-frame") : L,
|
|
260
|
-
x ? w(n(e)) : W
|
|
259
|
+
f ? Error("react-stack-top-frame") : D,
|
|
260
|
+
f ? w(t(e)) : L
|
|
261
261
|
);
|
|
262
|
-
},
|
|
263
|
-
var
|
|
264
|
-
return
|
|
262
|
+
}, j.jsxs = function(e, r, s) {
|
|
263
|
+
var f = 1e4 > y.recentlyCreatedOwnerStacks++;
|
|
264
|
+
return x(
|
|
265
265
|
e,
|
|
266
266
|
r,
|
|
267
|
-
|
|
267
|
+
s,
|
|
268
268
|
!0,
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
x ? Error("react-stack-top-frame") : L,
|
|
272
|
-
x ? w(n(e)) : W
|
|
269
|
+
f ? Error("react-stack-top-frame") : D,
|
|
270
|
+
f ? w(t(e)) : L
|
|
273
271
|
);
|
|
274
272
|
};
|
|
275
|
-
}()),
|
|
273
|
+
}()), j;
|
|
276
274
|
}
|
|
277
|
-
var
|
|
278
|
-
function
|
|
279
|
-
return
|
|
275
|
+
var J;
|
|
276
|
+
function de() {
|
|
277
|
+
return J || (J = 1, process.env.NODE_ENV === "production" ? P.exports = ue() : P.exports = fe()), P.exports;
|
|
280
278
|
}
|
|
281
|
-
var o =
|
|
282
|
-
const
|
|
279
|
+
var o = de();
|
|
280
|
+
const G = se(
|
|
283
281
|
void 0
|
|
284
|
-
),
|
|
285
|
-
const
|
|
286
|
-
if (!
|
|
282
|
+
), g = () => {
|
|
283
|
+
const n = ce(G);
|
|
284
|
+
if (!n)
|
|
287
285
|
throw new Error(
|
|
288
286
|
"useMultiStepperForm must be used within a MultiStepperProvider"
|
|
289
287
|
);
|
|
290
|
-
return
|
|
291
|
-
},
|
|
292
|
-
const [
|
|
293
|
-
|
|
294
|
-
if (
|
|
295
|
-
const
|
|
296
|
-
|
|
288
|
+
return n;
|
|
289
|
+
}, _e = ({ children: n, steppers: u, options: a }) => {
|
|
290
|
+
const [t, i] = U(0), [c, m] = U([]);
|
|
291
|
+
le(() => {
|
|
292
|
+
if (u.length) {
|
|
293
|
+
const p = [...u];
|
|
294
|
+
p[0].active = !0, m(p);
|
|
297
295
|
}
|
|
298
|
-
}, [
|
|
299
|
-
const
|
|
300
|
-
|
|
301
|
-
const
|
|
302
|
-
if (
|
|
303
|
-
|
|
304
|
-
for (let
|
|
305
|
-
|
|
306
|
-
for (let
|
|
307
|
-
|
|
308
|
-
return
|
|
309
|
-
}),
|
|
310
|
-
}, [
|
|
311
|
-
|
|
312
|
-
const b = [...
|
|
313
|
-
return b[
|
|
296
|
+
}, [u, u.length]);
|
|
297
|
+
const v = h((p) => {
|
|
298
|
+
m((b) => {
|
|
299
|
+
const l = [...b];
|
|
300
|
+
if (p > b.length - 1) return b;
|
|
301
|
+
l[t] && (l[t] = { ...l[t], active: !1 }), l[p] && (l[p] = { ...l[p], active: !0 });
|
|
302
|
+
for (let E = 0; E < p; E++)
|
|
303
|
+
l[E] = { ...l[E], completed: !0 };
|
|
304
|
+
for (let E = p; E < l.length; E++)
|
|
305
|
+
l[E] = { ...l[E], completed: !1 };
|
|
306
|
+
return l;
|
|
307
|
+
}), i(p);
|
|
308
|
+
}, [t]), S = h(() => {
|
|
309
|
+
t < c.length - 1 ? v(t + 1) : m((p) => {
|
|
310
|
+
const b = [...p];
|
|
311
|
+
return b[t] = { ...b[t], completed: !0 }, b;
|
|
314
312
|
});
|
|
315
|
-
}, [
|
|
316
|
-
|
|
317
|
-
}, [
|
|
318
|
-
(
|
|
319
|
-
|
|
320
|
-
const
|
|
321
|
-
return
|
|
322
|
-
...
|
|
313
|
+
}, [t, c.length, v]), T = h(() => {
|
|
314
|
+
t > 0 && v(t - 1);
|
|
315
|
+
}, [t, v]), x = h(
|
|
316
|
+
(p) => {
|
|
317
|
+
m((b) => {
|
|
318
|
+
const l = [...b];
|
|
319
|
+
return l[t] && (l[t] = {
|
|
320
|
+
...l[t],
|
|
323
321
|
active: !1,
|
|
324
322
|
completed: !1
|
|
325
|
-
},
|
|
323
|
+
}, l[t][p] = !0), l;
|
|
326
324
|
});
|
|
327
325
|
},
|
|
328
|
-
[
|
|
329
|
-
), k =
|
|
326
|
+
[t]
|
|
327
|
+
), k = ie(
|
|
330
328
|
() => ({
|
|
331
|
-
currentStep:
|
|
332
|
-
steps:
|
|
329
|
+
currentStep: t,
|
|
330
|
+
steps: c,
|
|
333
331
|
handleNextStep: S,
|
|
334
|
-
handlePrevStep:
|
|
335
|
-
updateSteps:
|
|
336
|
-
setStepStatus:
|
|
332
|
+
handlePrevStep: T,
|
|
333
|
+
updateSteps: v,
|
|
334
|
+
setStepStatus: x,
|
|
337
335
|
// styles,
|
|
338
|
-
options:
|
|
336
|
+
options: a
|
|
339
337
|
}),
|
|
340
|
-
[
|
|
338
|
+
[t, c, S, T, v, x, a]
|
|
341
339
|
);
|
|
342
|
-
return /* @__PURE__ */ o.jsx(
|
|
340
|
+
return /* @__PURE__ */ o.jsx(G.Provider, { value: k, children: n });
|
|
343
341
|
}, pe = () => {
|
|
344
|
-
const { steps:
|
|
345
|
-
return /* @__PURE__ */ o.jsx("div", { className: "stepper-content", children:
|
|
346
|
-
},
|
|
347
|
-
const { handlePrevStep:
|
|
348
|
-
|
|
349
|
-
},
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
}), []);
|
|
342
|
+
const { steps: n, currentStep: u } = g(), a = n?.[u];
|
|
343
|
+
return !a || !a.children ? null : /* @__PURE__ */ o.jsx("div", { className: "stepper-content", children: a.children });
|
|
344
|
+
}, me = z.memo(({ onClickNext: n }) => {
|
|
345
|
+
const { handlePrevStep: u, currentStep: a, steps: t } = g(), i = a === t.length - 1, c = a === 0, m = h(() => {
|
|
346
|
+
t[a].completed || n();
|
|
347
|
+
}, [t, a, n]), v = h(() => {
|
|
348
|
+
c || u();
|
|
349
|
+
}, [c, u]);
|
|
353
350
|
return /* @__PURE__ */ o.jsxs("div", { className: "stepper-footer", children: [
|
|
354
351
|
/* @__PURE__ */ o.jsx(
|
|
355
352
|
"button",
|
|
356
353
|
{
|
|
357
354
|
type: "button",
|
|
358
|
-
className:
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
cursor: i <= 0 ? "not-allowed" : "pointer"
|
|
363
|
-
},
|
|
355
|
+
className: `stepper-button
|
|
356
|
+
${c ? "stepper-button-disbled" : ""}`,
|
|
357
|
+
onClick: v,
|
|
358
|
+
disabled: a < 0,
|
|
364
359
|
children: "Prev"
|
|
365
360
|
}
|
|
366
361
|
),
|
|
@@ -368,46 +363,47 @@ const X = le(
|
|
|
368
363
|
"button",
|
|
369
364
|
{
|
|
370
365
|
type: "button",
|
|
371
|
-
className:
|
|
372
|
-
onClick:
|
|
373
|
-
children:
|
|
366
|
+
className: i ? "stepper-button stepper-button-fill" : "stepper-button",
|
|
367
|
+
onClick: m,
|
|
368
|
+
children: i ? "Finish" : "Next"
|
|
374
369
|
}
|
|
375
370
|
)
|
|
376
371
|
] });
|
|
377
|
-
},
|
|
378
|
-
step:
|
|
379
|
-
index:
|
|
372
|
+
}), ve = ({
|
|
373
|
+
step: n,
|
|
374
|
+
index: u
|
|
380
375
|
}) => {
|
|
381
|
-
const { steps:
|
|
382
|
-
return
|
|
376
|
+
const { steps: a, options: t } = g();
|
|
377
|
+
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($, {});
|
|
383
378
|
}, be = () => {
|
|
384
|
-
const { steps:
|
|
385
|
-
return
|
|
386
|
-
const
|
|
379
|
+
const { steps: n, updateSteps: u } = g(), a = (t) => u(t);
|
|
380
|
+
return n.length ? /* @__PURE__ */ o.jsx("div", { className: "app-container", children: /* @__PURE__ */ o.jsx("ol", { className: "stepper-header", children: n.map((t, i) => {
|
|
381
|
+
const c = !!t.active, m = !!t.completed;
|
|
387
382
|
return /* @__PURE__ */ o.jsxs(
|
|
388
383
|
"div",
|
|
389
384
|
{
|
|
390
|
-
|
|
385
|
+
onClick: () => a(i),
|
|
386
|
+
className: `step-item ${c ? "active" : ""} ${m ? "complete" : ""}`,
|
|
391
387
|
children: [
|
|
392
|
-
/* @__PURE__ */ o.jsx(
|
|
388
|
+
/* @__PURE__ */ o.jsx(ve, { index: i + 1, step: t }),
|
|
393
389
|
/* @__PURE__ */ o.jsxs("div", { className: "step-text", children: [
|
|
394
|
-
|
|
395
|
-
|
|
390
|
+
t.title && /* @__PURE__ */ o.jsx("h3", { className: "step-title", children: t.title }),
|
|
391
|
+
t.description && /* @__PURE__ */ o.jsx("h3", { className: "step-description", children: t.description })
|
|
396
392
|
] })
|
|
397
393
|
]
|
|
398
394
|
},
|
|
399
|
-
|
|
395
|
+
t.id ?? i
|
|
400
396
|
);
|
|
401
397
|
}) }) }) : /* @__PURE__ */ o.jsx($, {});
|
|
402
|
-
},
|
|
403
|
-
onClickNext:
|
|
398
|
+
}, he = ({
|
|
399
|
+
onClickNext: n
|
|
404
400
|
}) => /* @__PURE__ */ o.jsxs($, { children: [
|
|
405
401
|
/* @__PURE__ */ o.jsx(be, {}),
|
|
406
402
|
/* @__PURE__ */ o.jsx(pe, {}),
|
|
407
|
-
/* @__PURE__ */ o.jsx(
|
|
403
|
+
/* @__PURE__ */ o.jsx(me, { onClickNext: n })
|
|
408
404
|
] });
|
|
409
405
|
export {
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
406
|
+
he as MultiStepper,
|
|
407
|
+
_e as MultiStepperProvider,
|
|
408
|
+
g as useMultiStepper
|
|
413
409
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(Y);var
|
|
1
|
+
(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%}}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(Y);var S={exports:{}},E={};/**
|
|
3
3
|
* @license React
|
|
4
4
|
* react-jsx-runtime.production.js
|
|
5
5
|
*
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* This source code is licensed under the MIT license found in the
|
|
9
9
|
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/var
|
|
10
|
+
*/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={};/**
|
|
11
11
|
* @license React
|
|
12
12
|
* react-jsx-runtime.development.js
|
|
13
13
|
*
|
|
@@ -15,9 +15,10 @@
|
|
|
15
15
|
*
|
|
16
16
|
* This source code is licensed under the MIT license found in the
|
|
17
17
|
* LICENSE file in the root directory of this source tree.
|
|
18
|
-
*/var
|
|
18
|
+
*/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:
|
|
19
19
|
let props = %s;
|
|
20
20
|
<%s {...props} />
|
|
21
21
|
React keys must be passed directly to JSX without using spread:
|
|
22
22
|
let props = %s;
|
|
23
|
-
<%s key={someKey} {...props} />`,f,
|
|
23
|
+
<%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
|
|
24
|
+
${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
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"main": "./dist/multi-stepper.umd.js",
|
|
4
4
|
"module": "./dist/multi-stepper.es.js",
|
|
5
5
|
"types": "./dist/index.d.ts",
|
|
6
|
-
"version": "1.
|
|
6
|
+
"version": "1.3.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"repository": {
|
|
9
9
|
"url": "https://github.com/UppiliSrinivas/react-stepper/tree/multi-stepper"
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@vitejs/plugin-react-swc": "^3.11.0",
|
|
35
|
-
"react": "^19.
|
|
36
|
-
"react-dom": "^19.
|
|
35
|
+
"react": "^19.2.0",
|
|
36
|
+
"react-dom": "^19.2.0",
|
|
37
37
|
"vite-plugin-dts": "^4.5.4",
|
|
38
38
|
"vite-plugin-lib-inject-css": "^2.2.2"
|
|
39
39
|
},
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"@testing-library/react": "^16.3.0",
|
|
44
44
|
"@testing-library/user-event": "^14.6.1",
|
|
45
45
|
"@types/node": "^24.1.0",
|
|
46
|
-
"@types/react": "^19.
|
|
47
|
-
"@types/react-dom": "^19.
|
|
46
|
+
"@types/react": "^19.2.4",
|
|
47
|
+
"@types/react-dom": "^19.2.3",
|
|
48
48
|
"@vitejs/plugin-react": "^4.6.0",
|
|
49
49
|
"@vitest/coverage-v8": "^3.2.4",
|
|
50
50
|
"eslint": "^9.30.1",
|