# Wizard

> Organism — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add wizard
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { Wizard } from 'orn-ui/wizard';
```

Depende de: core (theme + icons), steps, button, transition

## Variantes

### A simple 3-step flow — Wizard tracks the current step itself

```tsx
<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} onFinish={() => {}} />
</View>
```

### orientation="vertical" — the step list runs down the side

```tsx
<View style={{ height: 380 }}>
  <Wizard steps={SIMPLE} orientation="vertical" onFinish={() => {}} />
</View>
```

### completedIndicator="number" — count instead of a check

```tsx
<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} completedIndicator="number" onFinish={() => {}} />
</View>
```

### A real signup — Next stays disabled until the step is valid

```tsx
<View style={{ height: 340 }}>
  <Wizard steps={validated} nextLabel="Continue" finishLabel="Create account" onFinish={() => {}} />
</View>
```

### Custom labels — rename Back / Next / Finish

```tsx
<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} backLabel="Previous" nextLabel="Continue" finishLabel="Done" onFinish={() => {}} />
</View>
```

## Código completo del demo

```tsx
const variants: VariantDef[] = [
  {
    label: 'A simple 3-step flow — Wizard tracks the current step itself',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'orientation="vertical" — the step list runs down the side',
    content: (
      <View style={{ height: 380 }}>
        <Wizard steps={SIMPLE} orientation="vertical" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'completedIndicator="number" — count instead of a check',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} completedIndicator="number" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'A real signup — Next stays disabled until the step is valid',
    content: (
      <View style={{ height: 340 }}>
        <Wizard steps={validated} nextLabel="Continue" finishLabel="Create account" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'Custom labels — rename Back / Next / Finish',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} backLabel="Previous" nextLabel="Continue" finishLabel="Done" onFinish={() => {}} />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `steps` | `WizardStep[]` | — | — |
| `current?` | `number` | — | Paso actual (controlado). Si se omite, el Wizard maneja su propio estado. |
| `onStepChange?` | `(index: number) => void` | — | — |
| `onFinish?` | `() => void` | — | — |
| `orientation?` | `'horizontal' \| 'vertical'` | horizontal | — |
| `completedIndicator?` | `'number' \| 'check'` | check | — |
| `allowStepNavigation?` | `boolean` | true | Permite volver a un paso ya completado tocándolo en el indicador. |
| `backLabel?` | `string` | Back | — |
| `nextLabel?` | `string` | Next | — |
| `finishLabel?` | `string` | Finish | — |
| `scrollableContent?` | `boolean` | true | El contenido del paso scrollea cuando no entra. Ponelo en false solo si un paso renderiza su propia lista virtualizada (anidar una VirtualizedList dentro de un ScrollView rompe la virtualización). |
| `animated?` | `boolean` | true | El contenido del paso entra deslizándose en el sentido de la navegación. Solo opacity y transform, así que la animación corre en el hilo nativo. |
| `style?` | `StyleProp<ViewStyle>` | — | — |