indicator-ui 0.1.83 → 0.1.85

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.
@@ -1,17 +1,27 @@
1
1
  @use '../../../../styles' as *;
2
2
 
3
- @mixin checkbox-mark-base-hover() {
4
- background-color: var(--primary-50);
5
- border: 1px solid var(--primary-200);
3
+ @mixin checkbox-mark-base-hover($theme) {
4
+ @if $theme == 'light' {
5
+ background-color: var(--primary-50);
6
+ border: 1px solid var(--primary-200);
7
+ } @else {
8
+ background-color: var(--gray-iron-800);
9
+ border: 1px solid var(--gray-iron-500);
10
+ }
6
11
  }
7
12
 
8
- @mixin checkbox-mark-base() {
13
+ @mixin checkbox-mark-base($theme: 'light') {
9
14
  width: 20px;
10
15
  height: 20px;
11
16
  flex: none;
12
17
 
13
- background-color: var(--base-white);
14
- border: 1px solid var(--gray-300);
18
+ @if $theme == 'light' {
19
+ background-color: var(--base-white);
20
+ border: 1px solid var(--gray-300);
21
+ } @else {
22
+ background-color: var(--gray-iron-900);
23
+ border: 1px solid var(--gray-iron-500);
24
+ }
15
25
  box-sizing: border-box;
16
26
  cursor: pointer;
17
27
  overflow: hidden;
@@ -25,7 +35,7 @@
25
35
 
26
36
  @include tablet-plus {
27
37
  &:hover {
28
- @include checkbox-mark-base-hover();
38
+ @include checkbox-mark-base-hover($theme);
29
39
  }
30
40
  }
31
41
  }
@@ -5,88 +5,184 @@
5
5
  @mixin checkbox-mark() {
6
6
  .checkboxMark {
7
7
  transition: all ease-out 0.2s;
8
- @include base.checkbox-mark-base();
9
8
 
10
- &.checkbox {
11
- @include properties.checkbox();
12
- }
13
9
 
14
- &.radio {
15
- @include properties.radio();
16
- }
10
+ &[data-theme='light'] {
11
+ @include base.checkbox-mark-base('light');
17
12
 
18
- &.checked {
19
- @include properties.checked();
20
- }
21
-
22
- &.indeterminate {
23
- @include properties.indeterminate();
24
- }
25
13
 
26
- &.error {
27
- @include properties.error();
28
- }
14
+ &.checkbox {
15
+ @include properties.checkbox();
16
+ }
29
17
 
30
- &.disabled {
31
- @include properties.disabled();
32
- }
18
+ &.radio {
19
+ @include properties.radio('light');
20
+ }
33
21
 
34
- &.correct {
35
22
  &.checked {
36
- @include properties.correct-checked();
23
+ @include properties.checked('light');
24
+ }
37
25
 
38
- &.disabled {
39
- @include properties.correct-disabled();
26
+ &.indeterminate {
27
+ @include properties.indeterminate();
28
+ }
29
+
30
+ &.error {
31
+ @include properties.error();
32
+ }
33
+
34
+ &.disabled {
35
+ @include properties.disabled('light');
36
+ }
37
+
38
+ &.correct {
39
+ &.checked {
40
+ @include properties.correct-checked('light');
41
+
42
+ &.disabled {
43
+ @include properties.correct-disabled('light');
44
+ }
40
45
  }
41
46
  }
42
- }
43
47
 
44
- &.incorrect {
45
- &.checked {
46
- @include properties.incorrect-checked();
48
+ &.incorrect {
49
+ &.checked {
50
+ @include properties.incorrect-checked();
47
51
 
48
- &.disabled {
49
- @include properties.incorrect-disabled();
52
+ &.disabled {
53
+ @include properties.incorrect-disabled();
54
+ }
55
+ }
56
+ }
57
+
58
+ @include tablet-plus {
59
+ &.hover {
60
+ @include base.checkbox-mark-base-hover('light');
61
+
62
+ &.checked {
63
+ @include properties.checked-hover('light');
64
+ }
65
+
66
+ &.indeterminate {
67
+ @include properties.indeterminate-hover();
68
+ }
69
+
70
+ &.error {
71
+ @include properties.error-hover();
72
+ }
73
+
74
+ &.disabled {
75
+ @include properties.disabled-hover('light');
76
+ }
77
+
78
+ &.correct {
79
+ &.checked {
80
+ @include properties.correct-checked-hover('light');
81
+
82
+ &.disabled {
83
+ @include properties.correct-disabled-hover('light');
84
+ }
85
+ }
86
+ }
87
+
88
+ &.incorrect {
89
+ &.checked {
90
+ @include properties.incorrect-checked-hover();
91
+
92
+ &.disabled {
93
+ @include properties.incorrect-disabled-hover();
94
+ }
95
+ }
96
+ }
50
97
  }
51
98
  }
52
99
  }
53
100
 
54
- @include tablet-plus {
55
- &.hover {
56
- @include base.checkbox-mark-base-hover();
101
+ &[data-theme='dark'] {
102
+ @include base.checkbox-mark-base('dark');
103
+
104
+
105
+ &.checkbox {
106
+ @include properties.checkbox();
107
+ }
108
+
109
+ &.radio {
110
+ @include properties.radio('dark');
111
+ }
112
+
113
+ &.checked {
114
+ @include properties.checked('dark');
115
+ }
116
+
117
+ &.indeterminate {
118
+ @include properties.indeterminate();
119
+ }
120
+
121
+ &.error {
122
+ @include properties.error();
123
+ }
124
+
125
+ &.disabled {
126
+ @include properties.disabled('dark');
127
+ }
57
128
 
129
+ &.correct {
58
130
  &.checked {
59
- @include properties.checked-hover();
60
- }
131
+ @include properties.correct-checked('dark');
61
132
 
62
- &.indeterminate {
63
- @include properties.indeterminate-hover();
133
+ &.disabled {
134
+ @include properties.correct-disabled('dark');
135
+ }
64
136
  }
137
+ }
65
138
 
66
- &.error {
67
- @include properties.error-hover();
68
- }
139
+ &.incorrect {
140
+ &.checked {
141
+ @include properties.incorrect-checked();
69
142
 
70
- &.disabled {
71
- @include properties.disabled-hover();
143
+ &.disabled {
144
+ @include properties.incorrect-disabled();
145
+ }
72
146
  }
147
+ }
148
+
149
+ @include tablet-plus {
150
+ &.hover {
151
+ @include base.checkbox-mark-base-hover('dark');
73
152
 
74
- &.correct {
75
153
  &.checked {
76
- @include properties.correct-checked-hover();
154
+ @include properties.checked-hover('dark');
155
+ }
77
156
 
78
- &.disabled {
79
- @include properties.correct-disabled-hover();
157
+ &.indeterminate {
158
+ @include properties.indeterminate-hover();
159
+ }
160
+
161
+ &.error {
162
+ @include properties.error-hover();
163
+ }
164
+
165
+ &.disabled {
166
+ @include properties.disabled-hover('dark');
167
+ }
168
+
169
+ &.correct {
170
+ &.checked {
171
+ @include properties.correct-checked-hover('dark');
172
+
173
+ &.disabled {
174
+ @include properties.correct-disabled-hover('dark');
175
+ }
80
176
  }
81
177
  }
82
- }
83
178
 
84
- &.incorrect {
85
- &.checked {
86
- @include properties.incorrect-checked-hover();
179
+ &.incorrect {
180
+ &.checked {
181
+ @include properties.incorrect-checked-hover();
87
182
 
88
- &.disabled {
89
- @include properties.incorrect-disabled-hover();
183
+ &.disabled {
184
+ @include properties.incorrect-disabled-hover();
185
+ }
90
186
  }
91
187
  }
92
188
  }
@@ -1,14 +1,24 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
- @mixin checked-hover() {
4
- border: 1px solid var(--primary-400);
3
+ @mixin checked-hover($theme) {
4
+ @if $theme == 'light' {
5
+ border: 1px solid var(--primary-400);
6
+ } @else {
7
+ background-color: var(--rose-900);
8
+ border: 1px solid var(--rose-700);
9
+ }
5
10
  }
6
11
 
7
- @mixin checked() {
8
- background-color: var(--primary-50);
9
- border: 1px solid var(--primary-200);
10
-
11
- @include modify-svg($stroke: var(--primary-500));
12
+ @mixin checked($theme: 'light') {
13
+ @if $theme == 'light' {
14
+ background-color: var(--primary-50);
15
+ border: 1px solid var(--primary-200);
16
+ @include modify-svg($stroke: var(--primary-500));
17
+ } @else {
18
+ background-color: var(--rose-950);
19
+ border: 1px solid var(--rose-700);
20
+ @include modify-svg($stroke: var(--rose-600));
21
+ }
12
22
 
13
23
  &:after {
14
24
  display: block;
@@ -16,7 +26,7 @@
16
26
 
17
27
  @include tablet-plus {
18
28
  &:hover {
19
- @include checked-hover();
29
+ @include checked-hover($theme);
20
30
  }
21
31
  }
22
32
  }
@@ -1,23 +1,38 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
- @mixin correct-checked-hover() {
4
- background-color: var(--primary-600);
3
+ @mixin correct-checked-hover($theme) {
4
+ @if $theme == 'light' {
5
+ background-color: var(--primary-600);
6
+ } @else {
7
+ background-color: var(--rose-700);
8
+ }
5
9
 
6
10
  border: transparent;
7
11
  }
8
12
 
9
- @mixin correct-disabled-hover() {
10
- background-color: var(--gray-300);
13
+ @mixin correct-disabled-hover($theme) {
14
+ @if $theme == 'light' {
15
+ background-color: var(--gray-300);
16
+ } @else {
17
+ background-color: var(--gray-iron-600);
18
+ }
11
19
 
12
20
  border: transparent;
13
21
  }
14
22
 
15
- @mixin correct-checked() {
16
- background-color: var(--primary-500);
23
+ @mixin correct-checked($theme: 'light') {
24
+ @if $theme == 'light' {
25
+ background-color: var(--primary-500);
26
+ @include fnt($color: var(--base-white));
27
+ @include modify-svg($stroke: var(--base-white));
28
+ } @else {
29
+ background-color: var(--rose-600);
30
+ @include fnt($color: var(--gray-iron-50));
31
+ @include modify-svg($stroke: var(--gray-iron-50));
32
+ }
17
33
 
18
34
  border: transparent;
19
- @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
20
- @include modify-svg($stroke: var(--base-white));
35
+ @include fnt($size: 14, $line-height: 14, $weight: 500);
21
36
 
22
37
  &:after {
23
38
  display: none;
@@ -25,17 +40,24 @@
25
40
 
26
41
  @include tablet-plus {
27
42
  &:hover {
28
- @include correct-checked-hover();
43
+ @include correct-checked-hover($theme);
29
44
  }
30
45
  }
31
46
  }
32
47
 
33
- @mixin correct-disabled() {
34
- background-color: var(--gray-300);
48
+ @mixin correct-disabled($theme: 'light') {
49
+ @if $theme == 'light' {
50
+ background-color: var(--gray-300);
51
+ @include fnt($color: var(--base-white));
52
+ @include modify-svg($stroke: var(--base-white));
53
+ } @else {
54
+ background-color: var(--gray-iron-600);
55
+ @include fnt($color: var(--gray-iron-500));
56
+ @include modify-svg($stroke: var(--gray-iron-500));
57
+ }
35
58
 
36
59
  border: transparent;
37
- @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
38
- @include modify-svg($stroke: var(--base-white));
60
+ @include fnt($size: 14, $line-height: 14, $weight: 500);
39
61
 
40
62
  &:after {
41
63
  display: none;
@@ -43,7 +65,7 @@
43
65
 
44
66
  @include tablet-plus {
45
67
  &:hover {
46
- @include correct-disabled-hover();
68
+ @include correct-disabled-hover($theme);
47
69
  }
48
70
  }
49
71
  }
@@ -1,21 +1,35 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
- @mixin disabled-hover() {
4
- background-color: var(--gray-100);
5
- border: 1px solid var(--gray-300);
3
+ @mixin disabled-hover($theme) {
4
+ @if $theme == 'light' {
5
+ background-color: var(--gray-100);
6
+ border: 1px solid var(--gray-300);
6
7
 
7
- @include modify-svg($stroke: var(--gray-300));
8
- @include fnt-flex($color: var(--gray-300));
8
+ @include modify-svg($stroke: var(--gray-300));
9
+ @include fnt-flex($color: var(--gray-300));
10
+ } @else {
11
+ background-color: var(--gray-iron-800);
12
+ border: 1px solid var(--gray-iron-700);
13
+ }
9
14
  }
10
15
 
11
- @mixin disabled() {
16
+ @mixin disabled($theme: 'light') {
12
17
  cursor: default;
13
18
 
14
- background-color: var(--gray-100);
15
- border: 1px solid var(--gray-300);
19
+ @if $theme == 'light' {
20
+ background-color: var(--gray-100);
21
+ border: 1px solid var(--gray-300);
16
22
 
17
- &:after {
18
- background-color: var(--gray-300);
23
+ &:after {
24
+ background-color: var(--gray-300);
25
+ }
26
+ } @else {
27
+ background-color: var(--gray-iron-800);
28
+ border: 1px solid var(--gray-iron-700);
29
+
30
+ &:after {
31
+ background-color: var(--gray-iron-700);
32
+ }
19
33
  }
20
34
 
21
35
  @include modify-svg($stroke: var(--gray-300));
@@ -23,7 +37,7 @@
23
37
 
24
38
  @include tablet-plus {
25
39
  &:hover {
26
- @include disabled-hover();
40
+ @include disabled-hover($theme);
27
41
  }
28
42
  }
29
43
  }
@@ -1,6 +1,6 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
- @mixin radio() {
3
+ @mixin radio($theme: 'light') {
4
4
  border-radius: 50%;
5
5
 
6
6
  &:after {
@@ -10,6 +10,11 @@
10
10
  width: 8px;
11
11
  height: 8px;
12
12
  border-radius: 50%;
13
- background-color: var(--primary-500);
13
+
14
+ @if $theme == 'light' {
15
+ background-color: var(--primary-500);
16
+ } @else {
17
+ background-color: var(--rose-600);
18
+ }
14
19
  }
15
20
  }
@@ -42,5 +42,6 @@ export type CheckboxPropsType = {
42
42
  * Элемент после text
43
43
  * */
44
44
  textAfterElement?: AdditionElementType;
45
+ theme?: 'dark' | 'light';
45
46
  };
46
47
  export {};
@@ -1,2 +1,2 @@
1
1
  import { CheckboxPropsType } from "../types";
2
- export declare function Checkbox({ checked, type, error, subtype, disabled, text, supportingText, indeterminate, onClick, width, height, onCheckboxMarkClick, additionStyle, beforeElement, afterElement, textBeforeElement, textAfterElement, }: CheckboxPropsType): JSX.Element;
2
+ export declare function Checkbox({ checked, type, error, subtype, disabled, text, supportingText, indeterminate, onClick, width, height, onCheckboxMarkClick, additionStyle, beforeElement, afterElement, textBeforeElement, textAfterElement, theme }: CheckboxPropsType): JSX.Element;
@@ -27,4 +27,5 @@ export type CheckboxMarkPropsType = {
27
27
  * */
28
28
  additionStyle?: string | string[];
29
29
  onClick?: React.MouseEventHandler<HTMLElement>;
30
+ theme?: 'dark' | 'light';
30
31
  };
@@ -11,4 +11,5 @@ export type RadioFieldItemPropsType = {
11
11
  active?: boolean;
12
12
  disabled?: boolean;
13
13
  width?: 'hug' | 'fill';
14
+ theme?: 'dark' | 'light';
14
15
  };
@@ -14,4 +14,5 @@ export type RadioFieldPropsType<DataType = unknown, Multiple extends boolean = b
14
14
  multiple?: Multiple;
15
15
  width?: 'hug' | 'fill';
16
16
  type?: 'checkbox' | 'radio';
17
+ theme?: 'dark' | 'light';
17
18
  };
@@ -1,2 +1,2 @@
1
1
  import { RadioFieldItemPropsType } from "../types";
2
- export default function RadioFieldItem({ type, option, onClick, active, disabled, width, }: RadioFieldItemPropsType): JSX.Element;
2
+ export default function RadioFieldItem({ type, option, onClick, active, disabled, width, theme }: RadioFieldItemPropsType): JSX.Element;
@@ -1,14 +1,6 @@
1
1
  import React from "react";
2
- import { FieldPropsType } from "../../../../hooks";
3
- type BasePropsType = FieldPropsType<string> & {
4
- /**
5
- * Изменяет размер текстового поля, если текст не помещается.
6
- *
7
- * По умолчанию: ```false```
8
- * */
9
- autoResize?: boolean;
10
- theme?: "light" | "dark";
11
- };
12
- type PropsType = Omit<React.ComponentProps<'textarea'>, keyof BasePropsType> & BasePropsType;
13
- export declare function FormTextareaField(props: PropsType): JSX.Element;
2
+ import { FormTextareaFieldBase } from './FormTextareaFieldBase';
3
+ import { FormFieldWrapper } from '../../FormFieldWrapper';
4
+ type PropsType = React.ComponentProps<typeof FormFieldWrapper> & React.ComponentProps<typeof FormTextareaFieldBase>;
5
+ export declare const FormTextareaField: React.ForwardRefExoticComponent<Omit<PropsType, "ref"> & React.RefAttributes<HTMLDivElement>>;
14
6
  export {};
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { FieldPropsType } from "../../../../hooks";
3
+ type BasePropsType = FieldPropsType<string> & {
4
+ /**
5
+ * Изменяет размер текстового поля, если текст не помещается.
6
+ *
7
+ * По умолчанию: ```false```
8
+ * */
9
+ autoResize?: boolean;
10
+ theme?: "light" | "dark";
11
+ };
12
+ type PropsType = Omit<React.ComponentProps<'textarea'>, keyof BasePropsType> & BasePropsType;
13
+ export declare function FormTextareaFieldBase(props: PropsType): JSX.Element;
14
+ export {};
@@ -1 +1,2 @@
1
1
  export * from './FormTextareaField';
2
+ export * from './FormTextareaFieldBase';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "indicator-ui",
3
- "version": "0.1.83",
3
+ "version": "0.1.85",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/types/src/index.d.ts",
6
6
  "style": "dist/index.css",