indicator-ui 0.1.119 → 0.1.121

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 (27) hide show
  1. package/dist/index.css +949 -1023
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.js +11 -10
  4. package/dist/index.js.map +1 -1
  5. package/dist/scss/styles/colors/secondary.scss +12 -12
  6. package/dist/scss/styles/mixins/formFieldMixins.scss +55 -0
  7. package/dist/scss/styles/mixins/index.scss +1 -0
  8. package/dist/scss/styles/mixins/utils.scss +8 -0
  9. package/dist/scss/test/pages/style.scss +6 -0
  10. package/dist/scss/ui/CheckboxMark/styles/mixins/base.scss +14 -22
  11. package/dist/scss/ui/CheckboxMark/styles/mixins/checkbox-mark.scss +17 -117
  12. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/checked.scss +21 -22
  13. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/correct.scss +43 -45
  14. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/disabled.scss +15 -31
  15. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/error.scss +17 -11
  16. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/incorrect.scss +38 -22
  17. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/indeterminate.scss +8 -4
  18. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/radio.scss +1 -7
  19. package/dist/ts/src/test/pages/ButtonsPage.d.ts +1 -0
  20. package/dist/ts/src/test/pages/index.d.ts +1 -1
  21. package/dist/ts/src/ui/Buttons/types/ButtonTypes.d.ts +5 -1
  22. package/dist/ts/src/ui/Tag/ui/FilterTag.d.ts +1 -1
  23. package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useFormPaginatedSelectField.d.ts +6 -5
  24. package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useSelectFieldState.d.ts +1 -1
  25. package/docs/CSSVariables/CSSThemeCustomize.md +123 -0
  26. package/package.json +1 -1
  27. /package/dist/ts/src/test/pages/{FieldsPage.d.ts → FieldsPage/FieldsPage.d.ts} +0 -0
package/dist/scss/ui/CheckboxMark/styles/mixins/properties/incorrect.scss CHANGED
@@ -1,49 +1,65 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
3
  @mixin incorrect-checked-hover() {
4
- background-color: var(--error-600);
4
+ border: transparent !important;
5
+ background-color: var(--error-600) !important;
5
6
 
6
- border: transparent;
7
- }
8
-
9
- @mixin incorrect-disabled-hover() {
10
- background-color: var(--gray-300);
11
-
12
- border: transparent;
7
+ @include darkTheme {
8
+ border: transparent !important;
9
+ background-color: var(--error-700) !important;
10
+ }
13
11
  }
14
12
 
15
13
  @mixin incorrect-checked() {
14
+ border: transparent;
16
15
  background-color: var(--error-500);
17
16
 
18
- border: transparent;
19
- @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
17
+ @include fnt($size: 14, $line-height: 14, $weight: 500);
18
+ @include fnt($color: var(--base-white));
20
19
  @include modify-svg($stroke: var(--base-white));
21
20
 
22
- &:after {
23
- display: none;
21
+ @include darkTheme {
22
+ background-color: var(--error-600);
23
+ @include fnt($color: var(--gray-50));
24
+ @include modify-svg($stroke: var(--gray-50));
24
25
  }
25
26
 
26
- @include tablet-plus {
27
- &:hover {
28
- @include incorrect-checked-hover();
29
- }
27
+ &:after {
28
+ display: none;
30
29
  }
31
30
  }
32
31
 
33
- @mixin incorrect-disabled() {
32
+ @mixin incorrect-checked-disabled() {
34
33
  background-color: var(--gray-300);
35
-
36
34
  border: transparent;
37
35
  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
38
36
  @include modify-svg($stroke: var(--base-white));
39
37
 
38
+ @include darkTheme {
39
+ background-color: var(--gray-700);
40
+ @include fnt($color: var(--gray-500));
41
+ @include modify-svg($stroke: var(--gray-500));
42
+ }
43
+
40
44
  &:after {
41
45
  display: none;
42
46
  }
47
+ }
43
48
 
44
- @include tablet-plus {
45
- &:hover {
46
- @include incorrect-disabled-hover();
47
- }
49
+ @mixin incorrect-disabled() {
50
+ border: 1px solid var(--gray-300);
51
+ background-color: var(--gray-100);
52
+ @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--gray-300));
53
+ @include modify-svg($stroke: var(--base-white));
54
+
55
+ @include darkTheme {
56
+ border: 1px solid var(--gray-700);
57
+ background-color: var(--gray-800);
58
+ @include fnt($color: var(--gray-500));
59
+ @include modify-svg($stroke: var(--gray-500));
60
+ }
61
+
62
+ &:after {
63
+ display: none;
48
64
  }
49
65
  }
package/dist/scss/ui/CheckboxMark/styles/mixins/properties/indeterminate.scss CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  @mixin indeterminate-hover() {
4
4
  border: 1px solid var(--primary-400);
5
+ @include darkTheme {
6
+ border: 1px solid var(--primary-700);
7
+ background-color: var(--primary-900);
8
+ }
5
9
  }
6
10
 
7
11
  @mixin indeterminate() {
@@ -11,9 +15,9 @@
11
15
  @include modify-svg($stroke: var(--primary-500));
12
16
  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--primary-500));
13
17
 
14
- @include tablet-plus {
15
- &:hover {
16
- @include indeterminate-hover();
17
- }
18
+ @include darkTheme {
19
+ background-color: var(--primary-950);
20
+ border: 1px solid var(--primary-700);
21
+ @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--primary-600));
18
22
  }
19
23
  }
package/dist/scss/ui/CheckboxMark/styles/mixins/properties/radio.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
- @mixin radio($theme: 'light') {
3
+ @mixin radio() {
4
4
  border-radius: 50%;
5
5
 
6
6
  &:after {
@@ -10,11 +10,5 @@
10
10
  width: 8px;
11
11
  height: 8px;
12
12
  border-radius: 50%;
13
-
14
- @if $theme == 'light' {
15
- background-color: var(--primary-500);
16
- } @else {
17
- background-color: var(--rose-600);
18
- }
19
13
  }
20
14
  }
package/dist/ts/src/test/pages/ButtonsPage.d.ts CHANGED
@@ -1 +1,2 @@
1
+ import './style.scss';
1
2
  export declare function ButtonsPage(): JSX.Element;
package/dist/ts/src/test/pages/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export * from './HomePage';
2
2
  export * from './ButtonsPage';
3
3
  export * from './MicroButtonsPage';
4
- export * from './FieldsPage';
4
+ export * from './FieldsPage/FieldsPage';
5
5
  export * from './CheckboxMarkPage';
6
6
  export * from './FormBuilderPage';
7
7
  export * from './CheckboxPage';
package/dist/ts/src/ui/Buttons/types/ButtonTypes.d.ts CHANGED
@@ -35,7 +35,11 @@ export type ButtonPropsType<T extends React.ElementType> = AsProps<T, {
35
35
  }>;
36
36
  /** Дополнительные имена стилей */
37
37
  additionStyles?: string | string[];
38
- /** Тема кнопки: светлая (primary: blue-dark) или темная (primary: rose)*/
38
+ /**
39
+ * Тема кнопки: светлая (primary: blue-dark) или темная (primary: rose)
40
+ *
41
+ * @deprecated
42
+ * */
39
43
  theme?: "light" | "dark" | undefined;
40
44
  isLoading?: boolean;
41
45
  counter?: React.ReactNode;
package/dist/ts/src/ui/Tag/ui/FilterTag.d.ts CHANGED
@@ -8,6 +8,6 @@ type PropsType<T extends React.ElementType> = AsProps<T, {
8
8
  onClose?: () => void;
9
9
  active?: boolean;
10
10
  }>;
11
- export declare const _FilterTag: <T extends React.ElementType = "button">(props: PropsType<T>, ref: RefType<T>) => JSX.Element;
11
+ export declare const _FilterTag: <T extends React.ElementType = "button">(props: PropsType<T>, ref: React.Ref<RefType<T>>) => JSX.Element;
12
12
  export declare const FilterTag: <T extends React.ElementType = "button">(props: PropsType<T> & React.RefAttributes<RefType<T>>) => JSX.Element;
13
13
  export {};
package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useFormPaginatedSelectField.d.ts CHANGED
@@ -6,6 +6,7 @@ type BasePropsType<D, M extends boolean> = FieldPropsType<ValueType<D, M>> & {
6
6
  options?: OptionsType<D>;
7
7
  multiple?: M;
8
8
  disabled?: boolean;
9
+ placeholder?: string;
9
10
  /** Заменяет `options`, которые есть сейчас */
10
11
  search?: (props: FetchEventPropsType<D>) => Promise<OptionsType<D>>;
11
12
  /** Добавляет `options` к текущим */
@@ -28,7 +29,7 @@ export declare function useFormPaginatedSelectField<D, M extends boolean = false
28
29
  canSearch: boolean;
29
30
  canPaginate: boolean;
30
31
  isLoading: boolean;
31
- fieldState: "search" | "view";
32
+ fieldState: "view" | "search";
32
33
  setIsFocus: React.Dispatch<React.SetStateAction<boolean>>;
33
34
  isShow: boolean;
34
35
  getIsShow: () => boolean;
@@ -40,15 +41,15 @@ export declare function useFormPaginatedSelectField<D, M extends boolean = false
40
41
  modalRef: React.MutableRefObject<HTMLDivElement | null>;
41
42
  targetRef: React.MutableRefObject<HTMLDivElement | null>;
42
43
  otherProps: {
43
- id?: string | undefined | undefined;
44
44
  ref?: React.LegacyRef<HTMLDivElement> | undefined;
45
+ slot?: string | undefined | undefined;
46
+ style?: React.CSSProperties | undefined;
47
+ title?: string | undefined | undefined;
48
+ id?: string | undefined | undefined;
45
49
  color?: string | undefined | undefined;
46
50
  content?: string | undefined | undefined;
47
51
  translate?: "yes" | "no" | undefined | undefined;
48
52
  hidden?: boolean | undefined | undefined;
49
- slot?: string | undefined | undefined;
50
- style?: React.CSSProperties | undefined;
51
- title?: string | undefined | undefined;
52
53
  onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
53
54
  onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
54
55
  key?: React.Key | null | undefined;
package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useSelectFieldState.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export declare function useSelectFieldState(): {
2
- fieldState: "search" | "view";
2
+ fieldState: "view" | "search";
3
3
  setIsFocus: import("react").Dispatch<import("react").SetStateAction<boolean>>;
4
4
  };
package/docs/CSSVariables/CSSThemeCustomize.md ADDED
@@ -0,0 +1,123 @@
1
+ # CSS кастомизация
2
+
3
+ ---
4
+
5
+ ## FormField
6
+
7
+ - ### base
8
+ - `--ui-form-field-label-color`
9
+ - `--ui-form-field-required-color`
10
+ - `--ui-form-field-hint-color`
11
+ - `--ui-form-field-helper-link-color`
12
+ - `--ui-form-field-background-color`
13
+ - `--ui-form-field-border-color`
14
+ - `--ui-form-field-border-radius`
15
+ - `--ui-form-field-text-color`
16
+ - `--ui-form-field-placeholder-color`
17
+ - `--ui-form-field-box-shadow`
18
+
19
+ - #### focus
20
+ - `--ui-form-field-focus-text-color`
21
+ - `--ui-form-field-focus-background-color`
22
+ - `--ui-form-field-focus-border-color`
23
+ - `--ui-form-field-focus-box-shadow`
24
+
25
+ - #### disabled
26
+ - `--ui-form-field-disabled-text-color`
27
+ - `--ui-form-field-disabled-background-color`
28
+ - `--ui-form-field-disabled-border-color`
29
+
30
+ - #### error
31
+ - `--ui-form-field-error-text-color`
32
+ - `--ui-form-field-error-hint-color`
33
+ - `--ui-form-field-error-background-color`
34
+ - `--ui-form-field-error-border-color`
35
+ - `--ui-form-field-error-box-shadow`
36
+
37
+ - #### error focus
38
+ - `--ui-form-field-error-focus-text-color`
39
+ - `--ui-form-field-error-focus-background-color`
40
+ - `--ui-form-field-error-focus-border-color`
41
+ - `--ui-form-field-error-focus-box-shadow`
42
+
43
+ ## Dropdown
44
+ - `--ui-dropdown-background-color`
45
+ - `--ui-dropdown-border-color`
46
+ - `--ui-dropdown-border-radius`
47
+ - `--ui-dropdown-box-shadow`
48
+ - `--ui-dropdown-title-color`
49
+
50
+ ### Dropdown Item
51
+ - #### base
52
+ - `--ui-dropdown-item-border-radius` - сюда можно писать только одиночный радиус
53
+ - `--ui-dropdown-item-text-color`
54
+ - `--ui-dropdown-item-support-text-color`
55
+ - `--ui-dropdown-item-show-icon-color`
56
+ - #### hover
57
+ - `--ui-dropdown-item-hover-background-color`
58
+ - `--ui-dropdown-item-hover-text-color`
59
+ - `--ui-dropdown-item-hover-support-text-color`
60
+ - `--ui-dropdown-item-hover-show-icon-color`
61
+ - #### active
62
+ - `--ui-dropdown-item-active-background-color`
63
+ - `--ui-dropdown-item-active-text-color`
64
+ - `--ui-dropdown-item-active-support-text-color`
65
+ - `--ui-dropdown-item-active-show-icon-color`
66
+ - `--ui-dropdown-item-active-check-icon-color`
67
+ - #### active hover
68
+ - `--ui-dropdown-item-active-hover-background-color`
69
+ - `--ui-dropdown-item-active-hover-text-color`
70
+ - `--ui-dropdown-item-active-hover-support-text-color`
71
+ - `--ui-dropdown-item-active-hover-show-icon-color`
72
+ - `--ui-dropdown-item-active-hover-check-icon-color`
73
+
74
+ ## Checkbox
75
+ - ### base
76
+ - `--ui-checkbox-text-color`
77
+ - `--ui-checkbox-support-text-color`
78
+ - ### focus
79
+ - `--ui-checkbox-focus-text-color`
80
+ - `--ui-checkbox-focus-support-text-color`
81
+ - ### error
82
+ - `--ui-checkbox-error-text-color`
83
+ - `--ui-checkbox-error-support-text-color`
84
+ - ### error focus
85
+ - `--ui-checkbox-error-focus-text-color`
86
+ - `--ui-checkbox-error-focus-text-color`
87
+ - ### disabled
88
+ - `--ui-checkbox-disabled-text-color`
89
+ - `--ui-checkbox-disabled-support-text-color`
90
+ - ### active
91
+ - `--ui-checkbox-active-text-color`
92
+ - `--ui-checkbox-active-support-text-color`
93
+ - ### active focus
94
+ - `--ui-checkbox-active-focus-text-color`
95
+ - `--ui-checkbox-active-focus-support-text-color`
96
+
97
+ ### Checkbox Mark
98
+ - ### base
99
+ - `--ui-checkbox-mark-background-color`
100
+ - `--ui-checkbox-mark-border-color`
101
+ - ### focus
102
+ - `--ui-checkbox-mark-focus-background-color`
103
+ - `--ui-checkbox-mark-focus-border-color`
104
+ - ### error
105
+ - `--ui-checkbox-mark-error-background-color`
106
+ - `--ui-checkbox-mark-error-border-color`
107
+ - `--ui-checkbox-mark-error-symbol-color`
108
+ - ### error focus
109
+ - `--ui-checkbox-mark-error-focus-background-color`
110
+ - `--ui-checkbox-mark-error-focus-border-color`
111
+ - `--ui-checkbox-mark-error-focus-symbol-color`
112
+ - ### disabled
113
+ - `--ui-checkbox-mark-disabled-background-color`
114
+ - `--ui-checkbox-mark-disabled-border-color`
115
+ - `--ui-checkbox-mark-disabled-symbol-color`
116
+ - ### active
117
+ - `--ui-checkbox-mark-active-background-color`
118
+ - `--ui-checkbox-mark-active-border-color`
119
+ - `--ui-checkbox-mark-active-symbol-color`
120
+ - ### active focus
121
+ - `--ui-checkbox-mark-active-focus-background-color`
122
+ - `--ui-checkbox-mark-active-focus-border-color`
123
+ - `--ui-checkbox-mark-active-focus-symbol-color`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "indicator-ui",
3
- "version": "0.1.119",
3
+ "version": "0.1.121",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/ts/src/index.d.ts",
6
6
  "style": "dist/index.css",