wizzard-stepper-react 1.7.2 โ 2.0.0
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 +88 -361
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +309 -63
- package/dist/index.d.ts +309 -63
- package/dist/index.js +1 -1
- package/package.json +7 -1
package/README.md
CHANGED
|
@@ -1,431 +1,158 @@
|
|
|
1
1
|
# wizzard-stepper-react ๐งโโ๏ธ
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- ๐ง **Headless Architecture**: Full control over UI. You bring the components, we provide the logic.
|
|
8
|
-
- ๐ **Adapter Pattern**: Zero-dependency adapters for **Zod**, **Yup** validation.
|
|
9
|
-
- ๐๏ธ **Complex Data**: Built-in support for nested objects and arrays using dot notation (`users[0].name`).
|
|
10
|
-
- ๐ก๏ธ **Strictly Typed**: Built with TypeScript generics for type safety across steps.
|
|
11
|
-
- ๐พ **Advanced Persistence**: Auto-save progress to LocalStorage, custom stores, or **Hybrid Step-Level persistence**.
|
|
12
|
-
- ๏ฟฝ **Comprehensive Guides**: Detailed documentation portal with interactive guides, pro-tips, and type references.
|
|
13
|
-
- โก **High Performance Engine**: Path caching, Hash-Map lookups, and Stateless Provider architecture.
|
|
14
|
-
|
|
15
|
-
## Installation
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm install wizzard-stepper-react
|
|
19
|
-
# or
|
|
20
|
-
yarn add wizzard-stepper-react
|
|
21
|
-
# or
|
|
22
|
-
pnpm add wizzard-stepper-react
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## Usage
|
|
3
|
+
[](https://www.npmjs.com/package/wizzard-stepper-react)
|
|
4
|
+
[](https://github.com/ZizzX/wizzard-stepper-react/blob/main/LICENSE)
|
|
5
|
+
[](https://bundlephobia.com/package/wizzard-stepper-react)
|
|
26
6
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
The quickest way to get started. Types are flexible (`any`).
|
|
7
|
+
A flexible, headless, and strictly typed multi-step wizard library for React. Built with adapter patterns in mind to support any form library (React Hook Form, Formik, etc.) and any validation schema (Zod, Yup).
|
|
30
8
|
|
|
31
|
-
|
|
32
|
-
import { WizardProvider, useWizard } from 'wizzard-stepper-react';
|
|
9
|
+
---
|
|
33
10
|
|
|
34
|
-
|
|
35
|
-
const { wizardData, handleStepChange } = useWizard();
|
|
36
|
-
return (
|
|
37
|
-
<input
|
|
38
|
-
value={wizardData.name}
|
|
39
|
-
onChange={(e) => handleStepChange('name', e.target.value)}
|
|
40
|
-
/>
|
|
41
|
-
);
|
|
42
|
-
};
|
|
11
|
+
## ๐ Quick Start (v2.0.0 Modern)
|
|
43
12
|
|
|
44
|
-
|
|
45
|
-
<WizardProvider>
|
|
46
|
-
<Step1 />
|
|
47
|
-
</WizardProvider>
|
|
48
|
-
);
|
|
49
|
-
```
|
|
13
|
+
Version 2.0.0 introduces the **Factory Pattern**, providing 100% type safety and optimized performance out of the box.
|
|
50
14
|
|
|
51
|
-
###
|
|
15
|
+
### 1. Create your Wizard Kit
|
|
52
16
|
|
|
53
|
-
|
|
17
|
+
Define your data schema and generate typed hooks.
|
|
54
18
|
|
|
55
|
-
**`wizards/my-wizard.ts`**
|
|
56
19
|
```typescript
|
|
20
|
+
// wizards/auth-wizard.ts
|
|
57
21
|
import { createWizardFactory } from 'wizzard-stepper-react';
|
|
58
22
|
|
|
59
|
-
interface
|
|
60
|
-
|
|
61
|
-
|
|
23
|
+
interface AuthSchema {
|
|
24
|
+
email: string;
|
|
25
|
+
preferences: { theme: 'light' | 'dark' };
|
|
62
26
|
}
|
|
63
27
|
|
|
64
|
-
export const {
|
|
28
|
+
export const {
|
|
29
|
+
WizardProvider,
|
|
30
|
+
useWizard,
|
|
31
|
+
useWizardValue,
|
|
32
|
+
useWizardActions
|
|
33
|
+
} = createWizardFactory<AuthSchema>();
|
|
65
34
|
```
|
|
66
35
|
|
|
67
|
-
|
|
68
|
-
```tsx
|
|
69
|
-
import { useWizard } from '../wizards/my-wizard';
|
|
70
|
-
|
|
71
|
-
const Step1 = () => {
|
|
72
|
-
const { wizardData } = useWizard();
|
|
73
|
-
// โ
wizardData is strictly typed as MySchema
|
|
74
|
-
// โ
Autocomplete works for wizardData.name
|
|
75
|
-
}
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
See [MIGRATION.md](./MIGRATION.md) for details on switching to strict mode.
|
|
79
|
-
|
|
80
|
-
## Integration with React Hook Form + Zod
|
|
36
|
+
### 2. Wrap your App
|
|
81
37
|
|
|
82
38
|
```tsx
|
|
83
|
-
import {
|
|
84
|
-
import { zodResolver } from '@hookform/resolvers/zod';
|
|
85
|
-
import { z } from 'zod';
|
|
86
|
-
import { ZodAdapter, useWizard } from 'wizzard-stepper-react';
|
|
87
|
-
|
|
88
|
-
const schema = z.object({ email: z.string().email() });
|
|
89
|
-
|
|
90
|
-
const MyStep = () => {
|
|
91
|
-
const { handleStepChange, wizardData } = useWizard();
|
|
92
|
-
const { register } = useForm({
|
|
93
|
-
defaultValues: wizardData,
|
|
94
|
-
resolver: zodResolver(schema),
|
|
95
|
-
mode: 'onChange' // Important: validate real-time or bind changes
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
return (
|
|
99
|
-
<input {...register('email', {
|
|
100
|
-
onChange: (e) => handleStepChange('email', e.target.value)
|
|
101
|
-
})} />
|
|
102
|
-
);
|
|
103
|
-
}
|
|
39
|
+
import { WizardProvider } from './wizards/auth-wizard';
|
|
104
40
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
label: 'Email',
|
|
111
|
-
// Zero-dependency: works with any Zod version
|
|
112
|
-
validationAdapter: new ZodAdapter(schema)
|
|
113
|
-
}
|
|
114
|
-
]
|
|
115
|
-
}
|
|
41
|
+
const App = () => (
|
|
42
|
+
<WizardProvider>
|
|
43
|
+
<MyWizardComponents />
|
|
44
|
+
</WizardProvider>
|
|
45
|
+
);
|
|
116
46
|
```
|
|
117
47
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
The library provides `setData` and `getData` helpers that support deep paths using dot notation and array brackets.
|
|
48
|
+
### 3. Use Granular Hooks
|
|
121
49
|
|
|
122
50
|
```tsx
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
// Set nested object property
|
|
126
|
-
setData('user.profile.name', 'John');
|
|
51
|
+
import { useWizardValue, useWizardActions } from './wizards/auth-wizard';
|
|
127
52
|
|
|
128
|
-
|
|
129
|
-
|
|
53
|
+
const EmailInput = () => {
|
|
54
|
+
// โก Atomic re-render: component only updates if 'email' changes
|
|
55
|
+
const email = useWizardValue('email');
|
|
56
|
+
const { setData } = useWizardActions();
|
|
130
57
|
|
|
131
|
-
|
|
132
|
-
const name = getData('user.profile.name', 'Anonymous');
|
|
133
|
-
|
|
134
|
-
// ๐ Bulk Update (Autofill)
|
|
135
|
-
const autoFillParams = () => {
|
|
136
|
-
// Merges into existing data
|
|
137
|
-
updateData({
|
|
138
|
-
name: 'John Doe',
|
|
139
|
-
email: 'john@example.com'
|
|
140
|
-
});
|
|
58
|
+
return <input value={email} onChange={e => setData('email', e.target.value)} />;
|
|
141
59
|
};
|
|
142
60
|
```
|
|
143
61
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
**New in v2**: The library now uses **path caching** and **iterative updates** under the hood. `setData` is incredibly fast even for deeply nested objects.
|
|
147
|
-
For large forms (e.g., 50+ array items), using `useWizard` context can still cause React re-renders. To solve this, we provide granular hooks:
|
|
148
|
-
|
|
149
|
-
### 1. Use `useWizardValue` for Granular Updates
|
|
62
|
+
---
|
|
150
63
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
```tsx
|
|
154
|
-
// โ
FAST: Only re-renders when "users[0].name" changes
|
|
155
|
-
const NameInput = () => {
|
|
156
|
-
// Subscribe to specific path
|
|
157
|
-
const name = useWizardValue('users[0].name');
|
|
158
|
-
const { setData } = useWizardActions(); // Component actions don't trigger re-renders
|
|
159
|
-
|
|
160
|
-
return <input value={name} onChange={e => setData('users[0].name', e.target.value)} />;
|
|
161
|
-
}
|
|
64
|
+
## โจ Key Features
|
|
162
65
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
### 2. Use `useWizardSelector` for Lists
|
|
66
|
+
- ๐ง **Headless Architecture**: Full control over UI. You bring the components, we provide the logic.
|
|
67
|
+
- ๐
**Modern First**: Optimized for React 18 with selective rendering and external state store.
|
|
68
|
+
- ๐ **Adapter Pattern**: Zero-dependency adapters for **Zod**, **Yup** validation.
|
|
69
|
+
- ๐๏ธ **Complex Data**: Built-in support for nested objects using dot notation (`user.address.zip`).
|
|
70
|
+
- ๐พ **Advanced Persistence**: Auto-save to LocalStorage, SessionStorage, or Custom API adapters.
|
|
71
|
+
- ๐ ๏ธ **Developer Tools**: High-performance debugging overlay and **Redux DevTools** integration.
|
|
171
72
|
|
|
172
|
-
|
|
73
|
+
---
|
|
173
74
|
|
|
174
|
-
|
|
175
|
-
const ChildrenList = () => {
|
|
176
|
-
// โ
Only re-renders when the list LENGTH changes or IDs change
|
|
177
|
-
const childIds = useWizardSelector(state => state.children.map(c => c.id));
|
|
178
|
-
|
|
179
|
-
return (
|
|
180
|
-
<div>
|
|
181
|
-
{childIds.map((id, index) => (
|
|
182
|
-
// Pass ID/Index, NOT the data object
|
|
183
|
-
<ChildRow key={id} index={index} />
|
|
184
|
-
))}
|
|
185
|
-
</div>
|
|
186
|
-
);
|
|
187
|
-
}
|
|
188
|
-
```
|
|
75
|
+
## ๐๏ธ Core Concepts
|
|
189
76
|
|
|
190
|
-
###
|
|
77
|
+
### Validation Adapters
|
|
191
78
|
|
|
192
|
-
|
|
79
|
+
We are library-agnostic. Use our pre-built adapters or write your own.
|
|
193
80
|
|
|
194
81
|
```tsx
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
});
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
## Validation Logic ๐ก๏ธ
|
|
201
|
-
|
|
202
|
-
By default, validation runs on every change (`onChange`). You can optimize this for heavy forms.
|
|
203
|
-
|
|
204
|
-
### โก Performance & Validation
|
|
205
|
-
### granular Validation Control
|
|
206
|
-
- ๐งฉ **Flexible adapters** for any validation or persistence logic
|
|
207
|
-
- โก **High Performance**: Stateless Provider architecture and O(1) internal lookups
|
|
208
|
-
- ๐ฆ **Zero Dependencies** (excluding React as peer)
|
|
209
|
-
You can control when validation happens using `validationMode`. This is critical for performance in large forms or heavy validation schemas.
|
|
82
|
+
import { ZodAdapter } from 'wizzard-stepper-react';
|
|
83
|
+
import { z } from 'zod';
|
|
210
84
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
- *Ux improvement*: If an error occurs, it appears. But as soon as the user starts typing to fix it, the error is **immediately cleared** locally (without triggering a full re-validation schema check), providing instant "clean" feedback.
|
|
214
|
-
- **`manual`**: No automatic validation. You manually call `validateStep()`.
|
|
85
|
+
const schema = z.object({ age: z.number().min(18) });
|
|
86
|
+
const adapter = new ZodAdapter(schema);
|
|
215
87
|
|
|
216
|
-
|
|
217
|
-
const
|
|
218
|
-
steps: [
|
|
219
|
-
{
|
|
220
|
-
id: 'heavy-step',
|
|
221
|
-
label: 'Complex Data',
|
|
222
|
-
// Optimize: Only validate on "Next" click
|
|
223
|
-
validationMode: 'onStepChange',
|
|
224
|
-
validationAdapter: new ZodAdapter(heavySchema)
|
|
225
|
-
}
|
|
226
|
-
]
|
|
227
|
-
};
|
|
88
|
+
// In your config:
|
|
89
|
+
const step = { id: 'age', validationAdapter: adapter };
|
|
228
90
|
```
|
|
229
91
|
|
|
230
|
-
###
|
|
231
|
-
- **Hash Table Storage**: Errors are stored internally using `Map` (Hash Table) for **O(1)** access and deletion, ensuring UI stays snappy even with hundreds of errors.
|
|
232
|
-
- **Path Caching**: Data access paths (e.g., `users[0].name`) are cached to eliminate parsing overhead during frequent typing.
|
|
92
|
+
### Navigation Lifecycle
|
|
233
93
|
|
|
234
|
-
|
|
94
|
+
1. **Validation**: Current step is checked. Navigation stops if invalid.
|
|
95
|
+
2. **Resolution**: Next step conditions (dynamic branching) are evaluated.
|
|
96
|
+
3. **Guards**: `beforeLeave` hooks run (e.g., for "Unsaved Changes" modals).
|
|
97
|
+
4. **Commit**: State updates and navigation completes.
|
|
235
98
|
|
|
236
|
-
|
|
99
|
+
---
|
|
237
100
|
|
|
238
|
-
|
|
239
|
-
const config: IWizardConfig = {
|
|
240
|
-
steps: [
|
|
241
|
-
{ id: 'start', label: 'Start' },
|
|
242
|
-
{
|
|
243
|
-
id: 'bonus',
|
|
244
|
-
label: 'Bonus Step',
|
|
245
|
-
// Only show if 'wantBonus' is true
|
|
246
|
-
condition: (data) => !!data.wantBonus
|
|
247
|
-
}
|
|
248
|
-
]
|
|
249
|
-
}
|
|
250
|
-
```
|
|
101
|
+
## ๐พ State Persistence
|
|
251
102
|
|
|
252
|
-
|
|
253
|
-
Automatically save wizard progress so users don't lose data on reload.
|
|
103
|
+
Isolate your wizard data to prevent collisions when using multiple instances.
|
|
254
104
|
|
|
255
105
|
```typescript
|
|
256
106
|
import { LocalStorageAdapter } from 'wizzard-stepper-react';
|
|
257
107
|
|
|
258
|
-
const config
|
|
259
|
-
steps: [...],
|
|
108
|
+
const config = {
|
|
260
109
|
persistence: {
|
|
261
|
-
|
|
262
|
-
|
|
110
|
+
// ๐ก๏ธ Always use a unique prefix for isolation
|
|
111
|
+
adapter: new LocalStorageAdapter('auth_wizard_v2'),
|
|
112
|
+
mode: 'onStepChange'
|
|
263
113
|
}
|
|
264
114
|
};
|
|
265
115
|
```
|
|
266
|
-
Everything (current step, data, visited state) is handled automatically! LocalStorage to survive page reloads.
|
|
267
116
|
|
|
117
|
+
---
|
|
268
118
|
|
|
119
|
+
## ๐ ๏ธ Performance Tuning
|
|
269
120
|
|
|
270
|
-
|
|
121
|
+
| Hook | Returns | Re-renders | Best For |
|
|
122
|
+
| :--- | :--- | :--- | :--- |
|
|
123
|
+
| `useWizardActions` | Navigation/Setters | **Zero** | Buttons, Handlers |
|
|
124
|
+
| `useWizardValue` | Specific Field | **Atomic** | Inputs, Labels |
|
|
125
|
+
| `useWizardState` | UI Meta (Progress) | **Minimal** | Progress Bars |
|
|
126
|
+
| `useWizard` | Everything | **Full** | Orchestration |
|
|
271
127
|
|
|
272
|
-
|
|
128
|
+
---
|
|
273
129
|
|
|
274
|
-
|
|
130
|
+
## โ ๏ธ Legacy Support (v1.x)
|
|
275
131
|
|
|
276
|
-
|
|
277
|
-
// Define component in config
|
|
278
|
-
const steps = [
|
|
279
|
-
{ id: 'step1', label: 'Start', component: Step1Component },
|
|
280
|
-
{ id: 'step2', label: 'End', component: Step2Component },
|
|
281
|
-
];
|
|
282
|
-
|
|
283
|
-
// Render
|
|
284
|
-
const App = () => (
|
|
285
|
-
<WizardProvider config={{ steps }}>
|
|
286
|
-
<WizardStepRenderer
|
|
287
|
-
wrapper={({ children }) => (
|
|
288
|
-
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
|
|
289
|
-
{children}
|
|
290
|
-
</motion.div>
|
|
291
|
-
)}
|
|
292
|
-
/>
|
|
293
|
-
</WizardProvider>
|
|
294
|
-
);
|
|
295
|
-
```
|
|
296
|
-
|
|
297
|
-
### 2. Routing Integration
|
|
298
|
-
|
|
299
|
-
Sync wizard state with URL using `onStepChange`.
|
|
132
|
+
If you are maintaining an older project, you can still use the classic Context-based provider. Note that this mode does not support the new performance-optimized hooks.
|
|
300
133
|
|
|
301
134
|
```tsx
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
const config: IWizardConfig = {
|
|
305
|
-
// 1. Sync State -> URL
|
|
306
|
-
onStepChange: (prev, next, data) => {
|
|
307
|
-
navigate(`/wizard/${next}`);
|
|
308
|
-
// Optional: Send event to Analytics
|
|
309
|
-
trackEvent('wizard_step', { step: next });
|
|
310
|
-
},
|
|
311
|
-
steps: [...]
|
|
312
|
-
};
|
|
313
|
-
|
|
314
|
-
// 2. Sync URL -> State (Initial Load)
|
|
315
|
-
const { stepId } = useParams();
|
|
316
|
-
|
|
317
|
-
return <WizardProvider config={config} initialStepId={stepId}>...</WizardProvider>;
|
|
318
|
-
```
|
|
319
|
-
|
|
320
|
-
### 3. Granular Persistence
|
|
321
|
-
|
|
322
|
-
By default, the wizard uses `MemoryAdapter` (RAM only). You can enable `LocalStorage` globally, but override it or its **behavior** (mode) for individual steps.
|
|
135
|
+
import { WizardProvider, useWizard } from 'wizzard-stepper-react';
|
|
323
136
|
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
mode: 'onStepChange'
|
|
330
|
-
},
|
|
331
|
-
steps: [
|
|
332
|
-
{
|
|
333
|
-
id: 'public',
|
|
334
|
-
label: 'Public Info',
|
|
335
|
-
// Inherits global settings
|
|
336
|
-
},
|
|
337
|
-
{
|
|
338
|
-
id: 'realtime',
|
|
339
|
-
label: 'Active Draft',
|
|
340
|
-
// Override Mode: Save to local storage on every keystroke
|
|
341
|
-
persistenceMode: 'onChange'
|
|
342
|
-
},
|
|
343
|
-
{
|
|
344
|
-
id: 'sensitive',
|
|
345
|
-
label: 'Credit Card',
|
|
346
|
-
// Override Adapter: Store strictly in memory (cleared on refresh)
|
|
347
|
-
persistenceAdapter: new MemoryAdapter()
|
|
348
|
-
}
|
|
349
|
-
]
|
|
350
|
-
};
|
|
137
|
+
const OldApp = () => (
|
|
138
|
+
<WizardProvider>
|
|
139
|
+
<MyComponents />
|
|
140
|
+
</WizardProvider>
|
|
141
|
+
);
|
|
351
142
|
```
|
|
352
143
|
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
### `IWizardConfig<T>`
|
|
356
|
-
|
|
357
|
-
- `steps`: Array of step configurations.
|
|
358
|
-
- `persistence`: Configuration for state persistence.
|
|
359
|
-
- `autoValidate`: (obj) Global validation setting.
|
|
360
|
-
|
|
361
|
-
### `useWizard<T>()`
|
|
362
|
-
|
|
363
|
-
- `activeSteps`: Steps that match conditions.
|
|
364
|
-
- `currentStep`: The currently active step object.
|
|
365
|
-
- `wizardData`: The global state object (subscribe cautiously!).
|
|
366
|
-
- `setData(path, value, options?)`: Update state. Options: `{ debounceValidation: number }`.
|
|
367
|
-
- `getData(path, defaultValue?)`: Retrieve nested data.
|
|
368
|
-
- `handleStepChange(key, value)`: simple helper to update top-level state.
|
|
369
|
-
- `goToNextStep()`: Validates and moves next.
|
|
370
|
-
- `goToStep(id)`: Jumps to specific step.
|
|
371
|
-
- `allErrors`: Map of validation errors.
|
|
372
|
-
|
|
373
|
-
### New Performance Hooks
|
|
374
|
-
|
|
375
|
-
#### `useWizardValue<T>(path: string)`
|
|
376
|
-
|
|
377
|
-
Subscribes to a specific data path. Re-renders **only** when that value changes.
|
|
378
|
-
|
|
379
|
-
#### `useWizardError(path: string)`
|
|
380
|
-
|
|
381
|
-
Subscribes to validation errors for a specific path. Highly recommended for individual inputs.
|
|
144
|
+
For migration steps, see [MIGRATION.md](./MIGRATION.md).
|
|
382
145
|
|
|
383
|
-
|
|
146
|
+
---
|
|
384
147
|
|
|
385
|
-
|
|
148
|
+
## ๐ Documentation & Demos
|
|
386
149
|
|
|
387
|
-
|
|
150
|
+
- ๐ **Full Docs**: [Interactive Documentation Portal](https://ZizzX.github.io/wizzard-stepper-react/)
|
|
151
|
+
- ๐งช **Enterprise Demo**: [Google-quality complex wizard implementation](https://ZizzX.github.io/wizzard-stepper-react/docs/introduction)
|
|
152
|
+
- ๐ **NPMS**: [View on npm](https://www.npmjs.com/package/wizzard-stepper-react)
|
|
388
153
|
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
## Demos
|
|
392
|
-
|
|
393
|
-
Check out the [Live Demo](https://ZizzX.github.io/wizzard-stepper-react/), [NPM](https://www.npmjs.com/package/wizzard-stepper-react) or the [source code](https://github.com/ZizzX/wizzard-stepper-react-demo) for a complete implementation featuring:
|
|
394
|
-
|
|
395
|
-
- **Premium Documentation**: [Interactive Guides](https://ZizzX.github.io/wizzard-stepper-react/docs/introduction) and a dedicated [Type Reference](https://ZizzX.github.io/wizzard-stepper-react/docs/types).
|
|
396
|
-
- **Tailwind CSS v4** UI overhaul.
|
|
397
|
-
- **React Hook Form + Zod** integration.
|
|
398
|
-
- **Formik + Yup** integration.
|
|
399
|
-
- **Conditional Routing** logic.
|
|
400
|
-
- **Advanced Features Demo**: (`/advanced`) showcasing:
|
|
401
|
-
- **Autofill**: `updateData` global merge.
|
|
402
|
-
- **Declarative Rendering**: `<WizardStepRenderer />`.
|
|
403
|
-
- **Granular Persistence**: Hybrid Memory/LocalStorage.
|
|
404
|
-
|
|
405
|
-
## Advanced Demo Guide ๐งช
|
|
406
|
-
|
|
407
|
-
Visit `/advanced` in the demo to try:
|
|
408
|
-
|
|
409
|
-
1. **Autofill**: Click "Magic Autofill" to test `updateData()`. It instantly populates the form (merged with existing data).
|
|
410
|
-
2. **Hybrid Persistence**:
|
|
411
|
-
* **Step 1 (Identity)**: Refreshes persist (LocalStorage).
|
|
412
|
-
* **Step 2 (Security)**: Refreshes CLEAR data (MemoryAdapter).
|
|
413
|
-
3. **Declarative UI**: The steps are rendered using `<WizardStepRenderer />` with Framer Motion animations, defined in the config!
|
|
414
|
-
|
|
415
|
-
### โก Performance & Scalability
|
|
416
|
-
|
|
417
|
-
`wizzard-stepper-react` is architected for extreme scale.
|
|
418
|
-
|
|
419
|
-
- **Stateless Provider**: The main provider doesn't re-render when field values change. Only the specific components subscribed to those fields (via `useWizardValue`) re-render.
|
|
420
|
-
- **O(1) Engine**: Internal lookups for step configuration, active steps, and indices use Hash Maps to ensure instant response times even with hundreds of steps.
|
|
421
|
-
- **Deeply Nested Optimization**: Data access uses a memoized iterative path traversal, avoiding recursive overhead in deeply nested objects.
|
|
422
|
-
- **Loading State**: Built-in `isLoading` state to handle high-latency persistence restoration gracefully.
|
|
423
|
-
|
|
424
|
-
```tsx
|
|
425
|
-
const { isLoading } = useWizardState();
|
|
426
|
-
if (isLoading) return <SkeletonLoader />;
|
|
427
|
-
```
|
|
154
|
+
---
|
|
428
155
|
|
|
429
156
|
## License
|
|
430
157
|
|
|
431
|
-
MIT
|
|
158
|
+
MIT ยฉ [ZizzX](https://github.com/ZizzX)
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var Y=Object.defineProperty;var Le=Object.getOwnPropertyDescriptor;var je=Object.getOwnPropertyNames;var qe=Object.prototype.hasOwnProperty;var Ne=(t,e,r)=>e in t?Y(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r;var Fe=(t,e)=>{for(var r in e)Y(t,r,{get:e[r],enumerable:!0})},_e=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of je(e))!qe.call(t,s)&&s!==r&&Y(t,s,{get:()=>e[s],enumerable:!(o=Le(e,s))||o.enumerable});return t};var Ke=t=>_e(Y({},"__esModule",{value:!0}),t);var x=(t,e,r)=>Ne(t,typeof e!="symbol"?e+"":e,r);var Ue={};Fe(Ue,{LocalStorageAdapter:()=>de,MemoryAdapter:()=>D,WizardProvider:()=>se,WizardStepRenderer:()=>Ae,WizardStore:()=>U,YupAdapter:()=>ue,ZodAdapter:()=>pe,createWizardFactory:()=>Ve,getByPath:()=>O,setByPath:()=>re,shallowEqual:()=>Ye,toPath:()=>te,useWizard:()=>ce,useWizardActions:()=>J,useWizardContext:()=>M,useWizardError:()=>oe,useWizardSelector:()=>$,useWizardState:()=>E,useWizardValue:()=>ae});module.exports=Ke(Ue);var n=require("react");var D=class{constructor(){x(this,"storage",{})}saveStep(e,r){this.storage[e]=r}getStep(e){return this.storage[e]}clear(){this.storage={}}};var ee=new Map;function te(t){if(!t)return[];if(ee.has(t))return ee.get(t);let e;return t.includes("[")?e=t.replace(/\[(\d+)\]/g,".$1").split(".").filter(Boolean):e=t.split(".").filter(Boolean),ee.set(t,e),e}function O(t,e,r){if(!e||t===void 0||t===null)return r??t;if(!e.includes(".")&&!e.includes("[")){let d=t[e];return d!==void 0?d:r}let o=te(e),s=t;for(let d=0;d<o.length;d++){if(s==null)return r;s=s[o[d]]}return s!==void 0?s:r}function re(t,e,r){if(!e)return r;if(!e.includes(".")&&!e.includes("[")){if(Array.isArray(t)){let f=[...t];return f[e]=r,f}return{...t,[e]:r}}let o=te(e);if(o.length===0)return r;let s=Array.isArray(t)?[...t]:{...t},d=s;for(let f=0;f<o.length-1;f++){let h=o[f],g=o[f+1],v=d[h],P;v&&typeof v=="object"?P=Array.isArray(v)?[...v]:{...v}:P=/^\d+$/.test(g)?[]:{},d[h]=P,d=P}let T=o[o.length-1];return d[T]=r,s}function Ye(t,e){if(Object.is(t,e))return!0;if(typeof t!="object"||t===null||typeof e!="object"||e===null)return!1;let r=Object.keys(t),o=Object.keys(e);if(r.length!==o.length)return!1;for(let s=0;s<r.length;s++){let d=r[s];if(!Object.prototype.hasOwnProperty.call(e,d)||!Object.is(t[d],e[d]))return!1}return!0}var ne=require("react/jsx-runtime"),Ee=(0,n.createContext)(void 0),Me=(0,n.createContext)(void 0),U=class{constructor(e){x(this,"state");x(this,"listeners",new Set);x(this,"errorsMap",new Map);x(this,"subscribe",e=>(this.listeners.add(e),()=>this.listeners.delete(e)));this.state={data:e,errors:{}}}getSnapshot(){return this.state}update(e){this.state={...this.state,data:e},this.notify()}syncErrors(){let e={};for(let[r,o]of this.errorsMap.entries())o.size>0&&(e[r]=Object.fromEntries(o));this.state={...this.state,errors:e},this.notify()}updateErrors(e){this.errorsMap.clear();for(let[r,o]of Object.entries(e)){let s=new Map;for(let[d,T]of Object.entries(o))s.set(d,T);s.size>0&&this.errorsMap.set(r,s)}this.state={...this.state,errors:e},this.notify()}setStepErrors(e,r){if(!r||Object.keys(r).length===0)return this.errorsMap.has(e)?(this.errorsMap.delete(e),this.syncErrors(),!0):!1;let o=new Map;for(let[s,d]of Object.entries(r))o.set(s,d);return this.errorsMap.set(e,o),this.syncErrors(),!0}deleteError(e,r){let o=this.errorsMap.get(e);return o&&o.has(r)?(o.delete(r),o.size===0&&this.errorsMap.delete(e),this.syncErrors(),!0):!1}notify(){this.listeners.forEach(e=>e())}};function se({config:t,initialData:e,initialStepId:r,children:o}){let[s,d]=(0,n.useState)(""),T=(0,n.useRef)(s);(0,n.useEffect)(()=>{T.current=s},[s]);let[f,h]=(0,n.useState)(new Set),[g,v]=(0,n.useState)(new Set),[P,B]=(0,n.useState)(new Set),[,Z]=(0,n.useState)({}),[le,G]=(0,n.useState)(!0),[Se,De]=(0,n.useTransition)(),S=(0,n.useRef)(new U(e||{})),H=(0,n.useMemo)(()=>t.persistence?.adapter||new D,[t.persistence?.adapter]),fe=t.persistence?.mode||"onStepChange",L=(0,n.useMemo)(()=>{let a=new Map;return t.steps.forEach(c=>a.set(c.id,c)),a},[t.steps]),j=(0,n.useRef)([]),z=(0,n.useSyncExternalStore)(S.current.subscribe,(0,n.useCallback)(()=>{let a=S.current.getSnapshot().data,c=t.steps.filter(p=>p.condition?p.condition(a):!0),i=j.current.map(p=>p.id).join("."),u=c.map(p=>p.id).join(".");return i===u&&j.current.length>0?j.current:(j.current=c,c)},[t.steps])),q=(0,n.useMemo)(()=>{let a=new Map;return z.forEach((c,i)=>a.set(c.id,i)),a},[z]);(0,n.useEffect)(()=>{if(!s&&z.length>0){if(r){let a=z.find(c=>c.id===r);d(a?a.id:z[0].id)}else d(z[0].id);G(!1)}},[z,s,r]);let I=(0,n.useRef)({config:t,stepsMap:L,activeSteps:z,activeStepsIndexMap:q,visitedSteps:f,completedSteps:g,persistenceMode:fe,persistenceAdapter:H,currentStepId:s});I.current={config:t,stepsMap:L,activeSteps:z,activeStepsIndexMap:q,visitedSteps:f,completedSteps:g,persistenceMode:fe,persistenceAdapter:H,currentStepId:s};let ge=(0,n.useMemo)(()=>L.get(s)||null,[L,s]),N=(0,n.useMemo)(()=>q.get(s)??-1,[q,s]),me=N===0,he=N===z.length-1,Q="__wizzard_meta__",Ie=(0,n.useCallback)(()=>{G(!0);let{persistenceAdapter:a,config:c}=I.current,i=a.getStep(Q);i&&(i.currentStepId&&d(i.currentStepId),i.visited&&h(new Set(i.visited)),i.completed&&v(new Set(i.completed)));let u={};if(c.steps.forEach(p=>{let l=a.getStep(p.id);l&&Object.assign(u,l)}),Object.keys(u).length>0){let l={...S.current.getSnapshot().data,...u};S.current.update(l)}G(!1)},[]);(0,n.useEffect)(()=>{Ie()},[Ie]);let W=(0,n.useCallback)((a,c,i)=>{let{stepsMap:u,persistenceAdapter:p,persistenceMode:l}=I.current,y=u.get(c),w=y?.persistenceAdapter,m=y?.persistenceMode;(a===(m||l)||a==="manual")&&(w||p).saveStep(c,i)},[]),X=(0,n.useRef)(null),b=(0,n.useCallback)(async(a,c)=>{let{stepsMap:i}=I.current,u=i.get(a);if(!u||!u.validationAdapter)return!0;let p=await u.validationAdapter.validate(c);return p.isValid?(S.current.setStepErrors(a,null)&&(Z(S.current.getSnapshot().errors),B(y=>{let w=new Set(y);return w.delete(a),w})),!0):(S.current.setStepErrors(a,p.errors||null),Z(S.current.getSnapshot().errors),B(l=>{let y=new Set(l);return y.add(a),y}),!1)},[]),ye=(0,n.useCallback)((a,c)=>{let{persistenceMode:i}=I.current,p={...S.current.getSnapshot().data,...c};S.current.update(p),(I.current.stepsMap.get(a)?.persistenceMode||i)==="onChange"&&W("onChange",a,p)},[W]),F=(0,n.useCallback)((a,c,i)=>{let{persistenceMode:u,stepsMap:p}=I.current,l=S.current.getSnapshot().data;if(O(l,a)===c)return;let w=re(l,a,c);S.current.update(w);let m=I.current.currentStepId,A=p.get(m);m&&S.current.deleteError(m,a)&&(S.current.errorsMap.has(m)||B(_=>{let K=new Set(_);return K.delete(m),K})),m&&S.current.getSnapshot().errors[m]&&De(()=>{Z(S.current.getSnapshot().errors)});let{config:V}=I.current;(A?.validationMode??V.validationMode??"onStepChange")==="onChange"&&(i?.debounceValidation?(X.current&&clearTimeout(X.current),X.current=setTimeout(()=>{try{m&&b(m,w).catch(C=>{console.error("[Wizard] Debounced validation failed:",C)})}catch(C){console.error("[Wizard] Error starting validation:",C)}},i.debounceValidation)):m&&b(m,w)),(A?.persistenceMode??u)==="onChange"&&m&&W("onChange",m,w)},[W,b]),Te=(0,n.useCallback)((a,c)=>{let{config:i}=I.current,u=S.current.getSnapshot().data,p=c?.replace?a:{...u,...a};S.current.update(p),c?.persist&&i.steps.forEach(l=>{W("manual",l.id,p)})},[W]),ve=(0,n.useCallback)((a,c)=>O(S.current.getSnapshot().data,a,c),[]),xe=(0,n.useCallback)((a,c)=>{let{currentStepId:i}=I.current;i&&F(a,c)},[F]),ze=(0,n.useCallback)(async()=>{let{activeSteps:a}=I.current,c=S.current.getSnapshot().data,u=(await Promise.all(a.map(l=>b(l.id,c)))).every(Boolean),p=S.current.getSnapshot().errors;return{isValid:u,errors:p}},[b]),R=(0,n.useCallback)(async a=>{let{activeStepsIndexMap:c,currentStepId:i,config:u,persistenceMode:p,visitedSteps:l,completedSteps:y,persistenceAdapter:w,stepsMap:m}=I.current,A=c.get(a)??-1;if(A===-1)return!1;let V=S.current.getSnapshot().data,Ce=c.get(i)??-1,k=m.get(i);if(A>Ce){let _=k?.autoValidate??u.autoValidate??!1,K=k?.validationMode??u.validationMode??"onStepChange";if((_||K==="onStepChange")&&i&&!await b(i,V))return!1}k&&i&&(k.persistenceMode??p)==="onStepChange"&&W("onStepChange",i,V);let C=new Set(l);return i&&C.add(i),h(C),d(a),p!=="manual"&&w.saveStep(Q,{currentStepId:a,visited:Array.from(C),completed:Array.from(y)}),u.onStepChange&&u.onStepChange(i||null,a,V),window.scrollTo(0,0),!0},[W,b]),We=(0,n.useCallback)(async()=>{let{activeSteps:a,activeStepsIndexMap:c,currentStepId:i,completedSteps:u,persistenceMode:p}=I.current,l=c.get(i)??-1;if(l===-1||l===a.length-1)return;let y=a[l+1];if(y&&await R(y.id)){let m=new Set(u).add(i);v(m),p!=="manual"&&H.saveStep(Q,{currentStepId:y.id,visited:Array.from(new Set(f).add(i)),completed:Array.from(m)})}},[R]),we=(0,n.useCallback)(()=>{let{activeSteps:a,activeStepsIndexMap:c,currentStepId:i}=I.current,u=c.get(i)??-1;if(u<=0)return;let p=a[u-1];p&&R(p.id)},[R]),Pe=(0,n.useCallback)(()=>{I.current.persistenceAdapter.clear()},[]),be=(0,n.useCallback)(a=>{let{config:c,currentStepId:i}=I.current,u=S.current.getSnapshot().data;if(a===!0){c.steps.forEach(l=>{W("manual",l.id,u)});return}if(!a){i&&W("manual",i,u);return}(Array.isArray(a)?a:[a]).forEach(l=>{W("manual",l,u)})},[W]),Oe=(0,n.useMemo)(()=>({currentStep:ge,currentStepIndex:N,isFirstStep:me,isLastStep:he,isLoading:le,isPending:Se,activeSteps:z,visitedSteps:f,completedSteps:g,errorSteps:P,store:S.current}),[ge,N,me,he,le,Se,z,f,g,P]),Be=(0,n.useMemo)(()=>({goToNextStep:We,goToPrevStep:we,goToStep:R,setStepData:ye,handleStepChange:xe,validateStep:a=>b(a,S.current.getSnapshot().data),validateAll:ze,save:be,clearStorage:Pe,setData:F,updateData:Te,getData:ve}),[We,we,R,ye,xe,b,ze,be,Pe,F,Te,ve]);return(0,ne.jsx)(Ee.Provider,{value:Oe,children:(0,ne.jsx)(Me.Provider,{value:Be,children:o})})}function E(){let t=(0,n.useContext)(Ee);if(!t)throw new Error("useWizardState must be used within a WizardProvider");return t}function ae(t,e){let{store:r}=E(),o=(0,n.useRef)(null),s=(0,n.useRef)(null),d=e?.isEqual||Object.is,T=(0,n.useCallback)(()=>{let h=r.getSnapshot().data;if(h===o.current)return s.current;let g=O(h,t);return s.current!==void 0&&d(s.current,g)?(o.current=h,s.current):(o.current=h,s.current=g,g)},[r,t,d]);return(0,n.useSyncExternalStore)(r.subscribe,T)}function oe(t){let{store:e}=E(),r=(0,n.useRef)(null),o=(0,n.useRef)(null),s=(0,n.useCallback)(()=>{let T=e.getSnapshot().errors;if(T===r.current)return o.current;let f;return Object.values(T).forEach(h=>{let g=h;g[t]&&(f=g[t])}),r.current=T,o.current=f,f},[e,t]);return(0,n.useSyncExternalStore)(e.subscribe,s)}function $(t,e){let{store:r}=E(),o=(0,n.useRef)(null),s=(0,n.useRef)(null),d=e?.isEqual||Object.is,T=(0,n.useCallback)(()=>{let f=r.getSnapshot();if(f===o.current)return s.current;let h=t(f.data);return s.current!==null&&d(s.current,h)?(o.current=f,s.current):(o.current=f,s.current=h,h)},[r,t,d]);return(0,n.useSyncExternalStore)(r.subscribe,T)}function J(){let t=(0,n.useContext)(Me);if(!t)throw new Error("useWizardActions must be used within a WizardProvider");return t}function M(){let t=E(),e=J(),r=$(s=>s),o=(0,n.useSyncExternalStore)(t.store.subscribe,()=>t.store.getSnapshot().errors);return(0,n.useMemo)(()=>({...t,...e,wizardData:r,allErrors:o}),[t,e,r,o])}var Re=require("react");var ie=require("react/jsx-runtime"),Ae=({wrapper:t})=>{let{currentStep:e}=M(),r=(0,Re.useMemo)(()=>e?.component?e.component:null,[e]);if(!e||!r)return null;let o=(0,ie.jsx)(r,{});return t?(0,ie.jsx)(t,{children:o},e.id):o};var ce=()=>M();var ke=require("react/jsx-runtime");function Ve(){return{WizardProvider:({config:g,initialData:v,children:P})=>(0,ke.jsx)(se,{config:g,initialData:v,children:P}),useWizard:()=>ce(),useWizardContext:()=>M(),useWizardValue:(g,v)=>ae(g,v),useWizardSelector:(g,v)=>$(g,v),useWizardError:g=>oe(g),useWizardActions:()=>J(),useWizardState:()=>E(),createStep:g=>g}}var de=class{constructor(e="wizard_"){x(this,"prefix");this.prefix=e}getKey(e){return`${this.prefix}${e}`}saveStep(e,r){if(!(typeof window>"u"))try{localStorage.setItem(this.getKey(e),JSON.stringify(r))}catch(o){console.warn("LocalStorageAdapter: Failed to save step",o)}}getStep(e){if(!(typeof window>"u"))try{let r=localStorage.getItem(this.getKey(e));return r?JSON.parse(r):void 0}catch(r){console.warn("LocalStorageAdapter: Failed to get step",r);return}}clear(){typeof window>"u"||Object.keys(localStorage).forEach(e=>{e.startsWith(this.prefix)&&localStorage.removeItem(e)})}};var pe=class{constructor(e){x(this,"schema");this.schema=e}async validate(e){let r=await this.schema.safeParseAsync(e);if(r.success)return{isValid:!0};let o={};return r.error&&r.error.issues.forEach(s=>{let d=s.path.join(".");o[d]=s.message}),{isValid:!1,errors:o}}};var ue=class{constructor(e){x(this,"schema");this.schema=e}async validate(e){try{return await this.schema.validate(e,{abortEarly:!1}),{isValid:!0}}catch(r){if(r&&typeof r=="object"&&"inner"in r){let o=r,s={};return o.inner.forEach(d=>{d.path&&(s[d.path]=d.message)}),{isValid:!1,errors:s}}throw r}}};0&&(module.exports={LocalStorageAdapter,MemoryAdapter,WizardProvider,WizardStepRenderer,WizardStore,YupAdapter,ZodAdapter,createWizardFactory,getByPath,setByPath,shallowEqual,toPath,useWizard,useWizardActions,useWizardContext,useWizardError,useWizardSelector,useWizardState,useWizardValue});
|
|
1
|
+
"use strict";var q=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var Oe=Object.getOwnPropertyNames;var Ve=Object.prototype.hasOwnProperty;var Be=(a,e,t)=>e in a?q(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var Le=(a,e)=>{for(var t in e)q(a,t,{get:e[t],enumerable:!0})},Ne=(a,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of Oe(e))!Ve.call(a,s)&&s!==t&&q(a,s,{get:()=>e[s],enumerable:!(i=De(e,s))||i.enumerable});return a};var Fe=a=>Ne(q({},"__esModule",{value:!0}),a);var I=(a,e,t)=>Be(a,typeof e!="symbol"?e+"":e,t);var Ye={};Le(Ye,{LocalStorageAdapter:()=>pe,MemoryAdapter:()=>N,WizardDevTools:()=>Re,WizardProvider:()=>ie,WizardStepRenderer:()=>ze,YupAdapter:()=>ue,ZodAdapter:()=>le,createWizardFactory:()=>We,devToolsMiddleware:()=>Pe,getByPath:()=>C,loggerMiddleware:()=>Ae,setByPath:()=>V,shallowEqual:()=>je,toPath:()=>ne,useWizard:()=>ce,useWizardActions:()=>X,useWizardContext:()=>P,useWizardError:()=>de,useWizardSelector:()=>F,useWizardState:()=>J,useWizardValue:()=>oe});module.exports=Fe(Ye);var d=require("react");var ae=new Map;function ne(a){if(!a)return[];if(ae.has(a))return ae.get(a);let e;return a.includes("[")?e=a.replace(/\[(\d+)\]/g,".$1").split(".").filter(Boolean):e=a.split(".").filter(Boolean),ae.set(a,e),e}function C(a,e,t){if(!e||a===void 0||a===null)return t??a;if(!e.includes(".")&&!e.includes("[")){let l=a[e];return l!==void 0?l:t}let i=ne(e),s=a;for(let l=0;l<i.length;l++){if(s==null)return t;s=s[i[l]]}return s!==void 0?s:t}function V(a,e,t){if(!e)return t;if(!e.includes(".")&&!e.includes("[")){if(Array.isArray(a)){let u=[...a];return u[e]=t,u}return{...a,[e]:t}}let i=ne(e);if(i.length===0)return t;let s=Array.isArray(a)?[...a]:{...a},l=s;for(let u=0;u<i.length-1;u++){let h=i[u],x=i[u+1],S=l[h],m;S&&typeof S=="object"?m=Array.isArray(S)?[...S]:{...S}:m=/^\d+$/.test(x)?[]:{},l[h]=m,l=m}let r=i[i.length-1];return l[r]=t,s}function je(a,e){if(Object.is(a,e))return!0;if(typeof a!="object"||a===null||typeof e!="object"||e===null)return!1;let t=Object.keys(a),i=Object.keys(e);if(t.length!==i.length)return!1;for(let s=0;s<t.length;s++){let l=t[s];if(!Object.prototype.hasOwnProperty.call(e,l)||!Object.is(a[l],e[l]))return!1}return!0}var K=class{constructor(e,t=[]){I(this,"initialData");I(this,"dirtyFields",new Set);I(this,"state");I(this,"listeners",new Set);I(this,"actionListeners",new Set);I(this,"errorsMap",new Map);I(this,"middlewareChain");I(this,"getSnapshot",()=>this.state);I(this,"subscribe",e=>(this.listeners.add(e),()=>this.listeners.delete(e)));this.initialData=JSON.parse(JSON.stringify(e)),this.state={data:e,errors:{},isDirty:!1,dirtyFields:this.dirtyFields,visitedSteps:new Set,completedSteps:new Set,errorSteps:new Set,currentStep:null,currentStepId:"",currentStepIndex:0,isFirstStep:!0,isLastStep:!1,isLoading:!0,isPending:!1,isBusy:!1,activeSteps:[],history:[],busySteps:new Set,progress:0,activeStepsCount:0,breadcrumbs:[],config:{}},this.middlewareChain=this.setupMiddlewares(t)}subscribeToActions(e){return this.actionListeners.add(e),()=>this.actionListeners.delete(e)}notifyActions(e){this.actionListeners.forEach(t=>t(e))}setupMiddlewares(e){let t={getState:()=>this.state.data,getSnapshot:()=>this.getSnapshot(),dispatch:s=>this.dispatch(s)};return e.map(s=>s(t)).reduceRight((s,l)=>l(s),this.internalDispatch.bind(this))}dispatch(e){this.middlewareChain(e)}internalDispatch(e){switch(this.notifyActions(e),e.type){case"INIT":this.initialData=JSON.parse(JSON.stringify(e.payload.data));let t=e.payload.config.steps.filter(i=>!i.condition);this.state={...this.state,data:e.payload.data,config:e.payload.config,activeSteps:t,activeStepsCount:t.length},this.notify();break;case"SET_CURRENT_STEP_ID":this.state={...this.state,currentStepId:e.payload.stepId},this.notify();break;case"SET_HISTORY":this.state={...this.state,history:e.payload.history},this.notify();break;case"SET_ACTIVE_STEPS":this.state={...this.state,activeSteps:e.payload.steps,activeStepsCount:e.payload.steps.length},this.notify();break;case"SET_DATA":this.updateDataByPath(e.payload.path,e.payload.value,e.payload.options);break;case"UPDATE_DATA":this.updateBulkData(e.payload.data,e.payload.options);break;case"GO_TO_STEP":break;case"VALIDATE_START":break;case"VALIDATE_END":break;case"SET_STEP_ERRORS":this.setStepErrors(e.payload.stepId,e.payload.errors);break;case"RESET":this.setInitialData(e.payload.data);break;case"SET_ERROR_STEPS":this.state={...this.state,errorSteps:e.payload.steps};break}this.syncDerivedState(),this.notify()}updateDataByPath(e,t,i){let s=V(this.state.data,e,t);s!==this.state.data&&this.update(s,e)}updateBulkData(e,t){let i;t?.replace?i=e:(i=JSON.parse(JSON.stringify(this.state.data)),Object.assign(i,e)),this.update(i,Object.keys(e))}update(e,t){t&&(Array.isArray(t)?t:[t]).forEach(s=>{let l=C(this.initialData,s),r=C(e,s);JSON.stringify(l)!==JSON.stringify(r)?this.dirtyFields.add(s):this.dirtyFields.delete(s)}),this.state={...this.state,data:e,isDirty:this.dirtyFields.size>0,dirtyFields:new Set(this.dirtyFields)},this.notify()}updateMeta(e){this.state={...this.state,...e},this.syncDerivedState(),this.notify()}syncDerivedState(){let{activeSteps:e,currentStepId:t,visitedSteps:i,completedSteps:s,errorSteps:l}=this.state,r=Math.max(0,e.findIndex(x=>x.id===t)),u=e[r]||null,h=e.map(x=>{let S="upcoming";return x.id===t?S="current":l.has(x.id)?S="error":s.has(x.id)?S="completed":i.has(x.id)&&(S="visited"),{id:x.id,label:x.label,status:S}});this.state={...this.state,currentStep:u,currentStepIndex:r,isFirstStep:r===0,isLastStep:e.length>0&&r===e.length-1,progress:e.length>0?Math.round((r+1)/e.length*100):0,breadcrumbs:h}}setInitialData(e){this.initialData=JSON.parse(JSON.stringify(e)),this.dirtyFields.clear(),this.state={...this.state,data:e,isDirty:!1,dirtyFields:new Set},this.notify()}syncErrors(){let e={};for(let[t,i]of this.errorsMap.entries())i.size>0&&(e[t]=Object.fromEntries(i));this.state={...this.state,errors:e},this.notify()}updateErrors(e){this.errorsMap.clear();for(let[t,i]of Object.entries(e)){let s=new Map;for(let[l,r]of Object.entries(i))s.set(l,r);s.size>0&&this.errorsMap.set(t,s)}this.state={...this.state,errors:e},this.notify()}setStepErrors(e,t){if(!t||Object.keys(t).length===0)return this.errorsMap.has(e)?(this.errorsMap.delete(e),this.syncErrors(),!0):!1;let i=new Map;for(let[s,l]of Object.entries(t))i.set(s,l);return this.errorsMap.set(e,i),this.syncErrors(),!0}deleteError(e,t){let i=this.errorsMap.get(e);return i&&i.has(t)?(i.delete(t),i.size===0&&this.errorsMap.delete(e),this.syncErrors(),!0):!1}notify(){this.listeners.forEach(e=>e())}};var N=class{constructor(){I(this,"storage",{})}saveStep(e,t){this.storage[e]=t}getStep(e){return this.storage[e]}clear(){this.storage={}}};var $=require("react/jsx-runtime"),be=(0,d.createContext)(void 0),Ee=(0,d.createContext)(void 0),j=(0,d.createContext)(void 0);function ie({config:a,initialData:e,initialStepId:t,children:i}){let[s,l]=(0,d.useState)(a),r=(0,d.useRef)(new K(e||{},a.middlewares)),u=(0,d.useRef)(!1),h=(0,d.useMemo)(()=>s.persistence?.adapter||new N,[s.persistence?.adapter]),x=s.persistence?.mode||"onStepChange",S="__wizzard_meta__",m=(0,d.useSyncExternalStore)(n=>r.current.subscribe(n),()=>r.current.getSnapshot()),{activeSteps:b,currentStepId:H,history:Se,visitedSteps:fe,completedSteps:ye,data:ge,errors:{}}=m,M=(0,d.useMemo)(()=>{let n=new Map;return s.steps.forEach(p=>n.set(p.id,p)),n},[s.steps]);(0,d.useEffect)(()=>{l(a)},[a]);let he=(0,d.useMemo)(()=>{let n=new Map;return b.forEach((p,o)=>n.set(p.id,o)),n},[b]),W=(0,d.useRef)({config:s,stepsMap:M,activeSteps:b,activeStepsIndexMap:he,visitedSteps:fe,completedSteps:ye,persistenceMode:x,persistenceAdapter:h,currentStepId:H,history:Se});(0,d.useEffect)(()=>{W.current={config:s,stepsMap:M,activeSteps:b,activeStepsIndexMap:he,visitedSteps:fe,completedSteps:ye,persistenceMode:x,persistenceAdapter:h,currentStepId:H,history:Se}});let D=(0,d.useCallback)((n,p)=>{s.analytics?.onEvent(n,p)},[s.analytics]),z=(0,d.useCallback)((n,p,o)=>{let{stepsMap:y,persistenceAdapter:f,persistenceMode:g}=W.current,E=y.get(p),v=E?.persistenceAdapter||f,T=E?.persistenceMode||g;(n===T||n==="manual")&&v.saveStep(p,o)},[]),_=(0,d.useCallback)(async n=>{r.current.updateMeta({isBusy:!0});try{return(await Promise.all(s.steps.map(async o=>{if(!o.condition)return{step:o,ok:!0};let y=new Set(r.current.getSnapshot().busySteps);y.add(o.id),r.current.updateMeta({busySteps:y,isBusy:!0});try{let f=o.condition(n||{},r.current.getSnapshot()),g=f instanceof Promise?await f:f;return{step:o,ok:g}}catch(f){return console.error(`[Wizard] Condition failed for ${o.id}:`,f),{step:o,ok:!1}}finally{let f=r.current.getSnapshot(),g=new Set(f.busySteps);g.delete(o.id),r.current.updateMeta({busySteps:g,isBusy:g.size>0})}}))).filter(o=>o.ok).map(o=>o.step)}finally{r.current.getSnapshot().busySteps.size===0&&r.current.updateMeta({isBusy:!1})}},[s.steps]),w=(0,d.useCallback)(async(n,p)=>{let o=M.get(n);if(!o||!o.validationAdapter)return!0;r.current.dispatch({type:"VALIDATE_START",payload:{stepId:n}});let y=new Set(r.current.getSnapshot().busySteps);y.add(n),r.current.updateMeta({busySteps:y,isBusy:!0});try{let f=await o.validationAdapter.validate(p);if(f.isValid){r.current.setStepErrors(n,null);let g=new Set(r.current.getSnapshot().errorSteps);return g.delete(n),r.current.dispatch({type:"SET_ERROR_STEPS",payload:{steps:g}}),!0}else{r.current.setStepErrors(n,f.errors||null),D("validation_error",{stepId:n,errors:f.errors,timestamp:Date.now()});let g=new Set(r.current.getSnapshot().errorSteps);return g.add(n),r.current.dispatch({type:"SET_ERROR_STEPS",payload:{steps:g}}),!1}}finally{let f=new Set(r.current.getSnapshot().busySteps);f.delete(n),r.current.updateMeta({busySteps:f,isBusy:f.size>0}),r.current.dispatch({type:"VALIDATE_END",payload:{stepId:n,result:{isValid:!0}}})}},[M,D]),O=(0,d.useCallback)(async(n,p)=>{let{currentStepId:o,config:y,persistenceMode:f,persistenceAdapter:g,stepsMap:E}=W.current,v=r.current.getSnapshot().data,T=y.steps,R=T.findIndex(A=>A.id===o),L=T.findIndex(A=>A.id===n);if(L>R&&o){let A=E.get(o);if((A?.autoValidate??y.autoValidate??!!A?.validationAdapter)&&!await w(o,v))return!1}r.current.updateMeta({isBusy:!0});try{if(!(p||await _(v)).find(se=>se.id===n))return!1;let U=E.get(o);if(U?.beforeLeave){let se=r.current.getSnapshot(),Me=L>R?"next":"prev";if(await U.beforeLeave(v,Me,se)===!1)return!1}o&&(U?.persistenceMode||f)==="onStepChange"&&z("onStepChange",o,v);let te=r.current.getSnapshot(),re=new Set(te.visitedSteps);o&&re.add(o),r.current.dispatch({type:"SET_VISITED_STEPS",payload:{steps:re}}),r.current.dispatch({type:"SET_CURRENT_STEP_ID",payload:{stepId:n}});let ve=[...te.history,n];return r.current.dispatch({type:"SET_HISTORY",payload:{history:ve}}),f!=="manual"&&g.saveStep(S,{currentStepId:n,visited:Array.from(re),completed:Array.from(te.completedSteps),history:ve}),y.onStepChange&&y.onStepChange(o||null,n,v),D("step_change",{from:o||null,to:n,timestamp:Date.now()}),window.scrollTo(0,0),!0}finally{r.current.updateMeta({isBusy:!1})}},[_,w,z,D]),Te=(0,d.useCallback)(async()=>{let{currentStepId:n}=W.current;if(!n)return;let p=r.current.getSnapshot().data,o=M.get(n);if((o?.autoValidate??s.autoValidate??!!o?.validationAdapter)&&!await w(n,p))return;let f=await _(p),g=f.findIndex(E=>E.id===n);if(g!==-1&&g<f.length-1){let E=f[g+1].id;if(await O(E,f)){let T=new Set(r.current.getSnapshot().completedSteps);T.add(n),r.current.dispatch({type:"SET_COMPLETED_STEPS",payload:{steps:T}})}}},[O,_,w,M]),me=(0,d.useCallback)(()=>{let{currentStepId:n,activeSteps:p,activeStepsIndexMap:o}=W.current,y=o.get(n)??-1;y>0&&O(p[y-1].id)},[O]),ee=(0,d.useCallback)((n,p,o)=>{let{persistenceMode:y,stepsMap:f,currentStepId:g}=W.current,E=r.current.getSnapshot().data;if(C(E,n)===p)return;let v=V(E,n,p);if(s.steps.forEach(T=>{if(T.dependsOn?.some(R=>n===R||n.startsWith(R+"."))){let R=new Set(r.current.getSnapshot().completedSteps);R.delete(T.id)&&r.current.dispatch({type:"SET_COMPLETED_STEPS",payload:{steps:R}});let L=new Set(r.current.getSnapshot().visitedSteps);L.delete(T.id)&&r.current.dispatch({type:"SET_VISITED_STEPS",payload:{steps:L}}),T.clearData&&(typeof T.clearData=="function"?v={...v,...T.clearData(v)}:(Array.isArray(T.clearData)?T.clearData:[T.clearData]).forEach(A=>{v=V(v,A,void 0)}))}}),r.current.dispatch({type:"SET_DATA",payload:{path:n,value:p,options:o}}),g){r.current.deleteError(g,n);let T=f.get(g);(T?.validationMode||s.validationMode||"onStepChange")==="onChange"&&w(g,v),(T?.persistenceMode||y)==="onChange"&&z("onChange",g,v)}},[s,w,z]),Ie=(0,d.useCallback)((n,p)=>{let o=r.current.getSnapshot().data,y=p?.replace?n:{...o,...n};r.current.update(y,Object.keys(n)),p?.persist&&s.steps.forEach(f=>z("manual",f.id,y))},[s.steps,z]),xe=(0,d.useCallback)(()=>{if(r.current.setInitialData(e||{}),r.current.update(e||{}),r.current.updateErrors({}),r.current.dispatch({type:"SET_VISITED_STEPS",payload:{steps:new Set}}),r.current.dispatch({type:"SET_COMPLETED_STEPS",payload:{steps:new Set}}),r.current.dispatch({type:"SET_ERROR_STEPS",payload:{steps:new Set}}),b.length>0){let n=b[0].id;r.current.dispatch({type:"SET_CURRENT_STEP_ID",payload:{stepId:n}}),r.current.dispatch({type:"SET_HISTORY",payload:{history:[n]}})}else r.current.dispatch({type:"SET_CURRENT_STEP_ID",payload:{stepId:""}}),r.current.dispatch({type:"SET_HISTORY",payload:{history:[]}});h.clear(),D("wizard_reset",{data:e})},[e,b,h,D]),Ce=(0,d.useMemo)(()=>({...m,config:s}),[m,s]),_e=(0,d.useMemo)(()=>({goToNextStep:Te,goToPrevStep:me,goToStep:O,setStepData:(n,p)=>{let o={...r.current.getSnapshot().data,...p};r.current.update(o,Object.keys(p))},handleStepChange:(n,p)=>{W.current.currentStepId&&ee(n,p)},validateStep:n=>w(n,r.current.getSnapshot().data),validateAll:async()=>{r.current.updateMeta({isBusy:!0});let n=r.current.getSnapshot().data,p=await _(n),o=await Promise.all(p.map(y=>w(y.id,n)));return r.current.updateMeta({isBusy:!1}),{isValid:o.every(Boolean),errors:r.current.getSnapshot().errors}},save:n=>{let p=r.current.getSnapshot().data;n===!0?s.steps.forEach(o=>z("manual",o.id,p)):n?(Array.isArray(n)?n:[n]).forEach(o=>z("manual",o,p)):W.current.currentStepId&&z("manual",W.current.currentStepId,p)},clearStorage:()=>h.clear(),reset:xe,setData:ee,updateData:Ie,getData:(n,p)=>C(r.current.getSnapshot().data,n,p),updateConfig:n=>l(p=>({...p,...n}))}),[Te,me,O,w,xe,ee,Ie,h,s.steps,z]);return(0,d.useEffect)(()=>{u.current?r.current.updateMeta({config:s}):(r.current.dispatch({type:"INIT",payload:{data:e||{},config:s}}),u.current=!0)},[e,s]),(0,d.useEffect)(()=>{let n=!0;return(async()=>{let o=await _(ge);n&&r.current.dispatch({type:"SET_ACTIVE_STEPS",payload:{steps:o}})})(),()=>{n=!1}},[ge,_]),(0,d.useEffect)(()=>{let n=h.getStep(S);n&&(n.currentStepId&&r.current.dispatch({type:"SET_CURRENT_STEP_ID",payload:{stepId:n.currentStepId}}),n.visited&&r.current.dispatch({type:"SET_VISITED_STEPS",payload:{steps:new Set(n.visited)}}),n.completed&&r.current.dispatch({type:"SET_COMPLETED_STEPS",payload:{steps:new Set(n.completed)}}),n.history&&r.current.dispatch({type:"SET_HISTORY",payload:{history:n.history}}));let p=r.current.getSnapshot(),o=p.activeSteps;if(!H&&o.length>0){let y=t&&o.some(f=>f.id===t)?t:o[0].id;r.current.dispatch({type:"SET_CURRENT_STEP_ID",payload:{stepId:y}}),p.history.length===0&&r.current.dispatch({type:"SET_HISTORY",payload:{history:[y]}}),r.current.updateMeta({isLoading:!1})}},[b,t,H,h]),(0,$.jsx)(j.Provider,{value:r.current,children:(0,$.jsx)(be.Provider,{value:Ce,children:(0,$.jsx)(Ee.Provider,{value:_e,children:i})})})}function J(){let a=(0,d.useContext)(be);if(!a)throw new Error("useWizardState must be used within a WizardProvider");return a}function oe(a,e){let t=(0,d.useContext)(j);if(!t)throw new Error("useWizardValue must be used within a WizardProvider");let i=(0,d.useRef)(null),s=(0,d.useRef)(null),l=(0,d.useCallback)(()=>{let r=t.getSnapshot().data;if(r===i.current)return s.current;let u=C(r,a);return s.current!==void 0&&(e?.isEqual||Object.is)(s.current,u)?(i.current=r,s.current):(i.current=r,s.current=u,u)},[t,a,e?.isEqual]);return(0,d.useSyncExternalStore)(t.subscribe,l)}function de(a){let e=(0,d.useContext)(j);if(!e)throw new Error("useWizardError must be used within a WizardProvider");let t=(0,d.useCallback)(()=>{let i=e.getSnapshot().errors;for(let[s,l]of Object.entries(i)){let r=l;if(r[a])return r[a];if(a.startsWith(s+".")&&r[s])return r[s];let u=a.split(".").pop();if(u&&r[u])return r[u]}},[e,a]);return(0,d.useSyncExternalStore)(e.subscribe,t)}function F(a,e){let t=(0,d.useContext)(j);if(!t)throw new Error("useWizardSelector must be used within a WizardProvider");let i=(0,d.useRef)(null),s=(0,d.useRef)(null),l=(0,d.useCallback)(()=>{let r=t.getSnapshot();if(r===i.current)return s.current;let u=a(r);return s.current!==null&&(e?.isEqual||Object.is)(s.current,u)?(i.current=r,s.current):(i.current=r,s.current=u,u)},[t,a,e?.isEqual]);return(0,d.useSyncExternalStore)(t.subscribe,l)}function X(){let a=(0,d.useContext)(Ee);if(!a)throw new Error("useWizardActions must be used within a WizardProvider");return a}function P(){let a=J(),e=X(),t=(0,d.useContext)(j),i=F(h=>h.data),s=F(h=>h.errors),{data:l,errors:r,...u}=a;return(0,d.useMemo)(()=>({...u,...e,wizardData:i,allErrors:s,data:i,errors:s,store:t}),[u,e,i,s,t])}var G=require("react");var Z=require("react/jsx-runtime"),ze=({wrapper:a,fallback:e=null})=>{let{currentStep:t}=P(),i=(0,G.useMemo)(()=>t?.component?t.component:null,[t]);if(!t||!i)return null;let s=(0,Z.jsx)(G.Suspense,{fallback:e,children:(0,Z.jsx)(i,{})});return a?(0,Z.jsx)(a,{children:s},t.id):s};var ce=()=>P();var we=require("react/jsx-runtime");function We(){return{WizardProvider:({config:S,initialData:m,children:b})=>(0,we.jsx)(ie,{config:S,initialData:m,children:b}),useWizard:()=>ce(),useWizardContext:()=>P(),useWizardValue:(S,m)=>oe(S,m),useWizardSelector:(S,m)=>F(S,m),useWizardError:S=>de(S),useWizardActions:()=>X(),useWizardState:()=>J(),useBreadcrumbs:()=>J().breadcrumbs,createStep:S=>S}}var pe=class{constructor(e="wizard_"){I(this,"prefix");this.prefix=e}getKey(e){return`${this.prefix}${e}`}saveStep(e,t){if(!(typeof window>"u"))try{localStorage.setItem(this.getKey(e),JSON.stringify(t))}catch(i){console.warn("LocalStorageAdapter: Failed to save step",i)}}getStep(e){if(!(typeof window>"u"))try{let t=localStorage.getItem(this.getKey(e));return t?JSON.parse(t):void 0}catch(t){console.warn("LocalStorageAdapter: Failed to get step",t);return}}clear(){typeof window>"u"||Object.keys(localStorage).forEach(e=>{e.startsWith(this.prefix)&&localStorage.removeItem(e)})}};var le=class{constructor(e){I(this,"schema");this.schema=e}async validate(e){let t=await this.schema.safeParseAsync(e);if(t.success)return{isValid:!0};let i={};return t.error&&t.error.issues.forEach(s=>{let l=s.path.join(".");i[l]=s.message}),{isValid:!1,errors:i}}};var ue=class{constructor(e){I(this,"schema");this.schema=e}async validate(e){try{return await this.schema.validate(e,{abortEarly:!1}),{isValid:!0}}catch(t){if(t&&typeof t=="object"&&"inner"in t){let i=t,s={};return i.inner.forEach(l=>{l.path&&(s[l.path]=l.message)}),{isValid:!1,errors:s}}throw t}}};var Ae=a=>e=>t=>{console.group(`Wizard Action: ${t.type}`),console.log("Action payload:",t.payload),console.log("State before:",a.getSnapshot());let i=e(t);return console.log("State after:",a.getSnapshot()),console.groupEnd(),i};var Pe=a=>{if(typeof window>"u"||!window.__REDUX_DEVTOOLS_EXTENSION__)return t=>i=>t(i);let e=window.__REDUX_DEVTOOLS_EXTENSION__.connect({name:"Wizard Stepper React"});return e.init(a.getSnapshot()),t=>i=>{let s=t(i);return e.send(i,a.getSnapshot()),s}};var k=require("react");var c=require("react/jsx-runtime");function Re(){let[a,e]=(0,k.useState)(!1),[t,i]=(0,k.useState)("state"),{wizardData:s,allErrors:l,store:r,...u}=P(),[h,x]=(0,k.useState)([]);return(0,k.useEffect)(()=>r?r.subscribeToActions(m=>{x(b=>[{timestamp:Date.now(),action:m,state:r.getSnapshot()},...b].slice(0,50))}):void 0,[r]),a?(0,c.jsxs)("div",{style:{position:"fixed",bottom:"20px",right:"20px",width:"400px",height:"500px",backgroundColor:"rgba(15, 23, 42, 0.9)",backdropFilter:"blur(12px)",borderRadius:"16px",border:"1px solid rgba(255, 255, 255, 0.1)",boxShadow:"0 10px 40px rgba(0,0,0,0.5)",zIndex:9999,display:"flex",flexDirection:"column",color:"#e2e8f0",fontFamily:"Inter, sans-serif",overflow:"hidden"},children:[(0,c.jsxs)("div",{style:{padding:"12px 16px",borderBottom:"1px solid rgba(255, 255, 255, 0.1)",display:"flex",justifyContent:"space-between",alignItems:"center",background:"rgba(255, 255, 255, 0.03)"},children:[(0,c.jsx)("span",{style:{fontWeight:600,fontSize:"14px"},children:"Wizard DevTools"}),(0,c.jsx)("button",{onClick:()=>e(!1),style:{background:"none",border:"none",color:"#94a3b8",cursor:"pointer",fontSize:"18px"},children:"\xD7"})]}),(0,c.jsx)("div",{style:{display:"flex",borderBottom:"1px solid rgba(255, 255, 255, 0.1)",background:"rgba(255, 255, 255, 0.02)"},children:["state","actions","errors"].map(S=>(0,c.jsx)("button",{onClick:()=>i(S),style:{flex:1,padding:"10px",background:t===S?"rgba(37, 99, 235, 0.2)":"none",border:"none",color:t===S?"#60a5fa":"#94a3b8",borderBottom:t===S?"2px solid #3b82f6":"none",cursor:"pointer",fontSize:"12px",textTransform:"capitalize",fontWeight:t===S?600:400},children:S},S))}),(0,c.jsxs)("div",{style:{flex:1,overflowY:"auto",padding:"16px",fontSize:"12px"},children:[t==="state"&&(0,c.jsxs)("div",{children:[(0,c.jsxs)(Q,{title:"Navigation",children:[(0,c.jsx)(B,{label:"Current Step",value:u.currentStepId}),(0,c.jsx)(B,{label:"Index",value:u.currentStepIndex}),(0,c.jsx)(B,{label:"Progress",value:`${u.progress}%`}),(0,c.jsx)(B,{label:"Total Steps",value:u.activeStepsCount}),(0,c.jsx)(B,{label:"Is Loading",value:String(u.isLoading)}),(0,c.jsx)(B,{label:"Is Busy",value:String(u.isBusy)})]}),(0,c.jsx)(Q,{title:"History",children:(0,c.jsx)("div",{style:{color:"#94a3b8"},children:u.history.join(" \u2192 ")||"Empty"})}),(0,c.jsx)(Q,{title:"Data",children:(0,c.jsx)(Y,{data:s})}),(0,c.jsx)(Q,{title:"Meta",children:(0,c.jsx)(Y,{data:{visited:Array.from(u.visitedSteps),completed:Array.from(u.completedSteps),busy:Array.from(u.busySteps)}})})]}),t==="errors"&&(0,c.jsx)("div",{children:Object.keys(l).length===0?(0,c.jsx)("div",{style:{color:"#94a3b8",textAlign:"center",marginTop:"20px"},children:"No active errors"}):(0,c.jsx)(Y,{data:l})}),t==="actions"&&(0,c.jsx)("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:h.length===0?(0,c.jsx)("div",{style:{color:"#94a3b8",textAlign:"center",marginTop:"20px"},children:"No actions recorded yet"}):h.map((S,m)=>(0,c.jsx)(Je,{log:S},S.timestamp+m))})]}),(0,c.jsxs)("div",{style:{padding:"8px 16px",fontSize:"10px",color:"#64748b",borderTop:"1px solid rgba(255, 255, 255, 0.1)",background:"rgba(255, 255, 255, 0.02)",display:"flex",justifyContent:"space-between"},children:[(0,c.jsxs)("span",{children:["v",globalThis.process?.env?.VERSION||"2.0.0"]}),(0,c.jsx)("span",{children:"Strict Mode: Active"})]})]}):(0,c.jsx)("button",{onClick:()=>e(!0),style:{position:"fixed",bottom:"20px",right:"20px",zIndex:9999,padding:"10px 15px",borderRadius:"50px",background:"rgba(37, 99, 235, 0.9)",color:"white",border:"none",boxShadow:"0 4px 15px rgba(0,0,0,0.2)",cursor:"pointer",fontWeight:"bold",fontSize:"12px",backdropFilter:"blur(5px)"},children:"Wizard DevTools"})}var Je=({log:a})=>{let[e,t]=(0,k.useState)(!1),i=new Date(a.timestamp).toLocaleTimeString();return(0,c.jsxs)("div",{style:{background:"rgba(255, 255, 255, 0.05)",borderRadius:"8px",overflow:"hidden",border:"1px solid rgba(255, 255, 255, 0.05)"},children:[(0,c.jsxs)("div",{onClick:()=>t(!e),style:{padding:"8px 12px",display:"flex",justifyContent:"space-between",cursor:"pointer",alignItems:"center"},children:[(0,c.jsxs)("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[(0,c.jsx)("span",{style:{color:"#64748b",fontSize:"10px"},children:i}),(0,c.jsx)("span",{style:{color:"#60a5fa",fontWeight:600},children:a.action.type})]}),(0,c.jsx)("span",{style:{color:"#475569",transform:e?"rotate(180deg)":"none",transition:"transform 0.2s"},children:"\u25BE"})]}),e&&(0,c.jsxs)("div",{style:{padding:"0 12px 12px 12px",borderTop:"1px solid rgba(255, 255, 255, 0.05)"},children:[(0,c.jsxs)("div",{style:{marginTop:"8px"},children:[(0,c.jsx)("div",{style:{color:"#94a3b8",marginBottom:"4px",fontSize:"10px"},children:"Payload:"}),(0,c.jsx)(Y,{data:a.action.payload})]}),(0,c.jsxs)("div",{style:{marginTop:"8px"},children:[(0,c.jsx)("div",{style:{color:"#94a3b8",marginBottom:"4px",fontSize:"10px"},children:"State after:"}),(0,c.jsx)(Y,{data:a.state})]})]})]})},Q=({title:a,children:e})=>(0,c.jsxs)("div",{style:{marginBottom:"20px"},children:[(0,c.jsx)("h4",{style:{margin:"0 0 8px 0",color:"#3b82f6",fontSize:"11px",textTransform:"uppercase",letterSpacing:"0.05em"},children:a}),e]}),B=({label:a,value:e})=>(0,c.jsxs)("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:"4px"},children:[(0,c.jsxs)("span",{style:{color:"#94a3b8"},children:[a,":"]}),(0,c.jsx)("span",{style:{color:"#f8fafc",fontWeight:500},children:e})]}),Y=({data:a})=>(0,c.jsx)("pre",{style:{background:"rgba(0, 0, 0, 0.3)",padding:"10px",borderRadius:"8px",overflowX:"auto",color:"#60a5fa",border:"1px solid rgba(255, 255, 255, 0.05)",margin:0},children:JSON.stringify(a,(t,i)=>i instanceof Set?Array.from(i):i,2)});0&&(module.exports={LocalStorageAdapter,MemoryAdapter,WizardDevTools,WizardProvider,WizardStepRenderer,YupAdapter,ZodAdapter,createWizardFactory,devToolsMiddleware,getByPath,loggerMiddleware,setByPath,shallowEqual,toPath,useWizard,useWizardActions,useWizardContext,useWizardError,useWizardSelector,useWizardState,useWizardValue});
|