indicator-ui 0.1.47 → 0.1.48

package/dist/types/src/ui/formFields/FormSelectField/ui/FormSelectField.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ComponentRefType } from "../../../../../../types";
+import { FormSelectFieldBase } from './FormSelectFieldBase';
+import { FormFieldWrapper } from '../../FormFieldWrapper';
+type RefType = ComponentRefType<typeof FormFieldWrapper>;
+type PropsType<D, M extends boolean> = React.ComponentProps<typeof FormSelectFieldBase<D, M>> & React.ComponentProps<typeof FormFieldWrapper>;
+export declare const FormSelectField: <D, M extends boolean = false>(props: PropsType<D, M> & React.RefAttributes<RefType>) => React.ReactElement | null;
+export {};

package/dist/types/src/ui/formFields/FormSelectField/ui/FormSelectFieldBase.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { FieldPropsType } from "../../../../hooks";
+import { DropdownItemPropsType } from "../../../../ui";
+import { FormFieldBase } from '../../FormField';
+type SelectFieldOptionsExtendItemType<T> = DropdownItemPropsType & {
+    value: T;
+    label?: string;
+};
+type SelectFieldOptionsItemType<T> = SelectFieldOptionsExtendItemType<T> | T;
+type SelectFieldOptionsType<T> = Array<SelectFieldOptionsItemType<T>>;
+type SelectFieldValueType<D, M> = M extends true ? Array<D> : D;
+type BasePropsType<D, M extends boolean> = {
+    options?: SelectFieldOptionsType<D>;
+    multiple?: M;
+    theme?: "light" | "dark";
+    disabled?: boolean;
+    required?: boolean;
+};
+type PropsType<D, M extends boolean> = Omit<React.ComponentProps<typeof FormFieldBase>, keyof BasePropsType<D, M> | keyof FieldPropsType<SelectFieldValueType<D, M>>> & FieldPropsType<SelectFieldValueType<D, M>> & BasePropsType<D, M>;
+export declare function FormSelectFieldBase<D, M extends boolean = false>(props: PropsType<D, M>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/ui/formFields/FormSelectField/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FormSelectFieldBase';
+export * from './FormSelectField';

package/dist/types/src/ui/formFields/FormSwitcherField/index.d.ts

@@ -0,0 +1 @@
+export * from './ui';

package/dist/types/src/ui/formFields/FormSwitcherField/ui/FormSwitcherField.d.ts

@@ -0,0 +1,5 @@
+import { TogglePropsType } from "../../../../ui";
+import { FieldPropsType } from "../../../../hooks";
+type PropsType = Omit<TogglePropsType, keyof FieldPropsType<boolean>> & FieldPropsType<boolean>;
+export declare function FormSwitcherField(props: PropsType): JSX.Element;
+export {};

package/dist/types/src/ui/formFields/FormSwitcherField/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './FormSwitcherField';

package/dist/types/src/ui/formFields/FormTextareaField/index.d.ts

@@ -0,0 +1 @@
+export * from './ui';

package/dist/types/src/ui/formFields/FormTextareaField/styles/index.d.ts

@@ -0,0 +1 @@
+export { default as TextareaFieldStyle } from './TextareaField.module.scss';

package/dist/types/src/ui/formFields/FormTextareaField/ui/FormTextareaField.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { FieldPropsType } from "../../../../hooks";
+type BasePropsType = FieldPropsType<string> & {
+    /**
+     * Изменяет размер текстового поля, если текст не помещается.
+     *
+     * По умолчанию: ```false```
+     * */
+    autoResize?: boolean;
+    theme?: "light" | "dark";
+};
+type PropsType = Omit<React.ComponentProps<'textarea'>, keyof BasePropsType> & BasePropsType;
+export declare function FormTextareaField(props: PropsType): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/ui/formFields/FormTextareaField/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './FormTextareaField';

package/dist/types/src/ui/formFields/extends/index.d.ts

@@ -0,0 +1 @@
+export * from './ui';

package/dist/types/src/ui/formFields/extends/style/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DropdownArrowStyle } from './DropdownArrow.module.scss';
+export { default as InputInnerButtonStyle } from './InputInnerButton.module.scss';

package/dist/types/src/ui/formFields/extends/ui/DropdownArrow.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PropsType = React.ComponentProps<'button'> & {
+    open?: boolean;
+};
+export declare function DropdownArrow(props: PropsType): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/ui/formFields/extends/ui/InputInnerButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type PropsType = React.ComponentProps<'button'> & {
+    icon: React.ReactNode;
+    color: 'gray' | 'red';
+};
+export declare function InputInnerButton(props: PropsType): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/ui/formFields/extends/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DropdownArrow';
+export * from './InputInnerButton';

package/dist/types/src/ui/formFields/index.d.ts

@@ -0,0 +1,6 @@
+export * from './FormField';
+export * from './FormSelectField';
+export * from './FormFieldWrapper';
+export * from './FormSwitcherField';
+export * from './FormRadioField';
+export * from './FormTextareaField';

package/dist/types/src/ui/index.d.ts

@@ -25,3 +25,4 @@ export * from './PlayButton';
 export * from './DateTimePicker';
 export * from './Tooltip';
 export * from './Dropdown';
+export * from './formFields';

package/docs/CSSVariables/CSSVariables.md

@@ -1,63 +1,63 @@
-[🔙 Назад](../../README.md)
-
-# CSS Variables
-
-В библиотеке используются **CSS-переменные** для цветов (в будущем, возможно, не только для них). Иногда может возникнуть необходимость изменить эти значения в вашем проекте.
-
----
-
-## 🔧 Использование в разработке
-
-Для задания переменных в библиотеке используются **CSS Variables**, все переменные лучше складировать в файлах по типу `*-var.scss`:
-
-```css
-:root {
-    --var: #fff;
-}
-```
-
-При использовании в стилях:
-
-```scss
-@use 'variables' as *;
-
-background-color: var(--var);
-```
-
-📌 **Важно**: при разработке новых компонентов в библиотеке используйте **только** CSS-переменные, чтобы пользователи могли их переопределять в своих проектах.
-
----
-
-## 🎨 Кастомизация в проекте
-
-### 1️⃣ Создайте файл с переопределением переменных
-
-Рекомендуется создать отдельный файл (например, `indicator-ui-variables.scss`), в котором будут переопределены значения CSS-переменных библиотеки. Все новые переменные должны находиться в `:root {}`.
-
-Пример:
-
-```scss
-:root {
-  --base-black: #000000;
-  --base-white: #ffffff;
-  /* Другие цвета */
-}
-```
-
-🔹 _(Автор не расист, все вопросы к [Rockstar](https://support.rockstargames.com/), так как цитата взята оттуда)_ 😁
-
-### 2️⃣ Импортируйте файл с переменными
-
-Чтобы переопределенные переменные применились корректно, **импортируйте их после подключения библиотеки**:
-
-```scss
-@import 'indicator-ui/dist/index.css';
-@import 'indicator-ui-variables.scss';
-```
-
-🎉 **Ура, победа. Вы переопределили переменные в библиотеке.**
-
-
-## PS
-
+[🔙 Назад](../../README.md)
+
+# CSS Variables
+
+В библиотеке используются **CSS-переменные** для цветов (в будущем, возможно, не только для них). Иногда может возникнуть необходимость изменить эти значения в вашем проекте.
+
+---
+
+## 🔧 Использование в разработке
+
+Для задания переменных в библиотеке используются **CSS Variables**, все переменные лучше складировать в файлах по типу `*-var.scss`:
+
+```css
+:root {
+    --var: #fff;
+}
+```
+
+При использовании в стилях:
+
+```scss
+@use 'variables' as *;
+
+background-color: var(--var);
+```
+
+📌 **Важно**: при разработке новых компонентов в библиотеке используйте **только** CSS-переменные, чтобы пользователи могли их переопределять в своих проектах.
+
+---
+
+## 🎨 Кастомизация в проекте
+
+### 1️⃣ Создайте файл с переопределением переменных
+
+Рекомендуется создать отдельный файл (например, `indicator-ui-variables.scss`), в котором будут переопределены значения CSS-переменных библиотеки. Все новые переменные должны находиться в `:root {}`.
+
+Пример:
+
+```scss
+:root {
+  --base-black: #000000;
+  --base-white: #ffffff;
+  /* Другие цвета */
+}
+```
+
+🔹 _(Автор не расист, все вопросы к [Rockstar](https://support.rockstargames.com/), так как цитата взята оттуда)_ 😁
+
+### 2️⃣ Импортируйте файл с переменными
+
+Чтобы переопределенные переменные применились корректно, **импортируйте их после подключения библиотеки**:
+
+```scss
+@import 'indicator-ui/dist/index.css';
+@import 'indicator-ui-variables.scss';
+```
+
+🎉 **Ура, победа. Вы переопределили переменные в библиотеке.**
+
+
+## PS
+
 [Если интересно, как выглядила бы документация, если ее автор был из Калифорнии](./CSSVariablesCalifornia.md)

package/docs/CSSVariables/CSSVariablesCalifornia.md

@@ -1,62 +1,62 @@
-[🔙 Назад](../../README.md)
-
-# CSS Variables 🌴🌊
-
-Йооо, чуваки, в этой библиотеке мы юзаем **CSS-переменные** для цветов (ну, возможно, в будущем не только для них, кто знает). Иногда захочешь немного покрутить их под свой проект, и вот тебе, как это сделать, если хочешь, чтобы всё было чётко! ✌️
-
----
-
-## 🔧 Как это работает, чувак?
-
-Мы задаем переменные в библиотеке через **CSS Variables**:
-
-```css
-:root {
-    --var: #fff; /* Ну типа белый цвет, да */
-}
-```
-
-А когда хочешь использовать эту штуку, просто пиши так:
-
-```scss
-@use 'variables' as *;
-
-background-color: var(--var); /* Эй, хватит смотреть на меня, ты ж знаешь, что это делает */
-```
-
-📌 **Тупо важно**: Когда ты делаешь новые компоненты для библиотеки, **используй только** CSS-переменные, чтобы другие ребята могли под себя всё настроить. Просто чётко, понял? 😎
-
----
-
-## 🎨 Как настроить свой проект, чувак?
-
-### 1️⃣ Создай файл, где ты всё переделаешь
-
-Эй, не усложняй, просто создай отдельный файл (например, `indicator-ui-variables.scss`), где будешь переделывать эти переменные на свой вкус. Все твои новые переменные должны быть в `:root {}`. Это как твоя домашка, только тут можно реально кайфануть. 😁
-
-Пример, ну типа так:
-
-```scss
-:root {
-  --base-black: #000000; /* Ну ты понял, базовый чёрный */
-  --base-white: #ffffff; /* Базовый белый, чтоб не скучно было */
-  /* Добавь что хочешь — зелёный для своей ласточки или оранжевый для веселья */
-}
-```
-
-🔹 _(Не переживай, я не расист, всё как-то так у Rockstar вон, если что 😜)_
-
-### 2️⃣ Импортируй файл с переменными
-
-Чувак, вот тут важный момент — тебе нужно импортировать твой файл **после** подключения самой библиотеки, иначе, ну, как бы, не прокатит. Это как печеньки после молока, понял? 😋
-
-```scss
-@import 'indicator-ui/dist/index.css';
-@import 'indicator-ui-variables.scss'; /* И вот тут ты подключаешь свои переменные */
-```
-
-🎉 **Йо! Ты переопределил переменные в библиотеке, теперь ты как бог в своём проекте.** 🔥
-
----
-
+[🔙 Назад](../../README.md)
+
+# CSS Variables 🌴🌊
+
+Йооо, чуваки, в этой библиотеке мы юзаем **CSS-переменные** для цветов (ну, возможно, в будущем не только для них, кто знает). Иногда захочешь немного покрутить их под свой проект, и вот тебе, как это сделать, если хочешь, чтобы всё было чётко! ✌️
+
+---
+
+## 🔧 Как это работает, чувак?
+
+Мы задаем переменные в библиотеке через **CSS Variables**:
+
+```css
+:root {
+    --var: #fff; /* Ну типа белый цвет, да */
+}
+```
+
+А когда хочешь использовать эту штуку, просто пиши так:
+
+```scss
+@use 'variables' as *;
+
+background-color: var(--var); /* Эй, хватит смотреть на меня, ты ж знаешь, что это делает */
+```
+
+📌 **Тупо важно**: Когда ты делаешь новые компоненты для библиотеки, **используй только** CSS-переменные, чтобы другие ребята могли под себя всё настроить. Просто чётко, понял? 😎
+
+---
+
+## 🎨 Как настроить свой проект, чувак?
+
+### 1️⃣ Создай файл, где ты всё переделаешь
+
+Эй, не усложняй, просто создай отдельный файл (например, `indicator-ui-variables.scss`), где будешь переделывать эти переменные на свой вкус. Все твои новые переменные должны быть в `:root {}`. Это как твоя домашка, только тут можно реально кайфануть. 😁
+
+Пример, ну типа так:
+
+```scss
+:root {
+  --base-black: #000000; /* Ну ты понял, базовый чёрный */
+  --base-white: #ffffff; /* Базовый белый, чтоб не скучно было */
+  /* Добавь что хочешь — зелёный для своей ласточки или оранжевый для веселья */
+}
+```
+
+🔹 _(Не переживай, я не расист, всё как-то так у Rockstar вон, если что 😜)_
+
+### 2️⃣ Импортируй файл с переменными
+
+Чувак, вот тут важный момент — тебе нужно импортировать твой файл **после** подключения самой библиотеки, иначе, ну, как бы, не прокатит. Это как печеньки после молока, понял? 😋
+
+```scss
+@import 'indicator-ui/dist/index.css';
+@import 'indicator-ui-variables.scss'; /* И вот тут ты подключаешь свои переменные */
+```
+
+🎉 **Йо! Ты переопределил переменные в библиотеке, теперь ты как бог в своём проекте.** 🔥
+
+---
+
 Теперь ты точно в игре! Не забывай — кастомизация это твоя фишка, а библиотека — твой инструмент. Давай, чувак, делай всё по-своему и кайфуй! 🌞🌴

package/docs/ForDev.md

@@ -1,106 +1,106 @@
-[🔙 Назад](../README.md)
-
-# 📌 Для разработки
-
----
-
-## 🔥 Точки входа
-
-В проекте есть два ключевых входа для модулей — **js/ts** и **scss**.
-
-#### 📂 `src/index.ts` (js/ts модули)
-
-Добавляем сюда все модули, которые должны быть доступны через:
-
-```ts
-import {} from 'indicator-ui';
-```
-
-#### 🎨 `src/index.scss` (scss модули)
-
-Добавляем сюда все стили, которые должны быть доступны через:
-
-```scss
-@use 'indicator-ui' as *;
-```
-
----
-
-## ⚙️ Сборка проекта
-
-Чтобы собрать проект, используйте:
-
-```sh
-npm run lib:build
-```
-
-Результаты сборки появятся в папке `dist`. Там, возможно, живёт магия. 🧙‍♂️✨
-
----
-
-## 🧪 Тестирование во время разработки
-
-Для быстрого тестирования и проверки работы библиотеки используйте **React приложение** в папке с исходным кодом. Оно
-доступно по следующему пути:
-
-**[Жмак](../src/test/index.tsx)**
-
-В этом приложении настроен роутинг с несколькими страницами. Для тестирования просто добавляйте нужные элементы и
-страницы, следуя шаблону.
-
-Для добавления страниц в роутинг откройте и отредактируйте файл:
-
-**[Жмyк](../src/test/App.tsx)**
-
-### 🏃‍♂️ Запуск dev-сервера
-
-Чтобы запустить локальный сервер для разработки, выполните команду:
-
-```sh
-npm run dev:dev
-```
-
-**Важно:** Стремитесь создавать страницы, максимально приближенные к финальному дизайну, чтобы дизайнер мог проверить
-вашу работу в реальном времени и удостовериться, что она соответствует его ожиданиям.
-
-## 🛠 Тестирование перед публикацией
-
-Перед публикацией можно протестировать библиотеку на локальном **React**-проекте `test-project`. Для этого используется
-**yalc** — аналог npm, но для локальных пакетов.
-
-### 🚀 Установка `yalc`
-
-```sh
-npm install -g yalc
-```
-
-### 📦 Публикация в локальное хранилище
-
-```sh
-yalc publish
-```
-
-Есть вторая команда, которая по идее должна еще и обновлять библу, где она используется.
-
-```sh
-yalc publish --push
-```
-
-### 📥 Установка библиотеки в проект
-
-```sh
-yalc add indicator-ui
-```
-
-### 🔄 Обновление библиотеки
-
-```sh
-yalc update
-```
-
-Также советую делать удаление библы, так как `yalc` и `npm` очень странно работают и иногда могут добавлять изменения.
-
-```sh 
-npm uninstall indicator-ui
-```
-
+[🔙 Назад](../README.md)
+
+# 📌 Для разработки
+
+---
+
+## 🔥 Точки входа
+
+В проекте есть два ключевых входа для модулей — **js/ts** и **scss**.
+
+#### 📂 `src/index.ts` (js/ts модули)
+
+Добавляем сюда все модули, которые должны быть доступны через:
+
+```ts
+import {} from 'indicator-ui';
+```
+
+#### 🎨 `src/index.scss` (scss модули)
+
+Добавляем сюда все стили, которые должны быть доступны через:
+
+```scss
+@use 'indicator-ui' as *;
+```
+
+---
+
+## ⚙️ Сборка проекта
+
+Чтобы собрать проект, используйте:
+
+```sh
+npm run lib:build
+```
+
+Результаты сборки появятся в папке `dist`. Там, возможно, живёт магия. 🧙‍♂️✨
+
+---
+
+## 🧪 Тестирование во время разработки
+
+Для быстрого тестирования и проверки работы библиотеки используйте **React приложение** в папке с исходным кодом. Оно
+доступно по следующему пути:
+
+**[Жмак](../src/test/index.tsx)**
+
+В этом приложении настроен роутинг с несколькими страницами. Для тестирования просто добавляйте нужные элементы и
+страницы, следуя шаблону.
+
+Для добавления страниц в роутинг откройте и отредактируйте файл:
+
+**[Жмyк](../src/test/App.tsx)**
+
+### 🏃‍♂️ Запуск dev-сервера
+
+Чтобы запустить локальный сервер для разработки, выполните команду:
+
+```sh
+npm run dev:dev
+```
+
+**Важно:** Стремитесь создавать страницы, максимально приближенные к финальному дизайну, чтобы дизайнер мог проверить
+вашу работу в реальном времени и удостовериться, что она соответствует его ожиданиям.
+
+## 🛠 Тестирование перед публикацией
+
+Перед публикацией можно протестировать библиотеку на локальном **React**-проекте `test-project`. Для этого используется
+**yalc** — аналог npm, но для локальных пакетов.
+
+### 🚀 Установка `yalc`
+
+```sh
+npm install -g yalc
+```
+
+### 📦 Публикация в локальное хранилище
+
+```sh
+yalc publish
+```
+
+Есть вторая команда, которая по идее должна еще и обновлять библу, где она используется.
+
+```sh
+yalc publish --push
+```
+
+### 📥 Установка библиотеки в проект
+
+```sh
+yalc add indicator-ui
+```
+
+### 🔄 Обновление библиотеки
+
+```sh
+yalc update
+```
+
+Также советую делать удаление библы, так как `yalc` и `npm` очень странно работают и иногда могут добавлять изменения.
+
+```sh 
+npm uninstall indicator-ui
+```
+