@dashforge/tw 1.1.1 → 1.2.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/CHANGELOG.md +113 -0
- package/README.md +45 -0
- package/dist/index.esm.js +3985 -476
- package/dist/src/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/src/components/Accordion/accordion.types.d.ts +7 -0
- package/dist/src/components/Accordion/accordion.types.d.ts.map +1 -1
- package/dist/src/components/Alert/Alert.d.ts +1 -1
- package/dist/src/components/Alert/Alert.d.ts.map +1 -1
- package/dist/src/components/Alert/alert.types.d.ts +17 -0
- package/dist/src/components/Alert/alert.types.d.ts.map +1 -1
- package/dist/src/components/AppShell/AppShell.d.ts.map +1 -1
- package/dist/src/components/AppShell/appShell.types.d.ts +7 -0
- package/dist/src/components/AppShell/appShell.types.d.ts.map +1 -1
- package/dist/src/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/src/components/Autocomplete/autocomplete.types.d.ts +47 -1
- package/dist/src/components/Autocomplete/autocomplete.types.d.ts.map +1 -1
- package/dist/src/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/src/components/Avatar/avatar.types.d.ts +17 -1
- package/dist/src/components/Avatar/avatar.types.d.ts.map +1 -1
- package/dist/src/components/Badge/Badge.d.ts.map +1 -1
- package/dist/src/components/Badge/badge.types.d.ts +27 -2
- package/dist/src/components/Badge/badge.types.d.ts.map +1 -1
- package/dist/src/components/Box/Box.d.ts.map +1 -1
- package/dist/src/components/Box/box.types.d.ts +64 -1
- package/dist/src/components/Box/box.types.d.ts.map +1 -1
- package/dist/src/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/dist/src/components/Breadcrumbs/breadcrumbs.types.d.ts +26 -1
- package/dist/src/components/Breadcrumbs/breadcrumbs.types.d.ts.map +1 -1
- package/dist/src/components/Button/Button.d.ts.map +1 -1
- package/dist/src/components/Button/button.types.d.ts +53 -1
- package/dist/src/components/Button/button.types.d.ts.map +1 -1
- package/dist/src/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/src/components/Calendar/calendar.types.d.ts +16 -0
- package/dist/src/components/Calendar/calendar.types.d.ts.map +1 -1
- package/dist/src/components/Card/Card.d.ts.map +1 -1
- package/dist/src/components/Card/card.types.d.ts +17 -0
- package/dist/src/components/Card/card.types.d.ts.map +1 -1
- package/dist/src/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/src/components/Checkbox/checkbox.types.d.ts +19 -1
- package/dist/src/components/Checkbox/checkbox.types.d.ts.map +1 -1
- package/dist/src/components/Chip/Chip.d.ts.map +1 -1
- package/dist/src/components/Chip/chip.types.d.ts +40 -1
- package/dist/src/components/Chip/chip.types.d.ts.map +1 -1
- package/dist/src/components/ConfirmDialog/ConfirmDialog.d.ts.map +1 -1
- package/dist/src/components/ConfirmDialog/confirmDialog.types.d.ts +30 -2
- package/dist/src/components/ConfirmDialog/confirmDialog.types.d.ts.map +1 -1
- package/dist/src/components/Container/Container.d.ts.map +1 -1
- package/dist/src/components/Container/container.types.d.ts +29 -1
- package/dist/src/components/Container/container.types.d.ts.map +1 -1
- package/dist/src/components/DataGrid/DataGrid.d.ts +1 -1
- package/dist/src/components/DataGrid/DataGrid.d.ts.map +1 -1
- package/dist/src/components/DataGrid/dataGrid.types.d.ts +124 -10
- package/dist/src/components/DataGrid/dataGrid.types.d.ts.map +1 -1
- package/dist/src/components/DatePicker/DatePicker.d.ts +1 -1
- package/dist/src/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/src/components/DatePicker/datePicker.types.d.ts +18 -0
- package/dist/src/components/DatePicker/datePicker.types.d.ts.map +1 -1
- package/dist/src/components/DateRangePicker/DateRangePicker.d.ts +1 -1
- package/dist/src/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
- package/dist/src/components/DateRangePicker/dateRangePicker.types.d.ts +18 -0
- package/dist/src/components/DateRangePicker/dateRangePicker.types.d.ts.map +1 -1
- package/dist/src/components/DateTimePicker/DateTimePicker.d.ts +1 -1
- package/dist/src/components/DateTimePicker/DateTimePicker.d.ts.map +1 -1
- package/dist/src/components/DateTimePicker/dateTimePicker.types.d.ts +20 -0
- package/dist/src/components/DateTimePicker/dateTimePicker.types.d.ts.map +1 -1
- package/dist/src/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/src/components/Dialog/dialog.types.d.ts +25 -1
- package/dist/src/components/Dialog/dialog.types.d.ts.map +1 -1
- package/dist/src/components/Divider/Divider.d.ts.map +1 -1
- package/dist/src/components/Divider/divider.types.d.ts +37 -1
- package/dist/src/components/Divider/divider.types.d.ts.map +1 -1
- package/dist/src/components/Drawer/Drawer.d.ts +21 -0
- package/dist/src/components/Drawer/Drawer.d.ts.map +1 -0
- package/dist/src/components/Drawer/drawer.types.d.ts +311 -0
- package/dist/src/components/Drawer/drawer.types.d.ts.map +1 -0
- package/dist/src/components/Drawer/drawer.variants.d.ts +177 -0
- package/dist/src/components/Drawer/drawer.variants.d.ts.map +1 -0
- package/dist/src/components/Grid/Grid.d.ts.map +1 -1
- package/dist/src/components/Grid/grid.types.d.ts +16 -0
- package/dist/src/components/Grid/grid.types.d.ts.map +1 -1
- package/dist/src/components/IconButton/IconButton.d.ts.map +1 -1
- package/dist/src/components/IconButton/iconButton.types.d.ts +40 -1
- package/dist/src/components/IconButton/iconButton.types.d.ts.map +1 -1
- package/dist/src/components/LeftNav/LeftNav.d.ts.map +1 -1
- package/dist/src/components/LeftNav/leftNav.types.d.ts +26 -6
- package/dist/src/components/LeftNav/leftNav.types.d.ts.map +1 -1
- package/dist/src/components/Link/Link.d.ts +15 -0
- package/dist/src/components/Link/Link.d.ts.map +1 -0
- package/dist/src/components/Link/link.types.d.ts +169 -0
- package/dist/src/components/Link/link.types.d.ts.map +1 -0
- package/dist/src/components/Link/link.variants.d.ts +107 -0
- package/dist/src/components/Link/link.variants.d.ts.map +1 -0
- package/dist/src/components/Menu/Menu.d.ts +1 -1
- package/dist/src/components/Menu/Menu.d.ts.map +1 -1
- package/dist/src/components/Menu/menu.types.d.ts +20 -0
- package/dist/src/components/Menu/menu.types.d.ts.map +1 -1
- package/dist/src/components/NumberField/NumberField.d.ts.map +1 -1
- package/dist/src/components/NumberField/numberField.types.d.ts +47 -1
- package/dist/src/components/NumberField/numberField.types.d.ts.map +1 -1
- package/dist/src/components/OTPField/OTPField.d.ts.map +1 -1
- package/dist/src/components/OTPField/otpField.types.d.ts +35 -1
- package/dist/src/components/OTPField/otpField.types.d.ts.map +1 -1
- package/dist/src/components/Pagination/Pagination.d.ts.map +1 -1
- package/dist/src/components/Pagination/pagination.types.d.ts +26 -1
- package/dist/src/components/Pagination/pagination.types.d.ts.map +1 -1
- package/dist/src/components/Popover/Popover.d.ts.map +1 -1
- package/dist/src/components/Popover/popover.types.d.ts +29 -0
- package/dist/src/components/Popover/popover.types.d.ts.map +1 -1
- package/dist/src/components/Progress/Progress.d.ts +20 -0
- package/dist/src/components/Progress/Progress.d.ts.map +1 -0
- package/dist/src/components/Progress/progress.types.d.ts +200 -0
- package/dist/src/components/Progress/progress.types.d.ts.map +1 -0
- package/dist/src/components/Progress/progress.variants.d.ts +224 -0
- package/dist/src/components/Progress/progress.variants.d.ts.map +1 -0
- package/dist/src/components/RadioGroup/RadioGroup.d.ts.map +1 -1
- package/dist/src/components/RadioGroup/radioGroup.types.d.ts +25 -1
- package/dist/src/components/RadioGroup/radioGroup.types.d.ts.map +1 -1
- package/dist/src/components/Select/Select.d.ts +14 -0
- package/dist/src/components/Select/Select.d.ts.map +1 -0
- package/dist/src/components/Select/select.types.d.ts +272 -0
- package/dist/src/components/Select/select.types.d.ts.map +1 -0
- package/dist/src/components/Select/select.variants.d.ts +204 -0
- package/dist/src/components/Select/select.variants.d.ts.map +1 -0
- package/dist/src/components/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/src/components/Skeleton/skeleton.types.d.ts +25 -1
- package/dist/src/components/Skeleton/skeleton.types.d.ts.map +1 -1
- package/dist/src/components/Slider/Slider.d.ts +15 -0
- package/dist/src/components/Slider/Slider.d.ts.map +1 -0
- package/dist/src/components/Slider/slider.types.d.ts +268 -0
- package/dist/src/components/Slider/slider.types.d.ts.map +1 -0
- package/dist/src/components/Slider/slider.variants.d.ts +313 -0
- package/dist/src/components/Slider/slider.variants.d.ts.map +1 -0
- package/dist/src/components/Snackbar/Snackbar.d.ts.map +1 -1
- package/dist/src/components/Snackbar/snackbar.types.d.ts +29 -5
- package/dist/src/components/Snackbar/snackbar.types.d.ts.map +1 -1
- package/dist/src/components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/src/components/Spinner/spinner.types.d.ts +22 -2
- package/dist/src/components/Spinner/spinner.types.d.ts.map +1 -1
- package/dist/src/components/Stack/Stack.d.ts.map +1 -1
- package/dist/src/components/Stack/stack.types.d.ts +53 -2
- package/dist/src/components/Stack/stack.types.d.ts.map +1 -1
- package/dist/src/components/Stack/stack.variants.d.ts +23 -0
- package/dist/src/components/Stack/stack.variants.d.ts.map +1 -1
- package/dist/src/components/Stepper/Step.d.ts +30 -0
- package/dist/src/components/Stepper/Step.d.ts.map +1 -0
- package/dist/src/components/Stepper/Stepper.d.ts +15 -0
- package/dist/src/components/Stepper/Stepper.d.ts.map +1 -0
- package/dist/src/components/Stepper/StepperContext.d.ts +8 -0
- package/dist/src/components/Stepper/StepperContext.d.ts.map +1 -0
- package/dist/src/components/Stepper/stepper.types.d.ts +358 -0
- package/dist/src/components/Stepper/stepper.types.d.ts.map +1 -0
- package/dist/src/components/Stepper/stepper.variants.d.ts +253 -0
- package/dist/src/components/Stepper/stepper.variants.d.ts.map +1 -0
- package/dist/src/components/Stepper/useStep.d.ts +53 -0
- package/dist/src/components/Stepper/useStep.d.ts.map +1 -0
- package/dist/src/components/Switch/Switch.d.ts.map +1 -1
- package/dist/src/components/Switch/switch.types.d.ts +44 -1
- package/dist/src/components/Switch/switch.types.d.ts.map +1 -1
- package/dist/src/components/Table/Table.d.ts +1 -1
- package/dist/src/components/Table/Table.d.ts.map +1 -1
- package/dist/src/components/Table/table.types.d.ts +103 -8
- package/dist/src/components/Table/table.types.d.ts.map +1 -1
- package/dist/src/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/src/components/Tabs/tabs.types.d.ts +26 -1
- package/dist/src/components/Tabs/tabs.types.d.ts.map +1 -1
- package/dist/src/components/TextField/TextField.d.ts.map +1 -1
- package/dist/src/components/TextField/textField.types.d.ts +30 -1
- package/dist/src/components/TextField/textField.types.d.ts.map +1 -1
- package/dist/src/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/src/components/Textarea/textarea.types.d.ts +51 -1
- package/dist/src/components/Textarea/textarea.types.d.ts.map +1 -1
- package/dist/src/components/TimePicker/TimePicker.d.ts +1 -1
- package/dist/src/components/TimePicker/TimePicker.d.ts.map +1 -1
- package/dist/src/components/TimePicker/timePicker.types.d.ts +18 -0
- package/dist/src/components/TimePicker/timePicker.types.d.ts.map +1 -1
- package/dist/src/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/src/components/Tooltip/tooltip.types.d.ts +30 -0
- package/dist/src/components/Tooltip/tooltip.types.d.ts.map +1 -1
- package/dist/src/components/TopBar/TopBar.d.ts.map +1 -1
- package/dist/src/components/TopBar/topBar.types.d.ts +25 -1
- package/dist/src/components/TopBar/topBar.types.d.ts.map +1 -1
- package/dist/src/components/Typography/Typography.d.ts.map +1 -1
- package/dist/src/components/Typography/typography.types.d.ts +47 -1
- package/dist/src/components/Typography/typography.types.d.ts.map +1 -1
- package/dist/src/components/Typography/typography.variants.d.ts +2 -2
- package/dist/src/components/Typography/typography.variants.d.ts.map +1 -1
- package/dist/src/hooks/useStandaloneFieldWarning.d.ts +38 -0
- package/dist/src/hooks/useStandaloneFieldWarning.d.ts.map +1 -0
- package/dist/src/index.d.ts +61 -41
- package/dist/src/index.d.ts.map +1 -1
- package/package.json +6 -5
|
@@ -0,0 +1,358 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { Engine } from '@dashforge/ui-core';
|
|
3
|
+
import type { AccessRequirement } from '@dashforge/rbac';
|
|
4
|
+
import type { StepperVariants } from './stepper.variants.js';
|
|
5
|
+
/**
|
|
6
|
+
* The lifecycle state of a single step within the visible sequence.
|
|
7
|
+
*
|
|
8
|
+
* - `pending` — step comes AFTER the current step (not yet visited).
|
|
9
|
+
* - `current` — the step the user is on right now.
|
|
10
|
+
* - `completed` — step was visited AND the consumer has advanced past it
|
|
11
|
+
* (implies `visitedSteps.has(step.name)` AND it is not
|
|
12
|
+
* the current step and is before it in the sequence).
|
|
13
|
+
* - `invalid` — the step has an entry in `errors`, populated after a
|
|
14
|
+
* failed `goNext()` attempt (from `fields` trigger or
|
|
15
|
+
* `isValid` callback returning false).
|
|
16
|
+
* - `skipped` — reserved for future non-linear skip semantics; unused
|
|
17
|
+
* in v1.
|
|
18
|
+
*/
|
|
19
|
+
export type StepState = 'pending' | 'current' | 'completed' | 'invalid' | 'skipped';
|
|
20
|
+
/**
|
|
21
|
+
* Per-step error record surfaced on `useStep().errors`. Populated when
|
|
22
|
+
* `<Step fields={...}>` fails its RHF `trigger` call, or when a step's
|
|
23
|
+
* `isValid` callback returns `false`.
|
|
24
|
+
*
|
|
25
|
+
* The error routing pattern (Review step with clickable list) reads
|
|
26
|
+
* this array to render jump-links back to the step that failed.
|
|
27
|
+
*/
|
|
28
|
+
export interface StepError {
|
|
29
|
+
/** The step's `name` (unique key). */
|
|
30
|
+
step: string;
|
|
31
|
+
/** The step's `label` (for consumer-friendly display). */
|
|
32
|
+
label: ReactNode;
|
|
33
|
+
/** How the step became invalid. */
|
|
34
|
+
reason: 'fields' | 'isValid';
|
|
35
|
+
/** RHF `formState.errors` at the moment of the failed transition. */
|
|
36
|
+
errors: Record<string, unknown> | null;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Payload emitted to `<Stepper onStepInvalid>` when a `goNext()` attempt
|
|
40
|
+
* fails validation.
|
|
41
|
+
*/
|
|
42
|
+
export interface OnStepInvalidPayload {
|
|
43
|
+
/** The step that failed. */
|
|
44
|
+
step: string;
|
|
45
|
+
/** Its index within the visible sequence. */
|
|
46
|
+
index: number;
|
|
47
|
+
/** How it failed. */
|
|
48
|
+
reason: 'fields' | 'isValid';
|
|
49
|
+
/** RHF errors, if the failure came from `fields` trigger. */
|
|
50
|
+
errors: Record<string, unknown> | null;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* The shape returned by `useStep()` — the consumer-facing API of the
|
|
54
|
+
* current Stepper context. Available to any component rendered inside
|
|
55
|
+
* a `<Stepper>` tree (typically the current `<Step>`'s children or a
|
|
56
|
+
* custom footer).
|
|
57
|
+
*
|
|
58
|
+
* The hook is the ONLY public path to the Stepper's internal state —
|
|
59
|
+
* consumers do NOT reach into the internal context directly.
|
|
60
|
+
*/
|
|
61
|
+
export interface UseStepReturn {
|
|
62
|
+
/** The current step's `name`. */
|
|
63
|
+
currentStep: string;
|
|
64
|
+
/** Its index within the visible sequence. */
|
|
65
|
+
currentStepIndex: number;
|
|
66
|
+
/**
|
|
67
|
+
* The filtered visible sequence, in declaration order. Steps whose
|
|
68
|
+
* `visibleWhen` returned `false` are absent.
|
|
69
|
+
*/
|
|
70
|
+
visibleSteps: Array<{
|
|
71
|
+
name: string;
|
|
72
|
+
label: ReactNode;
|
|
73
|
+
}>;
|
|
74
|
+
/**
|
|
75
|
+
* Set of step names the user has visited so far. Reset by `reset()`,
|
|
76
|
+
* pre-populated by `initialStep` (every step before the initial one
|
|
77
|
+
* is treated as visited so a resumed wizard doesn't break the
|
|
78
|
+
* `allowJumpTo="visited"` gate).
|
|
79
|
+
*/
|
|
80
|
+
visitedSteps: Set<string>;
|
|
81
|
+
/**
|
|
82
|
+
* Errors recorded from the most recent failed `goNext()` calls. Cleared
|
|
83
|
+
* for a step when it is re-visited AND successfully re-validated.
|
|
84
|
+
*/
|
|
85
|
+
errors: StepError[];
|
|
86
|
+
/**
|
|
87
|
+
* Advance to the next step. Runs the current step's validation
|
|
88
|
+
* (`fields` trigger via `bridge.trigger` + optional `isValid` callback
|
|
89
|
+
* with AND semantics) and, on failure, records the error + fires
|
|
90
|
+
* `onStepInvalid`. On success beyond the last step, fires
|
|
91
|
+
* `onComplete()`.
|
|
92
|
+
*
|
|
93
|
+
* @returns `true` when the transition succeeded, `false` when blocked.
|
|
94
|
+
*/
|
|
95
|
+
goNext: () => Promise<boolean>;
|
|
96
|
+
/**
|
|
97
|
+
* Go back one step. Does not run validation — pending steps between
|
|
98
|
+
* the current and the target are marked pending again, but the
|
|
99
|
+
* consumer's state (RHF values) is preserved.
|
|
100
|
+
*/
|
|
101
|
+
goBack: () => void;
|
|
102
|
+
/**
|
|
103
|
+
* Jump directly to a step by name. Gated by `allowJumpTo`:
|
|
104
|
+
* - `'visited'` — allowed only if `visitedSteps.has(name)`.
|
|
105
|
+
* - `'none'` — always rejected (silent no-op).
|
|
106
|
+
* The Review-step error-routing pattern uses this to send the user
|
|
107
|
+
* back to a failed step from the error summary.
|
|
108
|
+
*/
|
|
109
|
+
goToStep: (name: string) => void;
|
|
110
|
+
/**
|
|
111
|
+
* Reset to `initialStep` (or the first visible step if `initialStep`
|
|
112
|
+
* is unset). Clears `visitedSteps` and `errors`.
|
|
113
|
+
*/
|
|
114
|
+
reset: () => void;
|
|
115
|
+
/** `true` when the current step is the first in the visible sequence. */
|
|
116
|
+
isFirstStep: boolean;
|
|
117
|
+
/** `true` when the current step is the last in the visible sequence. */
|
|
118
|
+
isLastStep: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* `true` when `goNext()` would succeed as of this render. Consumers
|
|
121
|
+
* can use this to render the Next button as `disabled`. Note this is
|
|
122
|
+
* a SYNC readout (based on `bridge.getError(field)` for each `fields`
|
|
123
|
+
* entry) — the `isValid` callback is NOT invoked here, since it may
|
|
124
|
+
* be async and consumers wouldn't want a render-time promise.
|
|
125
|
+
*/
|
|
126
|
+
canGoNext: boolean;
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Per-slot overrides — same shape as every other tw catalog entry.
|
|
130
|
+
*/
|
|
131
|
+
export interface StepperSlotProps {
|
|
132
|
+
root?: {
|
|
133
|
+
className?: string;
|
|
134
|
+
};
|
|
135
|
+
strip?: {
|
|
136
|
+
className?: string;
|
|
137
|
+
};
|
|
138
|
+
step?: {
|
|
139
|
+
className?: string;
|
|
140
|
+
};
|
|
141
|
+
indicator?: {
|
|
142
|
+
className?: string;
|
|
143
|
+
};
|
|
144
|
+
labelGroup?: {
|
|
145
|
+
className?: string;
|
|
146
|
+
};
|
|
147
|
+
label?: {
|
|
148
|
+
className?: string;
|
|
149
|
+
};
|
|
150
|
+
helperText?: {
|
|
151
|
+
className?: string;
|
|
152
|
+
};
|
|
153
|
+
optionalTag?: {
|
|
154
|
+
className?: string;
|
|
155
|
+
};
|
|
156
|
+
connector?: {
|
|
157
|
+
className?: string;
|
|
158
|
+
};
|
|
159
|
+
content?: {
|
|
160
|
+
className?: string;
|
|
161
|
+
};
|
|
162
|
+
footer?: {
|
|
163
|
+
className?: string;
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* Subset of `<Stepper>` props theme-configurable via
|
|
168
|
+
* `theme.components.Stepper.defaults` (Option C).
|
|
169
|
+
*/
|
|
170
|
+
export type StepperVariantProps = Pick<StepperVariants, 'color' | 'size' | 'orientation' | 'labelPlacement'>;
|
|
171
|
+
declare module '@dashforge/tw-tokens' {
|
|
172
|
+
interface TWComponentDefaults {
|
|
173
|
+
Stepper?: {
|
|
174
|
+
defaults?: Partial<StepperVariantProps>;
|
|
175
|
+
slotProps?: StepperSlotProps;
|
|
176
|
+
};
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* Props for `<Step>` — a config-carrier child of `<Stepper>`.
|
|
181
|
+
*
|
|
182
|
+
* `<Step>` renders no DOM of its own; the parent `<Stepper>` walks the
|
|
183
|
+
* children, reads each `<Step>`'s props, and drives rendering from
|
|
184
|
+
* there. This mirrors the MUI / Chakra "compound children as config"
|
|
185
|
+
* pattern (`<Tabs><Tab /><Tab /></Tabs>`).
|
|
186
|
+
*/
|
|
187
|
+
export interface StepProps {
|
|
188
|
+
/**
|
|
189
|
+
* Unique step key. Also used by `visitedSteps`, `goToStep`, `errors`,
|
|
190
|
+
* and `initialStep`. Required — every step must have a distinct name.
|
|
191
|
+
*/
|
|
192
|
+
name: string;
|
|
193
|
+
/** Short label rendered next to (or below) the indicator dot. */
|
|
194
|
+
label: ReactNode;
|
|
195
|
+
/**
|
|
196
|
+
* Secondary line rendered under the label. Optional.
|
|
197
|
+
* Common uses: "2 min", "Enter card info", "Optional".
|
|
198
|
+
*/
|
|
199
|
+
helperText?: ReactNode;
|
|
200
|
+
/**
|
|
201
|
+
* Custom icon rendered inside the indicator dot for the `pending` and
|
|
202
|
+
* `current` states. Not shown when `completed` (a check mark takes
|
|
203
|
+
* over) or `invalid` (an alert-triangle icon takes over).
|
|
204
|
+
*
|
|
205
|
+
* MUI-parity — an escape hatch for domain-specific dots
|
|
206
|
+
* (`<Eye />` on a Review step, `<Cog />` on a Settings step).
|
|
207
|
+
*/
|
|
208
|
+
icon?: ReactNode;
|
|
209
|
+
/**
|
|
210
|
+
* Marks the step as optional. `true` renders a default "Optional"
|
|
211
|
+
* italic caption below the label; passing a ReactNode substitutes the
|
|
212
|
+
* caption (`optional={<span>Skip if remote</span>}`). MUI-parity.
|
|
213
|
+
*
|
|
214
|
+
* NOTE: `optional` is display-only — it does NOT skip validation. A
|
|
215
|
+
* step that should be skippable at the flow level should use
|
|
216
|
+
* `visibleWhen` to hide itself, not `optional`.
|
|
217
|
+
*/
|
|
218
|
+
optional?: boolean | ReactNode;
|
|
219
|
+
/**
|
|
220
|
+
* List of RHF field names to validate on `goNext()`. Runs
|
|
221
|
+
* `bridge.trigger(fields)` and blocks the transition if any field
|
|
222
|
+
* fails. Combined with `isValid` via **AND** semantics: both must
|
|
223
|
+
* pass for the step to be considered valid.
|
|
224
|
+
*
|
|
225
|
+
* Requires a wrapping `<DashForm>` — outside a form context this prop
|
|
226
|
+
* is a no-op (dev-warn).
|
|
227
|
+
*/
|
|
228
|
+
fields?: string[];
|
|
229
|
+
/**
|
|
230
|
+
* Custom validation callback with AND-semantics against `fields`.
|
|
231
|
+
* Runs AFTER `fields` (only if `fields` passes). Return `false` (sync
|
|
232
|
+
* or async) to block the transition.
|
|
233
|
+
*
|
|
234
|
+
* Use for domain rules that can't be expressed as RHF field
|
|
235
|
+
* validators (e.g., "at least one item in the cart", "the payment
|
|
236
|
+
* gateway acknowledged the pre-auth").
|
|
237
|
+
*/
|
|
238
|
+
isValid?: () => boolean | Promise<boolean>;
|
|
239
|
+
/**
|
|
240
|
+
* Reactive visibility predicate — catalog-uniform closure. Steps
|
|
241
|
+
* whose predicate returns `false` are excluded from `visibleSteps`,
|
|
242
|
+
* skipped by `goNext()` / `goBack()`, and hidden from the indicator
|
|
243
|
+
* strip. This is the primary hook for dynamic step composition
|
|
244
|
+
* (e.g., a "Legal address" step that only shows for EU customers).
|
|
245
|
+
*/
|
|
246
|
+
visibleWhen?: (engine: Engine) => boolean;
|
|
247
|
+
/** RBAC gate — hides or disables the step. */
|
|
248
|
+
access?: AccessRequirement;
|
|
249
|
+
/** The step's content — rendered inside the `content` slot when active. */
|
|
250
|
+
children?: ReactNode;
|
|
251
|
+
}
|
|
252
|
+
/**
|
|
253
|
+
* Props for `<Stepper>` — the compound parent.
|
|
254
|
+
*
|
|
255
|
+
* @example Linear wizard with form-driven validation
|
|
256
|
+
* ```tsx
|
|
257
|
+
* <DashForm defaultValues={{ email: '', card: '' }}>
|
|
258
|
+
* <Stepper name="cardActivation" onComplete={handleActivate}>
|
|
259
|
+
* <Step name="account" label="Account" fields={['email']}>
|
|
260
|
+
* <TextField name="email" label="Email" />
|
|
261
|
+
* </Step>
|
|
262
|
+
* <Step name="card" label="Card details" fields={['card']}>
|
|
263
|
+
* <TextField name="card" label="Card number" />
|
|
264
|
+
* </Step>
|
|
265
|
+
* <Step name="review" label="Review">
|
|
266
|
+
* <ReviewPanel />
|
|
267
|
+
* </Step>
|
|
268
|
+
* </Stepper>
|
|
269
|
+
* </DashForm>
|
|
270
|
+
* ```
|
|
271
|
+
*
|
|
272
|
+
* @example Dynamic step with `visibleWhen`
|
|
273
|
+
* ```tsx
|
|
274
|
+
* <Step
|
|
275
|
+
* name="contract"
|
|
276
|
+
* label="Contract"
|
|
277
|
+
* visibleWhen={(engine) => engine.get('activation') === 'deferred'}
|
|
278
|
+
* >
|
|
279
|
+
* ...
|
|
280
|
+
* </Step>
|
|
281
|
+
* ```
|
|
282
|
+
*/
|
|
283
|
+
export interface StepperProps {
|
|
284
|
+
/** Optional identifier — used for logging / test IDs. */
|
|
285
|
+
name?: string;
|
|
286
|
+
/**
|
|
287
|
+
* `<Step>` children. Non-`<Step>` children are dev-warned and
|
|
288
|
+
* ignored — the parent only recognizes its own compound child type.
|
|
289
|
+
*/
|
|
290
|
+
children: ReactNode;
|
|
291
|
+
/**
|
|
292
|
+
* Name of the step to render on mount. Every step declared BEFORE
|
|
293
|
+
* `initialStep` in the visible sequence is marked as visited (so
|
|
294
|
+
* `allowJumpTo="visited"` allows the user to walk back through them).
|
|
295
|
+
*
|
|
296
|
+
* Common uses: resuming an interrupted wizard from persistent state,
|
|
297
|
+
* deep-linking to a specific step from a URL query.
|
|
298
|
+
*
|
|
299
|
+
* If the name doesn't match any visible step, falls back to the first
|
|
300
|
+
* visible step and dev-warns.
|
|
301
|
+
*/
|
|
302
|
+
initialStep?: string;
|
|
303
|
+
/**
|
|
304
|
+
* Controls the `goToStep` (indicator-click) affordance:
|
|
305
|
+
* - `'visited'` (default) — the user can jump only to steps they've
|
|
306
|
+
* already visited. Forward jumps are blocked
|
|
307
|
+
* because they'd bypass validation.
|
|
308
|
+
* - `'none'` — no jumping; navigation is strictly
|
|
309
|
+
* `goNext` / `goBack`.
|
|
310
|
+
*
|
|
311
|
+
* @default 'visited'
|
|
312
|
+
*/
|
|
313
|
+
allowJumpTo?: 'visited' | 'none';
|
|
314
|
+
/**
|
|
315
|
+
* Fires when the user advances past the LAST visible step via
|
|
316
|
+
* `goNext()`. If this Stepper is wrapped in a `<DashForm>` and
|
|
317
|
+
* `onComplete` is omitted, the DashForm's own submit handler runs
|
|
318
|
+
* naturally on the consumer's Next button (typical pattern:
|
|
319
|
+
* `<Button type="submit">Finish</Button>` on the last step). Optional.
|
|
320
|
+
*/
|
|
321
|
+
onComplete?: () => void;
|
|
322
|
+
/**
|
|
323
|
+
* Fires on every successful transition — moving forward, moving back,
|
|
324
|
+
* or jumping. Receives the previous step name, next step name, and
|
|
325
|
+
* the direction.
|
|
326
|
+
*/
|
|
327
|
+
onStepChange?: (prev: string, next: string, reason: 'next' | 'back' | 'jump') => void;
|
|
328
|
+
/**
|
|
329
|
+
* Fires when `goNext()` blocks because validation failed. Useful for
|
|
330
|
+
* side-effects like scrolling the first invalid field into view or
|
|
331
|
+
* emitting a Snackbar toast.
|
|
332
|
+
*/
|
|
333
|
+
onStepInvalid?: (payload: OnStepInvalidPayload) => void;
|
|
334
|
+
/** Colour intent applied to the indicator + connector fills. @default 'primary' */
|
|
335
|
+
color?: StepperVariants['color'];
|
|
336
|
+
/** Density knob (indicator diameter + label size). @default 'md' */
|
|
337
|
+
size?: StepperVariants['size'];
|
|
338
|
+
/** `horizontal` (default) or `vertical` strip layout. @default 'horizontal' */
|
|
339
|
+
orientation?: StepperVariants['orientation'];
|
|
340
|
+
/**
|
|
341
|
+
* `end` (label next to indicator, default) or `below` (label under
|
|
342
|
+
* the indicator, MUI `alternativeLabel` semantics). Horizontal only —
|
|
343
|
+
* ignored on `orientation='vertical'`.
|
|
344
|
+
* @default 'end'
|
|
345
|
+
*/
|
|
346
|
+
labelPlacement?: StepperVariants['labelPlacement'];
|
|
347
|
+
/** Reactive visibility predicate for the whole Stepper. */
|
|
348
|
+
visibleWhen?: (engine: Engine) => boolean;
|
|
349
|
+
/** RBAC gate for the whole Stepper. */
|
|
350
|
+
access?: AccessRequirement;
|
|
351
|
+
/** Utility-class shortcut for `slotProps.root.className`. */
|
|
352
|
+
sx?: string;
|
|
353
|
+
/** Per-slot overrides. */
|
|
354
|
+
slotProps?: StepperSlotProps;
|
|
355
|
+
/** `data-testid` on the root wrapper. */
|
|
356
|
+
testId?: string;
|
|
357
|
+
}
|
|
358
|
+
//# sourceMappingURL=stepper.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stepper.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/stepper.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
import { type VariantProps } from 'tailwind-variants';
|
|
2
|
+
/**
|
|
3
|
+
* Tailwind-variants recipe for `<Stepper>` — declarative multi-step
|
|
4
|
+
* navigation with per-step config carried by `<Step>` children.
|
|
5
|
+
*
|
|
6
|
+
* Slots:
|
|
7
|
+
* - `root` — outer wrapper (strip + content + footer are direct children).
|
|
8
|
+
* - `strip` — the indicator strip (a flex/grid row for horizontal, a column stack for vertical).
|
|
9
|
+
* - `step` — each rendered step item (indicator + label group).
|
|
10
|
+
* - `indicator` — the round dot that carries the step number, check, alert, or `icon`.
|
|
11
|
+
* - `labelGroup` — vertical stack holding label + helper + optional caption.
|
|
12
|
+
* - `label` — the step's short title.
|
|
13
|
+
* - `helperText` — the secondary line below the label.
|
|
14
|
+
* - `optionalTag` — the italic "Optional" (or consumer-supplied node) tag below the label.
|
|
15
|
+
* - `connector` — the line drawn between two adjacent indicators.
|
|
16
|
+
* - `content` — the panel that renders the current step's children.
|
|
17
|
+
* - `footer` — reserved slot for consumer-authored Back / Next controls.
|
|
18
|
+
*
|
|
19
|
+
* State axes (data-* attributes on the `step` slot):
|
|
20
|
+
* - `data-state="pending"|"current"|"completed"|"invalid"|"skipped"`.
|
|
21
|
+
* Consumers can theme with `[data-state='invalid']` selectors in `slotProps`.
|
|
22
|
+
*/
|
|
23
|
+
export declare const stepperVariants: import("tailwind-variants").TVReturnType<{
|
|
24
|
+
color: {
|
|
25
|
+
primary: {
|
|
26
|
+
indicator: string[];
|
|
27
|
+
connector: string;
|
|
28
|
+
};
|
|
29
|
+
secondary: {
|
|
30
|
+
indicator: string[];
|
|
31
|
+
connector: string;
|
|
32
|
+
};
|
|
33
|
+
success: {
|
|
34
|
+
indicator: string[];
|
|
35
|
+
connector: string;
|
|
36
|
+
};
|
|
37
|
+
warning: {
|
|
38
|
+
indicator: string[];
|
|
39
|
+
connector: string;
|
|
40
|
+
};
|
|
41
|
+
danger: {
|
|
42
|
+
indicator: string[];
|
|
43
|
+
connector: string;
|
|
44
|
+
};
|
|
45
|
+
neutral: {
|
|
46
|
+
indicator: string[];
|
|
47
|
+
connector: string;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
size: {
|
|
51
|
+
sm: {
|
|
52
|
+
indicator: string;
|
|
53
|
+
label: string;
|
|
54
|
+
helperText: string;
|
|
55
|
+
};
|
|
56
|
+
md: {
|
|
57
|
+
indicator: string;
|
|
58
|
+
label: string;
|
|
59
|
+
helperText: string;
|
|
60
|
+
};
|
|
61
|
+
lg: {
|
|
62
|
+
indicator: string;
|
|
63
|
+
label: string;
|
|
64
|
+
helperText: string;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
orientation: {
|
|
68
|
+
horizontal: {
|
|
69
|
+
root: string;
|
|
70
|
+
strip: string;
|
|
71
|
+
connector: string;
|
|
72
|
+
};
|
|
73
|
+
vertical: {
|
|
74
|
+
root: string;
|
|
75
|
+
strip: string;
|
|
76
|
+
step: string;
|
|
77
|
+
connector: string;
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
labelPlacement: {
|
|
81
|
+
end: {};
|
|
82
|
+
below: {
|
|
83
|
+
step: string;
|
|
84
|
+
labelGroup: string;
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
}, {
|
|
88
|
+
root: string;
|
|
89
|
+
strip: string;
|
|
90
|
+
step: string;
|
|
91
|
+
indicator: string[];
|
|
92
|
+
labelGroup: string;
|
|
93
|
+
label: string[];
|
|
94
|
+
helperText: string;
|
|
95
|
+
optionalTag: string;
|
|
96
|
+
connector: string;
|
|
97
|
+
content: string;
|
|
98
|
+
footer: string;
|
|
99
|
+
}, undefined, {
|
|
100
|
+
color: {
|
|
101
|
+
primary: {
|
|
102
|
+
indicator: string[];
|
|
103
|
+
connector: string;
|
|
104
|
+
};
|
|
105
|
+
secondary: {
|
|
106
|
+
indicator: string[];
|
|
107
|
+
connector: string;
|
|
108
|
+
};
|
|
109
|
+
success: {
|
|
110
|
+
indicator: string[];
|
|
111
|
+
connector: string;
|
|
112
|
+
};
|
|
113
|
+
warning: {
|
|
114
|
+
indicator: string[];
|
|
115
|
+
connector: string;
|
|
116
|
+
};
|
|
117
|
+
danger: {
|
|
118
|
+
indicator: string[];
|
|
119
|
+
connector: string;
|
|
120
|
+
};
|
|
121
|
+
neutral: {
|
|
122
|
+
indicator: string[];
|
|
123
|
+
connector: string;
|
|
124
|
+
};
|
|
125
|
+
};
|
|
126
|
+
size: {
|
|
127
|
+
sm: {
|
|
128
|
+
indicator: string;
|
|
129
|
+
label: string;
|
|
130
|
+
helperText: string;
|
|
131
|
+
};
|
|
132
|
+
md: {
|
|
133
|
+
indicator: string;
|
|
134
|
+
label: string;
|
|
135
|
+
helperText: string;
|
|
136
|
+
};
|
|
137
|
+
lg: {
|
|
138
|
+
indicator: string;
|
|
139
|
+
label: string;
|
|
140
|
+
helperText: string;
|
|
141
|
+
};
|
|
142
|
+
};
|
|
143
|
+
orientation: {
|
|
144
|
+
horizontal: {
|
|
145
|
+
root: string;
|
|
146
|
+
strip: string;
|
|
147
|
+
connector: string;
|
|
148
|
+
};
|
|
149
|
+
vertical: {
|
|
150
|
+
root: string;
|
|
151
|
+
strip: string;
|
|
152
|
+
step: string;
|
|
153
|
+
connector: string;
|
|
154
|
+
};
|
|
155
|
+
};
|
|
156
|
+
labelPlacement: {
|
|
157
|
+
end: {};
|
|
158
|
+
below: {
|
|
159
|
+
step: string;
|
|
160
|
+
labelGroup: string;
|
|
161
|
+
};
|
|
162
|
+
};
|
|
163
|
+
}, {
|
|
164
|
+
root: string;
|
|
165
|
+
strip: string;
|
|
166
|
+
step: string;
|
|
167
|
+
indicator: string[];
|
|
168
|
+
labelGroup: string;
|
|
169
|
+
label: string[];
|
|
170
|
+
helperText: string;
|
|
171
|
+
optionalTag: string;
|
|
172
|
+
connector: string;
|
|
173
|
+
content: string;
|
|
174
|
+
footer: string;
|
|
175
|
+
}, import("tailwind-variants").TVReturnType<{
|
|
176
|
+
color: {
|
|
177
|
+
primary: {
|
|
178
|
+
indicator: string[];
|
|
179
|
+
connector: string;
|
|
180
|
+
};
|
|
181
|
+
secondary: {
|
|
182
|
+
indicator: string[];
|
|
183
|
+
connector: string;
|
|
184
|
+
};
|
|
185
|
+
success: {
|
|
186
|
+
indicator: string[];
|
|
187
|
+
connector: string;
|
|
188
|
+
};
|
|
189
|
+
warning: {
|
|
190
|
+
indicator: string[];
|
|
191
|
+
connector: string;
|
|
192
|
+
};
|
|
193
|
+
danger: {
|
|
194
|
+
indicator: string[];
|
|
195
|
+
connector: string;
|
|
196
|
+
};
|
|
197
|
+
neutral: {
|
|
198
|
+
indicator: string[];
|
|
199
|
+
connector: string;
|
|
200
|
+
};
|
|
201
|
+
};
|
|
202
|
+
size: {
|
|
203
|
+
sm: {
|
|
204
|
+
indicator: string;
|
|
205
|
+
label: string;
|
|
206
|
+
helperText: string;
|
|
207
|
+
};
|
|
208
|
+
md: {
|
|
209
|
+
indicator: string;
|
|
210
|
+
label: string;
|
|
211
|
+
helperText: string;
|
|
212
|
+
};
|
|
213
|
+
lg: {
|
|
214
|
+
indicator: string;
|
|
215
|
+
label: string;
|
|
216
|
+
helperText: string;
|
|
217
|
+
};
|
|
218
|
+
};
|
|
219
|
+
orientation: {
|
|
220
|
+
horizontal: {
|
|
221
|
+
root: string;
|
|
222
|
+
strip: string;
|
|
223
|
+
connector: string;
|
|
224
|
+
};
|
|
225
|
+
vertical: {
|
|
226
|
+
root: string;
|
|
227
|
+
strip: string;
|
|
228
|
+
step: string;
|
|
229
|
+
connector: string;
|
|
230
|
+
};
|
|
231
|
+
};
|
|
232
|
+
labelPlacement: {
|
|
233
|
+
end: {};
|
|
234
|
+
below: {
|
|
235
|
+
step: string;
|
|
236
|
+
labelGroup: string;
|
|
237
|
+
};
|
|
238
|
+
};
|
|
239
|
+
}, {
|
|
240
|
+
root: string;
|
|
241
|
+
strip: string;
|
|
242
|
+
step: string;
|
|
243
|
+
indicator: string[];
|
|
244
|
+
labelGroup: string;
|
|
245
|
+
label: string[];
|
|
246
|
+
helperText: string;
|
|
247
|
+
optionalTag: string;
|
|
248
|
+
connector: string;
|
|
249
|
+
content: string;
|
|
250
|
+
footer: string;
|
|
251
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
252
|
+
export type StepperVariants = VariantProps<typeof stepperVariants>;
|
|
253
|
+
//# sourceMappingURL=stepper.variants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stepper.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/stepper.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAqI1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import type { UseStepReturn } from './stepper.types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Access the Stepper state + navigation API from any component rendered
|
|
4
|
+
* inside a `<Stepper>` tree.
|
|
5
|
+
*
|
|
6
|
+
* The canonical use is inside the current step's children — a "Next" /
|
|
7
|
+
* "Back" footer, a review summary showing the visible sequence, or an
|
|
8
|
+
* error-routing Alert that turns each entry in `errors` into a clickable
|
|
9
|
+
* link that calls `goToStep(name)`.
|
|
10
|
+
*
|
|
11
|
+
* Throws (dev only) when called outside a Stepper. In production the
|
|
12
|
+
* hook returns a null-safe stub so a stale reference doesn't crash the
|
|
13
|
+
* app — but the consumer's navigation buttons will be no-ops. Fix the
|
|
14
|
+
* placement.
|
|
15
|
+
*
|
|
16
|
+
* @throws Error in dev if used outside `<Stepper>`.
|
|
17
|
+
*
|
|
18
|
+
* @example Custom footer
|
|
19
|
+
* ```tsx
|
|
20
|
+
* function StepFooter() {
|
|
21
|
+
* const step = useStep();
|
|
22
|
+
* return (
|
|
23
|
+
* <Stack direction="row" justify="between">
|
|
24
|
+
* <Button variant="outline" onClick={step.goBack} disabled={step.isFirstStep}>
|
|
25
|
+
* Back
|
|
26
|
+
* </Button>
|
|
27
|
+
* <Button onClick={step.goNext} disabled={!step.canGoNext}>
|
|
28
|
+
* {step.isLastStep ? 'Confirm' : 'Next'}
|
|
29
|
+
* </Button>
|
|
30
|
+
* </Stack>
|
|
31
|
+
* );
|
|
32
|
+
* }
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* @example Error routing on the review step
|
|
36
|
+
* ```tsx
|
|
37
|
+
* function ReviewErrors() {
|
|
38
|
+
* const { errors, goToStep } = useStep();
|
|
39
|
+
* if (errors.length === 0) return null;
|
|
40
|
+
* return (
|
|
41
|
+
* <Alert color="danger" title="Fix these issues before submitting">
|
|
42
|
+
* {errors.map((e) => (
|
|
43
|
+
* <Link key={e.step} onClick={() => goToStep(e.step)}>
|
|
44
|
+
* {e.label}
|
|
45
|
+
* </Link>
|
|
46
|
+
* ))}
|
|
47
|
+
* </Alert>
|
|
48
|
+
* );
|
|
49
|
+
* }
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
export declare function useStep(): UseStepReturn;
|
|
53
|
+
//# sourceMappingURL=useStep.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStep.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/useStep.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,wBAAgB,OAAO,IAAI,aAAa,CA8BvC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kDAoJxC"}
|