# OptionCard

> 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 option-card
```

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

Depende de: core (theme + icons), pressable-scale

## Variantes

### layout="horizontal"

```tsx
<View style={{ flexDirection: 'row', gap: 8 }}>
  <OptionCard label="Cash" iconName="check" isSelected={selected === 'cash'} onPress={() => setSelected('cash')} />
  <OptionCard label="Card" iconName="info" isSelected={selected === 'card'} onPress={() => setSelected('card')} />
</View>
```

### layout="vertical"

```tsx
<View style={{ flexDirection: 'row', gap: 8 }}>
  <OptionCard
    label="Cash"
    iconName="check"
    layout="vertical"
    isSelected={selectedVertical === 'cash'}
    onPress={() => setSelectedVertical('cash')}
  />
  <OptionCard
    label="Card"
    iconName="info"
    layout="vertical"
    isSelected={selectedVertical === 'card'}
    onPress={() => setSelectedVertical('card')}
  />
  <OptionCard
    label="Transfer"
    iconName="search"
    layout="vertical"
    isSelected={selectedVertical === 'transfer'}
    onPress={() => setSelectedVertical('transfer')}
  />
</View>
```

## Código completo del demo

```tsx
const variants: VariantDef[] = [
  {
    label: 'layout="horizontal"',
    content: (
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <OptionCard label="Cash" iconName="check" isSelected={selected === 'cash'} onPress={() => setSelected('cash')} />
        <OptionCard label="Card" iconName="info" isSelected={selected === 'card'} onPress={() => setSelected('card')} />
      </View>
    ),
  },
  {
    label: 'layout="vertical"',
    content: (
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <OptionCard
          label="Cash"
          iconName="check"
          layout="vertical"
          isSelected={selectedVertical === 'cash'}
          onPress={() => setSelectedVertical('cash')}
        />
        <OptionCard
          label="Card"
          iconName="info"
          layout="vertical"
          isSelected={selectedVertical === 'card'}
          onPress={() => setSelectedVertical('card')}
        />
        <OptionCard
          label="Transfer"
          iconName="search"
          layout="vertical"
          isSelected={selectedVertical === 'transfer'}
          onPress={() => setSelectedVertical('transfer')}
        />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `label` | `string` | — | — |
| `description?` | `string` | — | Línea secundaria: el detalle que decide la elección ("llega en 3 días"). |
| `iconName?` | `IconName` | — | — |
| `isSelected` | `boolean` | — | — |
| `onPress` | `() => void` | — | — |
| `disabled?` | `boolean` | false | — |
| `layout?` | `'vertical' \| 'horizontal'` | horizontal | 'vertical': ícono arriba, texto centrado abajo. 'horizontal': en fila. |
| `style?` | `StyleProp<ViewStyle>` | — | — |