@xsolla/xui-stepper 0.141.1 → 0.148.2

package/README.md

@@ -0,0 +1,246 @@
+# Stepper
+
+> **Deprecated.** For B2B surfaces, use [`@xsolla/xui-b2b-stepper`](./b2b-stepper.md) which implements the current Figma design. This package remains available for existing consumers of `@xsolla/xui-display` and will be removed in a future release.
+
+A cross-platform React stepper component that displays progress through a sequence of steps, supporting horizontal and vertical layouts with multiple step states.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-stepper
+# or
+yarn add @xsolla/xui-stepper
+```
+
+## Demo
+
+### Basic Stepper
+
+```tsx
+import * as React from 'react';
+import { Stepper } from '@xsolla/xui-stepper';
+
+export default function BasicStepper() {
+  const steps = [
+    { title: 'Account', state: 'complete' as const },
+    { title: 'Payment', state: 'current' as const },
+    { title: 'Review', state: 'incomplete' as const },
+  ];
+
+  return <Stepper steps={steps} />;
+}
+```
+
+### Vertical Stepper
+
+```tsx
+import * as React from 'react';
+import { Stepper } from '@xsolla/xui-stepper';
+
+export default function VerticalStepper() {
+  const steps = [
+    { title: 'Step 1', description: 'Account details', state: 'complete' as const },
+    { title: 'Step 2', description: 'Payment method', state: 'current' as const },
+    { title: 'Step 3', description: 'Order review', state: 'incomplete' as const },
+  ];
+
+  return <Stepper steps={steps} direction="vertical" />;
+}
+```
+
+### With States
+
+```tsx
+import * as React from 'react';
+import { Stepper } from '@xsolla/xui-stepper';
+
+export default function StepStates() {
+  const steps = [
+    { title: 'Complete', state: 'complete' as const },
+    { title: 'Warning', state: 'warning' as const },
+    { title: 'Alert', state: 'alert' as const },
+    { title: 'Loading', state: 'loading' as const },
+    { title: 'Current', state: 'current' as const },
+    { title: 'Incomplete', state: 'incomplete' as const },
+  ];
+
+  return <Stepper steps={steps} />;
+}
+```
+
+## Anatomy
+
+```jsx
+import { Stepper } from '@xsolla/xui-stepper';
+
+<Stepper
+  steps={steps}              // Array of step objects
+  direction="horizontal"     // horizontal or vertical
+  size="md"                   // s or m
+  variantUI="current"        // current or simple
+  palette="brand"            // brand or brandSecondary
+  tail={false}               // Show connecting line (simple variant)
+  onClick={handleClick}      // Step click handler
+  aria-label="Checkout"      // Accessible label
+/>
+```
+
+## Examples
+
+### Checkout Flow
+
+```tsx
+import * as React from 'react';
+import { Stepper } from '@xsolla/xui-stepper';
+
+export default function CheckoutFlow() {
+  const [currentStep, setCurrentStep] = React.useState(1);
+
+  const steps = [
+    { title: 'Cart', state: currentStep > 0 ? 'complete' as const : 'incomplete' as const },
+    { title: 'Shipping', state: currentStep === 1 ? 'current' as const : currentStep > 1 ? 'complete' as const : 'incomplete' as const },
+    { title: 'Payment', state: currentStep === 2 ? 'current' as const : currentStep > 2 ? 'complete' as const : 'incomplete' as const },
+    { title: 'Confirm', state: currentStep === 3 ? 'current' as const : 'incomplete' as const },
+  ];
+
+  return (
+    <div>
+      <Stepper
+        steps={steps}
+        onClick={({ number }) => setCurrentStep(number)}
+      />
+      <div style={{ marginTop: 24 }}>
+        <button onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}>Back</button>
+        <button onClick={() => setCurrentStep(Math.min(3, currentStep + 1))}>Next</button>
+      </div>
+    </div>
+  );
+}
+```
+
+### Registration Steps
+
+```tsx
+import * as React from 'react';
+import { Stepper } from '@xsolla/xui-stepper';
+
+export default function RegistrationSteps() {
+  const steps = [
+    { title: 'Email', description: 'Verify your email', state: 'complete' as const },
+    { title: 'Profile', description: 'Set up your profile', state: 'current' as const },
+    { title: 'Preferences', description: 'Customize settings', state: 'incomplete' as const },
+  ];
+
+  return (
+    <Stepper
+      steps={steps}
+      direction="vertical"
+      variantUI="current"
+      size="md"
+    />
+  );
+}
+```
+
+### Simple Variant with Tail
+
+```tsx
+import * as React from 'react';
+import { Stepper } from '@xsolla/xui-stepper';
+
+export default function SimpleStepper() {
+  const steps = [
+    { title: 'Step 1', state: 'complete' as const },
+    { title: 'Step 2', state: 'current' as const },
+    { title: 'Step 3', state: 'incomplete' as const },
+  ];
+
+  return <Stepper steps={steps} variantUI="simple" tail />;
+}
+```
+
+### Order Tracking
+
+```tsx
+import * as React from 'react';
+import { Stepper } from '@xsolla/xui-stepper';
+
+export default function OrderTracking() {
+  const steps = [
+    { title: 'Order Placed', description: 'Jan 20, 2024', state: 'complete' as const },
+    { title: 'Processing', description: 'Jan 21, 2024', state: 'complete' as const },
+    { title: 'Shipped', description: 'In transit', state: 'loading' as const },
+    { title: 'Delivered', state: 'incomplete' as const },
+  ];
+
+  return (
+    <Stepper
+      steps={steps}
+      direction="vertical"
+      palette="brand"
+    />
+  );
+}
+```
+
+## API Reference
+
+### Stepper
+
+**StepperProps:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| steps | `StepType[]` | - | Array of step definitions. |
+| direction | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction. |
+| size | `"sm" \| "md"` | `"md"` | Step size. |
+| variantUI | `"current" \| "simple"` | `"current"` | Visual variant. |
+| palette | `"brand" \| "brandSecondary"` | `"brand"` | Color palette. |
+| tail | `boolean` | `false` | Show connecting lines (simple variant). |
+| onClick | `StepClickType` | - | Step click handler. |
+| aria-label | `string` | - | Accessible label for stepper. |
+
+**StepType:**
+
+```typescript
+interface StepType {
+  title: string | ReactElement;
+  description?: string | ReactElement;
+  state?: "current" | "incomplete" | "loading" | "complete" | "alert" | "warning";
+  disabled?: boolean;
+  key?: string;
+  noClick?: boolean;
+}
+```
+
+**StepClickType:**
+
+```typescript
+type StepClickType = ({ number, step }: { number: number; step: StepType }) => void;
+```
+
+## Step States
+
+| State | Description |
+| :---- | :---------- |
+| `current` | Active step, highlighted with brand color |
+| `complete` | Finished step with checkmark |
+| `incomplete` | Future step, muted appearance |
+| `loading` | Step in progress with spinner |
+| `alert` | Error state with alert color |
+| `warning` | Warning state with warning color |
+
+## UI Variants
+
+| Variant | Description |
+| :------ | :---------- |
+| `current` | Traditional stepper with step indicators and border line |
+| `simple` | Minimalist stepper with optional connecting tail |
+
+## Accessibility
+
+- Stepper uses `role="navigation"` for semantic meaning
+- Each step is keyboard accessible when clickable
+- `aria-label` provides context for screen readers
+- Step states are conveyed through visual and accessible means
+- Disabled steps are properly announced

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@xsolla/xui-stepper",
-  "version": "0.141.1",
+  "version": "0.148.2",
+  "deprecated": "Use @xsolla/xui-b2b-stepper for B2B surfaces. This package will be removed in a future release.",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -14,9 +15,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.141.1",
-    "@xsolla/xui-icons": "0.141.1",
-    "@xsolla/xui-primitives-core": "0.141.1"
+    "@xsolla/xui-core": "0.148.2",
+    "@xsolla/xui-icons": "0.148.2",
+    "@xsolla/xui-primitives-core": "0.148.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",