@xsolla/xui-stepper 0.141.0 → 0.141.1

package/README.md

@@ -1,244 +0,0 @@
-# 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