@huntflow/ui 0.2.32 → 0.2.34-test.0

package/README.md

@@ -21,27 +21,121 @@
 
 Для добавления UiKit в ваш проект выполните:
 
-```javascript
+```bash
 npm install @huntflow/ui
 ```
 
-## 📚 Storybook
+### Подключение в проекте
 
-```javascript
+Подключите глобальные стили и один раз внедрите SVG-спрайт для иконок:
+
+```ts
+import '@huntflow/ui/dist/global.css';
+import { injectSvgSprite } from '@huntflow/ui';
+
+await injectSvgSprite();
+```
+
+## 📚 Документация и разработка
+
+- **Storybook** — каталог компонентов и примеры использования. Локальный запуск:
+
+```bash
 npm run storybook
 ```
 
 ## 🎨 Иконки
-Для того, чтобы актуализировать иконки, необходимо создать `.env` (пример в `.env.develop`):
-- указать свой токен Figma (Help and account → Account settings → Security → Personal access tokens)
-- необходимый `FIGMA_FILE_ID` (Например: `https://www.figma.com/design/DV8Zm9gdvUocVlrqD8egvV/Igor-(New-UI-Kit)?node-id=1581-180&p=f&t=YzO5zlBlx3wPY5HW-0` это `DV8Zm9gdvUocVlrqD8egvV`)
-- необходимый `NODE_ID` (Например: `https://www.figma.com/design/DV8Zm9gdvUocVlrqD8egvV/Igor-(New-UI-Kit)?node-id=1581-180&p=f&t=YzO5zlBlx3wPY5HW-0` это `1581-180`, указываем через двоеточие)
-- скачать новый иконки `npm run icons:download`
-- обновить типы и список иконок `npm run icons:update-list`
-
-
-##  Пример использования
-```javascript
-import { UiButton } from '@huntflow/ui';
-import { UiIcon } from '@huntflow/ui/icons';
+# Актуализация иконок
+
+Чтобы актуализировать иконки, выполните следующие шаги:
+
+1. Создайте файл `.env` (можно использовать пример из `.env.develop`).
+
+2. Укажите необходимые переменные:
+
+   - **`FIGMA_TOKEN`** — персональный токен Figma  
+     *(Иконка профиля -> Settings -> Security -> Personal access tokens -> Generate new token)*
+
+   - **`FIGMA_FILE_ID`** — ID файла Figma  
+     Пример:  
+     ```
+     Ссылка: https://www.figma.com/design/DV8Zm9gdvUocVlrqD8egvV/Igor-(New-UI-Kit)?node-id=1581-180&p=f&t=YzO5zlBlx3wPY5HW-0
+     FIGMA_FILE_ID = DV8Zm9gdvUocVlrqD8egvV
+     ```
+
+   - **`NODE_ID`** — ID узла Figma  
+     Пример из той же ссылки:  
+     ```
+     NODE_ID = 1581-180, указываем через двоеточие (1581:180)
+     ```  
+
+3. Скачайте новые иконки:  
+```bash
+npm run icons:download
+```
+
+4. Обновите типы и список иконок:  
+```bash
+npm run icons:update-list
+```
+
+5. Соберите SVG-спрайт из иконок:  
+```bash
+npm run sprite
+```
+
+Для отображения иконок нужно один раз внедрить SVG-спрайт: 
+
+```ts
+import { injectSvgSprite } from '@huntflow/ui';
+
+await injectSvgSprite();
+```
+
+# Добавление новых токенов из Figma
+
+1. В Figma откройте **Plugins → Sync Variables**.
+
+2. В правой панели в плагине:  
+   - В правой панели где открылся плагин ставим галочки 
+   - Жмем **Generate → Copy to clipboard**.
+
+3. Вставьте скопированные токены в файл:  
+```
+src/assets/css/token.css
+```
+4. В терминале выполните команду для конвертации токенов:
+```bash
+npm run tokens:convert
+```
+
+## Компоненты
+
+| Компонент | Описание |
+|-----------|----------|
+| `UiButton` | Стандартная кнопка |
+| `UiButtonIcon` | Кнопка только с иконкой, без текста |
+| `UiButtonLink` | Кнопка в виде ссылки, с опциональной иконкой и замочком |
+| `UiIcon` | Иконка из SVG-спрайта |
+| `UiInput` | Инпут |
+| `UiTextarea` | Многострочное поле ввода |
+| `UiLabel` | Лейбл для полей форм |
+| `UiLoader` | Индикатор загрузки (спиннер) |
+| `UiPlank` | Плашка |
+| `UiText` | Текстовый блок |
+| `UiTitle` | Заголовок (h1–h4) |
+| `UiError` | Отображение сообщения об ошибке в формах |
+| `UiAvatar` | Аватар пользователя |
+| `UiStack` | Flex-контейнер для компоновки элементов с настройкой gap и выравнивания |
+| `UiRadioGroup` | Группа радиокнопок |
+| `UiCheckboxGroup` | Группа чекбоксов |
+| `UiDropzone` | Область перетаскивания и выбора файлов для загрузки |
+
+## Пример использования
+
+```ts
+import { UiButton, UiIcon } from '@huntflow/ui';
+
+<ui-button>Кнопка</ui-button>
+<ui-icon name="icon-name" />
 ```

package/dist/components/ui-icon/icon-list.d.ts

@@ -1 +1 @@
-export declare const icons: readonly ["2-users-20", "add-reaction-16", "ai-20", "alert-20", "alert-24", "alert-fill-20", "alert-fill-24", "alert-fill-28", "archive-16", "archive-18", "archive-20", "archive-24", "archive-28", "arrow-down-20", "arrow-left-18", "arrow-left-20", "arrow-narrow-left-24", "arrow-narrow-left-bold-24", "arrow-narrow-right-24", "arrow-narrow-right-bold-20", "arrow-narrow-right-bold-24", "arrow-right-18", "arrow-right-20", "arrow-up-20", "attention-16", "attention-18", "attention-20", "attention-24", "attention-28", "calendar-16", "calendar-18", "calendar-20", "calendar-24", "calendar-28", "check-16", "check-18", "check-20", "check-24", "check-28", "check-color-16", "check-color-18", "check-color-20", "check-color-24", "check-color-28", "chevron-down-16", "chevron-down-18", "chevron-down-20", "chevron-down-24", "chevron-down-28", "chevron-left-16", "chevron-left-18", "chevron-left-20", "chevron-left-24", "chevron-left-28", "chevron-right-16", "chevron-right-18", "chevron-right-20", "chevron-right-24", "chevron-right-28", "chevron-up-16", "chevron-up-18", "chevron-up-20", "chevron-up-24", "chevron-up-28", "circle-download-20", "clip-16", "clip-18", "clip-20", "clip-24", "clip-28", "clipboard-16", "clipboard-18", "clipboard-20", "clipboard-24", "clipboard-28", "clock-16", "clock-18", "clock-20", "clock-24", "clock-28", "clock-fill-16", "clock-fill-18", "clock-fill-20", "clock-fill-24", "clock-fill-28", "close-16", "close-18", "close-20", "close-28", "copy-20", "crown-16", "crown-18", "crown-20", "crown-24", "crown-28", "dots-horizontal-20", "dots-vertical-20", "download-16", "download-18", "download-20", "download-24", "download-28", "download-circle-16", "download-circle-18", "drag-16", "drag-20", "drag-24", "drop-down", "edit-16", "edit-18", "edit-20", "edit-24", "edit-28", "feedback-16", "feedback-18", "feedback-20", "feedback-24", "feedback-28", "folder-16", "folder-18", "folder-20", "folder-24", "folder-28", "graph-16", "graph-18", "graph-20", "graph-24", "graph-28", "home-16", "home-18", "home-20", "home-24", "home-28", "info-16", "info-18", "info-20", "info-24", "info-28", "link-16", "link-18", "link-20", "link-24", "link-28", "lock-16", "lock-18", "lock-20", "lock-24", "lock-28", "lock-color-16", "lock-color-18", "lock-color-20", "lock-color-24", "lock-color-28", "max-16", "max-18", "max-20", "max-28", "max-contour-20", "max-contour-24", "message-16", "message-18", "message-20", "message-24", "message-28", "message-open-18", "message-replied-18", "mute-20", "mute-fill-20", "next-20", "notches-16", "options-16", "options-18", "options-20", "options-24", "options-28", "options-lock-20", "phone-16", "phone-18", "phone-20", "phone-24", "phone-28", "phone-error-16", "phone-error-18", "phone-error-20", "phone-error-24", "phone-error-28", "phone-fill-16", "phone-fill-18", "phone-fill-20", "phone-fill-24", "phone-fill-28", "plus-16", "plus-18", "plus-20", "plus-circle-16", "plus-circle-18", "plus-circle-20", "plus-circle-24", "plus-circle-28", "print-16", "print-18", "print-20", "print-24", "print-28", "priority-20", "question-16", "question-18", "question-20", "question-24", "question-28", "refresh-18", "refresh-20", "refresh-24", "rocket-16", "rocket-18", "rocket-20", "rocket-24", "rocket-28", "search-16", "search-18", "search-20", "search-24", "search-28", "semiselected-16", "semiselected-18", "semiselected-20", "semiselected-24", "semiselected-28", "settings-16", "settings-18", "settings-20", "settings-24", "settings-28", "share-16", "share-18", "share-20", "share-24", "share-28", "shield-attention-20", "shield-attention-lock-20", "shield-fill-16", "shield-fill-20", "shield-tick-20", "shuffle-20", "sms-16", "sms-18", "sms-20", "sms-24", "sms-28", "star-16", "star-18", "star-20", "star-24", "star-28", "stop-color-16", "stop-color-18", "stop-color-20", "stop-color-24", "stop-color-28", "tag-18", "tag-20", "team-24", "telegram-16", "telegram-18", "telegram-20", "telegram-24", "telegram-28", "telegram-contour-20", "telegram-contour-24", "text-16", "text-18", "text-20", "text-24", "text-28", "thumbs-28", "thumbsup-16", "thumbsup-18", "thumbsup-20", "thumbsup-24", "trash-16", "trash-18", "trash-20", "trash-24", "trash-28", "unmute-18", "unmute-20", "upload-16", "upload-18", "upload-20", "url-16", "url-18", "url-20", "url-24", "url-28", "verification-fill-20", "viber-16", "viber-18", "viber-20", "viber-24", "viber-28", "viber-contour-16", "viber-contour-20", "viber-contour-24", "viber-contour-28", "whatsapp-16", "whatsapp-18", "whatsapp-20", "whatsapp-24", "whatsapp-28", "whatsapp-contour-20", "whatsapp-contour-24", "x-circle-20", "zoom-16", "zoom-18", "zoom-20", "zoom-24", "zoom-28"];
+export declare const icons: readonly ["2-users-20", "add-reaction-16", "ai-20", "alert-20", "alert-24", "alert-fill-20", "alert-fill-24", "alert-fill-28", "archive-16", "archive-18", "archive-20", "archive-24", "archive-28", "arrow-down-20", "arrow-left-18", "arrow-left-20", "arrow-narrow-left-24", "arrow-narrow-left-bold-24", "arrow-narrow-right-24", "arrow-narrow-right-bold-20", "arrow-narrow-right-bold-24", "arrow-right-18", "arrow-right-20", "arrow-up-20", "attention-16", "attention-18", "attention-20", "attention-24", "attention-28", "calendar-16", "calendar-18", "calendar-20", "calendar-24", "calendar-28", "check-16", "check-18", "check-20", "check-24", "check-28", "check-color-16", "check-color-18", "check-color-20", "check-color-24", "check-color-28", "chevron-down-16", "chevron-down-18", "chevron-down-20", "chevron-down-24", "chevron-down-28", "chevron-left-16", "chevron-left-18", "chevron-left-20", "chevron-left-24", "chevron-left-28", "chevron-right-16", "chevron-right-18", "chevron-right-20", "chevron-right-24", "chevron-right-28", "chevron-up-16", "chevron-up-18", "chevron-up-20", "chevron-up-24", "chevron-up-28", "circle-download-20", "clip-16", "clip-18", "clip-20", "clip-24", "clip-28", "clipboard-16", "clipboard-18", "clipboard-20", "clipboard-24", "clipboard-28", "clock-16", "clock-18", "clock-20", "clock-24", "clock-28", "clock-fill-16", "clock-fill-18", "clock-fill-20", "clock-fill-24", "clock-fill-28", "close-16", "close-18", "close-20", "close-28", "copy-20", "crown-16", "crown-18", "crown-20", "crown-24", "crown-28", "dots-horizontal-20", "dots-vertical-20", "download-16", "download-18", "download-20", "download-24", "download-28", "download-circle-16", "download-circle-18", "drag-16", "drag-20", "drag-24", "drop-down", "edit-16", "edit-18", "edit-20", "edit-24", "edit-28", "feedback-16", "feedback-18", "feedback-20", "feedback-24", "feedback-28", "folder-16", "folder-18", "folder-20", "folder-24", "folder-28", "graph-16", "graph-18", "graph-20", "graph-24", "graph-28", "home-16", "home-18", "home-20", "home-24", "home-28", "info-16", "info-18", "info-20", "info-24", "info-28", "link-16", "link-18", "link-20", "link-24", "link-28", "lock-16", "lock-18", "lock-20", "lock-24", "lock-28", "lock-color-16", "lock-color-18", "lock-color-20", "lock-color-24", "lock-color-28", "max-16", "max-18", "max-20", "max-28", "max-contour-18", "max-contour-20", "max-contour-24", "message-16", "message-18", "message-20", "message-24", "message-28", "message-open-18", "message-replied-18", "mute-20", "mute-fill-20", "next-20", "notches-16", "options-16", "options-18", "options-20", "options-24", "options-28", "options-lock-20", "phone-16", "phone-18", "phone-20", "phone-24", "phone-28", "phone-error-16", "phone-error-18", "phone-error-20", "phone-error-24", "phone-error-28", "phone-fill-16", "phone-fill-18", "phone-fill-20", "phone-fill-24", "phone-fill-28", "plus-16", "plus-18", "plus-20", "plus-circle-16", "plus-circle-18", "plus-circle-20", "plus-circle-24", "plus-circle-28", "print-16", "print-18", "print-20", "print-24", "print-28", "priority-20", "question-16", "question-18", "question-20", "question-24", "question-28", "refresh-18", "refresh-20", "refresh-24", "rocket-16", "rocket-18", "rocket-20", "rocket-24", "rocket-28", "search-16", "search-18", "search-20", "search-24", "search-28", "semiselected-16", "semiselected-18", "semiselected-20", "semiselected-24", "semiselected-28", "settings-16", "settings-18", "settings-20", "settings-24", "settings-28", "share-16", "share-18", "share-20", "share-24", "share-28", "shield-attention-20", "shield-attention-lock-20", "shield-fill-16", "shield-fill-20", "shield-tick-20", "shuffle-20", "sms-16", "sms-18", "sms-20", "sms-24", "sms-28", "star-16", "star-18", "star-20", "star-24", "star-28", "stop-color-16", "stop-color-18", "stop-color-20", "stop-color-24", "stop-color-28", "tag-18", "tag-20", "team-24", "telegram-16", "telegram-18", "telegram-20", "telegram-24", "telegram-28", "telegram-contour-18", "telegram-contour-20", "telegram-contour-24", "text-16", "text-18", "text-20", "text-24", "text-28", "thumbs-28", "thumbsup-16", "thumbsup-18", "thumbsup-20", "thumbsup-24", "trash-16", "trash-18", "trash-20", "trash-24", "trash-28", "unmute-18", "unmute-20", "upload-16", "upload-18", "upload-20", "url-16", "url-18", "url-20", "url-24", "url-28", "verification-fill-20", "viber-16", "viber-18", "viber-20", "viber-24", "viber-28", "viber-contour-16", "viber-contour-18", "viber-contour-20", "viber-contour-24", "viber-contour-28", "whatsapp-16", "whatsapp-18", "whatsapp-20", "whatsapp-24", "whatsapp-28", "whatsapp-contour-18", "whatsapp-contour-20", "whatsapp-contour-24", "x-circle-20", "zoom-16", "zoom-18", "zoom-20", "zoom-24", "zoom-28"];

package/dist/components/ui-radio-button/radio-button.vue.d.ts

@@ -2,7 +2,7 @@ import { UiRadioButtonProps } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        title?(_: {}): any;
+        label?(_: {}): any;
         subtitle?(_: {}): any;
     };
     refs: {};

package/dist/components/ui-radio-button/types.d.ts

@@ -1,9 +1,13 @@
 export type UiRadioButtonProps = {
     value: string;
     disabled?: boolean;
-    title?: string;
+    label?: string;
     subtitle?: string;
     partial?: boolean;
     required?: boolean;
     name?: string;
+    /** Вертикальное расположение: индикатор сверху, лейбл снизу */
+    vertical?: boolean;
+    /** Выравнивание индикатора и лейбла внутри радиокнопки */
+    itemsAlign?: 'start' | 'center';
 };

package/dist/components/ui-radio-group/radio-group.vue.d.ts

@@ -7,7 +7,7 @@ type __VLS_PublicProps = {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        optionTitle?(_: {
+        optionLabel?(_: {
             option: import('../ui-radio-button').UiRadioButtonProps;
         }): any;
         optionSubtitle?(_: {

package/dist/components/ui-radio-group/types.d.ts

@@ -7,7 +7,12 @@ export type UiRadioGroupProps = {
     disabled?: boolean;
     error?: string;
     required?: boolean;
+    /** Направление расположения радиокнопок в группе */
     direction?: 'column' | 'row';
+    /** Вертикальное расположение внутри каждой радиокнопки: индикатор сверху, лейбл снизу */
+    vertical?: boolean;
+    /** Выравнивание индикатора и лейбла внутри каждой радиокнопки */
+    itemsAlign?: 'start' | 'center';
     loop?: boolean;
     dir?: 'ltr' | 'rtl';
     stackGap?: 's' | 'l';