indicator-ui 0.1.46 → 0.1.47

package/dist/types/src/ui/DateTimePicker/ui/pickers/TimePicker.d.ts

@@ -1,2 +1,2 @@
 import { TimePickerPropsType } from "../../types";
-export declare function TimePicker({ time, onChangeTime, onlyTime, theme }: TimePickerPropsType): JSX.Element;
+export declare function TimePicker({ time, onChangeTime, onlyTime, theme }: TimePickerPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/DateTimePicker/ui/pickers/YearPicker.d.ts

@@ -1,2 +1,2 @@
 import { YearPickerPropsType } from '../../types';
-export declare function YearPicker({ targetDate, onChangeTarget, onChoose, type, theme }: YearPickerPropsType): JSX.Element;
+export declare function YearPicker({ targetDate, onChangeTarget, onChoose, type, theme }: YearPickerPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/Dropdown/types/DropdownTypes.d.ts

@@ -27,6 +27,11 @@ export type DropdownPropsBaseType<T> = {
     elementAfter?: React.ReactNode;
     elementBefore?: React.ReactNode;
     theme?: "light" | "dark";
+    /**
+     * при full содержимое будет растягивать по высоте DropdownItem,
+     * при abbreviated  сокращать по textOverflow: ellipsis (по умолчанию)
+     * */
+    contentDisplay?: 'full' | 'abbreviated';
 };
 export type DropdownPropsType<T> = UseSmartScrollCallbacksType & DropdownPropsBaseType<T>;
 export {};

package/dist/types/src/ui/DropdownItem/types/DropdownItemTypes.d.ts

@@ -49,5 +49,10 @@ export type DropdownItemPropsType = {
      * */
     ownerElement?: React.ReactElement;
     theme?: "light" | "dark";
+    /**
+     * при full содержимое будет растягивать по высоте DropdownItem,
+     * при abbreviated  сокращать по textOverflow: ellipsis (по умолчанию)
+     * */
+    contentDisplay?: 'full' | 'abbreviated';
 };
 export {};

package/dist/types/src/ui/FormBuilder/lib/formBuilder.d.ts

@@ -1,4 +1,4 @@
 import { FORM_BUILDER_SCHEMA } from "../schemes";
 import { AdditionPropsType } from "../types";
-declare const formBuilder: (schema: FORM_BUILDER_SCHEMA, additionProps: AdditionPropsType) => (string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | null | undefined)[];
+declare const formBuilder: (schema: FORM_BUILDER_SCHEMA, additionProps: AdditionPropsType) => (string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined)[];
 export default formBuilder;

package/dist/types/src/ui/InputFields/DateTimeField/ui/DateField.d.ts

@@ -1,2 +1,2 @@
 import { DateFieldPropsType } from "../../../../ui";
-export declare function DateField({ value, onChange, dateFormat, outFormat, additionStyle, datePlaceholder, iconDate, textDate, clearButton, isError, disabled, onFocus, onBlur, width, position, theme, ...props }: DateFieldPropsType): JSX.Element;
+export declare function DateField({ value, onChange, dateFormat, outFormat, additionStyle, datePlaceholder, iconDate, textDate, clearButton, isError, disabled, onFocus, onBlur, width, position, theme, ...props }: DateFieldPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeField/ui/DateFieldBase.d.ts

@@ -1,2 +1,2 @@
 import { DateFieldBasePropsType } from "../types";
-export declare function DateFieldBase({ value, disabled, required, onChange, onFocus, dateFormat, onBlur, minYear, maxYear, placeholder, className, }: DateFieldBasePropsType): JSX.Element;
+export declare function DateFieldBase({ value, disabled, required, onChange, onFocus, dateFormat, onBlur, minYear, maxYear, placeholder, className, }: DateFieldBasePropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeField/ui/DateTimeField.d.ts

@@ -1,2 +1,2 @@
 import { DateTimeFieldPropsType } from "../types";
-export declare function DateTimeField({ value, onChange, dateFormat, timeFormat, outFormat, additionStyle, datePlaceholder, timePlaceholder, iconDate, iconTime, textDate, textTime, clearButton, isError, disabled, onFocus, onBlur, width, position, theme, ...props }: DateTimeFieldPropsType): JSX.Element;
+export declare function DateTimeField({ value, onChange, dateFormat, timeFormat, outFormat, additionStyle, datePlaceholder, timePlaceholder, iconDate, iconTime, textDate, textTime, clearButton, isError, disabled, onFocus, onBlur, width, position, theme, ...props }: DateTimeFieldPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeField/ui/TimeField.d.ts

@@ -1,2 +1,2 @@
 import { TimeFieldPropsType } from "../../../../ui";
-export declare function TimeField({ value, onChange, timeFormat, outFormat, additionStyle, timePlaceholder, iconTime, textTime, clearButton, isError, disabled, onFocus, onBlur, width, position, theme, ...props }: TimeFieldPropsType): JSX.Element;
+export declare function TimeField({ value, onChange, timeFormat, outFormat, additionStyle, timePlaceholder, iconTime, textTime, clearButton, isError, disabled, onFocus, onBlur, width, position, theme, ...props }: TimeFieldPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeField/ui/TimeFieldBase.d.ts

@@ -1,2 +1,2 @@
 import { TimeFieldBasePropsType } from "../types";
-export declare function TimeFieldBase({ value, disabled, required, onChange, onFocus, timeFormat, onBlur, placeholder, className }: TimeFieldBasePropsType): JSX.Element;
+export declare function TimeFieldBase({ value, disabled, required, onChange, onFocus, timeFormat, onBlur, placeholder, className }: TimeFieldBasePropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeFieldMask/ui/DateTimeFieldMask.d.ts

@@ -1,2 +1,2 @@
 import { DateTimeFieldMaskPropsType } from "../types";
-export declare function DateTimeFieldMask({ firstField, secondField, iconFirst, iconSecond, textFirst, textSecond, isFocus, isError, disabled, additionStyle, onXClose, width, theme }: DateTimeFieldMaskPropsType): JSX.Element;
+export declare function DateTimeFieldMask({ firstField, secondField, iconFirst, iconSecond, textFirst, textSecond, isFocus, isError, disabled, additionStyle, onXClose, width, theme }: DateTimeFieldMaskPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeRangeField/ui/DateRangeField.d.ts

@@ -1,2 +1,2 @@
 import { DateRangeFieldPropsType } from "../types";
-export declare function DateRangeField({ value, onChange, secondPlaceholder, firstPlaceholder, secondIcon, disabled, dateFormat, required, firstIcon, onBlur, firstText, secondText, onFocus, isError, clearButton, width, additionsStyles, position, theme }: DateRangeFieldPropsType): JSX.Element;
+export declare function DateRangeField({ value, onChange, secondPlaceholder, firstPlaceholder, secondIcon, disabled, dateFormat, required, firstIcon, onBlur, firstText, secondText, onFocus, isError, clearButton, width, additionsStyles, position, theme }: DateRangeFieldPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeRangeField/ui/DateTimeRangeField.d.ts

@@ -1,2 +1,2 @@
 import { DateTimeRangeFieldPropsType } from "../../DateTimeRangeField";
-export declare function DateTimeRangeField({ value, onChange, theme, ...props }: DateTimeRangeFieldPropsType): JSX.Element;
+export declare function DateTimeRangeField({ value, onChange, theme, ...props }: DateTimeRangeFieldPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/InputFields/DateTimeRangeField/ui/TimeRangeField.d.ts

@@ -1,2 +1,2 @@
 import { TimeRangeFieldPropsType } from "../../../../ui";
-export declare function TimeRangeField({ value, onChange, secondPlaceholder, firstPlaceholder, secondIcon, disabled, timeFormat, required, firstIcon, onBlur, firstText, secondText, onFocus, isError, clearButton, width, additionsStyles, theme }: TimeRangeFieldPropsType): JSX.Element;
+export declare function TimeRangeField({ value, onChange, secondPlaceholder, firstPlaceholder, secondIcon, disabled, timeFormat, required, firstIcon, onBlur, firstText, secondText, onFocus, isError, clearButton, width, additionsStyles, theme }: TimeRangeFieldPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/InputFields/SelectField/types/SelectFieldTypes.d.ts

@@ -36,5 +36,9 @@ export type SelectFieldPropsType<T = unknown, Multiple extends boolean = boolean
      * */
     isActiveItem?: (item: T) => boolean;
     theme?: "light" | "dark";
+    /** Метод отображения информации в DropdownItem:
+     * при full содержимое будет растягивать по высоте DropdownItem,
+     * при abbreviated  сокращать по textOverflow: ellipsis (по умолчанию)*/
+    contentDisplay?: 'full' | 'abbreviated';
 };
 export {};

package/dist/types/src/ui/InputFields/TextareaField/ui/TextareaField.d.ts

@@ -1,2 +1,2 @@
 import { TextareaFieldPropsType } from "../types";
-export declare function TextareaField(props: TextareaFieldPropsType): JSX.Element;
+export declare function TextareaField(props: TextareaFieldPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/Loaders/ui/LoadingIndicator.d.ts

@@ -1,2 +1,2 @@
 import { LoadingIndicatorPropsType } from "../types";
-export declare function LoadingIndicator({ size, style, supportingText, width, height, additionStyles, }: LoadingIndicatorPropsType): JSX.Element;
+export declare function LoadingIndicator({ size, style, supportingText, width, height, additionStyles, }: LoadingIndicatorPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/MediaViewer/ui/components/ControlBar.d.ts

@@ -3,5 +3,5 @@ type PropsType = {
     onPrev?: () => void;
     onNext?: () => void;
 };
-export declare function ControlBar(props: PropsType): JSX.Element;
+export declare function ControlBar(props: PropsType): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/src/ui/MediaViewer/ui/components/VideoProgressBar.d.ts

@@ -1,2 +1,2 @@
 import { ProgressBarPropsType } from "../../types";
-export declare function VideoProgressBar({ progress, onChangeProgress, onStartDrag, onEndDrag }: ProgressBarPropsType): JSX.Element;
+export declare function VideoProgressBar({ progress, onChangeProgress, onStartDrag, onEndDrag }: ProgressBarPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/PaginationBar/ui/PageSwitcher.d.ts

@@ -1,2 +1,2 @@
 import { PageSwitcherPropsType } from "../types";
-export declare function PageSwitcher({ curPage, numPage, next, prev, onChange, smallVersion, theme }: PageSwitcherPropsType): JSX.Element;
+export declare function PageSwitcher({ curPage, numPage, next, prev, onChange, smallVersion, theme }: PageSwitcherPropsType): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { PaginationBarPropsType } from "../types";
-export declare function PaginationBar({ numPage, getCurPage, nextPage, changePage, prevPage, loadMore, canLoadMore, loadMoreButton, smallVersion, theme, }: PaginationBarPropsType): JSX.Element;
+export declare function PaginationBar({ numPage, getCurPage, nextPage, changePage, prevPage, loadMore, canLoadMore, loadMoreButton, smallVersion, theme, }: PaginationBarPropsType): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { PlayButtonPropsType } from "../types";
-export declare function PlayButton({ color, type, size, ...props }: PlayButtonPropsType): JSX.Element;
+export declare function PlayButton({ color, type, size, ...props }: PlayButtonPropsType): import("react/jsx-runtime").JSX.Element;

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

@@ -23,4 +23,4 @@ import { SlideTransitionPropsType } from '../types';
  * Учтите, что анимации сужают компонент, поэтому он будет деформироваться.
  * При высокой (автор проводил тесты на 300ms) скорости анимации ощущается нормально (если вы не Флеш).
  * */
-export declare function SlideTransition({ children, animation, className, additionStyles, style, }: SlideTransitionPropsType): JSX.Element;
+export declare function SlideTransition({ children, animation, className, additionStyles, style, }: SlideTransitionPropsType): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { TabButtonsPropsType } from '../types';
-export declare function TabButtons({ active, iconLeft, iconRight, disabled, text, children, customComponent, height, width, additionStyles, theme, ...props }: TabButtonsPropsType): JSX.Element;
+export declare function TabButtons({ active, iconLeft, iconRight, disabled, text, children, customComponent, height, width, additionStyles, theme, ...props }: TabButtonsPropsType): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { TabFramePropsType } from '../types';
-export declare function TabFrame({ width, tabs, additionStyles, theme }: TabFramePropsType): JSX.Element;
+export declare function TabFrame({ width, tabs, additionStyles, theme }: TabFramePropsType): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { TagPropsType } from "../types";
-export declare function Tag({ active, size, icon, label, checkbox, checked, actions, onCheckboxClick, onXCloseClick, onClick, count, }: TagPropsType): JSX.Element;
+export declare function Tag({ active, size, icon, label, checkbox, checked, actions, onCheckboxClick, onXCloseClick, onClick, count, }: TagPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/Tag/ui/TagCheckbox.d.ts

@@ -1,2 +1,2 @@
 import { TagCheckboxPropsType } from '../types';
-export declare function TagCheckbox({ size, checked, disabled, onClick }: TagCheckboxPropsType): JSX.Element;
+export declare function TagCheckbox({ size, checked, disabled, onClick }: TagCheckboxPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/Tag/ui/TagCount.d.ts

@@ -1,2 +1,2 @@
 import { TagCountPropsType } from "../types";
-export declare function TagCount({ count, color, size }: TagCountPropsType): JSX.Element;
+export declare function TagCount({ count, color, size }: TagCountPropsType): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { TogglePropsType } from "../types";
-export declare function Toggle(props: TogglePropsType): JSX.Element;
+export declare function Toggle(props: TogglePropsType): import("react/jsx-runtime").JSX.Element;

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

@@ -7,4 +7,4 @@ import { TooltipTypes } from "../types/TooltipTypes";
  * @param color Тема: 'light'/'dark'
  * @constructor
  */
-export declare function Tooltip({ text, description, arrow, classes, styles, targetRef, onClose, excludedOnCloseElements, color }: TooltipTypes): JSX.Element;
+export declare function Tooltip({ text, description, arrow, classes, styles, targetRef, onClose, excludedOnCloseElements, color }: TooltipTypes): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { UserPickPropsType } from "../types";
-export declare function UserPick({ size, url, additionStyles }: UserPickPropsType): JSX.Element;
+export declare function UserPick({ size, url, additionStyles }: UserPickPropsType): import("react/jsx-runtime").JSX.Element;

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'; /* И вот тут ты подключаешь свои переменные */
+```
+
+🎉 **Йо! Ты переопределил переменные в библиотеке, теперь ты как бог в своём проекте.** 🔥
+
+---
+
 Теперь ты точно в игре! Не забывай — кастомизация это твоя фишка, а библиотека — твой инструмент. Давай, чувак, делай всё по-своему и кайфуй! 🌞🌴