@alfalab/core-components-switch 4.5.9 → 5.0.0-snapshot-6a9d3fc
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.
- package/Component.d.ts +6 -8
- package/Component.js +18 -23
- package/Component.js.map +1 -0
- package/cssm/Component.d.ts +6 -8
- package/cssm/Component.js +3 -2
- package/cssm/Component.js.map +1 -0
- package/cssm/default.module.css +2 -35
- package/cssm/index.d.ts +1 -1
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +12 -43
- package/cssm/inverted.module.css +2 -35
- package/cssm/types/colors.d.ts +1 -2
- package/cssm/types/colors.js +1 -0
- package/cssm/types/colors.js.map +1 -0
- package/default.css +13 -47
- package/default.module.css.js +8 -0
- package/default.module.css.js.map +1 -0
- package/esm/Component.d.ts +6 -8
- package/esm/Component.js +4 -9
- package/esm/Component.js.map +1 -0
- package/esm/default.css +13 -47
- package/esm/default.module.css.js +6 -0
- package/esm/default.module.css.js.map +1 -0
- package/esm/index.css +27 -59
- package/esm/index.d.ts +1 -1
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -0
- package/esm/index.module.css.js +6 -0
- package/esm/index.module.css.js.map +1 -0
- package/esm/inverted.css +13 -47
- package/esm/inverted.module.css.js +6 -0
- package/esm/inverted.module.css.js.map +1 -0
- package/esm/types/colors.d.ts +1 -2
- package/esm/types/colors.js +1 -0
- package/esm/types/colors.js.map +1 -0
- package/index.css +27 -59
- package/index.d.ts +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.module.css.js +8 -0
- package/index.module.css.js.map +1 -0
- package/inverted.css +13 -47
- package/inverted.module.css.js +8 -0
- package/inverted.module.css.js.map +1 -0
- package/modern/Component.d.ts +6 -8
- package/modern/Component.js +4 -9
- package/modern/Component.js.map +1 -0
- package/modern/default.css +13 -47
- package/modern/default.module.css.js +6 -0
- package/modern/default.module.css.js.map +1 -0
- package/modern/index.css +27 -59
- package/modern/index.d.ts +1 -1
- package/modern/index.js +1 -0
- package/modern/index.js.map +1 -0
- package/modern/index.module.css.js +6 -0
- package/modern/index.module.css.js.map +1 -0
- package/modern/inverted.css +13 -47
- package/modern/inverted.module.css.js +6 -0
- package/modern/inverted.module.css.js.map +1 -0
- package/modern/types/colors.d.ts +1 -2
- package/modern/types/colors.js +1 -0
- package/modern/types/colors.js.map +1 -0
- package/moderncssm/Component.d.ts +6 -8
- package/moderncssm/Component.js +1 -0
- package/moderncssm/Component.js.map +1 -0
- package/moderncssm/default.module.css +0 -13
- package/moderncssm/index.d.ts +1 -1
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +0 -18
- package/moderncssm/inverted.module.css +0 -13
- package/moderncssm/types/colors.d.ts +1 -2
- package/moderncssm/types/colors.js +1 -0
- package/moderncssm/types/colors.js.map +1 -0
- package/package.json +6 -5
- package/types/colors.d.ts +1 -2
- package/types/colors.js +1 -0
- package/types/colors.js.map +1 -0
- package/cssm/vars.css +0 -14
- package/moderncssm/vars.css +0 -14
package/modern/default.css
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
4
2
|
--color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
|
|
5
3
|
--color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
|
|
6
4
|
--color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
|
|
@@ -8,70 +6,38 @@
|
|
|
8
6
|
--color-light-status-positive: #0cc44d;
|
|
9
7
|
--color-light-status-positive-hover: #04b545;
|
|
10
8
|
--color-light-text-primary: rgba(3, 3, 6, 0.88);
|
|
11
|
-
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
12
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
13
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
9
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
14
10
|
} :root {
|
|
15
|
-
|
|
16
|
-
/* Hard */
|
|
17
|
-
|
|
18
|
-
/* Up */
|
|
19
|
-
|
|
20
|
-
/* Hard up */
|
|
21
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
22
|
-
|
|
23
|
-
/* новые значения, используйте их */
|
|
24
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
25
|
-
|
|
26
|
-
/* новые значения, используйте их */
|
|
27
|
-
|
|
28
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
29
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
30
|
-
} :root {
|
|
31
|
-
} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
|
|
32
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
33
11
|
--switch-label-color: var(--color-light-text-primary);
|
|
34
12
|
--switch-hint-color: var(--color-light-text-secondary);
|
|
35
13
|
--switch-bg-color: var(--color-light-neutral-translucent-700);
|
|
36
|
-
|
|
37
|
-
/* inverted */
|
|
38
|
-
|
|
39
|
-
/* hover */
|
|
40
14
|
--switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
|
|
41
|
-
|
|
42
|
-
/* checked */
|
|
43
15
|
--switch-checked-bg-color: var(--color-light-status-positive);
|
|
44
16
|
--switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
|
|
45
|
-
|
|
46
|
-
/* disabled */
|
|
47
17
|
--switch-disabled-color: var(--color-light-text-secondary);
|
|
48
18
|
--switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
|
|
49
|
-
|
|
50
|
-
/* disabled checked */
|
|
51
19
|
--switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
|
|
52
|
-
|
|
53
|
-
/* icon */
|
|
54
20
|
--switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
|
|
55
|
-
} .
|
|
21
|
+
} .switch__switch_1j72v {
|
|
56
22
|
background-color: var(--switch-bg-color)
|
|
57
|
-
} .
|
|
23
|
+
} .switch__switch_1j72v:hover {
|
|
58
24
|
background-color: var(--switch-hover-bg-color);
|
|
59
|
-
} .
|
|
25
|
+
} .switch__label_1j72v {
|
|
60
26
|
color: var(--switch-label-color);
|
|
61
|
-
} .
|
|
27
|
+
} .switch__hint_1j72v {
|
|
62
28
|
color: var(--switch-hint-color);
|
|
63
|
-
} .
|
|
29
|
+
} .switch__checked_1j72v .switch__switch_1j72v {
|
|
64
30
|
background-color: var(--switch-checked-bg-color)
|
|
65
|
-
} .
|
|
31
|
+
} .switch__checked_1j72v .switch__switch_1j72v:hover {
|
|
66
32
|
background-color: var(--switch-checked-hover-bg-color);
|
|
67
|
-
} .
|
|
33
|
+
} .switch__disabled_1j72v .switch__label_1j72v {
|
|
68
34
|
color: var(--switch-disabled-color);
|
|
69
|
-
} .
|
|
35
|
+
} .switch__disabled_1j72v .switch__hint_1j72v {
|
|
70
36
|
color: var(--switch-disabled-color);
|
|
71
|
-
} .
|
|
37
|
+
} .switch__disabled_1j72v .switch__switch_1j72v {
|
|
72
38
|
background-color: var(--switch-disabled-bg-color)
|
|
73
|
-
} .
|
|
39
|
+
} .switch__disabled_1j72v .switch__switch_1j72v:before {
|
|
74
40
|
background-color: var(--switch-icon-disabled-color);
|
|
75
|
-
} .
|
|
41
|
+
} .switch__disabled_1j72v.switch__checked_1j72v .switch__switch_1j72v {
|
|
76
42
|
background-color: var(--switch-disabled-checked-bg-color);
|
|
77
43
|
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './default.css';
|
|
2
|
+
|
|
3
|
+
const defaultStyles = {"switch":"switch__switch_1j72v","label":"switch__label_1j72v","hint":"switch__hint_1j72v","checked":"switch__checked_1j72v","disabled":"switch__disabled_1j72v"};
|
|
4
|
+
|
|
5
|
+
export { defaultStyles as default };
|
|
6
|
+
//# sourceMappingURL=default.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-color);\n }\n}\n\n.label {\n color: var(--switch-label-color);\n}\n\n.hint {\n color: var(--switch-hint-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-color);\n}\n"],"names":[],"mappings":";;AAEgB,sBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
|
package/modern/index.css
CHANGED
|
@@ -1,60 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
4
2
|
--color-light-status-info: #2288fa;
|
|
5
3
|
--color-light-text-negative: #ec2d20;
|
|
6
|
-
--color-static-neutral-0: #fff;
|
|
7
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
8
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
|
+
--color-static-neutral-0: #fff;
|
|
9
5
|
} :root {
|
|
10
|
-
|
|
11
|
-
/* Hard */
|
|
12
|
-
|
|
13
|
-
/* Up */
|
|
14
|
-
|
|
15
|
-
/* Hard up */
|
|
16
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
17
|
-
--border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
6
|
+
--border-radius-xl: 16px;
|
|
18
7
|
--border-radius-circle: 50%;
|
|
19
|
-
|
|
20
|
-
/* новые значения, используйте их */
|
|
21
8
|
--border-radius-16: var(--border-radius-xl);
|
|
22
9
|
} :root {
|
|
23
|
-
--gap-3xs: 2px;
|
|
24
|
-
--gap-2xs: 4px;
|
|
25
|
-
--gap-s: 12px;
|
|
26
|
-
--gap-m: 16px;
|
|
27
|
-
|
|
28
|
-
/* новые значения, используйте их */
|
|
29
|
-
|
|
30
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
31
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
10
|
+
--gap-3xs: 2px;
|
|
11
|
+
--gap-2xs: 4px;
|
|
12
|
+
--gap-s: 12px;
|
|
13
|
+
--gap-m: 16px;
|
|
32
14
|
--gap-0: 0px;
|
|
33
15
|
--gap-2: var(--gap-3xs);
|
|
34
16
|
--gap-4: var(--gap-2xs);
|
|
35
17
|
--gap-12: var(--gap-s);
|
|
36
18
|
--gap-16: var(--gap-m);
|
|
37
19
|
} :root {
|
|
38
|
-
} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
|
|
39
20
|
--focus-color: var(--color-light-status-info);
|
|
40
21
|
--disabled-cursor: not-allowed;
|
|
41
|
-
}
|
|
22
|
+
} :root {
|
|
42
23
|
--switch-border-color: transparent;
|
|
43
24
|
--switch-error-color: var(--color-light-text-negative);
|
|
44
|
-
|
|
45
|
-
/* inverted */
|
|
46
|
-
|
|
47
|
-
/* hover */
|
|
48
|
-
|
|
49
|
-
/* checked */
|
|
50
|
-
|
|
51
|
-
/* disabled */
|
|
52
|
-
|
|
53
|
-
/* disabled checked */
|
|
54
|
-
|
|
55
|
-
/* icon */
|
|
56
25
|
--switch-icon-color: var(--color-static-neutral-0);
|
|
57
|
-
} .
|
|
26
|
+
} .switch__component_1mboc {
|
|
58
27
|
display: inline-flex;
|
|
59
28
|
align-items: flex-start;
|
|
60
29
|
margin: var(--gap-0);
|
|
@@ -62,20 +31,20 @@
|
|
|
62
31
|
border: 0;
|
|
63
32
|
cursor: pointer;
|
|
64
33
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
65
|
-
} .
|
|
34
|
+
} .switch__component_1mboc input {
|
|
66
35
|
opacity: 0;
|
|
67
36
|
position: absolute;
|
|
68
|
-
} .
|
|
37
|
+
} .switch__start_1mboc {
|
|
69
38
|
align-items: flex-start;
|
|
70
|
-
} .
|
|
39
|
+
} .switch__center_1mboc {
|
|
71
40
|
align-items: center;
|
|
72
|
-
} .
|
|
41
|
+
} .switch__addons_1mboc {
|
|
73
42
|
margin-left: auto;
|
|
74
43
|
padding-left: var(--gap-16);
|
|
75
44
|
line-height: 24px;
|
|
76
|
-
} .
|
|
45
|
+
} .switch__block_1mboc {
|
|
77
46
|
width: 100%;
|
|
78
|
-
} .
|
|
47
|
+
} .switch__switch_1mboc {
|
|
79
48
|
position: relative;
|
|
80
49
|
border-radius: var(--border-radius-16);
|
|
81
50
|
width: 36px;
|
|
@@ -85,7 +54,7 @@
|
|
|
85
54
|
border: 2px solid var(--switch-border-color);
|
|
86
55
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
87
56
|
box-sizing: border-box;
|
|
88
|
-
} .
|
|
57
|
+
} .switch__switch_1mboc:before {
|
|
89
58
|
content: '';
|
|
90
59
|
position: absolute;
|
|
91
60
|
top: var(--gap-0);
|
|
@@ -97,42 +66,41 @@
|
|
|
97
66
|
background-color: var(--switch-icon-color);
|
|
98
67
|
box-sizing: border-box;
|
|
99
68
|
transition: transform 0.2s ease;
|
|
100
|
-
} .
|
|
69
|
+
} .switch__content_1mboc {
|
|
101
70
|
margin-left: var(--gap-12);
|
|
102
71
|
flex-grow: 1;
|
|
103
|
-
} .
|
|
72
|
+
} .switch__label_1mboc {
|
|
104
73
|
font-size: 16px;
|
|
105
74
|
line-height: 24px;
|
|
106
75
|
font-weight: 400;
|
|
107
76
|
display: block;
|
|
108
|
-
} .
|
|
77
|
+
} .switch__label_1mboc:not(:only-child) {
|
|
109
78
|
margin-bottom: var(--gap-4);
|
|
110
|
-
} .
|
|
79
|
+
} .switch__errorMessage_1mboc {
|
|
111
80
|
font-size: 14px;
|
|
112
81
|
line-height: 18px;
|
|
113
82
|
font-weight: 400;
|
|
114
83
|
color: var(--switch-error-color);
|
|
115
|
-
} .
|
|
84
|
+
} .switch__hint_1mboc {
|
|
116
85
|
font-size: 14px;
|
|
117
86
|
line-height: 18px;
|
|
118
87
|
font-weight: 400;
|
|
119
88
|
display: block;
|
|
120
|
-
}
|
|
89
|
+
} .switch__component_1mboc.switch__reversed_1mboc {
|
|
121
90
|
flex-direction: row-reverse;
|
|
122
|
-
} .
|
|
91
|
+
} .switch__reversed_1mboc .switch__content_1mboc {
|
|
123
92
|
margin-right: var(--gap-16);
|
|
124
93
|
margin-left: var(--gap-0);
|
|
125
|
-
} .
|
|
94
|
+
} .switch__reversed_1mboc .switch__addons_1mboc {
|
|
126
95
|
margin-left: var(--gap-0);
|
|
127
96
|
padding-left: var(--gap-0);
|
|
128
97
|
margin-right: auto;
|
|
129
98
|
padding-right: var(--gap-16);
|
|
130
|
-
}
|
|
131
|
-
/* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
|
|
99
|
+
} .switch__checked_1mboc .switch__switch_1mboc:before {
|
|
132
100
|
transform: translateX(16px);
|
|
133
|
-
}
|
|
101
|
+
} .switch__disabled_1mboc {
|
|
134
102
|
cursor: var(--disabled-cursor);
|
|
135
|
-
}
|
|
103
|
+
} .switch__focused_1mboc .switch__switch_1mboc {
|
|
136
104
|
outline: 2px solid var(--focus-color);
|
|
137
105
|
outline-offset: 2px;
|
|
138
106
|
}
|
package/modern/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './Component';
|
package/modern/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
|
|
3
|
+
const styles = {"component":"switch__component_1mboc","start":"switch__start_1mboc","center":"switch__center_1mboc","addons":"switch__addons_1mboc","block":"switch__block_1mboc","switch":"switch__switch_1mboc","content":"switch__content_1mboc","label":"switch__label_1mboc","errorMessage":"switch__errorMessage_1mboc","hint":"switch__hint_1mboc","reversed":"switch__reversed_1mboc","checked":"switch__checked_1mboc","disabled":"switch__disabled_1mboc","focused":"switch__focused_1mboc"};
|
|
4
|
+
|
|
5
|
+
export { styles as default };
|
|
6
|
+
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.component {\n display: inline-flex;\n align-items: flex-start;\n margin: var(--gap-0);\n padding: var(--gap-0);\n border: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.component input {\n opacity: 0;\n position: absolute;\n}\n\n.start {\n align-items: flex-start;\n}\n\n.center {\n align-items: center;\n}\n\n.addons {\n margin-left: auto;\n padding-left: var(--gap-16);\n line-height: 24px;\n}\n\n.block {\n width: 100%;\n}\n\n.switch {\n position: relative;\n border-radius: var(--border-radius-16);\n width: 36px;\n height: 20px;\n margin: var(--gap-2);\n flex-shrink: 0;\n border: 2px solid var(--switch-border-color);\n transition: background-color 0.2s ease, border-color 0.2s ease;\n box-sizing: border-box;\n}\n\n.switch:before {\n content: '';\n position: absolute;\n top: var(--gap-0);\n left: var(--gap-0);\n bottom: var(--gap-0);\n right: var(--gap-16);\n display: block;\n border-radius: var(--border-radius-circle);\n background-color: var(--switch-icon-color);\n box-sizing: border-box;\n transition: transform 0.2s ease;\n}\n\n.content {\n margin-left: var(--gap-12);\n flex-grow: 1;\n}\n\n.label {\n @mixin paragraph_primary_medium;\n display: block;\n}\n\n.label:not(:only-child) {\n margin-bottom: var(--gap-4);\n}\n\n.errorMessage {\n @mixin paragraph_component_secondary;\n color: var(--switch-error-color);\n}\n\n.hint {\n @mixin paragraph_component_secondary;\n display: block;\n}\n\n/* Reversed state */\n\n.component.reversed {\n flex-direction: row-reverse;\n}\n\n.reversed .content {\n margin-right: var(--gap-16);\n margin-left: var(--gap-0);\n}\n\n.reversed .addons {\n margin-left: var(--gap-0);\n padding-left: var(--gap-0);\n margin-right: auto;\n padding-right: var(--gap-16);\n}\n\n/* Checked state */\n\n.checked .switch:before {\n /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */\n transform: translateX(16px);\n}\n\n/* Disabled state */\n\n.disabled {\n cursor: var(--disabled-cursor);\n}\n\n/* Focused state */\n\n.focused .switch {\n @mixin focus-outline;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}
|
package/modern/inverted.css
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
4
2
|
--color-light-neutral-translucent-200-inverted: rgba(225, 225, 248, 0.09);
|
|
5
3
|
--color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
|
|
6
4
|
--color-light-neutral-translucent-700-inverted: rgba(238, 238, 251, 0.55);
|
|
@@ -8,70 +6,38 @@
|
|
|
8
6
|
--color-light-status-positive-inverted: #17d055;
|
|
9
7
|
--color-light-status-positive-inverted-hover: #22e068;
|
|
10
8
|
--color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
|
|
11
|
-
--color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
|
|
12
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
13
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
9
|
+
--color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
|
|
14
10
|
} :root {
|
|
15
|
-
|
|
16
|
-
/* Hard */
|
|
17
|
-
|
|
18
|
-
/* Up */
|
|
19
|
-
|
|
20
|
-
/* Hard up */
|
|
21
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
22
|
-
|
|
23
|
-
/* новые значения, используйте их */
|
|
24
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
25
|
-
|
|
26
|
-
/* новые значения, используйте их */
|
|
27
|
-
|
|
28
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
29
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
30
|
-
} :root {
|
|
31
|
-
} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
|
|
32
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
33
|
-
|
|
34
|
-
/* inverted */
|
|
35
11
|
--switch-label-inverted-color: var(--color-light-text-primary-inverted);
|
|
36
12
|
--switch-hint-inverted-color: var(--color-light-text-secondary-inverted);
|
|
37
13
|
--switch-checked-bg-inverted-color: var(--color-light-status-positive-inverted);
|
|
38
14
|
--switch-checked-hover-bg-inverted-color: var(--color-light-status-positive-inverted-hover);
|
|
39
15
|
--switch-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted);
|
|
40
|
-
|
|
41
|
-
/* hover */
|
|
42
16
|
--switch-hover-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted-hover);
|
|
43
|
-
|
|
44
|
-
/* checked */
|
|
45
|
-
|
|
46
|
-
/* disabled */
|
|
47
17
|
--switch-disabled-inverted-color: var(--color-light-text-secondary-inverted);
|
|
48
18
|
--switch-disabled-bg-inverted-color: var(--color-light-neutral-translucent-200-inverted);
|
|
49
|
-
|
|
50
|
-
/* disabled checked */
|
|
51
19
|
--switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
|
|
52
|
-
|
|
53
|
-
/* icon */
|
|
54
20
|
--switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
|
|
55
|
-
} .
|
|
21
|
+
} .switch__switch_oz4pg {
|
|
56
22
|
background-color: var(--switch-bg-inverted-color)
|
|
57
|
-
} .
|
|
23
|
+
} .switch__switch_oz4pg:hover {
|
|
58
24
|
background-color: var(--switch-hover-bg-inverted-color);
|
|
59
|
-
} .
|
|
25
|
+
} .switch__label_oz4pg {
|
|
60
26
|
color: var(--switch-label-inverted-color);
|
|
61
|
-
} .
|
|
27
|
+
} .switch__hint_oz4pg {
|
|
62
28
|
color: var(--switch-hint-inverted-color);
|
|
63
|
-
} .
|
|
29
|
+
} .switch__checked_oz4pg .switch__switch_oz4pg {
|
|
64
30
|
background-color: var(--switch-checked-bg-inverted-color)
|
|
65
|
-
} .
|
|
31
|
+
} .switch__checked_oz4pg .switch__switch_oz4pg:hover {
|
|
66
32
|
background-color: var(--switch-checked-hover-bg-inverted-color);
|
|
67
|
-
} .
|
|
33
|
+
} .switch__disabled_oz4pg .switch__label_oz4pg {
|
|
68
34
|
color: var(--switch-disabled-inverted-color);
|
|
69
|
-
} .
|
|
35
|
+
} .switch__disabled_oz4pg .switch__hint_oz4pg {
|
|
70
36
|
color: var(--switch-disabled-inverted-color);
|
|
71
|
-
} .
|
|
37
|
+
} .switch__disabled_oz4pg .switch__switch_oz4pg {
|
|
72
38
|
background-color: var(--switch-disabled-bg-inverted-color)
|
|
73
|
-
} .
|
|
39
|
+
} .switch__disabled_oz4pg .switch__switch_oz4pg:before {
|
|
74
40
|
background-color: var(--switch-icon-disabled-inverted-color);
|
|
75
|
-
} .
|
|
41
|
+
} .switch__disabled_oz4pg.switch__checked_oz4pg .switch__switch_oz4pg {
|
|
76
42
|
background-color: var(--switch-disabled-checked-bg-inverted-color);
|
|
77
43
|
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './inverted.css';
|
|
2
|
+
|
|
3
|
+
const invertedStyles = {"switch":"switch__switch_oz4pg","label":"switch__label_oz4pg","hint":"switch__hint_oz4pg","checked":"switch__checked_oz4pg","disabled":"switch__disabled_oz4pg"};
|
|
4
|
+
|
|
5
|
+
export { invertedStyles as default };
|
|
6
|
+
//# sourceMappingURL=inverted.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-inverted-color);\n }\n}\n\n.label {\n color: var(--switch-label-inverted-color);\n}\n\n.hint {\n color: var(--switch-hint-inverted-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-inverted-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-inverted-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-inverted-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-inverted-color);\n}\n"],"names":[],"mappings":";;AAEgB,uBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
|
package/modern/types/colors.d.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
type Colors = 'default' | 'inverted';
|
|
2
|
-
export { Colors };
|
|
1
|
+
export declare type Colors = 'default' | 'inverted';
|
package/modern/types/colors.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
type Align = 'start' | 'center';
|
|
6
|
-
type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
|
|
1
|
+
import React, { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { Colors } from './types/colors';
|
|
3
|
+
declare type Align = 'start' | 'center';
|
|
4
|
+
export declare type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
|
|
7
5
|
/**
|
|
8
6
|
* Управление состоянием вкл/выкл компонента
|
|
9
7
|
*/
|
|
@@ -63,7 +61,7 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
|
|
|
63
61
|
*/
|
|
64
62
|
colors?: Colors;
|
|
65
63
|
};
|
|
66
|
-
declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
|
|
64
|
+
export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
|
|
67
65
|
/**
|
|
68
66
|
* Управление состоянием вкл/выкл компонента
|
|
69
67
|
*/
|
|
@@ -123,4 +121,4 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
|
|
|
123
121
|
*/
|
|
124
122
|
colors?: Colors | undefined;
|
|
125
123
|
} & React.RefAttributes<HTMLLabelElement>>;
|
|
126
|
-
export {
|
|
124
|
+
export {};
|
package/moderncssm/Component.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости\n * Используйте props disabled\n * Управление состоянием активен / неактивен\n */\n inactive?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n inactive,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled || inactive,\n [colorStyles[colors].disabled]: disabled || inactive,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled || inactive}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n )}\n {hint && !errorMessage && (\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,26 +1,13 @@
|
|
|
1
|
-
/* */
|
|
2
1
|
:root {
|
|
3
2
|
--switch-label-color: var(--color-light-text-primary);
|
|
4
3
|
--switch-hint-color: var(--color-light-text-secondary);
|
|
5
4
|
--switch-bg-color: var(--color-light-neutral-translucent-700);
|
|
6
|
-
|
|
7
|
-
/* inverted */
|
|
8
|
-
|
|
9
|
-
/* hover */
|
|
10
5
|
--switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
|
|
11
|
-
|
|
12
|
-
/* checked */
|
|
13
6
|
--switch-checked-bg-color: var(--color-light-status-positive);
|
|
14
7
|
--switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
|
|
15
|
-
|
|
16
|
-
/* disabled */
|
|
17
8
|
--switch-disabled-color: var(--color-light-text-secondary);
|
|
18
9
|
--switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
|
|
19
|
-
|
|
20
|
-
/* disabled checked */
|
|
21
10
|
--switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
|
|
22
|
-
|
|
23
|
-
/* icon */
|
|
24
11
|
--switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
|
|
25
12
|
}
|
|
26
13
|
.switch {
|