indicator-ui 0.1.69 → 0.1.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (195) hide show
  1. package/README.md +25 -25
  2. package/dist/index.css +22 -0
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.js +904 -878
  5. package/dist/index.js.map +1 -1
  6. package/dist/scss/styles/adaptive/index.scss +142 -142
  7. package/dist/scss/styles/colors/index.scss +1 -1
  8. package/dist/scss/styles/colors/primary.scss +54 -54
  9. package/dist/scss/styles/colors/secondary.scss +12 -12
  10. package/dist/scss/styles/index.scss +2 -2
  11. package/dist/scss/styles/mixins/centerInsideContent.scss +6 -6
  12. package/dist/scss/styles/mixins/changeSvg.scss +25 -25
  13. package/dist/scss/styles/mixins/fnt-flex.scss +38 -38
  14. package/dist/scss/styles/mixins/fnt.scss +25 -25
  15. package/dist/scss/styles/mixins/hiddeScrollBar.scss +9 -9
  16. package/dist/scss/styles/mixins/index.scss +7 -7
  17. package/dist/scss/styles/mixins/modify-flex.scss +17 -17
  18. package/dist/scss/styles/mixins/modify-svg.scss +30 -30
  19. package/dist/scss/test/global.scss +82 -82
  20. package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss +48 -48
  21. package/dist/scss/ui/Buttons/styles/mixins/index.scss +1 -1
  22. package/dist/scss/ui/Buttons/styles/mixins/properties/index.scss +21 -21
  23. package/dist/scss/ui/Buttons/styles/mixins/properties/large.scss +28 -28
  24. package/dist/scss/ui/Buttons/styles/mixins/properties/link-black.scss +47 -47
  25. package/dist/scss/ui/Buttons/styles/mixins/properties/link-color.scss +47 -47
  26. package/dist/scss/ui/Buttons/styles/mixins/properties/link-dark-theme.scss +47 -47
  27. package/dist/scss/ui/Buttons/styles/mixins/properties/link-gray.scss +47 -47
  28. package/dist/scss/ui/Buttons/styles/mixins/properties/medium.scss +28 -28
  29. package/dist/scss/ui/Buttons/styles/mixins/properties/primary.scss +59 -59
  30. package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-color.scss +72 -72
  31. package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-gray.scss +90 -90
  32. package/dist/scss/ui/Buttons/styles/mixins/properties/small.scss +28 -28
  33. package/dist/scss/ui/Buttons/styles/mixins/properties/tab-active.scss +51 -51
  34. package/dist/scss/ui/Buttons/styles/mixins/properties/tab.scss +51 -51
  35. package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-color.scss +82 -82
  36. package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-gray.scss +42 -42
  37. package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-white.scss +83 -83
  38. package/dist/scss/ui/Buttons/styles/mixins/properties/ultra.scss +28 -28
  39. package/dist/scss/ui/Buttons/styles/mixins/properties/warning-link-color.scss +44 -44
  40. package/dist/scss/ui/Buttons/styles/mixins/properties/warning-primary.scss +36 -36
  41. package/dist/scss/ui/Buttons/styles/mixins/properties/warning-secondary-color.scss +40 -40
  42. package/dist/scss/ui/CheckboxMark/styles/mixins/base.scss +30 -30
  43. package/dist/scss/ui/CheckboxMark/styles/mixins/checkbox-mark.scss +95 -95
  44. package/dist/scss/ui/CheckboxMark/styles/mixins/index.scss +2 -2
  45. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/checkbox.scss +2 -2
  46. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/checked.scss +21 -21
  47. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/correct.scss +48 -48
  48. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/disabled.scss +28 -28
  49. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/error.scss +23 -23
  50. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/incorrect.scss +48 -48
  51. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/indeterminate.scss +18 -18
  52. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/index.scss +7 -7
  53. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/radio.scss +14 -14
  54. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputField/CustomInput.scss +125 -125
  55. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputField/CustomInputField.scss +32 -32
  56. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputField/CustomTextareaInput.scss +29 -29
  57. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputField/index.scss +1 -1
  58. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputWrapper/CustomInputWrapper.scss +54 -54
  59. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputWrapper/config.scss +4 -4
  60. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomOptionsInput/index.scss +47 -47
  61. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/CustomSelectField.scss +53 -53
  62. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/CustomSelectFieldOption.scss +50 -50
  63. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/CustomSelectFieldViewField.scss +27 -27
  64. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/CustomSwitchersField.scss +16 -16
  65. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/components/option.scss +33 -33
  66. package/dist/scss/ui/FormBuilder/styles/CustomFields/index.scss +4 -4
  67. package/dist/scss/ui/InputFields/FlexField/styles/mixins/flexField.scss +150 -150
  68. package/dist/scss/ui/InputFields/InputFieldWrapper/styles/mixins/inputFieldWrapper.scss +49 -49
  69. package/dist/scss/ui/MicroButton/styles/mixins/base-button.scss +17 -17
  70. package/dist/scss/ui/MicroButton/styles/mixins/index.scss +1 -1
  71. package/dist/scss/ui/MicroButton/styles/mixins/micro-button.scss +68 -68
  72. package/dist/scss/ui/MicroButton/styles/mixins/properties/blue-light.scss +18 -18
  73. package/dist/scss/ui/MicroButton/styles/mixins/properties/color-fill.scss +20 -20
  74. package/dist/scss/ui/MicroButton/styles/mixins/properties/color-hover.scss +20 -20
  75. package/dist/scss/ui/MicroButton/styles/mixins/properties/color.scss +20 -20
  76. package/dist/scss/ui/MicroButton/styles/mixins/properties/dark.scss +18 -18
  77. package/dist/scss/ui/MicroButton/styles/mixins/properties/gray-fill.scss +20 -20
  78. package/dist/scss/ui/MicroButton/styles/mixins/properties/gray.scss +20 -20
  79. package/dist/scss/ui/MicroButton/styles/mixins/properties/index.scss +17 -17
  80. package/dist/scss/ui/MicroButton/styles/mixins/properties/light.scss +20 -20
  81. package/dist/scss/ui/MicroButton/styles/mixins/properties/red-fill.scss +20 -20
  82. package/dist/scss/ui/MicroButton/styles/mixins/properties/red-hover.scss +20 -20
  83. package/dist/scss/ui/MicroButton/styles/mixins/properties/rose.scss +20 -20
  84. package/dist/scss/ui/MicroButton/styles/mixins/properties/size-14.scss +11 -11
  85. package/dist/scss/ui/MicroButton/styles/mixins/properties/size-16.scss +11 -11
  86. package/dist/scss/ui/MicroButton/styles/mixins/properties/size-20.scss +11 -11
  87. package/dist/scss/ui/MicroButton/styles/mixins/properties/size-24.scss +11 -11
  88. package/dist/scss/ui/MicroButton/styles/mixins/properties/size-28.scss +11 -11
  89. package/dist/scss/ui/Tag/styles/properties/active.scss +15 -15
  90. package/dist/scss/ui/Tag/styles/properties/base.scss +33 -33
  91. package/dist/scss/ui/Tag/styles/properties/clicked.scss +2 -2
  92. package/dist/scss/ui/Tag/styles/properties/hover.scss +4 -4
  93. package/dist/scss/ui/Tag/styles/properties/index.scss +6 -6
  94. package/dist/scss/ui/Tag/styles/properties/large.scss +18 -18
  95. package/dist/scss/ui/Tag/styles/properties/medium.scss +18 -18
  96. package/dist/scss/ui/Tag/styles/properties/small.scss +18 -18
  97. package/dist/scss/ui/ToggleBase/styles/mixins/active.scss +12 -12
  98. package/dist/scss/ui/ToggleBase/styles/mixins/base-button.scss +8 -8
  99. package/dist/scss/ui/ToggleBase/styles/mixins/base.scss +13 -13
  100. package/dist/scss/ui/ToggleBase/styles/mixins/disabled.scss +5 -5
  101. package/dist/scss/ui/ToggleBase/styles/mixins/error.scss +6 -6
  102. package/dist/scss/ui/ToggleBase/styles/mixins/hover.scss +22 -22
  103. package/dist/scss/ui/ToggleBase/styles/mixins/index.scss +8 -8
  104. package/dist/scss/ui/ToggleBase/styles/mixins/large.scss +8 -8
  105. package/dist/scss/ui/ToggleBase/styles/mixins/medium.scss +8 -8
  106. package/dist/scss/ui/ToggleBase/styles/mixins/spacer.scss +4 -4
  107. package/dist/scss/ui/formFields/FormFieldWrapper/styles/mixins/inputFieldWrapper.scss +49 -49
  108. package/dist/types/src/hooks/forms/types/scheme.d.ts +2 -2
  109. package/dist/types/src/hooks/forms/useForm.d.ts +2 -2
  110. package/dist/types/src/test/App.d.ts +1 -1
  111. package/dist/types/src/test/layout/PageLayout.d.ts +1 -1
  112. package/dist/types/src/test/pages/ButtonsPage.d.ts +1 -1
  113. package/dist/types/src/test/pages/CascadeSelectorPage.d.ts +1 -1
  114. package/dist/types/src/test/pages/CheckboxMarkPage.d.ts +1 -1
  115. package/dist/types/src/test/pages/CheckboxPage.d.ts +1 -1
  116. package/dist/types/src/test/pages/DateTimeFieldMaskPage.d.ts +1 -1
  117. package/dist/types/src/test/pages/DateTimeFieldsPage.d.ts +1 -1
  118. package/dist/types/src/test/pages/DateTimePickerPage.d.ts +1 -1
  119. package/dist/types/src/test/pages/DropdownItemPage.d.ts +1 -1
  120. package/dist/types/src/test/pages/FieldsPage.d.ts +1 -1
  121. package/dist/types/src/test/pages/FormBuilderPage.d.ts +1 -1
  122. package/dist/types/src/test/pages/FormPage.d.ts +1 -1
  123. package/dist/types/src/test/pages/HomePage.d.ts +1 -1
  124. package/dist/types/src/test/pages/LoadingIndicatorPage.d.ts +1 -1
  125. package/dist/types/src/test/pages/MediaPlayerPage.d.ts +1 -1
  126. package/dist/types/src/test/pages/MicroButtonsPage.d.ts +1 -1
  127. package/dist/types/src/test/pages/ModalsPage.d.ts +1 -1
  128. package/dist/types/src/test/pages/PaginationPage.d.ts +1 -1
  129. package/dist/types/src/test/pages/SlideTransitionPage.d.ts +1 -1
  130. package/dist/types/src/test/pages/TabFramePage.d.ts +1 -1
  131. package/dist/types/src/test/pages/TagPage.d.ts +1 -1
  132. package/dist/types/src/test/pages/TestPage.d.ts +1 -1
  133. package/dist/types/src/test/pages/ToggleBasePage.d.ts +1 -1
  134. package/dist/types/src/test/pages/TogglePage.d.ts +1 -1
  135. package/dist/types/src/test/pages/TooltipTage.d.ts +1 -1
  136. package/dist/types/src/test/pages/UiAnimationsPage.d.ts +1 -1
  137. package/dist/types/src/test/pages/UseSmartPositionPage.d.ts +1 -1
  138. package/dist/types/src/test/pages/UseSmartScrollPage.d.ts +1 -1
  139. package/dist/types/src/test/pages/UserPickPage.d.ts +1 -1
  140. package/dist/types/src/types/mixins.d.ts +2 -2
  141. package/dist/types/src/ui/Carousel/ui/Carousel.d.ts +1 -1
  142. package/dist/types/src/ui/CascadeSelector/ui/CascadeSelector.d.ts +1 -1
  143. package/dist/types/src/ui/DateTimePicker/ui/components/CalendarButton.d.ts +1 -1
  144. package/dist/types/src/ui/DateTimePicker/ui/components/CalendarDay.d.ts +1 -1
  145. package/dist/types/src/ui/DateTimePicker/ui/components/CalendarMonth.d.ts +1 -1
  146. package/dist/types/src/ui/DateTimePicker/ui/components/CalendarYear.d.ts +1 -1
  147. package/dist/types/src/ui/DateTimePicker/ui/components/TimePickerFeed.d.ts +1 -1
  148. package/dist/types/src/ui/DateTimePicker/ui/components/TimePickerTag.d.ts +1 -1
  149. package/dist/types/src/ui/DateTimePicker/ui/parts/Footer.d.ts +1 -1
  150. package/dist/types/src/ui/DateTimePicker/ui/parts/Header.d.ts +1 -1
  151. package/dist/types/src/ui/DateTimePicker/ui/parts/Main.d.ts +1 -1
  152. package/dist/types/src/ui/DateTimePicker/ui/pickers/DatePicker.d.ts +1 -1
  153. package/dist/types/src/ui/DateTimePicker/ui/pickers/MonthPicker.d.ts +1 -1
  154. package/dist/types/src/ui/DateTimePicker/ui/pickers/TimePicker.d.ts +1 -1
  155. package/dist/types/src/ui/DateTimePicker/ui/pickers/YearPicker.d.ts +1 -1
  156. package/dist/types/src/ui/FormBuilder/lib/formBuilder.d.ts +1 -1
  157. package/dist/types/src/ui/InputFields/DateTimeField/ui/DateField.d.ts +1 -1
  158. package/dist/types/src/ui/InputFields/DateTimeField/ui/DateFieldBase.d.ts +1 -1
  159. package/dist/types/src/ui/InputFields/DateTimeField/ui/DateTimeField.d.ts +1 -1
  160. package/dist/types/src/ui/InputFields/DateTimeField/ui/TimeField.d.ts +1 -1
  161. package/dist/types/src/ui/InputFields/DateTimeField/ui/TimeFieldBase.d.ts +1 -1
  162. package/dist/types/src/ui/InputFields/DateTimeFieldMask/ui/DateTimeFieldMask.d.ts +1 -1
  163. package/dist/types/src/ui/InputFields/DateTimeRangeField/ui/DateRangeField.d.ts +1 -1
  164. package/dist/types/src/ui/InputFields/DateTimeRangeField/ui/DateTimeRangeField.d.ts +1 -1
  165. package/dist/types/src/ui/InputFields/DateTimeRangeField/ui/TimeRangeField.d.ts +1 -1
  166. package/dist/types/src/ui/InputFields/TextareaField/ui/TextareaField.d.ts +1 -1
  167. package/dist/types/src/ui/Loaders/types/LoadingIndicatorTypes.d.ts +1 -0
  168. package/dist/types/src/ui/Loaders/ui/LoadingIndicator.d.ts +1 -1
  169. package/dist/types/src/ui/MediaViewer/ui/components/ControlBar.d.ts +1 -1
  170. package/dist/types/src/ui/MediaViewer/ui/components/VideoProgressBar.d.ts +1 -1
  171. package/dist/types/src/ui/PaginationBar/ui/PageSwitcher.d.ts +1 -1
  172. package/dist/types/src/ui/PaginationBar/ui/PaginationBar.d.ts +1 -1
  173. package/dist/types/src/ui/PlayButton/ui/PlayButton.d.ts +1 -1
  174. package/dist/types/src/ui/SlideTransition/ui/SlideTransition.d.ts +1 -1
  175. package/dist/types/src/ui/TabButtons/ui/TabButtons.d.ts +1 -1
  176. package/dist/types/src/ui/TabFrame/ui/TabFrame.d.ts +1 -1
  177. package/dist/types/src/ui/Tag/ui/Tag.d.ts +1 -1
  178. package/dist/types/src/ui/Tag/ui/TagCheckbox.d.ts +1 -1
  179. package/dist/types/src/ui/Tag/ui/TagCount.d.ts +1 -1
  180. package/dist/types/src/ui/Toggle/ui/Toggle.d.ts +1 -1
  181. package/dist/types/src/ui/Tooltip/ui/Tooltip.d.ts +1 -1
  182. package/dist/types/src/ui/UserPick/ui/UserPick.d.ts +1 -1
  183. package/dist/types/src/ui/formFields/FormRadioField/ui/FieldItem.d.ts +1 -1
  184. package/dist/types/src/ui/formFields/FormRadioField/ui/FormRadioField.d.ts +1 -1
  185. package/dist/types/src/ui/formFields/FormSelectField/ui/FormSelectFieldBase.d.ts +1 -1
  186. package/dist/types/src/ui/formFields/FormTextareaField/ui/FormTextareaField.d.ts +1 -1
  187. package/dist/types/src/ui/formFields/extends/ui/DropdownArrow.d.ts +1 -1
  188. package/dist/types/src/ui/formFields/extends/ui/InputInnerButton.d.ts +1 -1
  189. package/docs/CSSVariables/CSSVariables.md +62 -62
  190. package/docs/CSSVariables/CSSVariablesCalifornia.md +61 -61
  191. package/docs/ForDev.md +106 -106
  192. package/docs/FormBuilderDocs.md +204 -204
  193. package/docs/Notes.md +189 -189
  194. package/docs/SCSSVariables.md +28 -28
  195. package/package.json +1 -1
@@ -1 +1 @@
1
- export declare function TabFramePage(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function TabFramePage(): JSX.Element;
@@ -1 +1 @@
1
- export declare function TagPage(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function TagPage(): JSX.Element;
@@ -1 +1 @@
1
- export declare function TestPage(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function TestPage(): JSX.Element;
@@ -1 +1 @@
1
- export declare function ToggleBasePage(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function ToggleBasePage(): JSX.Element;
@@ -1 +1 @@
1
- export declare function TogglePage(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function TogglePage(): JSX.Element;
@@ -1 +1 @@
1
- export declare const TooltipPage: () => import("react/jsx-runtime").JSX.Element;
1
+ export declare const TooltipPage: () => JSX.Element;
@@ -1 +1 @@
1
- export declare function UIAnimationsPage(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function UIAnimationsPage(): JSX.Element;
@@ -1 +1 @@
1
- export declare function UseSmartPositionPage(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function UseSmartPositionPage(): JSX.Element;
@@ -1 +1 @@
1
- export declare function UseSmartScrollPage(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function UseSmartScrollPage(): JSX.Element;
@@ -1 +1 @@
1
- export declare function UserPickPage(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function UserPickPage(): JSX.Element;
@@ -14,7 +14,7 @@ export type IsTuple<T> = T extends readonly any[] ? number extends T['length'] ?
14
14
  export type NegativeBoolean<T> = T extends true ? false : true;
15
15
  export type NotTuple<T> = NegativeBoolean<IsTuple<T>>;
16
16
  export type BuildTuple<N extends number, T extends any[] = []> = T['length'] extends N ? T : BuildTuple<N, [...T, N]>;
17
- export type DeepNullable<T> = {
18
- [K in keyof T]: DeepNullable<T[K]> | null;
17
+ export type Nullable<T> = {
18
+ [K in keyof T]: T[K] | null;
19
19
  };
20
20
  export {};
@@ -1,2 +1,2 @@
1
1
  import { CarouselPropsType } from "../types";
2
- export declare function Carousel({ children, activeIndex, setActiveIndex }: CarouselPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function Carousel({ children, activeIndex, setActiveIndex }: CarouselPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { CascadeSelectorPropsType } from "../types";
2
- export declare function CascadeSelector<T extends unknown = unknown>({ value, options, onChange, multiple, defaultAllHidden, maxChosenOptions, disabled, }: CascadeSelectorPropsType<T>): import("react/jsx-runtime").JSX.Element;
2
+ export declare function CascadeSelector<T extends unknown = unknown>({ value, options, onChange, multiple, defaultAllHidden, maxChosenOptions, disabled, }: CascadeSelectorPropsType<T>): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { CalendarButtonPropsType } from "../../types";
2
- export declare function CalendarButton({ color, text, theme, ...props }: CalendarButtonPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function CalendarButton({ color, text, theme, ...props }: CalendarButtonPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { CalendarDayPropsType } from '../../types';
2
- export declare function CalendarDay({ text, info, mark, currentDay, filter, holiday, active, disabled, rightFilter, leftFilter, theme, ...props }: CalendarDayPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function CalendarDay({ text, info, mark, currentDay, filter, holiday, active, disabled, rightFilter, leftFilter, theme, ...props }: CalendarDayPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { CalendarMonthPropsType } from "../../types";
2
- export declare function CalendarMonth({ text, current, disabled, theme, ...props }: CalendarMonthPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function CalendarMonth({ text, current, disabled, theme, ...props }: CalendarMonthPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { CalendarYearPropsType } from "../../types";
2
- export declare function CalendarYear({ text, current, disabled, theme, ...props }: CalendarYearPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function CalendarYear({ text, current, disabled, theme, ...props }: CalendarYearPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TimePickerFeedPropsType } from "../../types";
2
- export declare function TimePickerFeed({ list, centerItem, onChangeCenterItem, theme }: TimePickerFeedPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function TimePickerFeed({ list, centerItem, onChangeCenterItem, theme }: TimePickerFeedPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TimePickerTagPropsType } from "../../types";
2
- export declare function TimePickerTag({ text, ...props }: TimePickerTagPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function TimePickerTag({ text, ...props }: TimePickerTagPropsType): JSX.Element;
@@ -1 +1 @@
1
- export declare function Footer(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function Footer(): JSX.Element;
@@ -1 +1 @@
1
- export declare function Header(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function Header(): JSX.Element;
@@ -1 +1 @@
1
- export declare function Main(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function Main(): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { DatePickerPropsType } from "../../types";
2
- export declare function DatePicker({ date, onChangeDate, getInfo, isMark, isHoliday, onYearButtonClick, onMonthButtonClick, type, theme }: DatePickerPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function DatePicker({ date, onChangeDate, getInfo, isMark, isHoliday, onYearButtonClick, onMonthButtonClick, type, theme }: DatePickerPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { MonthPickerPropsType } from '../../types';
2
- export declare function MonthPicker({ targetDate, onChangeTarget, onYearButtonClick, onChoose, type, theme, }: MonthPickerPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function MonthPicker({ targetDate, onChangeTarget, onYearButtonClick, onChoose, type, theme, }: MonthPickerPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TimePickerPropsType } from "../../types";
2
- export declare function TimePicker({ time, onChangeTime, onlyTime, theme }: TimePickerPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function TimePicker({ time, onChangeTime, onlyTime, theme }: TimePickerPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { YearPickerPropsType } from '../../types';
2
- export declare function YearPicker({ targetDate, onChangeTarget, onChoose, type, theme }: YearPickerPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function YearPicker({ targetDate, onChangeTarget, onChoose, type, theme }: YearPickerPropsType): JSX.Element;
@@ -1,4 +1,4 @@
1
1
  import { FORM_BUILDER_SCHEMA } from "../schemes";
2
2
  import { AdditionPropsType } from "../types";
3
- 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)[];
3
+ 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)[];
4
4
  export default formBuilder;
@@ -1,2 +1,2 @@
1
1
  import { DateFieldPropsType } from "../../../../ui";
2
- 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;
2
+ export declare function DateField({ value, onChange, dateFormat, outFormat, additionStyle, datePlaceholder, iconDate, textDate, clearButton, isError, disabled, onFocus, onBlur, width, position, theme, ...props }: DateFieldPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { DateFieldBasePropsType } from "../types";
2
- export declare function DateFieldBase({ value, disabled, required, onChange, onFocus, dateFormat, onBlur, minYear, maxYear, placeholder, className, }: DateFieldBasePropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function DateFieldBase({ value, disabled, required, onChange, onFocus, dateFormat, onBlur, minYear, maxYear, placeholder, className, }: DateFieldBasePropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { DateTimeFieldPropsType } from "../types";
2
- 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;
2
+ 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;
@@ -1,2 +1,2 @@
1
1
  import { TimeFieldPropsType } from "../../../../ui";
2
- 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;
2
+ export declare function TimeField({ value, onChange, timeFormat, outFormat, additionStyle, timePlaceholder, iconTime, textTime, clearButton, isError, disabled, onFocus, onBlur, width, position, theme, ...props }: TimeFieldPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TimeFieldBasePropsType } from "../types";
2
- export declare function TimeFieldBase({ value, disabled, required, onChange, onFocus, timeFormat, onBlur, placeholder, className }: TimeFieldBasePropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function TimeFieldBase({ value, disabled, required, onChange, onFocus, timeFormat, onBlur, placeholder, className }: TimeFieldBasePropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { DateTimeFieldMaskPropsType } from "../types";
2
- export declare function DateTimeFieldMask({ firstField, secondField, iconFirst, iconSecond, textFirst, textSecond, isFocus, isError, disabled, additionStyle, onXClose, width, theme }: DateTimeFieldMaskPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function DateTimeFieldMask({ firstField, secondField, iconFirst, iconSecond, textFirst, textSecond, isFocus, isError, disabled, additionStyle, onXClose, width, theme }: DateTimeFieldMaskPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { DateRangeFieldPropsType } from "../types";
2
- 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;
2
+ 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;
@@ -1,2 +1,2 @@
1
1
  import { DateTimeRangeFieldPropsType } from "../../DateTimeRangeField";
2
- export declare function DateTimeRangeField({ value, onChange, theme, ...props }: DateTimeRangeFieldPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function DateTimeRangeField({ value, onChange, theme, ...props }: DateTimeRangeFieldPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TimeRangeFieldPropsType } from "../../../../ui";
2
- 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;
2
+ 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;
@@ -1,2 +1,2 @@
1
1
  import { TextareaFieldPropsType } from "../types";
2
- export declare function TextareaField(props: TextareaFieldPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function TextareaField(props: TextareaFieldPropsType): JSX.Element;
@@ -13,4 +13,5 @@ export type LoadingIndicatorPropsType = {
13
13
  * */
14
14
  supportingText?: boolean | React.ReactNode;
15
15
  additionStyles?: string | string[];
16
+ theme?: 'dark' | 'light';
16
17
  };
@@ -1,2 +1,2 @@
1
1
  import { LoadingIndicatorPropsType } from "../types";
2
- export declare function LoadingIndicator({ size, style, supportingText, width, height, additionStyles, }: LoadingIndicatorPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function LoadingIndicator({ size, style, supportingText, width, height, additionStyles, theme }: LoadingIndicatorPropsType): JSX.Element;
@@ -3,5 +3,5 @@ type PropsType = {
3
3
  onPrev?: () => void;
4
4
  onNext?: () => void;
5
5
  };
6
- export declare function ControlBar(props: PropsType): import("react/jsx-runtime").JSX.Element;
6
+ export declare function ControlBar(props: PropsType): JSX.Element;
7
7
  export {};
@@ -1,2 +1,2 @@
1
1
  import { ProgressBarPropsType } from "../../types";
2
- export declare function VideoProgressBar({ progress, onChangeProgress, onStartDrag, onEndDrag }: ProgressBarPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function VideoProgressBar({ progress, onChangeProgress, onStartDrag, onEndDrag }: ProgressBarPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { PageSwitcherPropsType } from "../types";
2
- export declare function PageSwitcher({ curPage, numPage, next, prev, onChange, smallVersion, theme }: PageSwitcherPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function PageSwitcher({ curPage, numPage, next, prev, onChange, smallVersion, theme }: PageSwitcherPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { PaginationBarPropsType } from "../types";
2
- export declare function PaginationBar({ numPage, getCurPage, nextPage, changePage, prevPage, loadMore, canLoadMore, loadMoreButton, smallVersion, theme, }: PaginationBarPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function PaginationBar({ numPage, getCurPage, nextPage, changePage, prevPage, loadMore, canLoadMore, loadMoreButton, smallVersion, theme, }: PaginationBarPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { PlayButtonPropsType } from "../types";
2
- export declare function PlayButton({ color, type, size, ...props }: PlayButtonPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function PlayButton({ color, type, size, ...props }: PlayButtonPropsType): JSX.Element;
@@ -23,4 +23,4 @@ import { SlideTransitionPropsType } from '../types';
23
23
  * Учтите, что анимации сужают компонент, поэтому он будет деформироваться.
24
24
  * При высокой (автор проводил тесты на 300ms) скорости анимации ощущается нормально (если вы не Флеш).
25
25
  * */
26
- export declare function SlideTransition({ children, animation, className, additionStyles, style, }: SlideTransitionPropsType): import("react/jsx-runtime").JSX.Element;
26
+ export declare function SlideTransition({ children, animation, className, additionStyles, style, }: SlideTransitionPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TabButtonsPropsType } from '../types';
2
- export declare function TabButtons({ active, iconLeft, iconRight, disabled, text, children, customComponent, height, width, additionStyles, theme, ...props }: TabButtonsPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function TabButtons({ active, iconLeft, iconRight, disabled, text, children, customComponent, height, width, additionStyles, theme, ...props }: TabButtonsPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TabFramePropsType } from '../types';
2
- export declare function TabFrame({ width, tabs, additionStyles, theme }: TabFramePropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function TabFrame({ width, tabs, additionStyles, theme }: TabFramePropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TagPropsType } from "../types";
2
- export declare function Tag({ active, size, icon, label, checkbox, checked, actions, onCheckboxClick, onXCloseClick, onClick, count, }: TagPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function Tag({ active, size, icon, label, checkbox, checked, actions, onCheckboxClick, onXCloseClick, onClick, count, }: TagPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TagCheckboxPropsType } from '../types';
2
- export declare function TagCheckbox({ size, checked, disabled, onClick }: TagCheckboxPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function TagCheckbox({ size, checked, disabled, onClick }: TagCheckboxPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TagCountPropsType } from "../types";
2
- export declare function TagCount({ count, color, size }: TagCountPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function TagCount({ count, color, size }: TagCountPropsType): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { TogglePropsType } from "../types";
2
- export declare function Toggle(props: TogglePropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function Toggle(props: TogglePropsType): JSX.Element;
@@ -7,4 +7,4 @@ import { TooltipTypes } from "../types/TooltipTypes";
7
7
  * @param color Тема: 'light'/'dark'
8
8
  * @constructor
9
9
  */
10
- export declare function Tooltip({ text, description, arrow, classes, styles, targetRef, onClose, excludedOnCloseElements, color }: TooltipTypes): import("react/jsx-runtime").JSX.Element;
10
+ export declare function Tooltip({ text, description, arrow, classes, styles, targetRef, onClose, excludedOnCloseElements, color }: TooltipTypes): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { UserPickPropsType } from "../types";
2
- export declare function UserPick({ size, url, additionStyles }: UserPickPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function UserPick({ size, url, additionStyles }: UserPickPropsType): JSX.Element;
@@ -7,5 +7,5 @@ type PropsType = {
7
7
  disabled?: boolean;
8
8
  width?: 'hug' | 'fill';
9
9
  };
10
- export declare function FieldItem(props: PropsType): import("react/jsx-runtime").JSX.Element;
10
+ export declare function FieldItem(props: PropsType): JSX.Element;
11
11
  export {};
@@ -14,5 +14,5 @@ type PropsType<D, M extends boolean> = FieldPropsType<GetValueType<D, M>> & {
14
14
  disabled?: boolean;
15
15
  required?: boolean;
16
16
  };
17
- export declare function FormRadioField<D, M extends boolean = false>(props: PropsType<D, M>): import("react/jsx-runtime").JSX.Element;
17
+ export declare function FormRadioField<D, M extends boolean = false>(props: PropsType<D, M>): JSX.Element;
18
18
  export {};
@@ -17,5 +17,5 @@ type BasePropsType<D, M extends boolean> = {
17
17
  required?: boolean;
18
18
  };
19
19
  type PropsType<D, M extends boolean> = Omit<React.ComponentProps<typeof FormFieldBase>, keyof BasePropsType<D, M> | keyof FieldPropsType<ValueType<D, M>>> & FieldPropsType<ValueType<D, M>> & BasePropsType<D, M>;
20
- export declare function FormSelectFieldBase<D, M extends boolean = false>(props: PropsType<D, M>): import("react/jsx-runtime").JSX.Element;
20
+ export declare function FormSelectFieldBase<D, M extends boolean = false>(props: PropsType<D, M>): JSX.Element;
21
21
  export {};
@@ -10,5 +10,5 @@ type BasePropsType = FieldPropsType<string> & {
10
10
  theme?: "light" | "dark";
11
11
  };
12
12
  type PropsType = Omit<React.ComponentProps<'textarea'>, keyof BasePropsType> & BasePropsType;
13
- export declare function FormTextareaField(props: PropsType): import("react/jsx-runtime").JSX.Element;
13
+ export declare function FormTextareaField(props: PropsType): JSX.Element;
14
14
  export {};
@@ -2,5 +2,5 @@ import React from "react";
2
2
  type PropsType = React.ComponentProps<'button'> & {
3
3
  open?: boolean;
4
4
  };
5
- export declare function DropdownArrow(props: PropsType): import("react/jsx-runtime").JSX.Element;
5
+ export declare function DropdownArrow(props: PropsType): JSX.Element;
6
6
  export {};
@@ -3,5 +3,5 @@ type PropsType = React.ComponentProps<'button'> & {
3
3
  icon: React.ReactNode;
4
4
  color: 'gray' | 'red';
5
5
  };
6
- export declare function InputInnerButton(props: PropsType): import("react/jsx-runtime").JSX.Element;
6
+ export declare function InputInnerButton(props: PropsType): JSX.Element;
7
7
  export {};
@@ -1,63 +1,63 @@
1
- [🔙 Назад](../../README.md)
2
-
3
- # CSS Variables
4
-
5
- В библиотеке используются **CSS-переменные** для цветов (в будущем, возможно, не только для них). Иногда может возникнуть необходимость изменить эти значения в вашем проекте.
6
-
7
- ---
8
-
9
- ## 🔧 Использование в разработке
10
-
11
- Для задания переменных в библиотеке используются **CSS Variables**, все переменные лучше складировать в файлах по типу `*-var.scss`:
12
-
13
- ```css
14
- :root {
15
- --var: #fff;
16
- }
17
- ```
18
-
19
- При использовании в стилях:
20
-
21
- ```scss
22
- @use 'variables' as *;
23
-
24
- background-color: var(--var);
25
- ```
26
-
27
- 📌 **Важно**: при разработке новых компонентов в библиотеке используйте **только** CSS-переменные, чтобы пользователи могли их переопределять в своих проектах.
28
-
29
- ---
30
-
31
- ## 🎨 Кастомизация в проекте
32
-
33
- ### 1️⃣ Создайте файл с переопределением переменных
34
-
35
- Рекомендуется создать отдельный файл (например, `indicator-ui-variables.scss`), в котором будут переопределены значения CSS-переменных библиотеки. Все новые переменные должны находиться в `:root {}`.
36
-
37
- Пример:
38
-
39
- ```scss
40
- :root {
41
- --base-black: #000000;
42
- --base-white: #ffffff;
43
- /* Другие цвета */
44
- }
45
- ```
46
-
47
- 🔹 _(Автор не расист, все вопросы к [Rockstar](https://support.rockstargames.com/), так как цитата взята оттуда)_ 😁
48
-
49
- ### 2️⃣ Импортируйте файл с переменными
50
-
51
- Чтобы переопределенные переменные применились корректно, **импортируйте их после подключения библиотеки**:
52
-
53
- ```scss
54
- @import 'indicator-ui/dist/index.css';
55
- @import 'indicator-ui-variables.scss';
56
- ```
57
-
58
- 🎉 **Ура, победа. Вы переопределили переменные в библиотеке.**
59
-
60
-
61
- ## PS
62
-
1
+ [🔙 Назад](../../README.md)
2
+
3
+ # CSS Variables
4
+
5
+ В библиотеке используются **CSS-переменные** для цветов (в будущем, возможно, не только для них). Иногда может возникнуть необходимость изменить эти значения в вашем проекте.
6
+
7
+ ---
8
+
9
+ ## 🔧 Использование в разработке
10
+
11
+ Для задания переменных в библиотеке используются **CSS Variables**, все переменные лучше складировать в файлах по типу `*-var.scss`:
12
+
13
+ ```css
14
+ :root {
15
+ --var: #fff;
16
+ }
17
+ ```
18
+
19
+ При использовании в стилях:
20
+
21
+ ```scss
22
+ @use 'variables' as *;
23
+
24
+ background-color: var(--var);
25
+ ```
26
+
27
+ 📌 **Важно**: при разработке новых компонентов в библиотеке используйте **только** CSS-переменные, чтобы пользователи могли их переопределять в своих проектах.
28
+
29
+ ---
30
+
31
+ ## 🎨 Кастомизация в проекте
32
+
33
+ ### 1️⃣ Создайте файл с переопределением переменных
34
+
35
+ Рекомендуется создать отдельный файл (например, `indicator-ui-variables.scss`), в котором будут переопределены значения CSS-переменных библиотеки. Все новые переменные должны находиться в `:root {}`.
36
+
37
+ Пример:
38
+
39
+ ```scss
40
+ :root {
41
+ --base-black: #000000;
42
+ --base-white: #ffffff;
43
+ /* Другие цвета */
44
+ }
45
+ ```
46
+
47
+ 🔹 _(Автор не расист, все вопросы к [Rockstar](https://support.rockstargames.com/), так как цитата взята оттуда)_ 😁
48
+
49
+ ### 2️⃣ Импортируйте файл с переменными
50
+
51
+ Чтобы переопределенные переменные применились корректно, **импортируйте их после подключения библиотеки**:
52
+
53
+ ```scss
54
+ @import 'indicator-ui/dist/index.css';
55
+ @import 'indicator-ui-variables.scss';
56
+ ```
57
+
58
+ 🎉 **Ура, победа. Вы переопределили переменные в библиотеке.**
59
+
60
+
61
+ ## PS
62
+
63
63
  [Если интересно, как выглядила бы документация, если ее автор был из Калифорнии](./CSSVariablesCalifornia.md)
@@ -1,62 +1,62 @@
1
- [🔙 Назад](../../README.md)
2
-
3
- # CSS Variables 🌴🌊
4
-
5
- Йооо, чуваки, в этой библиотеке мы юзаем **CSS-переменные** для цветов (ну, возможно, в будущем не только для них, кто знает). Иногда захочешь немного покрутить их под свой проект, и вот тебе, как это сделать, если хочешь, чтобы всё было чётко! ✌️
6
-
7
- ---
8
-
9
- ## 🔧 Как это работает, чувак?
10
-
11
- Мы задаем переменные в библиотеке через **CSS Variables**:
12
-
13
- ```css
14
- :root {
15
- --var: #fff; /* Ну типа белый цвет, да */
16
- }
17
- ```
18
-
19
- А когда хочешь использовать эту штуку, просто пиши так:
20
-
21
- ```scss
22
- @use 'variables' as *;
23
-
24
- background-color: var(--var); /* Эй, хватит смотреть на меня, ты ж знаешь, что это делает */
25
- ```
26
-
27
- 📌 **Тупо важно**: Когда ты делаешь новые компоненты для библиотеки, **используй только** CSS-переменные, чтобы другие ребята могли под себя всё настроить. Просто чётко, понял? 😎
28
-
29
- ---
30
-
31
- ## 🎨 Как настроить свой проект, чувак?
32
-
33
- ### 1️⃣ Создай файл, где ты всё переделаешь
34
-
35
- Эй, не усложняй, просто создай отдельный файл (например, `indicator-ui-variables.scss`), где будешь переделывать эти переменные на свой вкус. Все твои новые переменные должны быть в `:root {}`. Это как твоя домашка, только тут можно реально кайфануть. 😁
36
-
37
- Пример, ну типа так:
38
-
39
- ```scss
40
- :root {
41
- --base-black: #000000; /* Ну ты понял, базовый чёрный */
42
- --base-white: #ffffff; /* Базовый белый, чтоб не скучно было */
43
- /* Добавь что хочешь — зелёный для своей ласточки или оранжевый для веселья */
44
- }
45
- ```
46
-
47
- 🔹 _(Не переживай, я не расист, всё как-то так у Rockstar вон, если что 😜)_
48
-
49
- ### 2️⃣ Импортируй файл с переменными
50
-
51
- Чувак, вот тут важный момент — тебе нужно импортировать твой файл **после** подключения самой библиотеки, иначе, ну, как бы, не прокатит. Это как печеньки после молока, понял? 😋
52
-
53
- ```scss
54
- @import 'indicator-ui/dist/index.css';
55
- @import 'indicator-ui-variables.scss'; /* И вот тут ты подключаешь свои переменные */
56
- ```
57
-
58
- 🎉 **Йо! Ты переопределил переменные в библиотеке, теперь ты как бог в своём проекте.** 🔥
59
-
60
- ---
61
-
1
+ [🔙 Назад](../../README.md)
2
+
3
+ # CSS Variables 🌴🌊
4
+
5
+ Йооо, чуваки, в этой библиотеке мы юзаем **CSS-переменные** для цветов (ну, возможно, в будущем не только для них, кто знает). Иногда захочешь немного покрутить их под свой проект, и вот тебе, как это сделать, если хочешь, чтобы всё было чётко! ✌️
6
+
7
+ ---
8
+
9
+ ## 🔧 Как это работает, чувак?
10
+
11
+ Мы задаем переменные в библиотеке через **CSS Variables**:
12
+
13
+ ```css
14
+ :root {
15
+ --var: #fff; /* Ну типа белый цвет, да */
16
+ }
17
+ ```
18
+
19
+ А когда хочешь использовать эту штуку, просто пиши так:
20
+
21
+ ```scss
22
+ @use 'variables' as *;
23
+
24
+ background-color: var(--var); /* Эй, хватит смотреть на меня, ты ж знаешь, что это делает */
25
+ ```
26
+
27
+ 📌 **Тупо важно**: Когда ты делаешь новые компоненты для библиотеки, **используй только** CSS-переменные, чтобы другие ребята могли под себя всё настроить. Просто чётко, понял? 😎
28
+
29
+ ---
30
+
31
+ ## 🎨 Как настроить свой проект, чувак?
32
+
33
+ ### 1️⃣ Создай файл, где ты всё переделаешь
34
+
35
+ Эй, не усложняй, просто создай отдельный файл (например, `indicator-ui-variables.scss`), где будешь переделывать эти переменные на свой вкус. Все твои новые переменные должны быть в `:root {}`. Это как твоя домашка, только тут можно реально кайфануть. 😁
36
+
37
+ Пример, ну типа так:
38
+
39
+ ```scss
40
+ :root {
41
+ --base-black: #000000; /* Ну ты понял, базовый чёрный */
42
+ --base-white: #ffffff; /* Базовый белый, чтоб не скучно было */
43
+ /* Добавь что хочешь — зелёный для своей ласточки или оранжевый для веселья */
44
+ }
45
+ ```
46
+
47
+ 🔹 _(Не переживай, я не расист, всё как-то так у Rockstar вон, если что 😜)_
48
+
49
+ ### 2️⃣ Импортируй файл с переменными
50
+
51
+ Чувак, вот тут важный момент — тебе нужно импортировать твой файл **после** подключения самой библиотеки, иначе, ну, как бы, не прокатит. Это как печеньки после молока, понял? 😋
52
+
53
+ ```scss
54
+ @import 'indicator-ui/dist/index.css';
55
+ @import 'indicator-ui-variables.scss'; /* И вот тут ты подключаешь свои переменные */
56
+ ```
57
+
58
+ 🎉 **Йо! Ты переопределил переменные в библиотеке, теперь ты как бог в своём проекте.** 🔥
59
+
60
+ ---
61
+
62
62
  Теперь ты точно в игре! Не забывай — кастомизация это твоя фишка, а библиотека — твой инструмент. Давай, чувак, делай всё по-своему и кайфуй! 🌞🌴