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

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 +28 -12
  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 +46 -30
  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 +46 -30
  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 +46 -30
  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 +27 -9
  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,17 +12,19 @@
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-alfasans:
24
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
25
- Helvetica, sans-serif;
26
+ --font-family-system:
27
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
28
  }
27
29
  :root {
28
30
  --focus-color: var(--color-light-status-info);
@@ -33,7 +35,7 @@
33
35
  --switch-error-color: var(--color-light-text-negative);
34
36
  --switch-icon-color: var(--color-static-neutral-0);
35
37
  }
36
- .switch__component_vunw2 {
38
+ .switch__component_afshm {
37
39
  display: inline-flex;
38
40
  align-items: flex-start;
39
41
  margin: var(--gap-0);
@@ -42,26 +44,27 @@
42
44
  cursor: pointer;
43
45
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
44
46
  }
45
- .switch__component_vunw2 input {
47
+ .switch__component_afshm input {
46
48
  opacity: 0;
47
49
  position: absolute;
48
50
  }
49
- .switch__start_vunw2 {
51
+ .switch__start_afshm {
50
52
  align-items: flex-start;
51
53
  }
52
- .switch__center_vunw2 {
54
+ .switch__center_afshm {
53
55
  align-items: center;
54
56
  }
55
- .switch__addons_vunw2 {
57
+ .switch__addons_afshm {
56
58
  margin-left: auto;
57
59
  padding-left: var(--gap-16);
58
60
  line-height: 24px;
59
61
  }
60
- .switch__block_vunw2 {
62
+ .switch__block_afshm {
61
63
  width: 100%;
62
64
  }
63
- .switch__switch_vunw2 {
65
+ .switch__switch_afshm {
64
66
  position: relative;
67
+ display: block;
65
68
  border-radius: var(--border-radius-16);
66
69
  width: 36px;
67
70
  height: 20px;
@@ -73,7 +76,12 @@
73
76
  border-color 0.2s ease;
74
77
  box-sizing: border-box;
75
78
  }
76
- .switch__switch_vunw2:before {
79
+ .switch__switchSkeleton_afshm {
80
+ width: 36px;
81
+ height: 20px;
82
+ margin: var(--gap-2);
83
+ }
84
+ .switch__switch_afshm:before {
77
85
  content: '';
78
86
  position: absolute;
79
87
  top: var(--gap-0);
@@ -86,57 +94,65 @@
86
94
  box-sizing: border-box;
87
95
  transition: transform 0.2s ease;
88
96
  }
89
- .switch__content_vunw2 {
97
+ .switch__content_afshm {
90
98
  margin-left: var(--gap-12);
91
99
  flex-grow: 1;
92
100
  }
93
- .switch__label_vunw2 {
101
+ .switch__label_afshm {
94
102
  font-size: 16px;
95
103
  line-height: 24px;
96
104
  font-weight: 400;
97
- letter-spacing: -0.24px;
98
- font-family: var(--font-family-alfasans);
105
+ font-family: var(--font-family-system);
99
106
  display: block;
100
107
  }
101
- .switch__label_vunw2:not(:only-child) {
102
- margin-bottom: var(--gap-4);
103
- }
104
- .switch__errorMessage_vunw2 {
108
+ .switch__labelWrap_afshm:not(:only-child) {
109
+ margin-bottom: var(--gap-4);
110
+ }
111
+ .switch__labelWrap_afshm.switch__loading_afshm {
112
+ height: var(--gap-12);
113
+ margin: var(--gap-6) 0;
114
+ }
115
+ .switch__labelWrap_afshm.switch__loading_afshm:not(:only-child) {
116
+ margin-bottom: var(--gap-2s);
117
+ }
118
+ .switch__errorMessage_afshm {
105
119
  font-size: 14px;
106
120
  line-height: 18px;
107
121
  font-weight: 400;
108
- letter-spacing: -0.08px;
109
- font-family: var(--font-family-alfasans);
122
+ font-family: var(--font-family-system);
110
123
  color: var(--switch-error-color);
111
124
  }
112
- .switch__hint_vunw2 {
125
+ .switch__hint_afshm {
113
126
  font-size: 14px;
114
127
  line-height: 18px;
115
128
  font-weight: 400;
116
- letter-spacing: -0.08px;
117
- font-family: var(--font-family-alfasans);
129
+ font-family: var(--font-family-system);
118
130
  display: block;
119
131
  }
120
- .switch__component_vunw2.switch__reversed_vunw2 {
132
+ .switch__hintWrap_afshm.switch__loading_afshm {
133
+ height: var(--gap-10);
134
+ margin-bottom: var(--gap-4);
135
+ }
136
+ .switch__component_afshm.switch__reversed_afshm {
121
137
  flex-direction: row-reverse;
122
138
  }
123
- .switch__reversed_vunw2 .switch__content_vunw2 {
139
+ .switch__reversed_afshm .switch__content_afshm {
124
140
  margin-right: var(--gap-16);
125
141
  margin-left: var(--gap-0);
126
142
  }
127
- .switch__reversed_vunw2 .switch__addons_vunw2 {
143
+ .switch__reversed_afshm .switch__addons_afshm {
128
144
  margin-left: var(--gap-0);
129
145
  padding-left: var(--gap-0);
130
146
  margin-right: auto;
131
147
  padding-right: var(--gap-16);
132
148
  }
133
- .switch__checked_vunw2 .switch__switch_vunw2:before {
149
+ .switch__checked_afshm .switch__switch_afshm:before {
134
150
  transform: translateX(16px);
135
151
  }
136
- .switch__disabled_vunw2 {
152
+ .switch__disabled_afshm {
137
153
  cursor: var(--disabled-cursor);
138
154
  }
139
- .switch__focused_vunw2 .switch__switch_vunw2 {
155
+ .switch__focused_afshm .switch__switch_afshm {
140
156
  outline: 2px solid var(--focus-color);
141
157
  outline-offset: 2px;
142
158
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"switch__component_vunw2","start":"switch__start_vunw2","center":"switch__center_vunw2","addons":"switch__addons_vunw2","block":"switch__block_vunw2","switch":"switch__switch_vunw2","content":"switch__content_vunw2","label":"switch__label_vunw2","errorMessage":"switch__errorMessage_vunw2","hint":"switch__hint_vunw2","reversed":"switch__reversed_vunw2","checked":"switch__checked_vunw2","disabled":"switch__disabled_vunw2","focused":"switch__focused_vunw2"};
3
+ var styles = {"component":"switch__component_afshm","start":"switch__start_afshm","center":"switch__center_afshm","addons":"switch__addons_afshm","block":"switch__block_afshm","switch":"switch__switch_afshm","switchSkeleton":"switch__switchSkeleton_afshm","content":"switch__content_afshm","label":"switch__label_afshm","labelWrap":"switch__labelWrap_afshm","loading":"switch__loading_afshm","errorMessage":"switch__errorMessage_afshm","hint":"switch__hint_afshm","hintWrap":"switch__hintWrap_afshm","reversed":"switch__reversed_afshm","checked":"switch__checked_afshm","disabled":"switch__disabled_afshm","focused":"switch__focused_afshm"};
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_1f1cy {
23
+ .switch__switch_11ccj {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_1f1cy:hover {
26
+ .switch__switch_11ccj:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_1f1cy {
29
+ .switch__label_11ccj {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_1f1cy {
32
+ .switch__hint_11ccj {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_1f1cy .switch__switch_1f1cy {
35
+ .switch__checked_11ccj .switch__switch_11ccj {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_1f1cy .switch__switch_1f1cy:hover {
38
+ .switch__checked_11ccj .switch__switch_11ccj:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_1f1cy .switch__label_1f1cy {
41
+ .switch__disabled_11ccj .switch__label_11ccj {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_1f1cy .switch__hint_1f1cy {
44
+ .switch__disabled_11ccj .switch__hint_11ccj {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_1f1cy .switch__switch_1f1cy {
47
+ .switch__disabled_11ccj .switch__switch_11ccj {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_1f1cy .switch__switch_1f1cy:before {
50
+ .switch__disabled_11ccj .switch__switch_11ccj:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_1f1cy.switch__checked_1f1cy .switch__switch_1f1cy {
53
+ .switch__disabled_11ccj.switch__checked_11ccj .switch__switch_11ccj {
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_1f1cy","label":"switch__label_1f1cy","hint":"switch__hint_1f1cy","checked":"switch__checked_1f1cy","disabled":"switch__disabled_1f1cy"};
3
+ var invertedStyles = {"switch":"switch__switch_11ccj","label":"switch__label_11ccj","hint":"switch__hint_11ccj","checked":"switch__checked_11ccj","disabled":"switch__disabled_11ccj"};
4
4
 
5
5
  export { invertedStyles as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/index.css CHANGED
@@ -12,17 +12,19 @@
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-alfasans:
24
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
25
- Helvetica, sans-serif;
26
+ --font-family-system:
27
+ system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
26
28
  }
27
29
  :root {
28
30
  --focus-color: var(--color-light-status-info);
@@ -33,7 +35,7 @@
33
35
  --switch-error-color: var(--color-light-text-negative);
34
36
  --switch-icon-color: var(--color-static-neutral-0);
35
37
  }
36
- .switch__component_vunw2 {
38
+ .switch__component_afshm {
37
39
  display: inline-flex;
38
40
  align-items: flex-start;
39
41
  margin: var(--gap-0);
@@ -42,26 +44,27 @@
42
44
  cursor: pointer;
43
45
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
44
46
  }
45
- .switch__component_vunw2 input {
47
+ .switch__component_afshm input {
46
48
  opacity: 0;
47
49
  position: absolute;
48
50
  }
49
- .switch__start_vunw2 {
51
+ .switch__start_afshm {
50
52
  align-items: flex-start;
51
53
  }
52
- .switch__center_vunw2 {
54
+ .switch__center_afshm {
53
55
  align-items: center;
54
56
  }
55
- .switch__addons_vunw2 {
57
+ .switch__addons_afshm {
56
58
  margin-left: auto;
57
59
  padding-left: var(--gap-16);
58
60
  line-height: 24px;
59
61
  }
60
- .switch__block_vunw2 {
62
+ .switch__block_afshm {
61
63
  width: 100%;
62
64
  }
63
- .switch__switch_vunw2 {
65
+ .switch__switch_afshm {
64
66
  position: relative;
67
+ display: block;
65
68
  border-radius: var(--border-radius-16);
66
69
  width: 36px;
67
70
  height: 20px;
@@ -73,7 +76,12 @@
73
76
  border-color 0.2s ease;
74
77
  box-sizing: border-box;
75
78
  }
76
- .switch__switch_vunw2:before {
79
+ .switch__switchSkeleton_afshm {
80
+ width: 36px;
81
+ height: 20px;
82
+ margin: var(--gap-2);
83
+ }
84
+ .switch__switch_afshm:before {
77
85
  content: '';
78
86
  position: absolute;
79
87
  top: var(--gap-0);
@@ -86,57 +94,65 @@
86
94
  box-sizing: border-box;
87
95
  transition: transform 0.2s ease;
88
96
  }
89
- .switch__content_vunw2 {
97
+ .switch__content_afshm {
90
98
  margin-left: var(--gap-12);
91
99
  flex-grow: 1;
92
100
  }
93
- .switch__label_vunw2 {
101
+ .switch__label_afshm {
94
102
  font-size: 16px;
95
103
  line-height: 24px;
96
104
  font-weight: 400;
97
- letter-spacing: -0.24px;
98
- font-family: var(--font-family-alfasans);
105
+ font-family: var(--font-family-system);
99
106
  display: block;
100
107
  }
101
- .switch__label_vunw2:not(:only-child) {
102
- margin-bottom: var(--gap-4);
103
- }
104
- .switch__errorMessage_vunw2 {
108
+ .switch__labelWrap_afshm:not(:only-child) {
109
+ margin-bottom: var(--gap-4);
110
+ }
111
+ .switch__labelWrap_afshm.switch__loading_afshm {
112
+ height: var(--gap-12);
113
+ margin: var(--gap-6) 0;
114
+ }
115
+ .switch__labelWrap_afshm.switch__loading_afshm:not(:only-child) {
116
+ margin-bottom: var(--gap-2s);
117
+ }
118
+ .switch__errorMessage_afshm {
105
119
  font-size: 14px;
106
120
  line-height: 18px;
107
121
  font-weight: 400;
108
- letter-spacing: -0.08px;
109
- font-family: var(--font-family-alfasans);
122
+ font-family: var(--font-family-system);
110
123
  color: var(--switch-error-color);
111
124
  }
112
- .switch__hint_vunw2 {
125
+ .switch__hint_afshm {
113
126
  font-size: 14px;
114
127
  line-height: 18px;
115
128
  font-weight: 400;
116
- letter-spacing: -0.08px;
117
- font-family: var(--font-family-alfasans);
129
+ font-family: var(--font-family-system);
118
130
  display: block;
119
131
  }
120
- .switch__component_vunw2.switch__reversed_vunw2 {
132
+ .switch__hintWrap_afshm.switch__loading_afshm {
133
+ height: var(--gap-10);
134
+ margin-bottom: var(--gap-4);
135
+ }
136
+ .switch__component_afshm.switch__reversed_afshm {
121
137
  flex-direction: row-reverse;
122
138
  }
123
- .switch__reversed_vunw2 .switch__content_vunw2 {
139
+ .switch__reversed_afshm .switch__content_afshm {
124
140
  margin-right: var(--gap-16);
125
141
  margin-left: var(--gap-0);
126
142
  }
127
- .switch__reversed_vunw2 .switch__addons_vunw2 {
143
+ .switch__reversed_afshm .switch__addons_afshm {
128
144
  margin-left: var(--gap-0);
129
145
  padding-left: var(--gap-0);
130
146
  margin-right: auto;
131
147
  padding-right: var(--gap-16);
132
148
  }
133
- .switch__checked_vunw2 .switch__switch_vunw2:before {
149
+ .switch__checked_afshm .switch__switch_afshm:before {
134
150
  transform: translateX(16px);
135
151
  }
136
- .switch__disabled_vunw2 {
152
+ .switch__disabled_afshm {
137
153
  cursor: var(--disabled-cursor);
138
154
  }
139
- .switch__focused_vunw2 .switch__switch_vunw2 {
155
+ .switch__focused_afshm .switch__switch_afshm {
140
156
  outline: 2px solid var(--focus-color);
141
157
  outline-offset: 2px;
142
158
  }
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_vunw2","start":"switch__start_vunw2","center":"switch__center_vunw2","addons":"switch__addons_vunw2","block":"switch__block_vunw2","switch":"switch__switch_vunw2","content":"switch__content_vunw2","label":"switch__label_vunw2","errorMessage":"switch__errorMessage_vunw2","hint":"switch__hint_vunw2","reversed":"switch__reversed_vunw2","checked":"switch__checked_vunw2","disabled":"switch__disabled_vunw2","focused":"switch__focused_vunw2"};
5
+ var styles = {"component":"switch__component_afshm","start":"switch__start_afshm","center":"switch__center_afshm","addons":"switch__addons_afshm","block":"switch__block_afshm","switch":"switch__switch_afshm","switchSkeleton":"switch__switchSkeleton_afshm","content":"switch__content_afshm","label":"switch__label_afshm","labelWrap":"switch__labelWrap_afshm","loading":"switch__loading_afshm","errorMessage":"switch__errorMessage_afshm","hint":"switch__hint_afshm","hintWrap":"switch__hintWrap_afshm","reversed":"switch__reversed_afshm","checked":"switch__checked_afshm","disabled":"switch__disabled_afshm","focused":"switch__focused_afshm"};
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_1f1cy {
23
+ .switch__switch_11ccj {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_1f1cy:hover {
26
+ .switch__switch_11ccj:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_1f1cy {
29
+ .switch__label_11ccj {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_1f1cy {
32
+ .switch__hint_11ccj {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_1f1cy .switch__switch_1f1cy {
35
+ .switch__checked_11ccj .switch__switch_11ccj {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_1f1cy .switch__switch_1f1cy:hover {
38
+ .switch__checked_11ccj .switch__switch_11ccj:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_1f1cy .switch__label_1f1cy {
41
+ .switch__disabled_11ccj .switch__label_11ccj {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_1f1cy .switch__hint_1f1cy {
44
+ .switch__disabled_11ccj .switch__hint_11ccj {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_1f1cy .switch__switch_1f1cy {
47
+ .switch__disabled_11ccj .switch__switch_11ccj {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_1f1cy .switch__switch_1f1cy:before {
50
+ .switch__disabled_11ccj .switch__switch_11ccj:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_1f1cy.switch__checked_1f1cy .switch__switch_1f1cy {
53
+ .switch__disabled_11ccj.switch__checked_11ccj .switch__switch_11ccj {
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_1f1cy","label":"switch__label_1f1cy","hint":"switch__hint_1f1cy","checked":"switch__checked_1f1cy","disabled":"switch__disabled_1f1cy"};
5
+ var invertedStyles = {"switch":"switch__switch_11ccj","label":"switch__label_11ccj","hint":"switch__hint_11ccj","checked":"switch__checked_11ccj","disabled":"switch__disabled_11ccj"};
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":";;;;;;;;;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;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,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAI,CAAA;AAEjE,QAAA,CAAC,KAAK,IAAI,IAAI,IAAI,YAAY,MAC3B,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA;YAC1B,KAAK,KACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAA,EACvD,KAAK,CACH,CACV;YACA,IAAI,IAAI,CAAC,YAAY,KAClB,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAA,EACrD,IAAI,CACF,CACV;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;;;;"}
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":"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"}