# Modal

A modal overlay component for displaying content above the main interface.

---

## Installation

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

### 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 { Modal } from '@cleartrip/ct-design-modal';

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

---

## ModalSize

- `SMALL` — SMALL
- `MEDIUM` — MEDIUM
- `LARGE` — LARGE
- `FULL_SCREEN` — FULL_SCREEN
- `NONE` — NONE
- `REGULAR` — REGULAR
- `BIG` — BIG
---

## ModalVariant

- `DARK` — dark
- `NEUTRAL` — neutral
---

## ModalPlacement

- `CENTER` — center
- `BOTTOM` — bottom
---

## ActionButtonVariant

- `BACK` — back
- `CLOSE` — close
- `NONE` — none
---

## ActionButtonAlignment

- `CENTER` — center
- `LEFT` — left
- `RIGHT` — right
---

## 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 { Modal } from 'yagami/core/components';
+ import { Modal } from '@cleartrip/ct-design-modal';
```