# Steps

> Molecule — 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 steps
```

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

Depende de: core (theme + icons)

## Variantes

### A checkout in progress — on the Payment step

```tsx
<Steps steps={STEPS} current={1} />
```

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

```tsx
<Steps steps={STEPS} current={2} completedIndicator="number" />
```

### orientation="vertical" — reads better with long descriptions

```tsx
<Steps steps={STEPS} current={1} orientation="vertical" />
```

### Before you start — nothing completed yet

```tsx
<Steps steps={STEPS} current={0} />
```

### All done — every step completed

```tsx
<Steps steps={STEPS} current={3} />
```

### Long labels — the row scrolls instead of breaking words

```tsx
<Steps steps={LONG_STEPS} current={3} />
```

### onStepPress — let people jump back and fix a step

```tsx
<View style={{ gap: 16 }}>
  <Steps steps={STEPS} current={current} onStepPress={setCurrent} />
  <Button
    title="Advance"
    variant="outline"
    onPress={() => setCurrent((c) => Math.min(c + 1, STEPS.length))}
  />
</View>
```

## Código completo del demo

```tsx
const variants: VariantDef[] = [
  {
    label: 'A checkout in progress — on the Payment step',
    content: <Steps steps={STEPS} current={1} />,
  },
  {
    label: 'completedIndicator="number" — the step count instead of a check',
    content: <Steps steps={STEPS} current={2} completedIndicator="number" />,
  },
  {
    label: 'orientation="vertical" — reads better with long descriptions',
    content: <Steps steps={STEPS} current={1} orientation="vertical" />,
  },
  {
    label: 'Before you start — nothing completed yet',
    content: <Steps steps={STEPS} current={0} />,
  },
  {
    label: 'All done — every step completed',
    content: <Steps steps={STEPS} current={3} />,
  },
  {
    // Cada paso tiene ancho mínimo: la fila scrollea antes que apretar las
    // columnas y dejar que RN parta las etiquetas a la mitad.
    label: 'Long labels — the row scrolls instead of breaking words',
    content: <Steps steps={LONG_STEPS} current={3} />,
  },
  {
    label: 'onStepPress — let people jump back and fix a step',
    content: (
      <View style={{ gap: 16 }}>
        <Steps steps={STEPS} current={current} onStepPress={setCurrent} />
        <Button
          title="Advance"
          variant="outline"
          onPress={() => setCurrent((c) => Math.min(c + 1, STEPS.length))}
        />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `steps` | `StepItem[]` | — | — |
| `current` | `number` | — | Índice del paso actual (0-based). Los anteriores quedan como 'completed'. |
| `orientation?` | `'horizontal' \| 'vertical'` | horizontal | — |
| `completedIndicator?` | `'number' \| 'check'` | check | Qué muestra el círculo de un paso ya completado: un check, o su número. |
| `onStepPress?` | `(index: number) => void` | — | Si se pasa, cada paso es tocable y reporta su índice. |
| `style?` | `StyleProp<ViewStyle>` | — | — |