@alfalab/core-components-switch 4.3.0 → 4.3.2

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 (10) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +13 -11
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +41 -39
  5. package/index.css +41 -39
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +41 -39
  8. package/moderncssm/index.module.css +10 -10
  9. package/package.json +4 -4
  10. package/src/index.module.css +10 -10
package/Component.js CHANGED
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
16
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
17
 
18
- var styles = {"component":"switch__component_13p1i","start":"switch__start_13p1i","center":"switch__center_13p1i","addons":"switch__addons_13p1i","block":"switch__block_13p1i","switch":"switch__switch_13p1i","content":"switch__content_13p1i","label":"switch__label_13p1i","errorMessage":"switch__errorMessage_13p1i","hint":"switch__hint_13p1i","reversed":"switch__reversed_13p1i","checked":"switch__checked_13p1i","disabled":"switch__disabled_13p1i","focused":"switch__focused_13p1i"};
18
+ var styles = {"component":"switch__component_1drxk","start":"switch__start_1drxk","center":"switch__center_1drxk","addons":"switch__addons_1drxk","block":"switch__block_1drxk","switch":"switch__switch_1drxk","content":"switch__content_1drxk","label":"switch__label_1drxk","errorMessage":"switch__errorMessage_1drxk","hint":"switch__hint_1drxk","reversed":"switch__reversed_1drxk","checked":"switch__checked_1drxk","disabled":"switch__disabled_1drxk","focused":"switch__focused_1drxk"};
19
19
  require('./index.css')
20
20
 
21
21
  var Switch = React.forwardRef(function (_a, ref) {
package/cssm/index.module.css CHANGED
@@ -25,6 +25,7 @@
25
25
  --border-radius-circle: 50%;
26
26
 
27
27
  /* новые значения, используйте их */
28
+ --border-radius-16: var(--border-radius-xl);
28
29
  } :root {
29
30
  --gap-3xs: 2px; /* deprecated */
30
31
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
@@ -32,6 +33,7 @@
32
33
  --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
33
34
 
34
35
  /* новые значения, используйте их */
36
+ --gap-0: 0;
35
37
  --gap-2: var(--gap-3xs);
36
38
  --gap-4: var(--gap-2xs);
37
39
  --gap-12: var(--gap-s);
@@ -40,7 +42,7 @@
40
42
  } :root {
41
43
  --focus-color: var(--color-light-status-info);
42
44
  --disabled-cursor: not-allowed;
43
- } :root {
45
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
44
46
  --switch-label-color: var(--color-light-text-primary);
45
47
  --switch-hint-color: var(--color-light-text-secondary);
46
48
  --switch-bg-color: var(--color-light-neutral-translucent-700);
@@ -67,8 +69,8 @@
67
69
  } .component {
68
70
  display: inline-flex;
69
71
  align-items: flex-start;
70
- margin: 0;
71
- padding: 0;
72
+ margin: var(--gap-0);
73
+ padding: var(--gap-0);
72
74
  border: 0;
73
75
  cursor: pointer;
74
76
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -87,7 +89,7 @@
87
89
  width: 100%;
88
90
  } .switch {
89
91
  position: relative;
90
- border-radius: var(--border-radius-xl);
92
+ border-radius: var(--border-radius-16);
91
93
  width: 36px;
92
94
  height: 20px;
93
95
  margin: var(--gap-2);
@@ -101,10 +103,10 @@
101
103
  } .switch:before {
102
104
  content: '';
103
105
  position: absolute;
104
- top: 0;
105
- left: 0;
106
- bottom: 0;
107
- right: 16px;
106
+ top: var(--gap-0);
107
+ left: var(--gap-0);
108
+ bottom: var(--gap-0);
109
+ right: var(--gap-16);
108
110
  display: block;
109
111
  border-radius: var(--border-radius-circle);
110
112
  background-color: var(--switch-icon-color);
@@ -136,10 +138,10 @@
136
138
  flex-direction: row-reverse;
137
139
  } .reversed .content {
138
140
  margin-right: var(--gap-16);
139
- margin-left: 0;
141
+ margin-left: var(--gap-0);
140
142
  } .reversed .addons {
141
- margin-left: 0;
142
- padding-left: 0;
143
+ margin-left: var(--gap-0);
144
+ padding-left: var(--gap-0);
143
145
  margin-right: auto;
144
146
  padding-right: var(--gap-16);
145
147
  } /* Checked state */ .checked .switch {
package/esm/Component.js CHANGED
@@ -5,7 +5,7 @@ import cn from 'classnames';
5
5
  import { dom } from '@alfalab/core-components-shared/esm';
6
6
  import { useFocus } from '@alfalab/hooks';
7
7
 
8
- var styles = {"component":"switch__component_13p1i","start":"switch__start_13p1i","center":"switch__center_13p1i","addons":"switch__addons_13p1i","block":"switch__block_13p1i","switch":"switch__switch_13p1i","content":"switch__content_13p1i","label":"switch__label_13p1i","errorMessage":"switch__errorMessage_13p1i","hint":"switch__hint_13p1i","reversed":"switch__reversed_13p1i","checked":"switch__checked_13p1i","disabled":"switch__disabled_13p1i","focused":"switch__focused_13p1i"};
8
+ var styles = {"component":"switch__component_1drxk","start":"switch__start_1drxk","center":"switch__center_1drxk","addons":"switch__addons_1drxk","block":"switch__block_1drxk","switch":"switch__switch_1drxk","content":"switch__content_1drxk","label":"switch__label_1drxk","errorMessage":"switch__errorMessage_1drxk","hint":"switch__hint_1drxk","reversed":"switch__reversed_1drxk","checked":"switch__checked_1drxk","disabled":"switch__disabled_1drxk","focused":"switch__focused_1drxk"};
9
9
  require('./index.css')
10
10
 
11
11
  var Switch = forwardRef(function (_a, ref) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: b1g6i */
1
+ /* hash: 1nwad */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -26,6 +26,7 @@
26
26
  --border-radius-circle: 50%;
27
27
 
28
28
  /* новые значения, используйте их */
29
+ --border-radius-16: var(--border-radius-xl);
29
30
  } :root {
30
31
  --gap-3xs: 2px; /* deprecated */
31
32
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
@@ -33,6 +34,7 @@
33
34
  --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
34
35
 
35
36
  /* новые значения, используйте их */
37
+ --gap-0: 0;
36
38
  --gap-2: var(--gap-3xs);
37
39
  --gap-4: var(--gap-2xs);
38
40
  --gap-12: var(--gap-s);
@@ -41,7 +43,7 @@
41
43
  } :root {
42
44
  --focus-color: var(--color-light-status-info);
43
45
  --disabled-cursor: not-allowed;
44
- } :root {
46
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
45
47
  --switch-label-color: var(--color-light-text-primary);
46
48
  --switch-hint-color: var(--color-light-text-secondary);
47
49
  --switch-bg-color: var(--color-light-neutral-translucent-700);
@@ -65,30 +67,30 @@
65
67
  /* icon */
66
68
  --switch-icon-color: var(--color-static-neutral-0);
67
69
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
68
- } .switch__component_13p1i {
70
+ } .switch__component_1drxk {
69
71
  display: inline-flex;
70
72
  align-items: flex-start;
71
- margin: 0;
72
- padding: 0;
73
+ margin: var(--gap-0);
74
+ padding: var(--gap-0);
73
75
  border: 0;
74
76
  cursor: pointer;
75
77
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
76
- } .switch__component_13p1i input {
78
+ } .switch__component_1drxk input {
77
79
  opacity: 0;
78
80
  position: absolute;
79
- } .switch__start_13p1i {
81
+ } .switch__start_1drxk {
80
82
  align-items: flex-start;
81
- } .switch__center_13p1i {
83
+ } .switch__center_1drxk {
82
84
  align-items: center;
83
- } .switch__addons_13p1i {
85
+ } .switch__addons_1drxk {
84
86
  margin-left: auto;
85
87
  padding-left: var(--gap-16);
86
88
  line-height: 24px;
87
- } .switch__block_13p1i {
89
+ } .switch__block_1drxk {
88
90
  width: 100%;
89
- } .switch__switch_13p1i {
91
+ } .switch__switch_1drxk {
90
92
  position: relative;
91
- border-radius: var(--border-radius-xl);
93
+ border-radius: var(--border-radius-16);
92
94
  width: 36px;
93
95
  height: 20px;
94
96
  margin: var(--gap-2);
@@ -97,72 +99,72 @@
97
99
  border: 2px solid var(--switch-border-color);
98
100
  transition: background-color 0.2s ease, border-color 0.2s ease;
99
101
  box-sizing: border-box
100
- } .switch__switch_13p1i:hover {
102
+ } .switch__switch_1drxk:hover {
101
103
  background-color: var(--switch-hover-bg-color);
102
- } .switch__switch_13p1i:before {
104
+ } .switch__switch_1drxk:before {
103
105
  content: '';
104
106
  position: absolute;
105
- top: 0;
106
- left: 0;
107
- bottom: 0;
108
- right: 16px;
107
+ top: var(--gap-0);
108
+ left: var(--gap-0);
109
+ bottom: var(--gap-0);
110
+ right: var(--gap-16);
109
111
  display: block;
110
112
  border-radius: var(--border-radius-circle);
111
113
  background-color: var(--switch-icon-color);
112
114
  box-sizing: border-box;
113
115
  transition: transform 0.2s ease;
114
- } .switch__content_13p1i {
116
+ } .switch__content_1drxk {
115
117
  margin-left: var(--gap-12);
116
118
  flex-grow: 1;
117
- } .switch__label_13p1i {
119
+ } .switch__label_1drxk {
118
120
  font-size: 16px;
119
121
  line-height: 24px;
120
122
  font-weight: 400;
121
123
  display: block;
122
124
  color: var(--switch-label-color);
123
- } .switch__label_13p1i:not(:only-child) {
125
+ } .switch__label_1drxk:not(:only-child) {
124
126
  margin-bottom: var(--gap-4);
125
- } .switch__errorMessage_13p1i {
127
+ } .switch__errorMessage_1drxk {
126
128
  font-size: 14px;
127
129
  line-height: 18px;
128
130
  font-weight: 400;
129
131
  color: var(--switch-error-color);
130
- } .switch__hint_13p1i {
132
+ } .switch__hint_1drxk {
131
133
  font-size: 14px;
132
134
  line-height: 18px;
133
135
  font-weight: 400;
134
136
  display: block;
135
137
  color: var(--switch-hint-color);
136
- } /* Reversed state */ .switch__component_13p1i.switch__reversed_13p1i {
138
+ } /* Reversed state */ .switch__component_1drxk.switch__reversed_1drxk {
137
139
  flex-direction: row-reverse;
138
- } .switch__reversed_13p1i .switch__content_13p1i {
140
+ } .switch__reversed_1drxk .switch__content_1drxk {
139
141
  margin-right: var(--gap-16);
140
- margin-left: 0;
141
- } .switch__reversed_13p1i .switch__addons_13p1i {
142
- margin-left: 0;
143
- padding-left: 0;
142
+ margin-left: var(--gap-0);
143
+ } .switch__reversed_1drxk .switch__addons_1drxk {
144
+ margin-left: var(--gap-0);
145
+ padding-left: var(--gap-0);
144
146
  margin-right: auto;
145
147
  padding-right: var(--gap-16);
146
- } /* Checked state */ .switch__checked_13p1i .switch__switch_13p1i {
148
+ } /* Checked state */ .switch__checked_1drxk .switch__switch_1drxk {
147
149
  background-color: var(--switch-checked-bg-color)
148
- } .switch__checked_13p1i .switch__switch_13p1i:hover {
150
+ } .switch__checked_1drxk .switch__switch_1drxk:hover {
149
151
  background-color: var(--switch-checked-hover-bg-color);
150
- } .switch__checked_13p1i .switch__switch_13p1i:before {
152
+ } .switch__checked_1drxk .switch__switch_1drxk:before {
151
153
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
152
154
  transform: translateX(16px);
153
- } /* Disabled state */ .switch__disabled_13p1i {
155
+ } /* Disabled state */ .switch__disabled_1drxk {
154
156
  cursor: var(--disabled-cursor);
155
- } .switch__disabled_13p1i .switch__switch_13p1i {
157
+ } .switch__disabled_1drxk .switch__switch_1drxk {
156
158
  background-color: var(--switch-disabled-bg-color)
157
- } .switch__disabled_13p1i .switch__switch_13p1i:before {
159
+ } .switch__disabled_1drxk .switch__switch_1drxk:before {
158
160
  background-color: var(--switch-icon-disabled-color);
159
- } .switch__disabled_13p1i.switch__checked_13p1i .switch__switch_13p1i {
161
+ } .switch__disabled_1drxk.switch__checked_1drxk .switch__switch_1drxk {
160
162
  background-color: var(--switch-disabled-checked-bg-color);
161
- } .switch__disabled_13p1i .switch__label_13p1i {
163
+ } .switch__disabled_1drxk .switch__label_1drxk {
162
164
  color: var(--switch-disabled-color);
163
- } .switch__disabled_13p1i .switch__hint_13p1i {
165
+ } .switch__disabled_1drxk .switch__hint_1drxk {
164
166
  color: var(--switch-disabled-color);
165
- } /* Focused state */ .switch__focused_13p1i .switch__switch_13p1i {
167
+ } /* Focused state */ .switch__focused_1drxk .switch__switch_1drxk {
166
168
  outline: 2px solid var(--focus-color);
167
169
  outline-offset: 2px;
168
170
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: b1g6i */
1
+ /* hash: 1nwad */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -26,6 +26,7 @@
26
26
  --border-radius-circle: 50%;
27
27
 
28
28
  /* новые значения, используйте их */
29
+ --border-radius-16: var(--border-radius-xl);
29
30
  } :root {
30
31
  --gap-3xs: 2px; /* deprecated */
31
32
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
@@ -33,6 +34,7 @@
33
34
  --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
34
35
 
35
36
  /* новые значения, используйте их */
37
+ --gap-0: 0;
36
38
  --gap-2: var(--gap-3xs);
37
39
  --gap-4: var(--gap-2xs);
38
40
  --gap-12: var(--gap-s);
@@ -41,7 +43,7 @@
41
43
  } :root {
42
44
  --focus-color: var(--color-light-status-info);
43
45
  --disabled-cursor: not-allowed;
44
- } :root {
46
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
45
47
  --switch-label-color: var(--color-light-text-primary);
46
48
  --switch-hint-color: var(--color-light-text-secondary);
47
49
  --switch-bg-color: var(--color-light-neutral-translucent-700);
@@ -65,30 +67,30 @@
65
67
  /* icon */
66
68
  --switch-icon-color: var(--color-static-neutral-0);
67
69
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
68
- } .switch__component_13p1i {
70
+ } .switch__component_1drxk {
69
71
  display: inline-flex;
70
72
  align-items: flex-start;
71
- margin: 0;
72
- padding: 0;
73
+ margin: var(--gap-0);
74
+ padding: var(--gap-0);
73
75
  border: 0;
74
76
  cursor: pointer;
75
77
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
76
- } .switch__component_13p1i input {
78
+ } .switch__component_1drxk input {
77
79
  opacity: 0;
78
80
  position: absolute;
79
- } .switch__start_13p1i {
81
+ } .switch__start_1drxk {
80
82
  align-items: flex-start;
81
- } .switch__center_13p1i {
83
+ } .switch__center_1drxk {
82
84
  align-items: center;
83
- } .switch__addons_13p1i {
85
+ } .switch__addons_1drxk {
84
86
  margin-left: auto;
85
87
  padding-left: var(--gap-16);
86
88
  line-height: 24px;
87
- } .switch__block_13p1i {
89
+ } .switch__block_1drxk {
88
90
  width: 100%;
89
- } .switch__switch_13p1i {
91
+ } .switch__switch_1drxk {
90
92
  position: relative;
91
- border-radius: var(--border-radius-xl);
93
+ border-radius: var(--border-radius-16);
92
94
  width: 36px;
93
95
  height: 20px;
94
96
  margin: var(--gap-2);
@@ -97,72 +99,72 @@
97
99
  border: 2px solid var(--switch-border-color);
98
100
  transition: background-color 0.2s ease, border-color 0.2s ease;
99
101
  box-sizing: border-box
100
- } .switch__switch_13p1i:hover {
102
+ } .switch__switch_1drxk:hover {
101
103
  background-color: var(--switch-hover-bg-color);
102
- } .switch__switch_13p1i:before {
104
+ } .switch__switch_1drxk:before {
103
105
  content: '';
104
106
  position: absolute;
105
- top: 0;
106
- left: 0;
107
- bottom: 0;
108
- right: 16px;
107
+ top: var(--gap-0);
108
+ left: var(--gap-0);
109
+ bottom: var(--gap-0);
110
+ right: var(--gap-16);
109
111
  display: block;
110
112
  border-radius: var(--border-radius-circle);
111
113
  background-color: var(--switch-icon-color);
112
114
  box-sizing: border-box;
113
115
  transition: transform 0.2s ease;
114
- } .switch__content_13p1i {
116
+ } .switch__content_1drxk {
115
117
  margin-left: var(--gap-12);
116
118
  flex-grow: 1;
117
- } .switch__label_13p1i {
119
+ } .switch__label_1drxk {
118
120
  font-size: 16px;
119
121
  line-height: 24px;
120
122
  font-weight: 400;
121
123
  display: block;
122
124
  color: var(--switch-label-color);
123
- } .switch__label_13p1i:not(:only-child) {
125
+ } .switch__label_1drxk:not(:only-child) {
124
126
  margin-bottom: var(--gap-4);
125
- } .switch__errorMessage_13p1i {
127
+ } .switch__errorMessage_1drxk {
126
128
  font-size: 14px;
127
129
  line-height: 18px;
128
130
  font-weight: 400;
129
131
  color: var(--switch-error-color);
130
- } .switch__hint_13p1i {
132
+ } .switch__hint_1drxk {
131
133
  font-size: 14px;
132
134
  line-height: 18px;
133
135
  font-weight: 400;
134
136
  display: block;
135
137
  color: var(--switch-hint-color);
136
- } /* Reversed state */ .switch__component_13p1i.switch__reversed_13p1i {
138
+ } /* Reversed state */ .switch__component_1drxk.switch__reversed_1drxk {
137
139
  flex-direction: row-reverse;
138
- } .switch__reversed_13p1i .switch__content_13p1i {
140
+ } .switch__reversed_1drxk .switch__content_1drxk {
139
141
  margin-right: var(--gap-16);
140
- margin-left: 0;
141
- } .switch__reversed_13p1i .switch__addons_13p1i {
142
- margin-left: 0;
143
- padding-left: 0;
142
+ margin-left: var(--gap-0);
143
+ } .switch__reversed_1drxk .switch__addons_1drxk {
144
+ margin-left: var(--gap-0);
145
+ padding-left: var(--gap-0);
144
146
  margin-right: auto;
145
147
  padding-right: var(--gap-16);
146
- } /* Checked state */ .switch__checked_13p1i .switch__switch_13p1i {
148
+ } /* Checked state */ .switch__checked_1drxk .switch__switch_1drxk {
147
149
  background-color: var(--switch-checked-bg-color)
148
- } .switch__checked_13p1i .switch__switch_13p1i:hover {
150
+ } .switch__checked_1drxk .switch__switch_1drxk:hover {
149
151
  background-color: var(--switch-checked-hover-bg-color);
150
- } .switch__checked_13p1i .switch__switch_13p1i:before {
152
+ } .switch__checked_1drxk .switch__switch_1drxk:before {
151
153
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
152
154
  transform: translateX(16px);
153
- } /* Disabled state */ .switch__disabled_13p1i {
155
+ } /* Disabled state */ .switch__disabled_1drxk {
154
156
  cursor: var(--disabled-cursor);
155
- } .switch__disabled_13p1i .switch__switch_13p1i {
157
+ } .switch__disabled_1drxk .switch__switch_1drxk {
156
158
  background-color: var(--switch-disabled-bg-color)
157
- } .switch__disabled_13p1i .switch__switch_13p1i:before {
159
+ } .switch__disabled_1drxk .switch__switch_1drxk:before {
158
160
  background-color: var(--switch-icon-disabled-color);
159
- } .switch__disabled_13p1i.switch__checked_13p1i .switch__switch_13p1i {
161
+ } .switch__disabled_1drxk.switch__checked_1drxk .switch__switch_1drxk {
160
162
  background-color: var(--switch-disabled-checked-bg-color);
161
- } .switch__disabled_13p1i .switch__label_13p1i {
163
+ } .switch__disabled_1drxk .switch__label_1drxk {
162
164
  color: var(--switch-disabled-color);
163
- } .switch__disabled_13p1i .switch__hint_13p1i {
165
+ } .switch__disabled_1drxk .switch__hint_1drxk {
164
166
  color: var(--switch-disabled-color);
165
- } /* Focused state */ .switch__focused_13p1i .switch__switch_13p1i {
167
+ } /* Focused state */ .switch__focused_1drxk .switch__switch_1drxk {
166
168
  outline: 2px solid var(--focus-color);
167
169
  outline-offset: 2px;
168
170
  }
package/modern/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { dom } from '@alfalab/core-components-shared/modern';
5
5
  import { useFocus } from '@alfalab/hooks';
6
6
 
7
- const styles = {"component":"switch__component_13p1i","start":"switch__start_13p1i","center":"switch__center_13p1i","addons":"switch__addons_13p1i","block":"switch__block_13p1i","switch":"switch__switch_13p1i","content":"switch__content_13p1i","label":"switch__label_13p1i","errorMessage":"switch__errorMessage_13p1i","hint":"switch__hint_13p1i","reversed":"switch__reversed_13p1i","checked":"switch__checked_13p1i","disabled":"switch__disabled_13p1i","focused":"switch__focused_13p1i"};
7
+ const styles = {"component":"switch__component_1drxk","start":"switch__start_1drxk","center":"switch__center_1drxk","addons":"switch__addons_1drxk","block":"switch__block_1drxk","switch":"switch__switch_1drxk","content":"switch__content_1drxk","label":"switch__label_1drxk","errorMessage":"switch__errorMessage_1drxk","hint":"switch__hint_1drxk","reversed":"switch__reversed_1drxk","checked":"switch__checked_1drxk","disabled":"switch__disabled_1drxk","focused":"switch__focused_1drxk"};
8
8
  require('./index.css')
9
9
 
10
10
  const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, error, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: b1g6i */
1
+ /* hash: 1nwad */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -26,6 +26,7 @@
26
26
  --border-radius-circle: 50%;
27
27
 
28
28
  /* новые значения, используйте их */
29
+ --border-radius-16: var(--border-radius-xl);
29
30
  } :root {
30
31
  --gap-3xs: 2px; /* deprecated */
31
32
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
@@ -33,6 +34,7 @@
33
34
  --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
34
35
 
35
36
  /* новые значения, используйте их */
37
+ --gap-0: 0;
36
38
  --gap-2: var(--gap-3xs);
37
39
  --gap-4: var(--gap-2xs);
38
40
  --gap-12: var(--gap-s);
@@ -41,7 +43,7 @@
41
43
  } :root {
42
44
  --focus-color: var(--color-light-status-info);
43
45
  --disabled-cursor: not-allowed;
44
- } :root {
46
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
45
47
  --switch-label-color: var(--color-light-text-primary);
46
48
  --switch-hint-color: var(--color-light-text-secondary);
47
49
  --switch-bg-color: var(--color-light-neutral-translucent-700);
@@ -65,30 +67,30 @@
65
67
  /* icon */
66
68
  --switch-icon-color: var(--color-static-neutral-0);
67
69
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
68
- } .switch__component_13p1i {
70
+ } .switch__component_1drxk {
69
71
  display: inline-flex;
70
72
  align-items: flex-start;
71
- margin: 0;
72
- padding: 0;
73
+ margin: var(--gap-0);
74
+ padding: var(--gap-0);
73
75
  border: 0;
74
76
  cursor: pointer;
75
77
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
76
- } .switch__component_13p1i input {
78
+ } .switch__component_1drxk input {
77
79
  opacity: 0;
78
80
  position: absolute;
79
- } .switch__start_13p1i {
81
+ } .switch__start_1drxk {
80
82
  align-items: flex-start;
81
- } .switch__center_13p1i {
83
+ } .switch__center_1drxk {
82
84
  align-items: center;
83
- } .switch__addons_13p1i {
85
+ } .switch__addons_1drxk {
84
86
  margin-left: auto;
85
87
  padding-left: var(--gap-16);
86
88
  line-height: 24px;
87
- } .switch__block_13p1i {
89
+ } .switch__block_1drxk {
88
90
  width: 100%;
89
- } .switch__switch_13p1i {
91
+ } .switch__switch_1drxk {
90
92
  position: relative;
91
- border-radius: var(--border-radius-xl);
93
+ border-radius: var(--border-radius-16);
92
94
  width: 36px;
93
95
  height: 20px;
94
96
  margin: var(--gap-2);
@@ -97,72 +99,72 @@
97
99
  border: 2px solid var(--switch-border-color);
98
100
  transition: background-color 0.2s ease, border-color 0.2s ease;
99
101
  box-sizing: border-box
100
- } .switch__switch_13p1i:hover {
102
+ } .switch__switch_1drxk:hover {
101
103
  background-color: var(--switch-hover-bg-color);
102
- } .switch__switch_13p1i:before {
104
+ } .switch__switch_1drxk:before {
103
105
  content: '';
104
106
  position: absolute;
105
- top: 0;
106
- left: 0;
107
- bottom: 0;
108
- right: 16px;
107
+ top: var(--gap-0);
108
+ left: var(--gap-0);
109
+ bottom: var(--gap-0);
110
+ right: var(--gap-16);
109
111
  display: block;
110
112
  border-radius: var(--border-radius-circle);
111
113
  background-color: var(--switch-icon-color);
112
114
  box-sizing: border-box;
113
115
  transition: transform 0.2s ease;
114
- } .switch__content_13p1i {
116
+ } .switch__content_1drxk {
115
117
  margin-left: var(--gap-12);
116
118
  flex-grow: 1;
117
- } .switch__label_13p1i {
119
+ } .switch__label_1drxk {
118
120
  font-size: 16px;
119
121
  line-height: 24px;
120
122
  font-weight: 400;
121
123
  display: block;
122
124
  color: var(--switch-label-color);
123
- } .switch__label_13p1i:not(:only-child) {
125
+ } .switch__label_1drxk:not(:only-child) {
124
126
  margin-bottom: var(--gap-4);
125
- } .switch__errorMessage_13p1i {
127
+ } .switch__errorMessage_1drxk {
126
128
  font-size: 14px;
127
129
  line-height: 18px;
128
130
  font-weight: 400;
129
131
  color: var(--switch-error-color);
130
- } .switch__hint_13p1i {
132
+ } .switch__hint_1drxk {
131
133
  font-size: 14px;
132
134
  line-height: 18px;
133
135
  font-weight: 400;
134
136
  display: block;
135
137
  color: var(--switch-hint-color);
136
- } /* Reversed state */ .switch__component_13p1i.switch__reversed_13p1i {
138
+ } /* Reversed state */ .switch__component_1drxk.switch__reversed_1drxk {
137
139
  flex-direction: row-reverse;
138
- } .switch__reversed_13p1i .switch__content_13p1i {
140
+ } .switch__reversed_1drxk .switch__content_1drxk {
139
141
  margin-right: var(--gap-16);
140
- margin-left: 0;
141
- } .switch__reversed_13p1i .switch__addons_13p1i {
142
- margin-left: 0;
143
- padding-left: 0;
142
+ margin-left: var(--gap-0);
143
+ } .switch__reversed_1drxk .switch__addons_1drxk {
144
+ margin-left: var(--gap-0);
145
+ padding-left: var(--gap-0);
144
146
  margin-right: auto;
145
147
  padding-right: var(--gap-16);
146
- } /* Checked state */ .switch__checked_13p1i .switch__switch_13p1i {
148
+ } /* Checked state */ .switch__checked_1drxk .switch__switch_1drxk {
147
149
  background-color: var(--switch-checked-bg-color)
148
- } .switch__checked_13p1i .switch__switch_13p1i:hover {
150
+ } .switch__checked_1drxk .switch__switch_1drxk:hover {
149
151
  background-color: var(--switch-checked-hover-bg-color);
150
- } .switch__checked_13p1i .switch__switch_13p1i:before {
152
+ } .switch__checked_1drxk .switch__switch_1drxk:before {
151
153
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
152
154
  transform: translateX(16px);
153
- } /* Disabled state */ .switch__disabled_13p1i {
155
+ } /* Disabled state */ .switch__disabled_1drxk {
154
156
  cursor: var(--disabled-cursor);
155
- } .switch__disabled_13p1i .switch__switch_13p1i {
157
+ } .switch__disabled_1drxk .switch__switch_1drxk {
156
158
  background-color: var(--switch-disabled-bg-color)
157
- } .switch__disabled_13p1i .switch__switch_13p1i:before {
159
+ } .switch__disabled_1drxk .switch__switch_1drxk:before {
158
160
  background-color: var(--switch-icon-disabled-color);
159
- } .switch__disabled_13p1i.switch__checked_13p1i .switch__switch_13p1i {
161
+ } .switch__disabled_1drxk.switch__checked_1drxk .switch__switch_1drxk {
160
162
  background-color: var(--switch-disabled-checked-bg-color);
161
- } .switch__disabled_13p1i .switch__label_13p1i {
163
+ } .switch__disabled_1drxk .switch__label_1drxk {
162
164
  color: var(--switch-disabled-color);
163
- } .switch__disabled_13p1i .switch__hint_13p1i {
165
+ } .switch__disabled_1drxk .switch__hint_1drxk {
164
166
  color: var(--switch-disabled-color);
165
- } /* Focused state */ .switch__focused_13p1i .switch__switch_13p1i {
167
+ } /* Focused state */ .switch__focused_1drxk .switch__switch_1drxk {
166
168
  outline: 2px solid var(--focus-color);
167
169
  outline-offset: 2px;
168
170
  }
package/moderncssm/index.module.css CHANGED
@@ -29,8 +29,8 @@
29
29
  .component {
30
30
  display: inline-flex;
31
31
  align-items: flex-start;
32
- margin: 0;
33
- padding: 0;
32
+ margin: var(--gap-0);
33
+ padding: var(--gap-0);
34
34
  border: 0;
35
35
  cursor: pointer;
36
36
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -61,7 +61,7 @@
61
61
 
62
62
  .switch {
63
63
  position: relative;
64
- border-radius: var(--border-radius-xl);
64
+ border-radius: var(--border-radius-16);
65
65
  width: 36px;
66
66
  height: 20px;
67
67
  margin: var(--gap-2);
@@ -79,10 +79,10 @@
79
79
  .switch:before {
80
80
  content: '';
81
81
  position: absolute;
82
- top: 0;
83
- left: 0;
84
- bottom: 0;
85
- right: 16px;
82
+ top: var(--gap-0);
83
+ left: var(--gap-0);
84
+ bottom: var(--gap-0);
85
+ right: var(--gap-16);
86
86
  display: block;
87
87
  border-radius: var(--border-radius-circle);
88
88
  background-color: var(--switch-icon-color);
@@ -130,12 +130,12 @@
130
130
 
131
131
  .reversed .content {
132
132
  margin-right: var(--gap-16);
133
- margin-left: 0;
133
+ margin-left: var(--gap-0);
134
134
  }
135
135
 
136
136
  .reversed .addons {
137
- margin-left: 0;
138
- padding-left: 0;
137
+ margin-left: var(--gap-0);
138
+ padding-left: var(--gap-0);
139
139
  margin-right: auto;
140
140
  padding-right: var(--gap-16);
141
141
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.3.0",
3
+ "version": "4.3.2",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -16,11 +16,11 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@alfalab/hooks": "^1.13.0",
19
- "@alfalab/core-components-shared": "^0.12.0",
19
+ "@alfalab/core-components-shared": "^0.13.0",
20
20
  "classnames": "^2.3.1",
21
21
  "react-merge-refs": "^1.1.0",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
- "themesVersion": "13.1.0",
25
- "varsVersion": "9.12.0"
24
+ "themesVersion": "13.4.0",
25
+ "varsVersion": "9.13.1"
26
26
  }
package/src/index.module.css CHANGED
@@ -29,8 +29,8 @@
29
29
  .component {
30
30
  display: inline-flex;
31
31
  align-items: flex-start;
32
- margin: 0;
33
- padding: 0;
32
+ margin: var(--gap-0);
33
+ padding: var(--gap-0);
34
34
  border: 0;
35
35
  cursor: pointer;
36
36
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -61,7 +61,7 @@
61
61
 
62
62
  .switch {
63
63
  position: relative;
64
- border-radius: var(--border-radius-xl);
64
+ border-radius: var(--border-radius-16);
65
65
  width: 36px;
66
66
  height: 20px;
67
67
  margin: var(--gap-2);
@@ -79,10 +79,10 @@
79
79
  .switch:before {
80
80
  content: '';
81
81
  position: absolute;
82
- top: 0;
83
- left: 0;
84
- bottom: 0;
85
- right: 16px;
82
+ top: var(--gap-0);
83
+ left: var(--gap-0);
84
+ bottom: var(--gap-0);
85
+ right: var(--gap-16);
86
86
  display: block;
87
87
  border-radius: var(--border-radius-circle);
88
88
  background-color: var(--switch-icon-color);
@@ -124,12 +124,12 @@
124
124
 
125
125
  .reversed .content {
126
126
  margin-right: var(--gap-16);
127
- margin-left: 0;
127
+ margin-left: var(--gap-0);
128
128
  }
129
129
 
130
130
  .reversed .addons {
131
- margin-left: 0;
132
- padding-left: 0;
131
+ margin-left: var(--gap-0);
132
+ padding-left: var(--gap-0);
133
133
  margin-right: auto;
134
134
  padding-right: var(--gap-16);
135
135
  }