# AlertCallout

A prominent alert component used to display important information or notifications.

---

## Installation

```bash
npm install @cleartrip/ct-design-alert-callout
# or
pnpm add @cleartrip/ct-design-alert-callout
```

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic

```tsx
import { AlertCallout } from '@cleartrip/ct-design-alert-callout';

function Example() {
  return (
    <AlertCallout>
      {/* Basic usage */}
    </AlertCallout>
  );
}
```

---

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `variant` | `AlertCalloutVariant` | — | No | The variant of the alert callout. |
| `prefixIconNode` | `ReactNode` | — | No | Prefix icon rendered on the leading edge of the callout. |
| `textNode` | `ReactNode` | — | ✅ Yes | Main content of the callout. When a string is provided, it is rendered |
| `rightActionNode` | `ReactNode` | — | No | Action node rendered on the trailing edge of the callout. |
| `description` | `ReactNode` | — | No | Optional description content rendered below the main callout row. |
| `onClick` | `() => void` | — | No | Callback fired when the root container is clicked. |
| `styleConfig` | `IAlertCalloutStyleConfig` | — | No | Style configuration overrides for each internal container. |

---

## AlertCalloutVariants

- `SUCCESS` — success
- `ERROR` — error
- `WARNING` — warning
- `INFO` — info
- `NEUTRAL` — neutral
- `BONVOY_BRIEF` — bonvoy_brief
- `BONVOY_COMPACT` — bonvoy_compact
---

## Accessibility

- The component follows accessibility best practices
- Ensure proper ARIA attributes are provided where needed
- Test with screen readers to ensure usability

---

## Migration

If migrating from a previous version:

```diff
- import { AlertCallout } from 'yagami/core/components';
+ import { AlertCallout } from '@cleartrip/ct-design-alert-callout';
```