@xsolla/xui-stepper 0.96.0 → 0.97.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 +54 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# @xsolla/xui-stepper
|
|
2
|
+
|
|
3
|
+
Step-based progress indicator for multi-step flows, with horizontal and vertical layouts.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @xsolla/xui-stepper
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Stepper } from '@xsolla/xui-stepper';
|
|
15
|
+
|
|
16
|
+
<Stepper
|
|
17
|
+
steps={[
|
|
18
|
+
{ title: 'Account', state: 'complete' },
|
|
19
|
+
{ title: 'Payment', state: 'current' },
|
|
20
|
+
{ title: 'Confirm', state: 'incomplete' },
|
|
21
|
+
]}
|
|
22
|
+
direction="horizontal"
|
|
23
|
+
onClick={({ number, step }) => console.log(number, step)}
|
|
24
|
+
/>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Components
|
|
28
|
+
|
|
29
|
+
- **Stepper** — Full labelled stepper with step states, click handling, and tail connectors.
|
|
30
|
+
- **ProgressStep** — Compact dot-based progress indicator with optional prev/next arrows.
|
|
31
|
+
|
|
32
|
+
## Props
|
|
33
|
+
|
|
34
|
+
### Stepper
|
|
35
|
+
|
|
36
|
+
| Prop | Type | Default | Description |
|
|
37
|
+
|------|------|---------|-------------|
|
|
38
|
+
| `steps` | `StepType[]` | — | Array of step definitions (required) |
|
|
39
|
+
| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout orientation |
|
|
40
|
+
| `variantUI` | `'current' \| 'simple'` | `'current'` | Visual style variant |
|
|
41
|
+
| `size` | `'sm' \| 'md'` | `'md'` | Step size |
|
|
42
|
+
| `palette` | `'brand' \| 'brandSecondary'` | `'brand'` | Colour palette |
|
|
43
|
+
| `tail` | `boolean` | `false` | Shows connector lines between steps (simple variant only) |
|
|
44
|
+
| `onClick` | `({ number, step }) => void` | — | Callback when a step is clicked |
|
|
45
|
+
|
|
46
|
+
#### StepType
|
|
47
|
+
|
|
48
|
+
| Field | Type | Description |
|
|
49
|
+
|-------|------|-------------|
|
|
50
|
+
| `title` | `string \| ReactElement` | Step label |
|
|
51
|
+
| `state` | `'current' \| 'incomplete' \| 'loading' \| 'complete' \| 'alert' \| 'warning'` | Step state |
|
|
52
|
+
| `description` | `string \| ReactElement` | Optional secondary text |
|
|
53
|
+
| `disabled` | `boolean` | Prevents click on this step |
|
|
54
|
+
| `noClick` | `boolean` | Removes click handler for this step |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-stepper",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.97.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
"test:coverage": "vitest run --coverage"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-icons": "0.
|
|
19
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
+
"@xsolla/xui-core": "0.97.0",
|
|
18
|
+
"@xsolla/xui-icons": "0.97.0",
|
|
19
|
+
"@xsolla/xui-primitives-core": "0.97.0"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": ">=16.8.0",
|