sigpro-ui/docs/components/alert.md

# Alert

Alert component for displaying contextual messages, notifications, and feedback with different severity levels. Supports soft and solid variants.

## Tag

`Alert`

## Props

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `children` | `string \| VNode \| Array<VNode>` | Required | Alert content |

## Styling

Alert supports all **daisyUI Alert classes**:

| Category | Classes | Description |
| :--- | :--- | :--- |
| Color | `alert-info`, `alert-success`, `alert-warning`, `alert-error` | Alert type variants |
| Style | `alert-soft` (default), `alert-solid` | Visual style variants |

> For further details, check the [daisyUI Alert Documentation](https://daisyui.com/components/alert) – Full reference for CSS classes.

## Live Examples

### Basic Alerts

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```js
const { Alert, Div, mount } = window;

const BasicDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
    Alert({ class: 'alert-info' }, 'This is an informational message.'),
    Alert({ class: 'alert-success' }, 'Operation completed successfully!'),
    Alert({ class: 'alert-warning' }, 'Please review your input before proceeding.'),
    Alert({ class: 'alert-error' }, 'An error occurred while processing your request.')
  ]);
};
mount(BasicDemo, '#demo-basic');
```

### Soft vs Solid Variants

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```js
const { Alert, Div, mount } = window;

const VariantsDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
    Alert({ class: 'alert-info alert-soft' }, 'Soft info alert'),
    Alert({ class: 'alert-info alert-solid' }, 'Solid info alert'),
    Alert({ class: 'alert-success alert-soft' }, 'Soft success alert'),
    Alert({ class: 'alert-success alert-solid' }, 'Solid success alert')
  ]);
};
mount(VariantsDemo, '#demo-variants');
```

### With Actions

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```js
const { Alert, Button, Div, mount, Toast } = window;

const ActionsDemo = () => {
  const showUndo = $(false);
  const deletedItem = $(null);
  
  const deleteItem = (item) => {
    deletedItem(item);
    showUndo(true);
    setTimeout(() => {
      if (showUndo()) {
        showUndo(false);
        Toast('Item permanently deleted', 'alert-info', 2000);
      }
    }, 5000);
  };
  
  const undoDelete = () => {
    showUndo(false);
    Toast(`Restored: ${deletedItem()}`, 'alert-success', 2000);
  };
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'flex gap-2' }, [
      Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document A') }, 'Delete Document A'),
      Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document B') }, 'Delete Document B')
    ]),
    () => showUndo() ? Alert({ class: 'alert-warning alert-soft flex justify-between items-center' }, [
      Span({}, `Deleted: ${deletedItem()}`),
      Button({ class: 'btn btn-sm btn-primary', onclick: undoDelete }, 'Undo')
    ]) : null
  ]);
};
mount(ActionsDemo, '#demo-actions');
```

### Dismissible Alert

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-dismissible" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```js
const { Alert, Button, Div, mount } = window;

const DismissibleDemo = () => {
  const visible = $(true);
  
  return Div({ class: 'flex flex-col gap-3' }, [
    () => visible() ? Alert({ class: 'alert-info flex justify-between items-center' }, [
      Span({}, 'This alert can be dismissed. Click the X button to close.'),
      Button({ class: 'btn btn-xs btn-circle btn-ghost', onclick: () => visible(false) }, '✕')
    ]) : null,
    () => !visible() ? Button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null
  ]);
};
mount(DismissibleDemo, '#demo-dismissible');
```

### Reactive Alert

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```js
const { Alert, Div, Input, mount } = window;

const ReactiveDemo = () => {
  const email = $('');
  const error = $('');
  
  const validateEmail = (value) => {
    email(value);
    if (value && !value.includes('@')) {
      error('Please enter a valid email address');
    } else {
      error('');
    }
  };
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Input({
      class: 'input input-bordered',
      placeholder: 'Enter your email',
      value: email,
      oninput: (e) => validateEmail(e.target.value)
    }),
    () => error() ? Alert({ class: 'alert-error' }, error()) : null,
    () => email() && !error() ? Alert({ class: 'alert-success' }, `Valid email: ${email()}`) : null
  ]);
};
mount(ReactiveDemo, '#demo-reactive');
```

### All Types

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-all" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```js
const { Alert, Div, mount } = window;

const AllTypesDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
    Alert({ class: 'alert-info' }, 'ℹ️ This is an info alert'),
    Alert({ class: 'alert-success' }, '✅ This is a success alert'),
    Alert({ class: 'alert-warning' }, '⚠️ This is a warning alert'),
    Alert({ class: 'alert-error' }, '❌ This is an error alert')
  ]);
};
mount(AllTypesDemo, '#demo-all');
```