npm package: @revoui/alert
Description: A collection of alert components for the RevoUI library.
Latest version: 2.0.19

# @revoui/alert

A collection of versatile and customizable **Alert** and **Notification** components for React applications, part of the main [Revo UI](https://www.npmjs.com/org/revoui) library.

These components are built on a single, flexible base component (`MyAlert`) and provide simplified wrappers for common alert types, making it easy to implement both **static** and **dynamic** alerts in your projects.

---

## 📦 Installation

Install the package via npm:

```bash
npm install @revoui/alert
```

---

## 🚀 Usage

The library provides **five main exported components**:

* Four **pre-configured wrappers** (static usage).
* One **controller component** (`Alert`) for dynamic, state-managed notifications.

---

### 1. Pre-configured Wrappers (Static Usage)

Use the wrappers (`SuccessAlert`, `WarningAlert`, `ErrorAlert`, etc.) for quick, self-contained alerts.

```tsx
import { SuccessAlert, WarningAlert, ErrorAlert } from '@revoui/alert';

export default function StaticAlertExample() {
  return (
    <div className="space-y-4 p-6">
      <SuccessAlert
        title="Configuration Saved"
        message="Your new preferences have been successfully stored."
        shadow="lg"
      />
      <WarningAlert
        title="Check Required"
        message="A payment transaction is pending and requires immediate attention."
        rounded="xl"
      />
      <ErrorAlert
        title="Critical Failure"
        message="The server failed to respond due to a permissions issue."
        className="border border-red-300"
      />
    </div>
  );
}
```

---

### 2. Dynamic Controller (`Alert`)

Use the `Alert` component for **state-controlled** alerts, ideal for notifications triggered by user actions or async operations.

```tsx
import React, { useState } from 'react';
import { Alert, AlertProps } from '@revoui/alert';

type DynamicAlertState = Omit<AlertProps, 'message'> & {
  message?: string;
  type?: MyAlertProps['type'];
};

export default function DynamicAlertExample() {
  const [alertState, setAlertState] = useState<DynamicAlertState>({ message: '' });

  const showSuccessAlert = () => {
    setAlertState({
      type: "success",
      title: "Action Complete",
      message: "Data synchronization finished successfully.",
    });
    setTimeout(() => setAlertState({ message: '' }), 4000);
  };

  return (
    <div>
      <Alert alertState={alertState} setAlert={setAlertState} />
      <button onClick={showSuccessAlert}>
        Show Dynamic Success Alert
      </button>
    </div>
  );
}
```

---

## 🎨 Alert Types and Defaults

The `type` prop (or wrapper used) determines **default colors and icons**.

| Type     | Wrapper       | Icon Color  | Background Color | Purpose                     |
| -------- | ------------- | ----------- | ---------------- | --------------------------- |
| success  | SuccessAlert  | `green-500` | `green-100`      | Positive confirmation.      |
| danger   | ErrorAlert    | `red-500`   | `red-100`        | Critical failure/error.     |
| required | RequiredAlert | `red-500`   | `red-100`        | Strong emphasis/validation. |
| warning  | WarningAlert  | `amber-500` | `amber-100`      | Non-critical advisory.      |
| info     | -             | `blue-500`  | `blue-100`       | Neutral information.        |
| default  | -             | `gray-500`  | `gray-100`       | Generic notification.       |

---

## 🧩 Components

| Component    | Description                                                                            |
| ------------ | -------------------------------------------------------------------------------------- |
| **MyAlert**  | The core display component. Renders the icon, title, and message.                      |
| **Alert**    | The controller component. Uses `alertState` + `setAlert` to render alerts dynamically. |
| **Wrappers** | Pre-configured: `SuccessAlert`, `ErrorAlert`, `WarningAlert`, `RequiredAlert`.         |

---

## ⚙️ Props

### `AlertProps` (Wrappers)

Props available in all pre-configured alerts:

| Prop        | Type                  | Default | Description                  |
| ----------- | --------------------- | ------- | ---------------------------- |
| `message`   | `string \| ReactNode` | –       | Alert content.               |
| `title`     | `string`              | –       | Optional header text.        |
| `className` | `string`              | –       | Custom Tailwind classes.     |
| `color`     | `string`              | `white` | Overrides background color.  |
| `shadow`    | `string`              | –       | Tailwind shadow (e.g. `md`). |
| `rounded`   | `string`              | `lg`    | Border radius style.         |
| `textColor` | `string`              | –       | Override text color.         |
| `iconColor` | `string`              | –       | Override icon color.         |
| `iconBg`    | `string`              | –       | Override icon background.    |
| `iconRound` | `string`              | `full`  | Border radius for icon.      |

### `MyAlertProps` (Base Component)

Extends `AlertProps` with an explicit `type`:

| Prop   | Type        | Default   | Description                                                                          |
| ------ | ----------- | --------- | ------------------------------------------------------------------------------------ |
| `type` | `AlertType` | `warning` | Defines alert style (`success`, `info`, `danger`, `required`, `warning`, `default`). |

---

## 🔧 Customization

Easily override defaults with `iconColor`, `iconBg`, and `textColor`.

```tsx
<RequiredAlert 
  title="Custom Branding" 
  message="This alert uses custom purple styling."
  iconColor="purple-600"
  iconBg="purple-100"
  textColor="purple-800"
/>
```

---

## 📄 License

Licensed under the [MIT License](./LICENSE).

---

## 👥 Author

**Revoui Team**