reactjs-multi-stepper 1.2.5 → 1.2.6
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/dist/index.css +1 -1
- package/dist/multi-stepper.es.js +219 -214
- package/dist/multi-stepper.umd.js +5 -5
- package/package.json +5 -2
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:var(--spacing-lg)}.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(:
|
|
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:var(--spacing-lg)}.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-error{background-color:var(--color-error);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)}.error:not(:last-child):after{background-color:var(--color-error)}.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)}.spinner{width:var(--spinner-size);height:var(--spinner-size);border-radius:50%;border:var(--spinner-thickness) solid var(--spinner-track);border-top-color:var(--spinner-color);animation:spin var(--spinner-speed) linear infinite}@media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:var(--spinner-track)}}@keyframes spin{to{transform:rotate(360deg)}}.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%}}
|
package/dist/multi-stepper.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import ce, { createContext as le, useContext as ie, useState as q, useEffect as ue, useCallback as k, useMemo as G, Fragment as
|
|
2
|
-
import './index.css';var
|
|
1
|
+
import ce, { createContext as le, useContext as ie, useState as q, useEffect as ue, useCallback as k, useMemo as G, Fragment as Y } from "react";
|
|
2
|
+
import './index.css';var P = { exports: {} }, j = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
5
5
|
* react-jsx-runtime.production.js
|
|
@@ -10,28 +10,28 @@ import './index.css';var g = { exports: {} }, R = {};
|
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
12
|
var J;
|
|
13
|
-
function
|
|
14
|
-
if (J) return
|
|
13
|
+
function de() {
|
|
14
|
+
if (J) return j;
|
|
15
15
|
J = 1;
|
|
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:
|
|
16
|
+
var n = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
|
|
17
|
+
function f(o, i, c) {
|
|
18
|
+
var d = null;
|
|
19
|
+
if (c !== void 0 && (d = "" + c), i.key !== void 0 && (d = "" + i.key), "key" in i) {
|
|
20
|
+
c = {};
|
|
21
|
+
for (var h in i)
|
|
22
|
+
h !== "key" && (c[h] = i[h]);
|
|
23
|
+
} else c = i;
|
|
24
|
+
return i = c.ref, {
|
|
25
|
+
$$typeof: n,
|
|
26
|
+
type: o,
|
|
27
|
+
key: d,
|
|
28
|
+
ref: i !== void 0 ? i : null,
|
|
29
|
+
props: c
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
return
|
|
32
|
+
return j.Fragment = r, j.jsx = f, j.jsxs = f, j;
|
|
33
33
|
}
|
|
34
|
-
var
|
|
34
|
+
var T = {};
|
|
35
35
|
/**
|
|
36
36
|
* @license React
|
|
37
37
|
* react-jsx-runtime.development.js
|
|
@@ -42,15 +42,15 @@ var j = {};
|
|
|
42
42
|
* LICENSE file in the root directory of this source tree.
|
|
43
43
|
*/
|
|
44
44
|
var V;
|
|
45
|
-
function
|
|
45
|
+
function fe() {
|
|
46
46
|
return V || (V = 1, process.env.NODE_ENV !== "production" && function() {
|
|
47
|
-
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 === oe ? null : e.displayName || e.name || null;
|
|
51
51
|
if (typeof e == "string") return e;
|
|
52
52
|
switch (e) {
|
|
53
|
-
case
|
|
53
|
+
case v:
|
|
54
54
|
return "Fragment";
|
|
55
55
|
case B:
|
|
56
56
|
return "Profiler";
|
|
@@ -67,99 +67,99 @@ function de() {
|
|
|
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 l:
|
|
71
71
|
return "Portal";
|
|
72
72
|
case Q:
|
|
73
73
|
return (e.displayName || "Context") + ".Provider";
|
|
74
74
|
case Z:
|
|
75
75
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
76
76
|
case K:
|
|
77
|
-
var
|
|
78
|
-
return e = e.displayName, e || (e =
|
|
77
|
+
var t = e.render;
|
|
78
|
+
return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
79
79
|
case te:
|
|
80
|
-
return
|
|
80
|
+
return t = e.displayName || null, t !== null ? t : n(e.type) || "Memo";
|
|
81
81
|
case F:
|
|
82
|
-
|
|
82
|
+
t = e._payload, e = e._init;
|
|
83
83
|
try {
|
|
84
|
-
return
|
|
84
|
+
return n(e(t));
|
|
85
85
|
} catch {
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
return null;
|
|
89
89
|
}
|
|
90
|
-
function
|
|
90
|
+
function r(e) {
|
|
91
91
|
return "" + e;
|
|
92
92
|
}
|
|
93
|
-
function
|
|
93
|
+
function f(e) {
|
|
94
94
|
try {
|
|
95
|
-
|
|
96
|
-
var
|
|
95
|
+
r(e);
|
|
96
|
+
var t = !1;
|
|
97
97
|
} catch {
|
|
98
|
-
|
|
98
|
+
t = !0;
|
|
99
99
|
}
|
|
100
|
-
if (
|
|
101
|
-
|
|
102
|
-
var
|
|
103
|
-
return
|
|
104
|
-
|
|
100
|
+
if (t) {
|
|
101
|
+
t = console;
|
|
102
|
+
var s = t.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
103
|
+
return s.call(
|
|
104
|
+
t,
|
|
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
|
+
m
|
|
107
|
+
), r(e);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
function
|
|
111
|
-
if (e ===
|
|
110
|
+
function o(e) {
|
|
111
|
+
if (e === v) return "<>";
|
|
112
112
|
if (typeof e == "object" && e !== null && e.$$typeof === F)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
115
|
-
var
|
|
116
|
-
return
|
|
115
|
+
var t = n(e);
|
|
116
|
+
return t ? "<" + t + ">" : "<...>";
|
|
117
117
|
} catch {
|
|
118
118
|
return "<...>";
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
|
-
function
|
|
121
|
+
function i() {
|
|
122
122
|
var e = A.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 (
|
|
130
|
-
var
|
|
131
|
-
if (
|
|
128
|
+
function d(e) {
|
|
129
|
+
if (I.call(e, "key")) {
|
|
130
|
+
var t = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
131
|
+
if (t && t.isReactWarning) return !1;
|
|
132
132
|
}
|
|
133
133
|
return e.key !== void 0;
|
|
134
134
|
}
|
|
135
|
-
function
|
|
136
|
-
function
|
|
137
|
-
|
|
135
|
+
function h(e, t) {
|
|
136
|
+
function s() {
|
|
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
|
+
t
|
|
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
|
-
function
|
|
148
|
-
var e =
|
|
147
|
+
function S() {
|
|
148
|
+
var e = n(this.type);
|
|
149
149
|
return D[e] || (D[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
|
-
return
|
|
155
|
-
$$typeof:
|
|
153
|
+
function g(e, t, s, m, x, E, C, y) {
|
|
154
|
+
return s = E.ref, e = {
|
|
155
|
+
$$typeof: b,
|
|
156
156
|
type: e,
|
|
157
|
-
key:
|
|
158
|
-
props:
|
|
159
|
-
_owner:
|
|
160
|
-
}, (
|
|
157
|
+
key: t,
|
|
158
|
+
props: E,
|
|
159
|
+
_owner: x
|
|
160
|
+
}, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
|
|
161
161
|
enumerable: !1,
|
|
162
|
-
get:
|
|
162
|
+
get: S
|
|
163
163
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
164
164
|
configurable: !1,
|
|
165
165
|
enumerable: !1,
|
|
@@ -174,234 +174,239 @@ function de() {
|
|
|
174
174
|
configurable: !1,
|
|
175
175
|
enumerable: !1,
|
|
176
176
|
writable: !0,
|
|
177
|
-
value:
|
|
177
|
+
value: C
|
|
178
178
|
}), Object.defineProperty(e, "_debugTask", {
|
|
179
179
|
configurable: !1,
|
|
180
180
|
enumerable: !1,
|
|
181
181
|
writable: !0,
|
|
182
|
-
value:
|
|
182
|
+
value: y
|
|
183
183
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
184
184
|
}
|
|
185
|
-
function
|
|
186
|
-
var
|
|
187
|
-
if (
|
|
188
|
-
if (
|
|
189
|
-
if (
|
|
190
|
-
for (
|
|
191
|
-
|
|
192
|
-
Object.freeze && Object.freeze(
|
|
185
|
+
function R(e, t, s, m, x, E, C, y) {
|
|
186
|
+
var p = t.children;
|
|
187
|
+
if (p !== void 0)
|
|
188
|
+
if (m)
|
|
189
|
+
if (ae(p)) {
|
|
190
|
+
for (m = 0; m < p.length; m++)
|
|
191
|
+
N(p[m]);
|
|
192
|
+
Object.freeze && Object.freeze(p);
|
|
193
193
|
} else
|
|
194
194
|
console.error(
|
|
195
195
|
"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
196
|
);
|
|
197
|
-
else
|
|
198
|
-
if (
|
|
199
|
-
|
|
200
|
-
var _ = Object.keys(
|
|
201
|
-
return
|
|
197
|
+
else N(p);
|
|
198
|
+
if (I.call(t, "key")) {
|
|
199
|
+
p = n(e);
|
|
200
|
+
var _ = Object.keys(t).filter(function(se) {
|
|
201
|
+
return se !== "key";
|
|
202
202
|
});
|
|
203
|
-
|
|
203
|
+
m = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", U[p + m] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
204
204
|
`A props object containing a "key" prop is being spread into JSX:
|
|
205
205
|
let props = %s;
|
|
206
206
|
<%s {...props} />
|
|
207
207
|
React keys must be passed directly to JSX without using spread:
|
|
208
208
|
let props = %s;
|
|
209
209
|
<%s key={someKey} {...props} />`,
|
|
210
|
-
d,
|
|
211
210
|
m,
|
|
211
|
+
p,
|
|
212
212
|
_,
|
|
213
|
-
|
|
214
|
-
), U[
|
|
213
|
+
p
|
|
214
|
+
), U[p + m] = !0);
|
|
215
215
|
}
|
|
216
|
-
if (
|
|
217
|
-
|
|
218
|
-
for (var
|
|
219
|
-
|
|
220
|
-
} else
|
|
221
|
-
return
|
|
222
|
-
|
|
216
|
+
if (p = null, s !== void 0 && (f(s), p = "" + s), d(t) && (f(t.key), p = "" + t.key), "key" in t) {
|
|
217
|
+
s = {};
|
|
218
|
+
for (var $ in t)
|
|
219
|
+
$ !== "key" && (s[$] = t[$]);
|
|
220
|
+
} else s = t;
|
|
221
|
+
return p && h(
|
|
222
|
+
s,
|
|
223
223
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
224
|
-
),
|
|
224
|
+
), g(
|
|
225
225
|
e,
|
|
226
|
-
|
|
227
|
-
b,
|
|
226
|
+
p,
|
|
228
227
|
E,
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
C
|
|
228
|
+
x,
|
|
229
|
+
i(),
|
|
230
|
+
s,
|
|
231
|
+
C,
|
|
232
|
+
y
|
|
233
233
|
);
|
|
234
234
|
}
|
|
235
|
-
function
|
|
236
|
-
typeof e == "object" && e !== null && e.$$typeof ===
|
|
235
|
+
function N(e) {
|
|
236
|
+
typeof e == "object" && e !== null && e.$$typeof === b && e._store && (e._store.validated = 1);
|
|
237
237
|
}
|
|
238
|
-
var
|
|
238
|
+
var u = ce, b = Symbol.for("react.transitional.element"), l = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), H = Symbol.for("react.strict_mode"), B = 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 = u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, ae = Array.isArray, w = console.createTask ? console.createTask : function() {
|
|
239
239
|
return null;
|
|
240
240
|
};
|
|
241
|
-
|
|
241
|
+
u = {
|
|
242
242
|
react_stack_bottom_frame: function(e) {
|
|
243
243
|
return e();
|
|
244
244
|
}
|
|
245
245
|
};
|
|
246
|
-
var
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
)(), W = w(
|
|
250
|
-
|
|
251
|
-
var
|
|
252
|
-
return
|
|
246
|
+
var M, D = {}, L = u.react_stack_bottom_frame.bind(
|
|
247
|
+
u,
|
|
248
|
+
c
|
|
249
|
+
)(), W = w(o(c)), U = {};
|
|
250
|
+
T.Fragment = v, T.jsx = function(e, t, s, m, x) {
|
|
251
|
+
var E = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
252
|
+
return R(
|
|
253
253
|
e,
|
|
254
|
-
|
|
255
|
-
|
|
254
|
+
t,
|
|
255
|
+
s,
|
|
256
256
|
!1,
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
257
|
+
m,
|
|
258
|
+
x,
|
|
259
|
+
E ? Error("react-stack-top-frame") : L,
|
|
260
|
+
E ? w(o(e)) : W
|
|
261
261
|
);
|
|
262
|
-
},
|
|
263
|
-
var
|
|
264
|
-
return
|
|
262
|
+
}, T.jsxs = function(e, t, s, m, x) {
|
|
263
|
+
var E = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
264
|
+
return R(
|
|
265
265
|
e,
|
|
266
|
-
|
|
267
|
-
|
|
266
|
+
t,
|
|
267
|
+
s,
|
|
268
268
|
!0,
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
269
|
+
m,
|
|
270
|
+
x,
|
|
271
|
+
E ? Error("react-stack-top-frame") : L,
|
|
272
|
+
E ? w(o(e)) : W
|
|
273
273
|
);
|
|
274
274
|
};
|
|
275
|
-
}()),
|
|
275
|
+
}()), T;
|
|
276
276
|
}
|
|
277
277
|
var z;
|
|
278
278
|
function me() {
|
|
279
|
-
return z || (z = 1, process.env.NODE_ENV === "production" ?
|
|
279
|
+
return z || (z = 1, process.env.NODE_ENV === "production" ? P.exports = de() : P.exports = fe()), P.exports;
|
|
280
280
|
}
|
|
281
|
-
var
|
|
281
|
+
var a = me();
|
|
282
282
|
const X = le(
|
|
283
283
|
void 0
|
|
284
|
-
),
|
|
285
|
-
const
|
|
286
|
-
if (!
|
|
284
|
+
), O = () => {
|
|
285
|
+
const n = ie(X);
|
|
286
|
+
if (!n)
|
|
287
287
|
throw new Error(
|
|
288
288
|
"useMultiStepperForm must be used within a MultiStepperProvider"
|
|
289
289
|
);
|
|
290
|
-
return
|
|
291
|
-
},
|
|
292
|
-
const [
|
|
290
|
+
return n;
|
|
291
|
+
}, xe = ({ children: n, steppers: r, options: f }) => {
|
|
292
|
+
const [o, i] = q(0), [c, d] = q([]);
|
|
293
293
|
ue(() => {
|
|
294
|
-
if (
|
|
295
|
-
const
|
|
296
|
-
|
|
294
|
+
if (r.length) {
|
|
295
|
+
const u = [...r];
|
|
296
|
+
u[0].active = !0, d(u);
|
|
297
297
|
}
|
|
298
|
-
}, [
|
|
299
|
-
const
|
|
300
|
-
|
|
301
|
-
const
|
|
302
|
-
if (
|
|
303
|
-
|
|
304
|
-
for (let v = 0; v <
|
|
305
|
-
|
|
306
|
-
for (let v =
|
|
307
|
-
|
|
308
|
-
return
|
|
309
|
-
}),
|
|
310
|
-
}, [
|
|
311
|
-
|
|
312
|
-
const
|
|
313
|
-
return
|
|
298
|
+
}, [r, r.length]);
|
|
299
|
+
const h = k((u) => {
|
|
300
|
+
d((b) => {
|
|
301
|
+
const l = [...b];
|
|
302
|
+
if (u > b.length - 1) return b;
|
|
303
|
+
l[o] && (l[o] = { ...l[o], active: !1 }), l[u] && (l[u] = { ...l[u], active: !0 });
|
|
304
|
+
for (let v = 0; v < u; v++)
|
|
305
|
+
l[v] = { ...l[v], completed: !0 };
|
|
306
|
+
for (let v = u; v < l.length; v++)
|
|
307
|
+
l[v] = { ...l[v], completed: !1 };
|
|
308
|
+
return l;
|
|
309
|
+
}), i(u);
|
|
310
|
+
}, [o]), S = k(() => {
|
|
311
|
+
o < c.length - 1 ? h(o + 1) : d((u) => {
|
|
312
|
+
const b = [...u];
|
|
313
|
+
return b[o] = { ...b[o], completed: !0 }, b;
|
|
314
314
|
});
|
|
315
|
-
}, [
|
|
316
|
-
|
|
317
|
-
}, [
|
|
318
|
-
(
|
|
319
|
-
|
|
320
|
-
const
|
|
321
|
-
return
|
|
322
|
-
...
|
|
315
|
+
}, [o, c.length, h]), g = k(() => {
|
|
316
|
+
o > 0 && h(o - 1);
|
|
317
|
+
}, [o, h]), R = k(
|
|
318
|
+
(u) => {
|
|
319
|
+
d((b) => {
|
|
320
|
+
const l = [...b];
|
|
321
|
+
return l[o] && (l[o] = {
|
|
322
|
+
...l[o],
|
|
323
323
|
error: !1,
|
|
324
324
|
loading: !1,
|
|
325
325
|
active: !1,
|
|
326
326
|
completed: !1
|
|
327
|
-
},
|
|
327
|
+
}, l[o][u] = !0), l;
|
|
328
328
|
});
|
|
329
329
|
},
|
|
330
|
-
[
|
|
330
|
+
[o]
|
|
331
331
|
), N = G(
|
|
332
332
|
() => ({
|
|
333
|
-
currentStep:
|
|
334
|
-
steps:
|
|
335
|
-
handleNextStep:
|
|
336
|
-
handlePrevStep:
|
|
337
|
-
updateSteps:
|
|
338
|
-
setStepStatus:
|
|
333
|
+
currentStep: o,
|
|
334
|
+
steps: c,
|
|
335
|
+
handleNextStep: S,
|
|
336
|
+
handlePrevStep: g,
|
|
337
|
+
updateSteps: h,
|
|
338
|
+
setStepStatus: R,
|
|
339
|
+
// styles,
|
|
340
|
+
options: f
|
|
339
341
|
}),
|
|
340
|
-
[
|
|
342
|
+
[o, c, S, g, h, R, f]
|
|
341
343
|
);
|
|
342
|
-
return /* @__PURE__ */
|
|
344
|
+
return /* @__PURE__ */ a.jsx(X.Provider, { value: N, children: n });
|
|
343
345
|
}, pe = () => {
|
|
344
|
-
const { steps:
|
|
345
|
-
return /* @__PURE__ */
|
|
346
|
-
}, ve = ({ onClickNext:
|
|
347
|
-
const { handlePrevStep:
|
|
348
|
-
|
|
349
|
-
},
|
|
346
|
+
const { steps: n, currentStep: r } = O();
|
|
347
|
+
return /* @__PURE__ */ a.jsx("div", { className: "stepper-content", children: n[r] && n[r].children && n[r].children });
|
|
348
|
+
}, ve = ({ onClickNext: n }) => {
|
|
349
|
+
const { handlePrevStep: r, currentStep: f, steps: o } = O(), i = f === o.length - 1, c = () => {
|
|
350
|
+
o[f].completed || n();
|
|
351
|
+
}, d = G(() => ({
|
|
350
352
|
button: "stepper-button",
|
|
351
353
|
fill: "stepper-button-fill"
|
|
352
354
|
}), []);
|
|
353
|
-
return /* @__PURE__ */
|
|
354
|
-
/* @__PURE__ */
|
|
355
|
+
return /* @__PURE__ */ a.jsxs("div", { className: "stepper-footer", children: [
|
|
356
|
+
/* @__PURE__ */ a.jsx(
|
|
355
357
|
"button",
|
|
356
358
|
{
|
|
357
359
|
type: "button",
|
|
358
|
-
className:
|
|
359
|
-
onClick:
|
|
360
|
-
disabled:
|
|
360
|
+
className: d.button,
|
|
361
|
+
onClick: r,
|
|
362
|
+
disabled: f < 0,
|
|
361
363
|
children: "Prev"
|
|
362
364
|
}
|
|
363
365
|
),
|
|
364
|
-
/* @__PURE__ */
|
|
366
|
+
/* @__PURE__ */ a.jsx(
|
|
365
367
|
"button",
|
|
366
368
|
{
|
|
367
369
|
type: "button",
|
|
368
|
-
className: `${
|
|
369
|
-
onClick:
|
|
370
|
-
children:
|
|
370
|
+
className: `${i ? `${d.button} ${d.fill}` : d.button}`,
|
|
371
|
+
onClick: c,
|
|
372
|
+
children: i ? "Finish" : "Next"
|
|
371
373
|
}
|
|
372
374
|
)
|
|
373
375
|
] });
|
|
374
376
|
}, he = ({
|
|
375
|
-
step:
|
|
376
|
-
index:
|
|
377
|
+
step: n,
|
|
378
|
+
index: r
|
|
377
379
|
}) => {
|
|
378
|
-
const { steps:
|
|
379
|
-
return
|
|
380
|
+
const { steps: f, options: o } = O();
|
|
381
|
+
return f.length ? n.loading ? /* @__PURE__ */ a.jsx("div", { className: "step step-active", children: /* @__PURE__ */ a.jsx("div", { className: "spinner", role: "status", "aria-label": "Loading" }) }) : n.error ? /* @__PURE__ */ a.jsx("div", { className: "step step-error", children: n.icon ? n.icon : o?.errorIcon ?? /* @__PURE__ */ a.jsx("span", { className: "text-white", children: "✗" }) }) : n.completed ? /* @__PURE__ */ a.jsx("div", { className: "step step-complete", children: n.icon ? n.icon : o?.completedIcon ?? /* @__PURE__ */ a.jsx("span", { className: "text-white", children: "✓" }) }) : n.finshed ? /* @__PURE__ */ a.jsx("div", { className: "step step-complete", children: n.icon }) : n.active ? /* @__PURE__ */ a.jsx("div", { className: "step step-active", children: n.icon ? n.icon : o?.activeIcon ?? /* @__PURE__ */ a.jsx("h2", { className: "text-white", children: r }) }) : /* @__PURE__ */ a.jsx("div", { className: "step step-default", children: n.icon ?? /* @__PURE__ */ a.jsx("h2", { children: r }) }) : /* @__PURE__ */ a.jsx(Y, {});
|
|
380
382
|
}, be = () => {
|
|
381
|
-
const { steps:
|
|
382
|
-
return
|
|
383
|
-
|
|
384
|
-
{
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
383
|
+
const { steps: n } = O();
|
|
384
|
+
return n.length ? /* @__PURE__ */ a.jsx("div", { className: "app-container", children: /* @__PURE__ */ a.jsx("ol", { className: "stepper-header", children: n.map((r, f) => {
|
|
385
|
+
const o = r.active && !r.completed && !r.loading && !r.error, i = r.completed && !r.active && !r.loading && !r.error, c = r.error && !r.active && !r.completed && !r.loading, d = r.loading && !r.completed && !r.active && !r.error;
|
|
386
|
+
return console.log(r.id, { isActive: o, isComplete: i, isError: c, isLoading: d }), /* @__PURE__ */ a.jsxs(
|
|
387
|
+
"div",
|
|
388
|
+
{
|
|
389
|
+
className: `step-item ${d && "active"} ${o && "active"} ${i && "complete"} ${c && "error"}`,
|
|
390
|
+
children: [
|
|
391
|
+
/* @__PURE__ */ a.jsx(he, { index: f + 1, step: r }),
|
|
392
|
+
/* @__PURE__ */ a.jsxs("div", { className: "step-text", children: [
|
|
393
|
+
r.title && /* @__PURE__ */ a.jsx("h3", { className: "step-title", children: r.title }),
|
|
394
|
+
r.description && /* @__PURE__ */ a.jsx("h3", { className: "step-description", children: r.description })
|
|
395
|
+
] })
|
|
396
|
+
]
|
|
397
|
+
},
|
|
398
|
+
f
|
|
399
|
+
);
|
|
400
|
+
}) }) }) : /* @__PURE__ */ a.jsx(Y, {});
|
|
396
401
|
}, _e = ({
|
|
397
|
-
onClickNext:
|
|
398
|
-
}) => /* @__PURE__ */
|
|
399
|
-
/* @__PURE__ */
|
|
400
|
-
/* @__PURE__ */
|
|
401
|
-
/* @__PURE__ */
|
|
402
|
+
onClickNext: n
|
|
403
|
+
}) => /* @__PURE__ */ a.jsxs(Y, { children: [
|
|
404
|
+
/* @__PURE__ */ a.jsx(be, {}),
|
|
405
|
+
/* @__PURE__ */ a.jsx(pe, {}),
|
|
406
|
+
/* @__PURE__ */ a.jsx(ve, { onClickNext: n })
|
|
402
407
|
] });
|
|
403
408
|
export {
|
|
404
409
|
_e as MultiStepper,
|
|
405
|
-
|
|
406
|
-
|
|
410
|
+
xe as MultiStepperProvider,
|
|
411
|
+
O as useMultiStepper
|
|
407
412
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(z);var
|
|
1
|
+
(function(E,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],l):(E=typeof globalThis<"u"?globalThis:E||self,l(E["multi-stepper"]={},E.React))})(this,function(E,l){"use strict";var z=document.createElement("style");z.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:var(--spacing-lg)}.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-error{background-color:var(--color-error);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)}.error:not(:last-child):after{background-color:var(--color-error)}.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)}.spinner{width:var(--spinner-size);height:var(--spinner-size);border-radius:50%;border:var(--spinner-thickness) solid var(--spinner-track);border-top-color:var(--spinner-color);animation:spin var(--spinner-speed) linear infinite}@media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:var(--spinner-track)}}@keyframes spin{to{transform:rotate(360deg)}}.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%}}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(z);var T={exports:{}},k={};/**
|
|
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 Y;function B(){if(Y)return k;Y=1;var
|
|
10
|
+
*/var Y;function B(){if(Y)return k;Y=1;var o=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function f(n,u,c){var p=null;if(c!==void 0&&(p=""+c),u.key!==void 0&&(p=""+u.key),"key"in u){c={};for(var b in u)b!=="key"&&(c[b]=u[b])}else c=u;return u=c.ref,{$$typeof:o,type:n,key:p,ref:u!==void 0?u:null,props:c}}return k.Fragment=r,k.jsx=f,k.jsxs=f,k}var R={};/**
|
|
11
11
|
* @license React
|
|
12
12
|
* react-jsx-runtime.development.js
|
|
13
13
|
*
|
|
@@ -15,9 +15,9 @@
|
|
|
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 I;function Z(){return I||(I=1,process.env.NODE_ENV!=="production"&&function(){function
|
|
18
|
+
*/var I;function Z(){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===pe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case h:return"Fragment";case ne:return"Profiler";case oe: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 i:return"Portal";case se:return(e.displayName||"Context")+".Provider";case ae: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:o(e.type)||"Memo";case U:t=e._payload,e=e._init;try{return o(e(t))}catch{}}return null}function r(e){return""+e}function f(e){try{r(e);var t=!1}catch{t=!0}if(t){t=console;var s=t.error,m=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return s.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",m),r(e)}}function n(e){if(e===h)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===U)return"<...>";try{var t=o(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function u(){var e=O.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function p(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 s(){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))}s.isReactWarning=!0,Object.defineProperty(e,"key",{get:s,configurable:!0})}function w(){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 N(e,t,s,m,_,x,C,M){return s=x.ref,e={$$typeof:g,type:e,key:t,props:x,_owner:_},(s!==void 0?s: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,s,m,_,x,C,M){var v=t.children;if(v!==void 0)if(m)if(fe(v)){for(m=0;m<v.length;m++)P(v[m]);Object.freeze&&Object.freeze(v)}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(v);if(W.call(t,"key")){v=o(e);var j=Object.keys(t).filter(function(me){return me!=="key"});m=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",H[v+m]||(j=0<j.length?"{"+j.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} />`,
|
|
23
|
+
<%s key={someKey} {...props} />`,m,v,j,v),H[v+m]=!0)}if(v=null,s!==void 0&&(f(s),v=""+s),p(t)&&(f(t.key),v=""+t.key),"key"in t){s={};for(var F in t)F!=="key"&&(s[F]=t[F])}else s=t;return v&&b(s,typeof e=="function"?e.displayName||e.name||"Unknown":e),N(e,v,x,_,u(),s,C,M)}function P(e){typeof e=="object"&&e!==null&&e.$$typeof===g&&e._store&&(e._store.validated=1)}var d=l,g=Symbol.for("react.transitional.element"),i=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),oe=Symbol.for("react.strict_mode"),ne=Symbol.for("react.profiler"),ae=Symbol.for("react.consumer"),se=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=d.__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};d={react_stack_bottom_frame:function(e){return e()}};var J,V={},G=d.react_stack_bottom_frame.bind(d,c)(),X=A(n(c)),H={};R.Fragment=h,R.jsx=function(e,t,s,m,_){var x=1e4>O.recentlyCreatedOwnerStacks++;return y(e,t,s,!1,m,_,x?Error("react-stack-top-frame"):G,x?A(n(e)):X)},R.jsxs=function(e,t,s,m,_){var x=1e4>O.recentlyCreatedOwnerStacks++;return y(e,t,s,!0,m,_,x?Error("react-stack-top-frame"):G,x?A(n(e)):X)}}()),R}var D;function Q(){return D||(D=1,process.env.NODE_ENV==="production"?T.exports=B():T.exports=Z()),T.exports}var a=Q();const L=l.createContext(void 0),S=()=>{const o=l.useContext(L);if(!o)throw new Error("useMultiStepperForm must be used within a MultiStepperProvider");return o},K=({children:o,steppers:r,options:f})=>{const[n,u]=l.useState(0),[c,p]=l.useState([]);l.useEffect(()=>{if(r.length){const d=[...r];d[0].active=!0,p(d)}},[r,r.length]);const b=l.useCallback(d=>{p(g=>{const i=[...g];if(d>g.length-1)return g;i[n]&&(i[n]={...i[n],active:!1}),i[d]&&(i[d]={...i[d],active:!0});for(let h=0;h<d;h++)i[h]={...i[h],completed:!0};for(let h=d;h<i.length;h++)i[h]={...i[h],completed:!1};return i}),u(d)},[n]),w=l.useCallback(()=>{n<c.length-1?b(n+1):p(d=>{const g=[...d];return g[n]={...g[n],completed:!0},g})},[n,c.length,b]),N=l.useCallback(()=>{n>0&&b(n-1)},[n,b]),y=l.useCallback(d=>{p(g=>{const i=[...g];return i[n]&&(i[n]={...i[n],error:!1,loading:!1,active:!1,completed:!1},i[n][d]=!0),i})},[n]),P=l.useMemo(()=>({currentStep:n,steps:c,handleNextStep:w,handlePrevStep:N,updateSteps:b,setStepStatus:y,options:f}),[n,c,w,N,b,y,f]);return a.jsx(L.Provider,{value:P,children:o})},q=()=>{const{steps:o,currentStep:r}=S();return a.jsx("div",{className:"stepper-content",children:o[r]&&o[r].children&&o[r].children})},$=({onClickNext:o})=>{const{handlePrevStep:r,currentStep:f,steps:n}=S(),u=f===n.length-1,c=()=>{n[f].completed||o()},p=l.useMemo(()=>({button:"stepper-button",fill:"stepper-button-fill"}),[]);return a.jsxs("div",{className:"stepper-footer",children:[a.jsx("button",{type:"button",className:p.button,onClick:r,disabled:f<0,children:"Prev"}),a.jsx("button",{type:"button",className:`${u?`${p.button} ${p.fill}`:p.button}`,onClick:c,children:u?"Finish":"Next"})]})},ee=({step:o,index:r})=>{const{steps:f,options:n}=S();return f.length?o.loading?a.jsx("div",{className:"step step-active",children:a.jsx("div",{className:"spinner",role:"status","aria-label":"Loading"})}):o.error?a.jsx("div",{className:"step step-error",children:o.icon?o.icon:n?.errorIcon??a.jsx("span",{className:"text-white",children:"✗"})}):o.completed?a.jsx("div",{className:"step step-complete",children:o.icon?o.icon:n?.completedIcon??a.jsx("span",{className:"text-white",children:"✓"})}):o.finshed?a.jsx("div",{className:"step step-complete",children:o.icon}):o.active?a.jsx("div",{className:"step step-active",children:o.icon?o.icon:n?.activeIcon??a.jsx("h2",{className:"text-white",children:r})}):a.jsx("div",{className:"step step-default",children:o.icon??a.jsx("h2",{children:r})}):a.jsx(l.Fragment,{})},re=()=>{const{steps:o}=S();return o.length?a.jsx("div",{className:"app-container",children:a.jsx("ol",{className:"stepper-header",children:o.map((r,f)=>{const n=r.active&&!r.completed&&!r.loading&&!r.error,u=r.completed&&!r.active&&!r.loading&&!r.error,c=r.error&&!r.active&&!r.completed&&!r.loading,p=r.loading&&!r.completed&&!r.active&&!r.error;return console.log(r.id,{isActive:n,isComplete:u,isError:c,isLoading:p}),a.jsxs("div",{className:`step-item ${p&&"active"} ${n&&"active"} ${u&&"complete"} ${c&&"error"}`,children:[a.jsx(ee,{index:f+1,step:r}),a.jsxs("div",{className:"step-text",children:[r.title&&a.jsx("h3",{className:"step-title",children:r.title}),r.description&&a.jsx("h3",{className:"step-description",children:r.description})]})]},f)})})}):a.jsx(l.Fragment,{})},te=({onClickNext:o})=>a.jsxs(l.Fragment,{children:[a.jsx(re,{}),a.jsx(q,{}),a.jsx($,{onClickNext:o})]});E.MultiStepper=te,E.MultiStepperProvider=K,E.useMultiStepper=S,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -3,13 +3,16 @@
|
|
|
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.2.
|
|
6
|
+
"version": "1.2.6",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"repository": {
|
|
9
9
|
"url": "https://github.com/UppiliSrinivas/react-stepper/tree/multi-stepper"
|
|
10
10
|
},
|
|
11
11
|
"files": [
|
|
12
|
-
"dist"
|
|
12
|
+
"dist",
|
|
13
|
+
"assets",
|
|
14
|
+
"README.md",
|
|
15
|
+
"LICENSE"
|
|
13
16
|
],
|
|
14
17
|
"exports": {
|
|
15
18
|
".": {
|