@xsolla/xui-b2b-stepper 0.148.0 → 0.148.1

package/README.md

@@ -0,0 +1,179 @@
+# B2B Stepper
+
+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.
+
+> **Prefer this over `@xsolla/xui-stepper`** for all B2B surfaces. The base stepper package is deprecated for B2B use.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-b2b-stepper
+# or
+yarn add @xsolla/xui-b2b-stepper
+```
+
+## Demo
+
+### Basic Vertical Stepper
+
+```tsx
+import React from 'react';
+import { Stepper } from '@xsolla/xui-b2b-stepper';
+
+export default function BasicStepper() {
+  const steps = [
+    { title: 'Account details', description: 'Name, email, password', state: 'current' as const },
+    { title: 'Billing', description: 'Payment method' },
+    { title: 'Confirm', description: 'Review and submit' },
+  ];
+
+  return <Stepper steps={steps} direction="vertical" />;
+}
+```
+
+### Horizontal Stepper
+
+```tsx
+<Stepper steps={steps} direction="horizontal" />
+```
+
+### With Surface Container
+
+Wraps the stepper in a tinted card (background-secondary + overlay-mono). Recommended when embedding inside a `Drawer` sidebar.
+
+```tsx
+<Stepper steps={steps} direction="vertical" surface />
+```
+
+### Interactive (Clickable Steps)
+
+```tsx
+import React, { useState } from 'react';
+import { Stepper, type StepType } from '@xsolla/xui-b2b-stepper';
+
+const STEPS = [
+  { title: 'Account details', description: 'Name, email, password' },
+  { title: 'Billing', description: 'Payment method' },
+  { title: 'Confirm', description: 'Review and submit' },
+];
+
+export default function ClickableStepper() {
+  const [active, setActive] = useState(1);
+
+  const steps: StepType[] = STEPS.map((s, i) => ({
+    ...s,
+    state:
+      i + 1 < active ? 'complete' :
+      i + 1 === active ? 'current' : 'incomplete',
+  }));
+
+  return (
+    <Stepper
+      steps={steps}
+      direction="vertical"
+      onClick={({ number }) => setActive(number)}
+    />
+  );
+}
+```
+
+### Simple (Numbers Only)
+
+Renders only the numbered chip without heading, description, or caption. Best for horizontal status bars.
+
+```tsx
+<Stepper
+  steps={[
+    { title: 'Step 1', state: 'complete' },
+    { title: 'Step 2', state: 'current' },
+    { title: 'Step 3' },
+  ]}
+  direction="horizontal"
+  simple
+/>
+```
+
+### With Step Captions
+
+Small caption text rendered above the title (e.g. "Optional", "Step 1 of 3").
+
+```tsx
+<Stepper
+  steps={[
+    { caption: 'Step 1', title: 'Account details', state: 'current' },
+    { caption: 'Step 2', title: 'Billing' },
+    { caption: 'Step 3', title: 'Confirm' },
+  ]}
+  direction="vertical"
+/>
+```
+
+### All Step States
+
+```tsx
+<Stepper
+  direction="vertical"
+  steps={[
+    { title: 'Complete',   state: 'complete' },
+    { title: 'Current',    state: 'current' },
+    { title: 'Loading',    state: 'loading' },
+    { title: 'Warning',    state: 'warning' },
+    { title: 'Alert',      state: 'alert' },
+    { title: 'Incomplete', state: 'incomplete' },
+  ]}
+/>
+```
+
+## API Reference
+
+### Stepper
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `steps` | `StepType[]` | — | Array of step definitions. |
+| `direction` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction. |
+| `surface` | `boolean` | `false` | Wrap in a tinted surface card (background-secondary + overlay-mono, radius 8). |
+| `simple` | `boolean` | `false` | Render chip only — no title, description, or caption. |
+| `onClick` | `StepClickType` | — | Called when a step is clicked. Receives `{ number, step }`. |
+| `aria-label` | `string` | auto | Accessible label for the stepper navigation. Defaults to `"Stepper with N steps"`. |
+| `className` | `string` | — | CSS class applied to the root element. |
+| `themeMode` | `string` | — | Override the global theme mode for this component. |
+| `themeProductContext` | `string` | — | Override the global product context for this component. |
+
+### StepType
+
+| Field | Type | Default | Description |
+| :---- | :--- | :------ | :---------- |
+| `title` | `ReactNode` | — | Step heading. |
+| `description` | `ReactNode` | — | Secondary text below the title. |
+| `caption` | `ReactNode` | — | Small caption rendered above the title (body-xs, tertiary color). |
+| `state` | `StepStateType` | `"incomplete"` | Visual state of the step. |
+| `disabled` | `boolean` | `false` | Prevents click interaction. |
+| `noClick` | `boolean` | `false` | Suppresses click even when `onClick` is provided. |
+| `key` | `string` | — | Stable React key override (falls back to index). |
+
+### StepStateType
+
+| Value | Appearance |
+| :---- | :--------- |
+| `"current"` | Active step — highlighted chip, white card background. |
+| `"complete"` | Finished — checkmark icon in chip. |
+| `"incomplete"` | Future step — muted appearance. |
+| `"loading"` | In progress — spinner in chip, card background. |
+| `"warning"` | Needs attention — warning icon in chip, card background. |
+| `"alert"` | Error/failed — alert icon in chip, card background. |
+
+### StepClickType
+
+```typescript
+type StepClickType = (args: { number: number; step: StepType }) => void;
+// number: 1-based index of the clicked step
+```
+
+## Accessibility
+
+- `role="navigation"` with `aria-label` on the root.
+- Active step marked with `aria-current="step"`.
+- Clickable steps use `role="button"`, `tabIndex={0}`, and respond to Enter/Space.
+- Disabled steps have `aria-disabled="true"`.
+- Connector lines between the last step are `aria-hidden`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-b2b-stepper",
-  "version": "0.148.0",
+  "version": "0.148.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-icons-base": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-core": "0.148.1",
+    "@xsolla/xui-icons-base": "0.148.1",
+    "@xsolla/xui-primitives-core": "0.148.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",