# Alert: API

## Пропсы корня

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `variant` | `AlertVariant` | `'info'` | Нет | Визуальный стиль алерта. Определяет цвет фона, рамку и стиль иконки. 'success': обозначает положительное или успешное действие; 'error': обозначает ошибку или сбой; 'warning': обозначает предупреждение или риск; 'info': нейтральное информационное сообщение |
| `appearance` | `AlertAppearance` | `'fill'` | Нет | Внешний вид бейджа. Определяет стилизацию бейджа (фон, рамка и т. д.). |

Также принимает `ref` и все атрибуты `<div>`.

## Дочерние части

- `AlertIcon`: слот семантической иконки.
- `AlertMain`: обёртка основного текста.
- `AlertTitle`: необязательный текст заголовка.
- `AlertContent`: поясняющий текст сообщения.

### `AlertIcon`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `size` | `IconSize` | — | Нет | Предопределённый токен размера иконки. Может быть переопределён явными шириной и высотой. |
| `ref` | `Ref<SVGSVGElement>` | — | Нет | Ref на SVG-элемент |
| `strokeWidth` | `number` | — | Нет | Толщина обводки линий и фигур SVG (в px или pt). |
| `children` | `ReactNode` | — | Нет | Содержимое иконки (обязательно). Принимает: иконки из `~/icons`; собственный встроенный SVG; компоненты иконок сторонних библиотек (например, Lucide, Tabler) |

Также принимает все HTML-атрибуты.

### `AlertMain`

Также принимает все атрибуты `<div>`.

### `AlertTitle`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `size` | `TextSize` | — | Нет | Визуальный размер текста, обычно соответствует типографической шкале дизайн-системы. |
| `asChild` | `boolean` | — | Нет | Если true, рендерит текст как дочерний компонент через `Slot`. Полезно для совместимости с нативными элементами или другими компонентами. |
| `fontWeight` | `400 \| 500 \| 600 \| 700 \| 900` | — | Нет | Насыщенность шрифта текста. Распространённые значения: 400: обычный; 500: средний; 600: полужирный; 700: жирный; 900: сверхжирный |
| `ref` | `Ref<HTMLSpanElement>` | — | Нет | Ref на нижележащий `<span>` или элемент в слоте. Полезен для измерений, фокуса или работы с DOM. |

Также принимает все атрибуты `<span>`.

### `AlertContent`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `size` | `TextSize` | — | Нет | Визуальный размер текста, обычно соответствует типографической шкале дизайн-системы. |
| `asChild` | `boolean` | — | Нет | Если true, рендерит текст как дочерний компонент через `Slot`. Полезно для совместимости с нативными элементами или другими компонентами. |
| `fontWeight` | `400 \| 500 \| 600 \| 700 \| 900` | — | Нет | Насыщенность шрифта текста. Распространённые значения: 400: обычный; 500: средний; 600: полужирный; 700: жирный; 900: сверхжирный |
| `ref` | `Ref<HTMLSpanElement>` | — | Нет | Ref на нижележащий `<span>` или элемент в слоте. Полезен для измерений, фокуса или работы с DOM. |

Также принимает все атрибуты `<span>`.

## Типы

- `AlertProps`
- `AlertIconProps`
- `AlertMainProps`
- `AlertTitleProps`
- `AlertContentProps`

## Модель состояния

- С точки зрения API компонента `Alert` не имеет состояния.
- Обычно состояние на стороне потребителя решает, рендерится ли алерт, скрыт ли он или заменён.
- `useAlertContext` доступен для продвинутых обёрток и собственных дочерних частей.