# Toast

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

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

Depende de: core (theme + icons), transition

## Variantes

### Static (placed by hand, no provider)

```tsx
<View style={{ gap: 8 }}>
  <Toast title="Invoice sent" message="Sent to acme@studio.com" variant="success" />
  <Toast title="Payment failed" variant="error" onDismiss={() => {}} />
</View>
```

## Código completo del demo

```tsx
const variants: VariantDef[] = [
  {
    label: 'Imperative — useToast().show()',
    content: (
      <View style={{ gap: 8 }}>
        <Button title="Success" onPress={() => show({ title: 'Invoice sent', variant: 'success' })} />
        <Button
          title="Error"
          variant="outline"
          onPress={() => show({ title: 'Payment failed', message: 'Try another card.', variant: 'error' })}
        />
        <Button
          title="Warning"
          variant="outline"
          onPress={() => show({ title: 'Unsaved changes', variant: 'warning' })}
        />
        <Button title="Info" variant="outline" onPress={() => show({ title: 'Syncing…', variant: 'info' })} />
      </View>
    ),
  },
  {
    label: 'From business logic — showToast()/showConfirm(), no hook',
    content: (
      <View style={{ gap: 8 }}>
        <Body>Both buttons call a plain async function that imports showToast/showConfirm/showAlert.</Body>
        <Button title="Delete invoice #4821" variant="outline" onPress={() => deleteInvoice('4821')} />
        <Button title="Sync (fails)" variant="outline" onPress={() => syncInvoices()} />
      </View>
    ),
  },
  {
    label: 'Options: duration, tappable, stacking',
    content: (
      <View style={{ gap: 8 }}>
        <Button
          title="Stays until dismissed"
          variant="outline"
          onPress={() => show({ title: 'Sticky toast', message: 'duration: 0', duration: 0 })}
        />
        <Button
          title="Tappable"
          variant="outline"
          onPress={() => show({ title: 'Tap me', message: 'Runs onPress and closes', onPress: () => {} })}
        />
        <Button
          title="Fire three at once"
          variant="outline"
          onPress={() => {
            show({ title: 'First', variant: 'info' });
            show({ title: 'Second', variant: 'success' });
            show({ title: 'Third', variant: 'warning' });
          }}
        />
        <Button title="Dismiss all" variant="ghost" onPress={hideAll} />
      </View>
    ),
  },
  {
    label: 'Static (placed by hand, no provider)',
    content: (
      <View style={{ gap: 8 }}>
        <Toast title="Invoice sent" message="Sent to acme@studio.com" variant="success" />
        <Toast title="Payment failed" variant="error" onDismiss={() => {}} />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `title` | `string` | — | — |
| `message?` | `string` | — | — |
| `variant?` | `'success' \| 'error' \| 'warning' \| 'info'` | info | — |
| `onPress?` | `() => void` | — | Se dispara al tocar el toast (además de cerrarlo). |
| `onDismiss?` | `() => void` | — | — |
| `hideCloseButton?` | `boolean` | — | Esconde la X de cerrar. El toast sigue auto-cerrándose por timeout. |
| `style?` | `StyleProp<ViewStyle>` | — | — |
