@alfalab/core-components-switch 6.0.3 → 6.1.0-alfasans

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/Component.d.ts +10 -0
  2. package/Component.js +15 -5
  3. package/Component.js.map +1 -1
  4. package/cssm/Component.d.ts +10 -0
  5. package/cssm/Component.js +17 -7
  6. package/cssm/Component.js.map +1 -1
  7. package/cssm/index.module.css +32 -8
  8. package/default.css +11 -11
  9. package/default.module.css.js +1 -1
  10. package/esm/Component.d.ts +10 -0
  11. package/esm/Component.js +15 -5
  12. package/esm/Component.js.map +1 -1
  13. package/esm/default.css +11 -11
  14. package/esm/default.module.css.js +1 -1
  15. package/esm/index.css +50 -26
  16. package/esm/index.module.css.js +1 -1
  17. package/esm/index.module.css.js.map +1 -1
  18. package/esm/inverted.css +11 -11
  19. package/esm/inverted.module.css.js +1 -1
  20. package/index.css +50 -26
  21. package/index.module.css.js +1 -1
  22. package/index.module.css.js.map +1 -1
  23. package/inverted.css +11 -11
  24. package/inverted.module.css.js +1 -1
  25. package/modern/Component.d.ts +10 -0
  26. package/modern/Component.js +14 -4
  27. package/modern/Component.js.map +1 -1
  28. package/modern/default.css +11 -11
  29. package/modern/default.module.css.js +1 -1
  30. package/modern/index.css +50 -26
  31. package/modern/index.module.css.js +1 -1
  32. package/modern/index.module.css.js.map +1 -1
  33. package/modern/inverted.css +11 -11
  34. package/modern/inverted.module.css.js +1 -1
  35. package/moderncssm/Component.d.ts +10 -0
  36. package/moderncssm/Component.js +14 -4
  37. package/moderncssm/Component.js.map +1 -1
  38. package/moderncssm/index.module.css +30 -6
  39. package/package.json +5 -4
  40. package/src/Component.tsx +43 -7
  41. package/src/index.module.css +27 -2
package/esm/index.css CHANGED
@@ -12,16 +12,20 @@
12
12
  --gap-3xs: 2px;
13
13
  --gap-2xs: 4px;
14
14
  --gap-s: 12px;
15
+ --gap-2s: 14px;
15
16
  --gap-m: 16px;
16
17
  --gap-0: 0px;
17
18
  --gap-2: var(--gap-3xs);
18
19
  --gap-4: var(--gap-2xs);
20
+ --gap-6: 6px;
21
+ --gap-10: 10px;
19
22
  --gap-12: var(--gap-s);
20
23
  --gap-16: var(--gap-m);
21
24
  }
22
25
  :root {
23
- --font-family-system:
24
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
25
29
  }
26
30
  :root {
27
31
  --focus-color: var(--color-light-status-info);
@@ -32,7 +36,7 @@
32
36
  --switch-error-color: var(--color-light-text-negative);
33
37
  --switch-icon-color: var(--color-static-neutral-0);
34
38
  }
35
- .switch__component_1ktzs {
39
+ .switch__component_12dhf {
36
40
  display: inline-flex;
37
41
  align-items: flex-start;
38
42
  margin: var(--gap-0);
@@ -41,26 +45,27 @@
41
45
  cursor: pointer;
42
46
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
43
47
  }
44
- .switch__component_1ktzs input {
48
+ .switch__component_12dhf input {
45
49
  opacity: 0;
46
50
  position: absolute;
47
51
  }
48
- .switch__start_1ktzs {
52
+ .switch__start_12dhf {
49
53
  align-items: flex-start;
50
54
  }
51
- .switch__center_1ktzs {
55
+ .switch__center_12dhf {
52
56
  align-items: center;
53
57
  }
54
- .switch__addons_1ktzs {
58
+ .switch__addons_12dhf {
55
59
  margin-left: auto;
56
60
  padding-left: var(--gap-16);
57
61
  line-height: 24px;
58
62
  }
59
- .switch__block_1ktzs {
63
+ .switch__block_12dhf {
60
64
  width: 100%;
61
65
  }
62
- .switch__switch_1ktzs {
66
+ .switch__switch_12dhf {
63
67
  position: relative;
68
+ display: block;
64
69
  border-radius: var(--border-radius-16);
65
70
  width: 36px;
66
71
  height: 20px;
@@ -72,7 +77,12 @@
72
77
  border-color 0.2s ease;
73
78
  box-sizing: border-box;
74
79
  }
75
- .switch__switch_1ktzs:before {
80
+ .switch__switchSkeleton_12dhf {
81
+ width: 36px;
82
+ height: 20px;
83
+ margin: var(--gap-2);
84
+ }
85
+ .switch__switch_12dhf:before {
76
86
  content: '';
77
87
  position: absolute;
78
88
  top: var(--gap-0);
@@ -85,54 +95,68 @@
85
95
  box-sizing: border-box;
86
96
  transition: transform 0.2s ease;
87
97
  }
88
- .switch__content_1ktzs {
98
+ .switch__content_12dhf {
89
99
  margin-left: var(--gap-12);
90
100
  flex-grow: 1;
91
101
  }
92
- .switch__label_1ktzs {
102
+ .switch__label_12dhf {
93
103
  font-size: 16px;
94
104
  line-height: 24px;
95
105
  font-weight: 400;
96
- font-family: var(--font-family-system);
106
+ letter-spacing: -0.24px;
107
+ font-family: var(--font-family-alfasans);
97
108
  display: block;
98
109
  }
99
- .switch__label_1ktzs:not(:only-child) {
100
- margin-bottom: var(--gap-4);
101
- }
102
- .switch__errorMessage_1ktzs {
110
+ .switch__labelWrap_12dhf:not(:only-child) {
111
+ margin-bottom: var(--gap-4);
112
+ }
113
+ .switch__labelWrap_12dhf.switch__loading_12dhf {
114
+ height: var(--gap-12);
115
+ margin: var(--gap-6) 0;
116
+ }
117
+ .switch__labelWrap_12dhf.switch__loading_12dhf:not(:only-child) {
118
+ margin-bottom: var(--gap-2s);
119
+ }
120
+ .switch__errorMessage_12dhf {
103
121
  font-size: 14px;
104
122
  line-height: 18px;
105
123
  font-weight: 400;
106
- font-family: var(--font-family-system);
124
+ letter-spacing: -0.08px;
125
+ font-family: var(--font-family-alfasans);
107
126
  color: var(--switch-error-color);
108
127
  }
109
- .switch__hint_1ktzs {
128
+ .switch__hint_12dhf {
110
129
  font-size: 14px;
111
130
  line-height: 18px;
112
131
  font-weight: 400;
113
- font-family: var(--font-family-system);
132
+ letter-spacing: -0.08px;
133
+ font-family: var(--font-family-alfasans);
114
134
  display: block;
115
135
  }
116
- .switch__component_1ktzs.switch__reversed_1ktzs {
136
+ .switch__hintWrap_12dhf.switch__loading_12dhf {
137
+ height: var(--gap-10);
138
+ margin-bottom: var(--gap-4);
139
+ }
140
+ .switch__component_12dhf.switch__reversed_12dhf {
117
141
  flex-direction: row-reverse;
118
142
  }
119
- .switch__reversed_1ktzs .switch__content_1ktzs {
143
+ .switch__reversed_12dhf .switch__content_12dhf {
120
144
  margin-right: var(--gap-16);
121
145
  margin-left: var(--gap-0);
122
146
  }
123
- .switch__reversed_1ktzs .switch__addons_1ktzs {
147
+ .switch__reversed_12dhf .switch__addons_12dhf {
124
148
  margin-left: var(--gap-0);
125
149
  padding-left: var(--gap-0);
126
150
  margin-right: auto;
127
151
  padding-right: var(--gap-16);
128
152
  }
129
- .switch__checked_1ktzs .switch__switch_1ktzs:before {
153
+ .switch__checked_12dhf .switch__switch_12dhf:before {
130
154
  transform: translateX(16px);
131
155
  }
132
- .switch__disabled_1ktzs {
156
+ .switch__disabled_12dhf {
133
157
  cursor: var(--disabled-cursor);
134
158
  }
135
- .switch__focused_1ktzs .switch__switch_1ktzs {
159
+ .switch__focused_12dhf .switch__switch_12dhf {
136
160
  outline: 2px solid var(--focus-color);
137
161
  outline-offset: 2px;
138
162
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- 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"};
3
+ var styles = {"component":"switch__component_12dhf","start":"switch__start_12dhf","center":"switch__center_12dhf","addons":"switch__addons_12dhf","block":"switch__block_12dhf","switch":"switch__switch_12dhf","switchSkeleton":"switch__switchSkeleton_12dhf","content":"switch__content_12dhf","label":"switch__label_12dhf","labelWrap":"switch__labelWrap_12dhf","loading":"switch__loading_12dhf","errorMessage":"switch__errorMessage_12dhf","hint":"switch__hint_12dhf","hintWrap":"switch__hintWrap_12dhf","reversed":"switch__reversed_12dhf","checked":"switch__checked_12dhf","disabled":"switch__disabled_12dhf","focused":"switch__focused_12dhf"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/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/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;;;;"}
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 display: block;\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.switchSkeleton {\n width: 36px;\n height: 20px;\n margin: var(--gap-2);\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.labelWrap {\n &:not(:only-child) {\n margin-bottom: var(--gap-4);\n }\n\n &.loading {\n height: var(--gap-12);\n margin: var(--gap-6) 0;\n\n &:not(:only-child) {\n margin-bottom: var(--gap-2s);\n }\n }\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.hintWrap {\n &.loading {\n height: var(--gap-10);\n margin-bottom: var(--gap-4);\n }\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,gBAAgB,CAAC,8BAA8B,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,WAAW,CAAC,yBAAyB,CAAC,SAAS,CAAC,uBAAuB,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,wBAAwB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}
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
- .switch__switch_17cag {
23
+ .switch__switch_15jes {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_17cag:hover {
26
+ .switch__switch_15jes:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_17cag {
29
+ .switch__label_15jes {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_17cag {
32
+ .switch__hint_15jes {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_17cag .switch__switch_17cag {
35
+ .switch__checked_15jes .switch__switch_15jes {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_17cag .switch__switch_17cag:hover {
38
+ .switch__checked_15jes .switch__switch_15jes:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_17cag .switch__label_17cag {
41
+ .switch__disabled_15jes .switch__label_15jes {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_17cag .switch__hint_17cag {
44
+ .switch__disabled_15jes .switch__hint_15jes {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_17cag .switch__switch_17cag {
47
+ .switch__disabled_15jes .switch__switch_15jes {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_17cag .switch__switch_17cag:before {
50
+ .switch__disabled_15jes .switch__switch_15jes:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_17cag.switch__checked_17cag .switch__switch_17cag {
53
+ .switch__disabled_15jes.switch__checked_15jes .switch__switch_15jes {
54
54
  background-color: var(--switch-disabled-checked-bg-inverted-color);
55
55
  }
package/esm/inverted.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './inverted.css';
2
2
 
3
- var invertedStyles = {"switch":"switch__switch_17cag","label":"switch__label_17cag","hint":"switch__hint_17cag","checked":"switch__checked_17cag","disabled":"switch__disabled_17cag"};
3
+ var invertedStyles = {"switch":"switch__switch_15jes","label":"switch__label_15jes","hint":"switch__hint_15jes","checked":"switch__checked_15jes","disabled":"switch__disabled_15jes"};
4
4
 
5
5
  export { invertedStyles as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/index.css CHANGED
@@ -12,16 +12,20 @@
12
12
  --gap-3xs: 2px;
13
13
  --gap-2xs: 4px;
14
14
  --gap-s: 12px;
15
+ --gap-2s: 14px;
15
16
  --gap-m: 16px;
16
17
  --gap-0: 0px;
17
18
  --gap-2: var(--gap-3xs);
18
19
  --gap-4: var(--gap-2xs);
20
+ --gap-6: 6px;
21
+ --gap-10: 10px;
19
22
  --gap-12: var(--gap-s);
20
23
  --gap-16: var(--gap-m);
21
24
  }
22
25
  :root {
23
- --font-family-system:
24
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
+ --font-family-alfasans:
27
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
28
+ Helvetica, sans-serif;
25
29
  }
26
30
  :root {
27
31
  --focus-color: var(--color-light-status-info);
@@ -32,7 +36,7 @@
32
36
  --switch-error-color: var(--color-light-text-negative);
33
37
  --switch-icon-color: var(--color-static-neutral-0);
34
38
  }
35
- .switch__component_1ktzs {
39
+ .switch__component_12dhf {
36
40
  display: inline-flex;
37
41
  align-items: flex-start;
38
42
  margin: var(--gap-0);
@@ -41,26 +45,27 @@
41
45
  cursor: pointer;
42
46
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
43
47
  }
44
- .switch__component_1ktzs input {
48
+ .switch__component_12dhf input {
45
49
  opacity: 0;
46
50
  position: absolute;
47
51
  }
48
- .switch__start_1ktzs {
52
+ .switch__start_12dhf {
49
53
  align-items: flex-start;
50
54
  }
51
- .switch__center_1ktzs {
55
+ .switch__center_12dhf {
52
56
  align-items: center;
53
57
  }
54
- .switch__addons_1ktzs {
58
+ .switch__addons_12dhf {
55
59
  margin-left: auto;
56
60
  padding-left: var(--gap-16);
57
61
  line-height: 24px;
58
62
  }
59
- .switch__block_1ktzs {
63
+ .switch__block_12dhf {
60
64
  width: 100%;
61
65
  }
62
- .switch__switch_1ktzs {
66
+ .switch__switch_12dhf {
63
67
  position: relative;
68
+ display: block;
64
69
  border-radius: var(--border-radius-16);
65
70
  width: 36px;
66
71
  height: 20px;
@@ -72,7 +77,12 @@
72
77
  border-color 0.2s ease;
73
78
  box-sizing: border-box;
74
79
  }
75
- .switch__switch_1ktzs:before {
80
+ .switch__switchSkeleton_12dhf {
81
+ width: 36px;
82
+ height: 20px;
83
+ margin: var(--gap-2);
84
+ }
85
+ .switch__switch_12dhf:before {
76
86
  content: '';
77
87
  position: absolute;
78
88
  top: var(--gap-0);
@@ -85,54 +95,68 @@
85
95
  box-sizing: border-box;
86
96
  transition: transform 0.2s ease;
87
97
  }
88
- .switch__content_1ktzs {
98
+ .switch__content_12dhf {
89
99
  margin-left: var(--gap-12);
90
100
  flex-grow: 1;
91
101
  }
92
- .switch__label_1ktzs {
102
+ .switch__label_12dhf {
93
103
  font-size: 16px;
94
104
  line-height: 24px;
95
105
  font-weight: 400;
96
- font-family: var(--font-family-system);
106
+ letter-spacing: -0.24px;
107
+ font-family: var(--font-family-alfasans);
97
108
  display: block;
98
109
  }
99
- .switch__label_1ktzs:not(:only-child) {
100
- margin-bottom: var(--gap-4);
101
- }
102
- .switch__errorMessage_1ktzs {
110
+ .switch__labelWrap_12dhf:not(:only-child) {
111
+ margin-bottom: var(--gap-4);
112
+ }
113
+ .switch__labelWrap_12dhf.switch__loading_12dhf {
114
+ height: var(--gap-12);
115
+ margin: var(--gap-6) 0;
116
+ }
117
+ .switch__labelWrap_12dhf.switch__loading_12dhf:not(:only-child) {
118
+ margin-bottom: var(--gap-2s);
119
+ }
120
+ .switch__errorMessage_12dhf {
103
121
  font-size: 14px;
104
122
  line-height: 18px;
105
123
  font-weight: 400;
106
- font-family: var(--font-family-system);
124
+ letter-spacing: -0.08px;
125
+ font-family: var(--font-family-alfasans);
107
126
  color: var(--switch-error-color);
108
127
  }
109
- .switch__hint_1ktzs {
128
+ .switch__hint_12dhf {
110
129
  font-size: 14px;
111
130
  line-height: 18px;
112
131
  font-weight: 400;
113
- font-family: var(--font-family-system);
132
+ letter-spacing: -0.08px;
133
+ font-family: var(--font-family-alfasans);
114
134
  display: block;
115
135
  }
116
- .switch__component_1ktzs.switch__reversed_1ktzs {
136
+ .switch__hintWrap_12dhf.switch__loading_12dhf {
137
+ height: var(--gap-10);
138
+ margin-bottom: var(--gap-4);
139
+ }
140
+ .switch__component_12dhf.switch__reversed_12dhf {
117
141
  flex-direction: row-reverse;
118
142
  }
119
- .switch__reversed_1ktzs .switch__content_1ktzs {
143
+ .switch__reversed_12dhf .switch__content_12dhf {
120
144
  margin-right: var(--gap-16);
121
145
  margin-left: var(--gap-0);
122
146
  }
123
- .switch__reversed_1ktzs .switch__addons_1ktzs {
147
+ .switch__reversed_12dhf .switch__addons_12dhf {
124
148
  margin-left: var(--gap-0);
125
149
  padding-left: var(--gap-0);
126
150
  margin-right: auto;
127
151
  padding-right: var(--gap-16);
128
152
  }
129
- .switch__checked_1ktzs .switch__switch_1ktzs:before {
153
+ .switch__checked_12dhf .switch__switch_12dhf:before {
130
154
  transform: translateX(16px);
131
155
  }
132
- .switch__disabled_1ktzs {
156
+ .switch__disabled_12dhf {
133
157
  cursor: var(--disabled-cursor);
134
158
  }
135
- .switch__focused_1ktzs .switch__switch_1ktzs {
159
+ .switch__focused_12dhf .switch__switch_12dhf {
136
160
  outline: 2px solid var(--focus-color);
137
161
  outline-offset: 2px;
138
162
  }
package/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
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"};
5
+ var styles = {"component":"switch__component_12dhf","start":"switch__start_12dhf","center":"switch__center_12dhf","addons":"switch__addons_12dhf","block":"switch__block_12dhf","switch":"switch__switch_12dhf","switchSkeleton":"switch__switchSkeleton_12dhf","content":"switch__content_12dhf","label":"switch__label_12dhf","labelWrap":"switch__labelWrap_12dhf","loading":"switch__loading_12dhf","errorMessage":"switch__errorMessage_12dhf","hint":"switch__hint_12dhf","hintWrap":"switch__hintWrap_12dhf","reversed":"switch__reversed_12dhf","checked":"switch__checked_12dhf","disabled":"switch__disabled_12dhf","focused":"switch__focused_12dhf"};
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/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;;;;"}
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 display: block;\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.switchSkeleton {\n width: 36px;\n height: 20px;\n margin: var(--gap-2);\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.labelWrap {\n &:not(:only-child) {\n margin-bottom: var(--gap-4);\n }\n\n &.loading {\n height: var(--gap-12);\n margin: var(--gap-6) 0;\n\n &:not(:only-child) {\n margin-bottom: var(--gap-2s);\n }\n }\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.hintWrap {\n &.loading {\n height: var(--gap-10);\n margin-bottom: var(--gap-4);\n }\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,gBAAgB,CAAC,8BAA8B,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,WAAW,CAAC,yBAAyB,CAAC,SAAS,CAAC,uBAAuB,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,wBAAwB,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
- .switch__switch_17cag {
23
+ .switch__switch_15jes {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_17cag:hover {
26
+ .switch__switch_15jes:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_17cag {
29
+ .switch__label_15jes {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_17cag {
32
+ .switch__hint_15jes {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_17cag .switch__switch_17cag {
35
+ .switch__checked_15jes .switch__switch_15jes {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_17cag .switch__switch_17cag:hover {
38
+ .switch__checked_15jes .switch__switch_15jes:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_17cag .switch__label_17cag {
41
+ .switch__disabled_15jes .switch__label_15jes {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_17cag .switch__hint_17cag {
44
+ .switch__disabled_15jes .switch__hint_15jes {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_17cag .switch__switch_17cag {
47
+ .switch__disabled_15jes .switch__switch_15jes {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_17cag .switch__switch_17cag:before {
50
+ .switch__disabled_15jes .switch__switch_15jes:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_17cag.switch__checked_17cag .switch__switch_17cag {
53
+ .switch__disabled_15jes.switch__checked_15jes .switch__switch_15jes {
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":"switch__switch_17cag","label":"switch__label_17cag","hint":"switch__hint_17cag","checked":"switch__checked_17cag","disabled":"switch__disabled_17cag"};
5
+ var invertedStyles = {"switch":"switch__switch_15jes","label":"switch__label_15jes","hint":"switch__hint_15jes","checked":"switch__checked_15jes","disabled":"switch__disabled_15jes"};
6
6
 
7
7
  module.exports = invertedStyles;
8
8
  //# sourceMappingURL=inverted.module.css.js.map
package/modern/Component.d.ts CHANGED
@@ -54,6 +54,11 @@ export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | '
54
54
  * @default default
55
55
  */
56
56
  colors?: Colors;
57
+ /**
58
+ * Показать скелетон
59
+ * @default false
60
+ */
61
+ showSkeleton?: boolean;
57
62
  };
58
63
  export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
59
64
  /**
@@ -108,5 +113,10 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
108
113
  * @default default
109
114
  */
110
115
  colors?: Colors;
116
+ /**
117
+ * Показать скелетон
118
+ * @default false
119
+ */
120
+ showSkeleton?: boolean;
111
121
  } & React.RefAttributes<HTMLLabelElement>>;
112
122
  export {};
package/modern/Component.js CHANGED
@@ -2,6 +2,7 @@ import React, { forwardRef, useRef } from 'react';
2
2
  import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
4
  import { dom } from '@alfalab/core-components-shared/modern';
5
+ import { Skeleton } from '@alfalab/core-components-skeleton/modern';
5
6
  import { useFocus } from '@alfalab/hooks';
6
7
  import defaultStyles from './default.module.css.js';
7
8
  import styles from './index.module.css.js';
@@ -11,7 +12,7 @@ const colorStyles = {
11
12
  default: defaultStyles,
12
13
  inverted: invertedStyles,
13
14
  };
14
- const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, error, label, hint, name, value, className, onChange, dataTestId, colors = 'default', ...restProps }, ref) => {
15
+ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, error, label, hint, name, value, className, onChange, dataTestId, colors = 'default', showSkeleton = false, ...restProps }, ref) => {
15
16
  const labelRef = useRef(null);
16
17
  const [focused] = useFocus(labelRef, 'keyboard');
17
18
  const handleChange = (e) => {
@@ -30,10 +31,19 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
30
31
  [styles.block]: block,
31
32
  }), ref: mergeRefs([labelRef, ref]) },
32
33
  React.createElement("input", { type: 'checkbox', onChange: handleChange, disabled: disabled, checked: checked, name: name, value: value, "data-test-id": dataTestId, ...restProps }),
33
- React.createElement("span", { className: cn(styles.switch, colorStyles[colors].switch) }),
34
+ React.createElement(Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn({
35
+ [styles.switchSkeleton]: showSkeleton,
36
+ }) },
37
+ React.createElement("span", { className: cn(styles.switch, colorStyles[colors].switch) })),
34
38
  (label || hint || errorMessage) && (React.createElement("span", { className: styles.content },
35
- label && (React.createElement("span", { className: cn(styles.label, colorStyles[colors].label) }, label)),
36
- hint && !errorMessage && (React.createElement("span", { className: cn(styles.hint, colorStyles[colors].hint) }, hint)),
39
+ label && (React.createElement(Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn(styles.labelWrap, {
40
+ [styles.loading]: showSkeleton,
41
+ }) },
42
+ React.createElement("span", { className: cn(styles.label, colorStyles[colors].label) }, label))),
43
+ hint && !errorMessage && (React.createElement(Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn(styles.hintWrap, {
44
+ [styles.loading]: showSkeleton,
45
+ }) },
46
+ React.createElement("span", { className: cn(styles.hint, colorStyles[colors].hint) }, hint))),
37
47
  errorMessage && (React.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
38
48
  addons && (
39
49
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
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":"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"}
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 { Skeleton } from '@alfalab/core-components-skeleton';\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 /**\n * Показать скелетон\n * @default false\n */\n showSkeleton?: boolean;\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 showSkeleton = false,\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 <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn({\n [styles.switchSkeleton]: showSkeleton,\n })}\n >\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n </Skeleton>\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn(styles.labelWrap, {\n [styles.loading]: showSkeleton,\n })}\n >\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n </Skeleton>\n )}\n\n {hint && !errorMessage && (\n <Skeleton\n visible={showSkeleton}\n borderRadius='pill'\n colors={colors}\n className={cn(styles.hintWrap, {\n [styles.loading]: showSkeleton,\n })}\n >\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n </Skeleton>\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":";;;;;;;;;;AAoBA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAC3B;AAkFY,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,YAAY,GAAG,KAAK,EACpB,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;QACtD,IAAI,QAAQ,EAAE;AACV,YAAA,QAAQ,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;;AAExD,KAAC;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,KAAK,KAAK,SAAS,GAAG,EAAE,GAAG,KAAK;AAE5D,IAAA,QACI,KACI,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;AACtD,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;YAC3B,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,QAAQ,GAAG,QAAQ;AAExC,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;YACzB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,GAAG,OAAO;AAEtC,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;AACzB,YAAA,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK;SACxB,CAAC,EACF,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAA;QAE/B,KACI,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACE,cAAA,EAAA,UAAU,EACpB,GAAA,SAAS,EACf,CAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EACL,EAAA,OAAO,EAAE,YAAY,EACrB,YAAY,EAAC,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CAAC;AACV,gBAAA,CAAC,MAAM,CAAC,cAAc,GAAG,YAAY;aACxC,CAAC,EAAA;AAEF,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,GAAI,CAC3D;AAEV,QAAA,CAAC,KAAK,IAAI,IAAI,IAAI,YAAY,MAC3B,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA;YAC1B,KAAK,KACF,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACL,OAAO,EAAE,YAAY,EACrB,YAAY,EAAC,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE;AAC5B,oBAAA,CAAC,MAAM,CAAC,OAAO,GAAG,YAAY;iBACjC,CAAC,EAAA;AAEF,gBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,IACvD,KAAK,CACH,CACA,CACd;YAEA,IAAI,IAAI,CAAC,YAAY,KAClB,KAAC,CAAA,aAAA,CAAA,QAAQ,EACL,EAAA,OAAO,EAAE,YAAY,EACrB,YAAY,EAAC,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE;AAC3B,oBAAA,CAAC,MAAM,CAAC,OAAO,GAAG,YAAY;iBACjC,CAAC,EAAA;AAEF,gBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IACrD,IAAI,CACF,CACA,CACd;AAEA,YAAA,YAAY,KACT,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,IAAI,EAAC,OAAO,EAAA,EAC7C,YAAY,CACV,CACV,CACE,CACV;AAEA,QAAA,MAAM;;AAEH,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,cAAc,EACtD,EAAA,MAAM,CACJ,CACV,CACG;AAEhB,CAAC;AAGL,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}