npm package: @kiyotakkkka/zvs-uikit-lib
Description: ```bash npm i @kiyotakkkka/zvs-uikit-lib ```
Author: KiyotakkkkA
Latest version: 2.0.4

# Установка UI-набора

### Шаг 1 - Установка в проект

```bash
npm i @kiyotakkkka/zvs-uikit-lib
```

### Шаг 2 - Настройка компонентов

<details><summary><b>Настройка для Tailwind 4</b></summary>

По умолчанию Tailwind 4 не смотрит директорию <b>node_modules</b> поэтому чтобы стилизация работала, нужно добавить в <b>.css</b> с объявлением директивы <b>@import "tailwindcss"</b>
строку:

```css
@source "../node_modules/@kiyotakkkka/zvs-uikit-lib/dist/**/*.{js,cjs,mjs,ts,tsx,jsx}";
```

</details>

<details><summary><b>Настройка для Tailwind 3</b></summary>

Если вы используете Tailwind 3, то нужно добавить в конфигурацию `tailwind.config.js` следующую строку:

```js
module.exports = {
    content: [
        "../node_modules/@kiyotakkkka/zvs-uikit-lib/dist/**/*.{js,cjs,mjs,ts,tsx,jsx}";,
        // другие пути...
    ],
    // остальные настройки...
};
```

</details>

### Шаг 3 - Цветовая палитра

Для корректного отображения компонентов, рекомендуется <b>ИСПОЛЬЗОВАТЬ СУЩЕСТВУЮЩУЮ ПАЛИТРУ НИЖЕ</b> или <b>ПЕРЕЗАПИСАТЬ СООТВЕТСТВУЮЩИЕ ПЕРЕМЕННЫЕ ПАЛИТРЫ</b>:

```css
@theme {
    --color-main-50: rgb(250 250 250);
    --color-main-100: rgb(245 245 245);
    --color-main-200: rgb(229 229 229);
    --color-main-300: rgb(212 212 212);
    --color-main-400: rgb(163 163 163);
    --color-main-500: rgb(115 115 115);
    --color-main-600: rgb(82 82 82);
    --color-main-700: rgb(64 64 64);
    --color-main-800: rgb(38 38 38);
    --color-main-900: rgb(23 23 23);
}
```

---

## Каталог компонентов и API

<a id="readme-nav"></a>

### Навигация

- [Компоненты](#components)
- [Хуки](#hooks)
- [Провайдеры](#providers)

<a id="components"></a>

### Компоненты (@kiyotakkkka/zvs-uikit-lib/ui)

### Компоненты: Ввод и управление формами

| Компонент          | Назначение                                                        |
| ------------------ | ----------------------------------------------------------------- |
| `Button`           | Базовая кнопка с вариантами цвета и формы.                        |
| `InputSmall`       | Однострочное поле ввода с сокрытием пароля для `type="password"`. |
| `InputBig`         | Многострочное поле ввода                                          |
| `InputCheckbox`    | Переключатель `True / False`                                      |
| `Select`           | Одиночный селектор                                                |
| `Dropdown`         | Выпадающее меню                                                   |
| `AutoFillSelector` | Множественный селектор с автозаполнением                          |
| `Switcher`         | Переключатель между несколькими вариантами.                       |

### Компоненты: Оверлеи и всплывающие элементы

| Компонент     | Назначение                                  |
| ------------- | ------------------------------------------- |
| `Modal`       | Модальное окно.                             |
| `SlidedPanel` | Боковая панель.                             |
| `Floating`    | Ховер/фокус-панель, привязанная к элементу. |

### Компоненты: Структура и композиция

| Компонент          | Назначение                                                    |
| ------------------ | ------------------------------------------------------------- |
| `Card`             | Контейнер с header/body/footer для карточек и секций.         |
| `Accordeon`        | Раскрывающаяся секция с кастомизируемым заголовком.           |
| `TreeView`         | Иерархический список, поддерживает виртуализацию.             |
| `TreeView.Catalog` | Раскрываемый каталог внутри `TreeView`.                       |
| `TreeView.Element` | Элемент внутри `TreeView`/`Catalog`.                          |
| `Separator`        | Горизонтальный/вертикальный разделитель.                      |
| `PrettyBR`         | Декоративный горизонтальный разделитель с иконкой и подписью. |

### Компоненты: Статусы и индикация

| Компонент | Назначение                    |
| --------- | ----------------------------- |
| `Badge`   | Компактный индикатор статуса. |
| `Alert`   | Блок уведомления.             |
| `Loader`  | Индикатор загрузки.           |

<a id="hooks"></a>

### Хуки (@kiyotakkkka/zvs-uikit-lib/hooks)

| Хук         | Назначение                                                             | Возвращает                                                                                |
| ----------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `useToasts` | Хук доступа к toast-контексту. Работает только внутри `ToastProvider`. | `ToastContextValue` с методами: `push`, `normal`, `info`, `warning`, `success`, `danger`. |

<a id="providers"></a>

### Провайдеры (@kiyotakkkka/zvs-uikit-lib/providers)

| Провайдер       | Назначение                         |
| --------------- | ---------------------------------- |
| `ToastProvider` | Глобальный стек toast-уведомлений. |