# Alert

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

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

Depende de: core (theme + icons), button

## Variantes

### success

```tsx
<>
  <Button title="Show success" variant="outline" onPress={() => setVisible('success')} />
  <OrnAlert visible={visible === 'success'} title="Invoice sent" type="success" onClose={() => setVisible(null)} />
</>
```

### error

```tsx
<>
  <Button title="Show error" variant="outline" onPress={() => setVisible('error')} />
  <OrnAlert visible={visible === 'error'} title="Payment failed" message="Please try another card." type="error" onClose={() => setVisible(null)} />
</>
```

### warning

```tsx
<>
  <Button title="Show warning" variant="outline" onPress={() => setVisible('warning')} />
  <OrnAlert visible={visible === 'warning'} title="Unsaved changes" message="You'll lose your edits." type="warning" onClose={() => setVisible(null)} />
</>
```

### question (confirm)

```tsx
<>
  <Button title="Delete invoice" variant="destructive" onPress={() => setVisible('question')} />
  <OrnAlert
    visible={visible === 'question'}
    title="Delete invoice?"
    message="This cannot be undone."
    type="question"
    confirmText="Delete"
    cancelText="Cancel"
    onConfirm={() => setVisible(null)}
    onCancel={() => setVisible(null)}
  />
</>
```

### showConfirm() — from outside the component, no hook

```tsx
<Button title="Delete invoice (imperative)" variant="destructive" onPress={() => deleteInvoice('4821')} />
```

### custom buttons

```tsx
<>
  <Button title="Show custom buttons" variant="outline" onPress={() => setVisible('custom')} />
  <OrnAlert
    visible={visible === 'custom'}
    title="Export invoice"
    type="info"
    buttons={[
      { text: 'PDF', onPress: () => setVisible(null) },
      { text: 'CSV', onPress: () => setVisible(null) },
      { text: 'Cancel', style: 'cancel', variant: 'outline', onPress: () => setVisible(null) },
    ]}
  />
</>
```

## Código completo del demo

```tsx
const variants: VariantDef[] = [
  {
    label: 'success',
    content: (
      <>
        <Button title="Show success" variant="outline" onPress={() => setVisible('success')} />
        <OrnAlert visible={visible === 'success'} title="Invoice sent" type="success" onClose={() => setVisible(null)} />
      </>
    ),
  },
  {
    label: 'error',
    content: (
      <>
        <Button title="Show error" variant="outline" onPress={() => setVisible('error')} />
        <OrnAlert visible={visible === 'error'} title="Payment failed" message="Please try another card." type="error" onClose={() => setVisible(null)} />
      </>
    ),
  },
  {
    label: 'warning',
    content: (
      <>
        <Button title="Show warning" variant="outline" onPress={() => setVisible('warning')} />
        <OrnAlert visible={visible === 'warning'} title="Unsaved changes" message="You'll lose your edits." type="warning" onClose={() => setVisible(null)} />
      </>
    ),
  },
  {
    label: 'question (confirm)',
    content: (
      <>
        <Button title="Delete invoice" variant="destructive" onPress={() => setVisible('question')} />
        <OrnAlert
          visible={visible === 'question'}
          title="Delete invoice?"
          message="This cannot be undone."
          type="question"
          confirmText="Delete"
          cancelText="Cancel"
          onConfirm={() => setVisible(null)}
          onCancel={() => setVisible(null)}
        />
      </>
    ),
  },
  {
    label: 'showConfirm() — from outside the component, no hook',
    content: <Button title="Delete invoice (imperative)" variant="destructive" onPress={() => deleteInvoice('4821')} />,
  },
  {
    label: 'custom buttons',
    content: (
      <>
        <Button title="Show custom buttons" variant="outline" onPress={() => setVisible('custom')} />
        <OrnAlert
          visible={visible === 'custom'}
          title="Export invoice"
          type="info"
          buttons={[
            { text: 'PDF', onPress: () => setVisible(null) },
            { text: 'CSV', onPress: () => setVisible(null) },
            { text: 'Cancel', style: 'cancel', variant: 'outline', onPress: () => setVisible(null) },
          ]}
        />
      </>
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `visible` | `boolean` | — | — |
| `title` | `string` | — | — |
| `message?` | `string` | — | — |
| `type?` | `'success' \| 'error' \| 'warning' \| 'info' \| 'question'` | info | — |
| `onClose?` | `() => void` | — | — |
| `buttons?` | `AlertButton[]` | — | — |
| `confirmText?` | `string` | — | — |
| `cancelText?` | `string` | — | — |
| `onConfirm?` | `() => void` | — | — |
| `onCancel?` | `() => void` | — | — |
| `inline?` | `boolean` | false | — |