# Stepper

> 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 stepper
```

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

Depende de: core (theme + icons)

## Variantes

### size="md"

```tsx
<Stepper
  value={qty}
  onChangeText={setQty}
  onIncrement={() => setQty((q) => String(Number(q) + 1))}
  onDecrement={() => setQty((q) => String(Math.max(0, Number(q) - 1)))}
/>
```

### size="sm"

```tsx
<Stepper
  value={qtySmall}
  onChangeText={setQtySmall}
  onIncrement={() => setQtySmall((q) => String(Number(q) + 1))}
  onDecrement={() => setQtySmall((q) => String(Math.max(0, Number(q) - 1)))}
  size="sm"
/>
```

## Código completo del demo

```tsx
const variants: VariantDef[] = [
  {
    label: 'size="md"',
    content: (
      <Stepper
        value={qty}
        onChangeText={setQty}
        onIncrement={() => setQty((q) => String(Number(q) + 1))}
        onDecrement={() => setQty((q) => String(Math.max(0, Number(q) - 1)))}
      />
    ),
  },
  {
    label: 'size="sm"',
    content: (
      <Stepper
        value={qtySmall}
        onChangeText={setQtySmall}
        onIncrement={() => setQtySmall((q) => String(Number(q) + 1))}
        onDecrement={() => setQtySmall((q) => String(Math.max(0, Number(q) - 1)))}
        size="sm"
      />
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `value` | `string` | — | — |
| `onChangeText` | `(text: string) => void` | — | — |
| `onIncrement` | `() => void` | — | — |
| `onDecrement` | `() => void` | — | — |
| `size?` | `'sm' \| 'md' \| 'lg'` | md | Escala del control: alto, botones, ícono y tipografía. |
| `block?` | `boolean` | false | Ocupa todo el ancho disponible y el input absorbe el espacio extra. |
| `editable?` | `boolean` | true | En false el valor solo se cambia con los botones: el teclado no se abre y el campo pierde el fondo que lo anuncia como editable. |
| `min?` | `number` | — | Mínimo permitido. Deshabilita "-" al alcanzarlo y acota lo tipeado al salir del campo. Los negativos se aceptan solo si `min` es negativo. |
| `max?` | `number` | — | Máximo permitido. Deshabilita "+" al alcanzarlo y acota lo tipeado. |
| `allowDecimals?` | `boolean` | false | Acepta separador decimal, normalizando la coma a punto. |
| `style?` | `StyleProp<ViewStyle>` | — | — |
| `incrementAccessibilityLabel?` | `string` | Increment | — |
| `decrementAccessibilityLabel?` | `string` | Decrement | — |