@xsolla/xui-stepper 0.140.0-pr246.1776914902 → 0.141.0

package/README.md

@@ -0,0 +1,244 @@
+# Stepper
+
+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/native/index.js

@@ -30,7 +30,7 @@ module.exports = __toCommonJS(index_exports);
 // src/Stepper.tsx
 var import_react3 = require("react");
 
-// ../../foundation/primitives-native/src/Box.tsx
+// ../primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Box = ({
@@ -204,7 +204,7 @@ var Box = ({
   );
 };
 
-// ../../foundation/primitives-native/src/Text.tsx
+// ../primitives-native/src/Text.tsx
 var import_react_native2 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var roleMap = {
@@ -267,7 +267,7 @@ var Text = ({
   );
 };
 
-// ../../foundation/primitives-native/src/Spinner.tsx
+// ../primitives-native/src/Spinner.tsx
 var import_react_native3 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Spinner = ({
@@ -298,7 +298,7 @@ var Spinner = ({
 };
 Spinner.displayName = "Spinner";
 
-// ../../foundation/primitives-native/src/Divider.tsx
+// ../primitives-native/src/Divider.tsx
 var import_react_native4 = require("react-native");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Divider = ({
@@ -322,7 +322,7 @@ var Divider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style });
 };
 
-// ../../foundation/primitives-native/src/index.tsx
+// ../primitives-native/src/index.tsx
 var isWeb = false;
 
 // src/Stepper.tsx