@xsolla/xui-b2b-stepper 0.150.0 → 0.152.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.
Files changed (2) hide show
  1. package/README.md +116 -83
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,54 +1,131 @@
1
- # B2B Stepper
1
+ # Stepper
2
2
 
3
- A multi-step progress indicator for B2B surfaces. Supports vertical and horizontal layouts, interactive step navigation, a chip-only "simple" mode, and an optional tinted surface container. Designed to match the B2B Figma component library.
3
+ A multi-step progress indicator for B2B surfaces. Supports vertical and horizontal layouts, interactive step navigation, a chip-only "simple" mode, and an optional tinted surface container.
4
4
 
5
- > **Prefer this over `@xsolla/xui-stepper`** for all B2B surfaces. The base stepper package is deprecated for B2B use.
5
+ Prefer this over `@xsolla/xui-stepper` for all B2B surfaces.
6
6
 
7
7
  ## Installation
8
8
 
9
9
  ```bash
10
10
  npm install @xsolla/xui-b2b-stepper
11
- # or
12
- yarn add @xsolla/xui-b2b-stepper
13
11
  ```
14
12
 
15
- ## Demo
13
+ ## Imports
16
14
 
17
- ### Basic Vertical Stepper
15
+ ```tsx
16
+ import {
17
+ Stepper,
18
+ type StepperProps,
19
+ type StepperDirection,
20
+ type StepType,
21
+ type StepStateType,
22
+ type StepClickType,
23
+ } from '@xsolla/xui-b2b-stepper';
24
+ ```
25
+
26
+ ## Quick start
18
27
 
19
28
  ```tsx
20
- import React from 'react';
21
29
  import { Stepper } from '@xsolla/xui-b2b-stepper';
22
30
 
23
- export default function BasicStepper() {
24
- const steps = [
25
- { title: 'Account details', description: 'Name, email, password', state: 'current' as const },
26
- { title: 'Billing', description: 'Payment method' },
27
- { title: 'Confirm', description: 'Review and submit' },
28
- ];
31
+ const steps = [
32
+ { title: 'Account details', description: 'Name, email, password', state: 'current' as const },
33
+ { title: 'Billing', description: 'Payment method' },
34
+ { title: 'Confirm', description: 'Review and submit' },
35
+ ];
29
36
 
30
- return <Stepper steps={steps} direction="vertical" />;
31
- }
37
+ <Stepper steps={steps} direction="vertical" />;
38
+ ```
39
+
40
+ ## API Reference
41
+
42
+ ### `<Stepper>`
43
+
44
+ `StepperProps` extends `Omit<BoxProps, "onClick">`, so any `Box` layout/style prop (e.g. `padding`, `width`, `style`) is forwarded to the root.
45
+
46
+ | Prop | Type | Default | Description |
47
+ | --- | --- | --- | --- |
48
+ | `steps` | `StepType[]` | — | Array of step definitions. |
49
+ | `direction` | `StepperDirection` | `"vertical"` | Layout direction. |
50
+ | `surface` | `boolean` | `false` | Wrap in a tinted surface card (background-secondary + overlay-mono, radius 8). |
51
+ | `simple` | `boolean` | `false` | Render the chip only — no title, description, or caption. |
52
+ | `onClick` | `StepClickType` | — | Called when a step is clicked. Receives `{ number, step }`. |
53
+ | `aria-label` | `string` | auto | Accessible label for the navigation. Defaults to `"Stepper with N steps"`. |
54
+ | `className` | `string` | — | CSS class applied to the root. |
55
+ | ...`BoxProps` | — | — | Any other `BoxProps` are passed through (`onClick` is intentionally omitted from the `Box` type — the Stepper owns step-click semantics). |
56
+
57
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
58
+
59
+ ### `StepType`
60
+
61
+ | Field | Type | Default | Description |
62
+ | --- | --- | --- | --- |
63
+ | `title` | `ReactNode` | — | Step heading. |
64
+ | `description` | `ReactNode` | — | Secondary text below the title. |
65
+ | `caption` | `ReactNode` | — | Small caption rendered above the title (body-xs, tertiary colour). |
66
+ | `state` | `StepStateType` | `"incomplete"` | Visual state of the step. |
67
+ | `disabled` | `boolean` | `false` | Prevents click interaction. |
68
+ | `noClick` | `boolean` | `false` | Suppresses click even when `onClick` is provided. |
69
+ | `key` | `string` | index | Stable React key override. |
70
+
71
+ ### `StepStateType`
72
+
73
+ ```ts
74
+ type StepStateType =
75
+ | 'current'
76
+ | 'incomplete'
77
+ | 'loading'
78
+ | 'complete'
79
+ | 'warning'
80
+ | 'alert';
81
+ ```
82
+
83
+ | Value | Appearance |
84
+ | --- | --- |
85
+ | `current` | Active step — highlighted chip, white card background. |
86
+ | `complete` | Finished — checkmark icon in chip. |
87
+ | `incomplete` | Future step — muted appearance. |
88
+ | `loading` | In progress — spinner in chip, card background. |
89
+ | `warning` | Needs attention — warning icon in chip, card background. |
90
+ | `alert` | Error/failed — alert icon in chip, card background. |
91
+
92
+ ### `StepperDirection`
93
+
94
+ ```ts
95
+ type StepperDirection = 'horizontal' | 'vertical';
32
96
  ```
33
97
 
34
- ### Horizontal Stepper
98
+ ### `StepClickType`
99
+
100
+ ```ts
101
+ type StepClickType = (args: { number: number; step: StepType }) => void;
102
+ // number: 1-based index of the clicked step
103
+ ```
104
+
105
+ ## Examples
106
+
107
+ ### Horizontal stepper
35
108
 
36
109
  ```tsx
37
- <Stepper steps={steps} direction="horizontal" />
110
+ import { Stepper } from '@xsolla/xui-b2b-stepper';
111
+
112
+ <Stepper steps={steps} direction="horizontal" />;
38
113
  ```
39
114
 
40
- ### With Surface Container
115
+ ### With surface container
41
116
 
42
- Wraps the stepper in a tinted card (background-secondary + overlay-mono). Recommended when embedding inside a `Drawer` sidebar.
117
+ Recommended when embedding inside a `Drawer` sidebar.
43
118
 
44
119
  ```tsx
45
- <Stepper steps={steps} direction="vertical" surface />
120
+ import { Stepper } from '@xsolla/xui-b2b-stepper';
121
+
122
+ <Stepper steps={steps} direction="vertical" surface />;
46
123
  ```
47
124
 
48
- ### Interactive (Clickable Steps)
125
+ ### Interactive (clickable steps)
49
126
 
50
127
  ```tsx
51
- import React, { useState } from 'react';
128
+ import { useState } from 'react';
52
129
  import { Stepper, type StepType } from '@xsolla/xui-b2b-stepper';
53
130
 
54
131
  const STEPS = [
@@ -57,7 +134,7 @@ const STEPS = [
57
134
  { title: 'Confirm', description: 'Review and submit' },
58
135
  ];
59
136
 
60
- export default function ClickableStepper() {
137
+ function ClickableStepper() {
61
138
  const [active, setActive] = useState(1);
62
139
 
63
140
  const steps: StepType[] = STEPS.map((s, i) => ({
@@ -77,11 +154,11 @@ export default function ClickableStepper() {
77
154
  }
78
155
  ```
79
156
 
80
- ### Simple (Numbers Only)
81
-
82
- Renders only the numbered chip without heading, description, or caption. Best for horizontal status bars.
157
+ ### Simple (numbers only)
83
158
 
84
159
  ```tsx
160
+ import { Stepper } from '@xsolla/xui-b2b-stepper';
161
+
85
162
  <Stepper
86
163
  steps={[
87
164
  { title: 'Step 1', state: 'complete' },
@@ -90,14 +167,14 @@ Renders only the numbered chip without heading, description, or caption. Best fo
90
167
  ]}
91
168
  direction="horizontal"
92
169
  simple
93
- />
170
+ />;
94
171
  ```
95
172
 
96
- ### With Step Captions
97
-
98
- Small caption text rendered above the title (e.g. "Optional", "Step 1 of 3").
173
+ ### With step captions
99
174
 
100
175
  ```tsx
176
+ import { Stepper } from '@xsolla/xui-b2b-stepper';
177
+
101
178
  <Stepper
102
179
  steps={[
103
180
  { caption: 'Step 1', title: 'Account details', state: 'current' },
@@ -105,12 +182,14 @@ Small caption text rendered above the title (e.g. "Optional", "Step 1 of 3").
105
182
  { caption: 'Step 3', title: 'Confirm' },
106
183
  ]}
107
184
  direction="vertical"
108
- />
185
+ />;
109
186
  ```
110
187
 
111
- ### All Step States
188
+ ### All step states
112
189
 
113
190
  ```tsx
191
+ import { Stepper } from '@xsolla/xui-b2b-stepper';
192
+
114
193
  <Stepper
115
194
  direction="vertical"
116
195
  steps={[
@@ -121,59 +200,13 @@ Small caption text rendered above the title (e.g. "Optional", "Step 1 of 3").
121
200
  { title: 'Alert', state: 'alert' },
122
201
  { title: 'Incomplete', state: 'incomplete' },
123
202
  ]}
124
- />
125
- ```
126
-
127
- ## API Reference
128
-
129
- ### Stepper
130
-
131
- | Prop | Type | Default | Description |
132
- | :--- | :--- | :------ | :---------- |
133
- | `steps` | `StepType[]` | — | Array of step definitions. |
134
- | `direction` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction. |
135
- | `surface` | `boolean` | `false` | Wrap in a tinted surface card (background-secondary + overlay-mono, radius 8). |
136
- | `simple` | `boolean` | `false` | Render chip only — no title, description, or caption. |
137
- | `onClick` | `StepClickType` | — | Called when a step is clicked. Receives `{ number, step }`. |
138
- | `aria-label` | `string` | auto | Accessible label for the stepper navigation. Defaults to `"Stepper with N steps"`. |
139
- | `className` | `string` | — | CSS class applied to the root element. |
140
- | `themeMode` | `string` | — | Override the global theme mode for this component. |
141
- | `themeProductContext` | `string` | — | Override the global product context for this component. |
142
-
143
- ### StepType
144
-
145
- | Field | Type | Default | Description |
146
- | :---- | :--- | :------ | :---------- |
147
- | `title` | `ReactNode` | — | Step heading. |
148
- | `description` | `ReactNode` | — | Secondary text below the title. |
149
- | `caption` | `ReactNode` | — | Small caption rendered above the title (body-xs, tertiary color). |
150
- | `state` | `StepStateType` | `"incomplete"` | Visual state of the step. |
151
- | `disabled` | `boolean` | `false` | Prevents click interaction. |
152
- | `noClick` | `boolean` | `false` | Suppresses click even when `onClick` is provided. |
153
- | `key` | `string` | — | Stable React key override (falls back to index). |
154
-
155
- ### StepStateType
156
-
157
- | Value | Appearance |
158
- | :---- | :--------- |
159
- | `"current"` | Active step — highlighted chip, white card background. |
160
- | `"complete"` | Finished — checkmark icon in chip. |
161
- | `"incomplete"` | Future step — muted appearance. |
162
- | `"loading"` | In progress — spinner in chip, card background. |
163
- | `"warning"` | Needs attention — warning icon in chip, card background. |
164
- | `"alert"` | Error/failed — alert icon in chip, card background. |
165
-
166
- ### StepClickType
167
-
168
- ```typescript
169
- type StepClickType = (args: { number: number; step: StepType }) => void;
170
- // number: 1-based index of the clicked step
203
+ />;
171
204
  ```
172
205
 
173
206
  ## Accessibility
174
207
 
175
- - `role="navigation"` with `aria-label` on the root.
176
- - Active step marked with `aria-current="step"`.
208
+ - Root has `role="navigation"` and an `aria-label` (defaults to `"Stepper with N steps"`).
209
+ - The active step is marked with `aria-current="step"`.
177
210
  - Clickable steps use `role="button"`, `tabIndex={0}`, and respond to Enter/Space.
178
211
  - Disabled steps have `aria-disabled="true"`.
179
- - Connector lines between the last step are `aria-hidden`.
212
+ - Connector lines are decorative; the trailing connector on the final step is hidden via `aria-hidden`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-b2b-stepper",
3
- "version": "0.150.0",
3
+ "version": "0.152.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
13
13
  "test:coverage": "vitest run --coverage"
14
14
  },
15
15
  "dependencies": {
16
- "@xsolla/xui-core": "0.150.0",
17
- "@xsolla/xui-icons-base": "0.150.0",
18
- "@xsolla/xui-primitives-core": "0.150.0"
16
+ "@xsolla/xui-core": "0.152.0",
17
+ "@xsolla/xui-icons-base": "0.152.0",
18
+ "@xsolla/xui-primitives-core": "0.152.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": ">=16.8.0",