# Feedback Components

## Alerts

Alerts показывают inline-состояния и важные сообщения внутри страницы.

```html
<div class="alert alert-warning">
  <h3 class="alert-title">Needs review</h3>
  <p class="alert-text">Check configuration before publishing.</p>
</div>
```

Состояния:

- `.alert-success`
- `.alert-warning`
- `.alert-info`
- `.alert-danger`
- `.alert-error`

## Toasts

Toasts создаются через JS.

```js
GNexusUIKit.Toasts.createSuccess("Saved", "Changes applied").show();
GNexusUIKit.Toasts.createInfo("Queued", "Job started").show();
GNexusUIKit.Toasts.createWarning("Review", "Check before publishing").show();
GNexusUIKit.Toasts.createError("Failed", "Request failed").show();
```

`createSuccess` по умолчанию закрывает другие toast-ы и исчезает через `4000ms`.

## Modals

```js
const modal = GNexusUIKit.Modals.create("example-modal", {
  title: "Edit item",
  bodyText: "Modal content"
});

modal.show();
```

Используйте modal для blocking flow, подтверждения ввода или короткого edit-flow.

## Confirm Dialog

`confirmPopup` предназначен для подтверждения рискованного действия.

```js
GNexusUIKit.confirmPopup({
  title: "Delete item",
  text: "This action cannot be undone.",
  confirmText: "Delete",
  cancelText: "Cancel",
  onConfirm: () => {
    // delete item
  }
});
```

## Progress

Determinate progress:

```html
<div class="progress" style="--progress-value: 64">
  <div class="progress-bar"></div>
</div>
```

Usage meter:

```html
<div class="usage-meter">
  <div class="usage-meter-header">
    <span>Storage</span>
    <span>64%</span>
  </div>
  <div class="progress" style="--progress-value: 64">
    <div class="progress-bar"></div>
  </div>
</div>
```

## Skeleton

Skeleton используется для loading preview.

```html
<div class="skeleton-stack" aria-label="Loading preview">
  <span class="skeleton skeleton-title"></span>
  <span class="skeleton skeleton-line"></span>
  <span class="skeleton skeleton-line" style="width: 84%"></span>
  <span class="skeleton skeleton-block"></span>
</div>
```
