@alfalab/core-components-switch 6.0.2 → 6.0.3
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 +12 -12
- package/Component.js.map +1 -1
- package/cssm/Component.d.ts +12 -12
- package/cssm/Component.js.map +1 -1
- package/cssm/types/colors.d.ts +1 -1
- package/default.css +11 -11
- package/default.module.css.js +1 -1
- package/default.module.css.js.map +1 -1
- package/esm/Component.d.ts +12 -12
- package/esm/Component.js.map +1 -1
- package/esm/default.css +11 -11
- package/esm/default.module.css.js +1 -1
- package/esm/default.module.css.js.map +1 -1
- package/esm/index.css +19 -19
- package/esm/index.module.css.js +1 -1
- package/esm/index.module.css.js.map +1 -1
- package/esm/inverted.css +11 -11
- package/esm/inverted.module.css.js +1 -1
- package/esm/inverted.module.css.js.map +1 -1
- package/esm/types/colors.d.ts +1 -1
- package/index.css +19 -19
- package/index.module.css.js +1 -1
- package/index.module.css.js.map +1 -1
- package/inverted.css +11 -11
- package/inverted.module.css.js +1 -1
- package/inverted.module.css.js.map +1 -1
- package/modern/Component.d.ts +12 -12
- package/modern/Component.js.map +1 -1
- package/modern/default.css +11 -11
- package/modern/default.module.css.js +1 -1
- package/modern/default.module.css.js.map +1 -1
- package/modern/index.css +19 -19
- package/modern/index.module.css.js +1 -1
- package/modern/index.module.css.js.map +1 -1
- package/modern/inverted.css +11 -11
- package/modern/inverted.module.css.js +1 -1
- package/modern/inverted.module.css.js.map +1 -1
- package/modern/types/colors.d.ts +1 -1
- package/moderncssm/Component.d.ts +12 -12
- package/moderncssm/Component.js.map +1 -1
- package/moderncssm/types/colors.d.ts +1 -1
- package/package.json +4 -4
- package/src/default.module.css +1 -1
- package/src/index.module.css +1 -1
- package/src/inverted.module.css +1 -1
- package/types/colors.d.ts +1 -1
package/esm/inverted.css
CHANGED
|
@@ -20,36 +20,36 @@
|
|
|
20
20
|
--switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
|
|
21
21
|
--switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
|
|
22
22
|
}
|
|
23
|
-
.
|
|
23
|
+
.switch__switch_17cag {
|
|
24
24
|
background-color: var(--switch-bg-inverted-color);
|
|
25
25
|
}
|
|
26
|
-
.
|
|
26
|
+
.switch__switch_17cag:hover {
|
|
27
27
|
background-color: var(--switch-hover-bg-inverted-color);
|
|
28
28
|
}
|
|
29
|
-
.
|
|
29
|
+
.switch__label_17cag {
|
|
30
30
|
color: var(--switch-label-inverted-color);
|
|
31
31
|
}
|
|
32
|
-
.
|
|
32
|
+
.switch__hint_17cag {
|
|
33
33
|
color: var(--switch-hint-inverted-color);
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
.switch__checked_17cag .switch__switch_17cag {
|
|
36
36
|
background-color: var(--switch-checked-bg-inverted-color);
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.switch__checked_17cag .switch__switch_17cag:hover {
|
|
39
39
|
background-color: var(--switch-checked-hover-bg-inverted-color);
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.switch__disabled_17cag .switch__label_17cag {
|
|
42
42
|
color: var(--switch-disabled-inverted-color);
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
.switch__disabled_17cag .switch__hint_17cag {
|
|
45
45
|
color: var(--switch-disabled-inverted-color);
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
.switch__disabled_17cag .switch__switch_17cag {
|
|
48
48
|
background-color: var(--switch-disabled-bg-inverted-color);
|
|
49
49
|
}
|
|
50
|
-
.
|
|
50
|
+
.switch__disabled_17cag .switch__switch_17cag:before {
|
|
51
51
|
background-color: var(--switch-icon-disabled-inverted-color);
|
|
52
52
|
}
|
|
53
|
-
.
|
|
53
|
+
.switch__disabled_17cag.switch__checked_17cag .switch__switch_17cag {
|
|
54
54
|
background-color: var(--switch-disabled-checked-bg-inverted-color);
|
|
55
55
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './inverted.css';
|
|
2
2
|
|
|
3
|
-
var invertedStyles = {"switch":"
|
|
3
|
+
var invertedStyles = {"switch":"switch__switch_17cag","label":"switch__label_17cag","hint":"switch__hint_17cag","checked":"switch__checked_17cag","disabled":"switch__disabled_17cag"};
|
|
4
4
|
|
|
5
5
|
export { invertedStyles as default };
|
|
6
6
|
//# sourceMappingURL=inverted.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
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,qBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
|
package/esm/types/colors.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type Colors = 'default' | 'inverted';
|
package/index.css
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
--switch-error-color: var(--color-light-text-negative);
|
|
33
33
|
--switch-icon-color: var(--color-static-neutral-0);
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
.switch__component_1ktzs {
|
|
36
36
|
display: inline-flex;
|
|
37
37
|
align-items: flex-start;
|
|
38
38
|
margin: var(--gap-0);
|
|
@@ -41,25 +41,25 @@
|
|
|
41
41
|
cursor: pointer;
|
|
42
42
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
.switch__component_1ktzs input {
|
|
45
45
|
opacity: 0;
|
|
46
46
|
position: absolute;
|
|
47
47
|
}
|
|
48
|
-
.
|
|
48
|
+
.switch__start_1ktzs {
|
|
49
49
|
align-items: flex-start;
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.switch__center_1ktzs {
|
|
52
52
|
align-items: center;
|
|
53
53
|
}
|
|
54
|
-
.
|
|
54
|
+
.switch__addons_1ktzs {
|
|
55
55
|
margin-left: auto;
|
|
56
56
|
padding-left: var(--gap-16);
|
|
57
57
|
line-height: 24px;
|
|
58
58
|
}
|
|
59
|
-
.
|
|
59
|
+
.switch__block_1ktzs {
|
|
60
60
|
width: 100%;
|
|
61
61
|
}
|
|
62
|
-
.
|
|
62
|
+
.switch__switch_1ktzs {
|
|
63
63
|
position: relative;
|
|
64
64
|
border-radius: var(--border-radius-16);
|
|
65
65
|
width: 36px;
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
border-color 0.2s ease;
|
|
73
73
|
box-sizing: border-box;
|
|
74
74
|
}
|
|
75
|
-
.
|
|
75
|
+
.switch__switch_1ktzs:before {
|
|
76
76
|
content: '';
|
|
77
77
|
position: absolute;
|
|
78
78
|
top: var(--gap-0);
|
|
@@ -85,54 +85,54 @@
|
|
|
85
85
|
box-sizing: border-box;
|
|
86
86
|
transition: transform 0.2s ease;
|
|
87
87
|
}
|
|
88
|
-
.
|
|
88
|
+
.switch__content_1ktzs {
|
|
89
89
|
margin-left: var(--gap-12);
|
|
90
90
|
flex-grow: 1;
|
|
91
91
|
}
|
|
92
|
-
.
|
|
92
|
+
.switch__label_1ktzs {
|
|
93
93
|
font-size: 16px;
|
|
94
94
|
line-height: 24px;
|
|
95
95
|
font-weight: 400;
|
|
96
96
|
font-family: var(--font-family-system);
|
|
97
97
|
display: block;
|
|
98
98
|
}
|
|
99
|
-
.
|
|
99
|
+
.switch__label_1ktzs:not(:only-child) {
|
|
100
100
|
margin-bottom: var(--gap-4);
|
|
101
101
|
}
|
|
102
|
-
.
|
|
102
|
+
.switch__errorMessage_1ktzs {
|
|
103
103
|
font-size: 14px;
|
|
104
104
|
line-height: 18px;
|
|
105
105
|
font-weight: 400;
|
|
106
106
|
font-family: var(--font-family-system);
|
|
107
107
|
color: var(--switch-error-color);
|
|
108
108
|
}
|
|
109
|
-
.
|
|
109
|
+
.switch__hint_1ktzs {
|
|
110
110
|
font-size: 14px;
|
|
111
111
|
line-height: 18px;
|
|
112
112
|
font-weight: 400;
|
|
113
113
|
font-family: var(--font-family-system);
|
|
114
114
|
display: block;
|
|
115
115
|
}
|
|
116
|
-
.
|
|
116
|
+
.switch__component_1ktzs.switch__reversed_1ktzs {
|
|
117
117
|
flex-direction: row-reverse;
|
|
118
118
|
}
|
|
119
|
-
.
|
|
119
|
+
.switch__reversed_1ktzs .switch__content_1ktzs {
|
|
120
120
|
margin-right: var(--gap-16);
|
|
121
121
|
margin-left: var(--gap-0);
|
|
122
122
|
}
|
|
123
|
-
.
|
|
123
|
+
.switch__reversed_1ktzs .switch__addons_1ktzs {
|
|
124
124
|
margin-left: var(--gap-0);
|
|
125
125
|
padding-left: var(--gap-0);
|
|
126
126
|
margin-right: auto;
|
|
127
127
|
padding-right: var(--gap-16);
|
|
128
128
|
}
|
|
129
|
-
.
|
|
129
|
+
.switch__checked_1ktzs .switch__switch_1ktzs:before {
|
|
130
130
|
transform: translateX(16px);
|
|
131
131
|
}
|
|
132
|
-
.
|
|
132
|
+
.switch__disabled_1ktzs {
|
|
133
133
|
cursor: var(--disabled-cursor);
|
|
134
134
|
}
|
|
135
|
-
.
|
|
135
|
+
.switch__focused_1ktzs .switch__switch_1ktzs {
|
|
136
136
|
outline: 2px solid var(--focus-color);
|
|
137
137
|
outline-offset: 2px;
|
|
138
138
|
}
|
package/index.module.css.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"
|
|
5
|
+
var styles = {"component":"switch__component_1ktzs","start":"switch__start_1ktzs","center":"switch__center_1ktzs","addons":"switch__addons_1ktzs","block":"switch__block_1ktzs","switch":"switch__switch_1ktzs","content":"switch__content_1ktzs","label":"switch__label_1ktzs","errorMessage":"switch__errorMessage_1ktzs","hint":"switch__hint_1ktzs","reversed":"switch__reversed_1ktzs","checked":"switch__checked_1ktzs","disabled":"switch__disabled_1ktzs","focused":"switch__focused_1ktzs"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
package/index.module.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
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:\n background-color 0.2s ease,\n 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,aAAe,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/inverted.css
CHANGED
|
@@ -20,36 +20,36 @@
|
|
|
20
20
|
--switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
|
|
21
21
|
--switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
|
|
22
22
|
}
|
|
23
|
-
.
|
|
23
|
+
.switch__switch_17cag {
|
|
24
24
|
background-color: var(--switch-bg-inverted-color);
|
|
25
25
|
}
|
|
26
|
-
.
|
|
26
|
+
.switch__switch_17cag:hover {
|
|
27
27
|
background-color: var(--switch-hover-bg-inverted-color);
|
|
28
28
|
}
|
|
29
|
-
.
|
|
29
|
+
.switch__label_17cag {
|
|
30
30
|
color: var(--switch-label-inverted-color);
|
|
31
31
|
}
|
|
32
|
-
.
|
|
32
|
+
.switch__hint_17cag {
|
|
33
33
|
color: var(--switch-hint-inverted-color);
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
.switch__checked_17cag .switch__switch_17cag {
|
|
36
36
|
background-color: var(--switch-checked-bg-inverted-color);
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.switch__checked_17cag .switch__switch_17cag:hover {
|
|
39
39
|
background-color: var(--switch-checked-hover-bg-inverted-color);
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.switch__disabled_17cag .switch__label_17cag {
|
|
42
42
|
color: var(--switch-disabled-inverted-color);
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
.switch__disabled_17cag .switch__hint_17cag {
|
|
45
45
|
color: var(--switch-disabled-inverted-color);
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
.switch__disabled_17cag .switch__switch_17cag {
|
|
48
48
|
background-color: var(--switch-disabled-bg-inverted-color);
|
|
49
49
|
}
|
|
50
|
-
.
|
|
50
|
+
.switch__disabled_17cag .switch__switch_17cag:before {
|
|
51
51
|
background-color: var(--switch-icon-disabled-inverted-color);
|
|
52
52
|
}
|
|
53
|
-
.
|
|
53
|
+
.switch__disabled_17cag.switch__checked_17cag .switch__switch_17cag {
|
|
54
54
|
background-color: var(--switch-disabled-checked-bg-inverted-color);
|
|
55
55
|
}
|
package/inverted.module.css.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./inverted.css');
|
|
4
4
|
|
|
5
|
-
var invertedStyles = {"switch":"
|
|
5
|
+
var invertedStyles = {"switch":"switch__switch_17cag","label":"switch__label_17cag","hint":"switch__hint_17cag","checked":"switch__checked_17cag","disabled":"switch__disabled_17cag"};
|
|
6
6
|
|
|
7
7
|
module.exports = invertedStyles;
|
|
8
8
|
//# sourceMappingURL=inverted.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
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,qBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
|
package/modern/Component.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { type ChangeEvent, type InputHTMLAttributes, type ReactNode } from 'react';
|
|
2
2
|
import { type Colors } from './types/colors';
|
|
3
|
-
|
|
4
|
-
export
|
|
3
|
+
type Align = 'start' | 'center';
|
|
4
|
+
export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
|
|
5
5
|
/**
|
|
6
6
|
* Управление состоянием вкл/выкл компонента
|
|
7
7
|
*/
|
|
@@ -59,7 +59,7 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
|
|
|
59
59
|
/**
|
|
60
60
|
* Управление состоянием вкл/выкл компонента
|
|
61
61
|
*/
|
|
62
|
-
checked?: boolean
|
|
62
|
+
checked?: boolean;
|
|
63
63
|
/**
|
|
64
64
|
* Текст подписи к переключателю
|
|
65
65
|
*/
|
|
@@ -71,11 +71,11 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
|
|
|
71
71
|
/**
|
|
72
72
|
* Переключатель будет отрисован справа от контента
|
|
73
73
|
*/
|
|
74
|
-
reversed?: boolean
|
|
74
|
+
reversed?: boolean;
|
|
75
75
|
/**
|
|
76
76
|
* Выравнивание
|
|
77
77
|
*/
|
|
78
|
-
align?: Align
|
|
78
|
+
align?: Align;
|
|
79
79
|
/**
|
|
80
80
|
* Дополнительный слот
|
|
81
81
|
*/
|
|
@@ -83,11 +83,11 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
|
|
|
83
83
|
/**
|
|
84
84
|
* Растягивать ли компонент на всю ширину
|
|
85
85
|
*/
|
|
86
|
-
block?: boolean
|
|
86
|
+
block?: boolean;
|
|
87
87
|
/**
|
|
88
88
|
* Управление состоянием включен / выключен
|
|
89
89
|
*/
|
|
90
|
-
disabled?: boolean
|
|
90
|
+
disabled?: boolean;
|
|
91
91
|
/**
|
|
92
92
|
* Отображение ошибки
|
|
93
93
|
*/
|
|
@@ -95,18 +95,18 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
|
|
|
95
95
|
/**
|
|
96
96
|
* Обработчик переключения компонента
|
|
97
97
|
*/
|
|
98
|
-
onChange?: (
|
|
98
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
|
|
99
99
|
checked: boolean;
|
|
100
|
-
name: InputHTMLAttributes<HTMLInputElement>[
|
|
101
|
-
}) => void
|
|
100
|
+
name: InputHTMLAttributes<HTMLInputElement>["name"];
|
|
101
|
+
}) => void;
|
|
102
102
|
/**
|
|
103
103
|
* Идентификатор для систем автоматизированного тестирования
|
|
104
104
|
*/
|
|
105
|
-
dataTestId?: string
|
|
105
|
+
dataTestId?: string;
|
|
106
106
|
/**
|
|
107
107
|
* Набор цветов для компонента
|
|
108
108
|
* @default default
|
|
109
109
|
*/
|
|
110
|
-
colors?: Colors
|
|
110
|
+
colors?: Colors;
|
|
111
111
|
} & React.RefAttributes<HTMLLabelElement>>;
|
|
112
112
|
export {};
|
package/modern/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} 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 { type 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 * Отображение ошибки\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 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,\n [colorStyles[colors].disabled]: disabled,\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}\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":";;;;;;;;;AAmBA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAC3B;AA4EY,MAAA,MAAM,GAAG,UAAU,CAC5B,CACI,EACI,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,OAAO,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,GAAG,SAAS,EAClB,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;IAE/C,MAAM,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,EAAE,UAAU,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAgC,KAAI;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} 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 { type 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 * Отображение ошибки\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 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,\n [colorStyles[colors].disabled]: disabled,\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}\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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"}
|
package/modern/default.css
CHANGED
|
@@ -20,36 +20,36 @@
|
|
|
20
20
|
--switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
|
|
21
21
|
--switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
|
|
22
22
|
}
|
|
23
|
-
.
|
|
23
|
+
.switch__switch_1ir4t {
|
|
24
24
|
background-color: var(--switch-bg-color);
|
|
25
25
|
}
|
|
26
|
-
.
|
|
26
|
+
.switch__switch_1ir4t:hover {
|
|
27
27
|
background-color: var(--switch-hover-bg-color);
|
|
28
28
|
}
|
|
29
|
-
.
|
|
29
|
+
.switch__label_1ir4t {
|
|
30
30
|
color: var(--switch-label-color);
|
|
31
31
|
}
|
|
32
|
-
.
|
|
32
|
+
.switch__hint_1ir4t {
|
|
33
33
|
color: var(--switch-hint-color);
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
.switch__checked_1ir4t .switch__switch_1ir4t {
|
|
36
36
|
background-color: var(--switch-checked-bg-color);
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.switch__checked_1ir4t .switch__switch_1ir4t:hover {
|
|
39
39
|
background-color: var(--switch-checked-hover-bg-color);
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.switch__disabled_1ir4t .switch__label_1ir4t {
|
|
42
42
|
color: var(--switch-disabled-color);
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
.switch__disabled_1ir4t .switch__hint_1ir4t {
|
|
45
45
|
color: var(--switch-disabled-color);
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
.switch__disabled_1ir4t .switch__switch_1ir4t {
|
|
48
48
|
background-color: var(--switch-disabled-bg-color);
|
|
49
49
|
}
|
|
50
|
-
.
|
|
50
|
+
.switch__disabled_1ir4t .switch__switch_1ir4t:before {
|
|
51
51
|
background-color: var(--switch-icon-disabled-color);
|
|
52
52
|
}
|
|
53
|
-
.
|
|
53
|
+
.switch__disabled_1ir4t.switch__checked_1ir4t .switch__switch_1ir4t {
|
|
54
54
|
background-color: var(--switch-disabled-checked-bg-color);
|
|
55
55
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './default.css';
|
|
2
2
|
|
|
3
|
-
const defaultStyles = {"switch":"
|
|
3
|
+
const defaultStyles = {"switch":"switch__switch_1ir4t","label":"switch__label_1ir4t","hint":"switch__hint_1ir4t","checked":"switch__checked_1ir4t","disabled":"switch__disabled_1ir4t"};
|
|
4
4
|
|
|
5
5
|
export { defaultStyles as default };
|
|
6
6
|
//# sourceMappingURL=default.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
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
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
--switch-error-color: var(--color-light-text-negative);
|
|
33
33
|
--switch-icon-color: var(--color-static-neutral-0);
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
.switch__component_1ktzs {
|
|
36
36
|
display: inline-flex;
|
|
37
37
|
align-items: flex-start;
|
|
38
38
|
margin: var(--gap-0);
|
|
@@ -41,25 +41,25 @@
|
|
|
41
41
|
cursor: pointer;
|
|
42
42
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
.switch__component_1ktzs input {
|
|
45
45
|
opacity: 0;
|
|
46
46
|
position: absolute;
|
|
47
47
|
}
|
|
48
|
-
.
|
|
48
|
+
.switch__start_1ktzs {
|
|
49
49
|
align-items: flex-start;
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.switch__center_1ktzs {
|
|
52
52
|
align-items: center;
|
|
53
53
|
}
|
|
54
|
-
.
|
|
54
|
+
.switch__addons_1ktzs {
|
|
55
55
|
margin-left: auto;
|
|
56
56
|
padding-left: var(--gap-16);
|
|
57
57
|
line-height: 24px;
|
|
58
58
|
}
|
|
59
|
-
.
|
|
59
|
+
.switch__block_1ktzs {
|
|
60
60
|
width: 100%;
|
|
61
61
|
}
|
|
62
|
-
.
|
|
62
|
+
.switch__switch_1ktzs {
|
|
63
63
|
position: relative;
|
|
64
64
|
border-radius: var(--border-radius-16);
|
|
65
65
|
width: 36px;
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
border-color 0.2s ease;
|
|
73
73
|
box-sizing: border-box;
|
|
74
74
|
}
|
|
75
|
-
.
|
|
75
|
+
.switch__switch_1ktzs:before {
|
|
76
76
|
content: '';
|
|
77
77
|
position: absolute;
|
|
78
78
|
top: var(--gap-0);
|
|
@@ -85,54 +85,54 @@
|
|
|
85
85
|
box-sizing: border-box;
|
|
86
86
|
transition: transform 0.2s ease;
|
|
87
87
|
}
|
|
88
|
-
.
|
|
88
|
+
.switch__content_1ktzs {
|
|
89
89
|
margin-left: var(--gap-12);
|
|
90
90
|
flex-grow: 1;
|
|
91
91
|
}
|
|
92
|
-
.
|
|
92
|
+
.switch__label_1ktzs {
|
|
93
93
|
font-size: 16px;
|
|
94
94
|
line-height: 24px;
|
|
95
95
|
font-weight: 400;
|
|
96
96
|
font-family: var(--font-family-system);
|
|
97
97
|
display: block;
|
|
98
98
|
}
|
|
99
|
-
.
|
|
99
|
+
.switch__label_1ktzs:not(:only-child) {
|
|
100
100
|
margin-bottom: var(--gap-4);
|
|
101
101
|
}
|
|
102
|
-
.
|
|
102
|
+
.switch__errorMessage_1ktzs {
|
|
103
103
|
font-size: 14px;
|
|
104
104
|
line-height: 18px;
|
|
105
105
|
font-weight: 400;
|
|
106
106
|
font-family: var(--font-family-system);
|
|
107
107
|
color: var(--switch-error-color);
|
|
108
108
|
}
|
|
109
|
-
.
|
|
109
|
+
.switch__hint_1ktzs {
|
|
110
110
|
font-size: 14px;
|
|
111
111
|
line-height: 18px;
|
|
112
112
|
font-weight: 400;
|
|
113
113
|
font-family: var(--font-family-system);
|
|
114
114
|
display: block;
|
|
115
115
|
}
|
|
116
|
-
.
|
|
116
|
+
.switch__component_1ktzs.switch__reversed_1ktzs {
|
|
117
117
|
flex-direction: row-reverse;
|
|
118
118
|
}
|
|
119
|
-
.
|
|
119
|
+
.switch__reversed_1ktzs .switch__content_1ktzs {
|
|
120
120
|
margin-right: var(--gap-16);
|
|
121
121
|
margin-left: var(--gap-0);
|
|
122
122
|
}
|
|
123
|
-
.
|
|
123
|
+
.switch__reversed_1ktzs .switch__addons_1ktzs {
|
|
124
124
|
margin-left: var(--gap-0);
|
|
125
125
|
padding-left: var(--gap-0);
|
|
126
126
|
margin-right: auto;
|
|
127
127
|
padding-right: var(--gap-16);
|
|
128
128
|
}
|
|
129
|
-
.
|
|
129
|
+
.switch__checked_1ktzs .switch__switch_1ktzs:before {
|
|
130
130
|
transform: translateX(16px);
|
|
131
131
|
}
|
|
132
|
-
.
|
|
132
|
+
.switch__disabled_1ktzs {
|
|
133
133
|
cursor: var(--disabled-cursor);
|
|
134
134
|
}
|
|
135
|
-
.
|
|
135
|
+
.switch__focused_1ktzs .switch__switch_1ktzs {
|
|
136
136
|
outline: 2px solid var(--focus-color);
|
|
137
137
|
outline-offset: 2px;
|
|
138
138
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"
|
|
3
|
+
const styles = {"component":"switch__component_1ktzs","start":"switch__start_1ktzs","center":"switch__center_1ktzs","addons":"switch__addons_1ktzs","block":"switch__block_1ktzs","switch":"switch__switch_1ktzs","content":"switch__content_1ktzs","label":"switch__label_1ktzs","errorMessage":"switch__errorMessage_1ktzs","hint":"switch__hint_1ktzs","reversed":"switch__reversed_1ktzs","checked":"switch__checked_1ktzs","disabled":"switch__disabled_1ktzs","focused":"switch__focused_1ktzs"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
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:\n background-color 0.2s ease,\n 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;;;;"}
|