@alfalab/core-components-switch 4.2.5 → 4.2.6

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 (9) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +10 -6
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +38 -34
  5. package/index.css +38 -34
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +38 -34
  8. package/package.json +2 -2
  9. package/src/index.module.css +6 -6
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_fs99x","start":"switch__start_fs99x","center":"switch__center_fs99x","addons":"switch__addons_fs99x","block":"switch__block_fs99x","switch":"switch__switch_fs99x","content":"switch__content_fs99x","label":"switch__label_fs99x","errorMessage":"switch__errorMessage_fs99x","hint":"switch__hint_fs99x","reversed":"switch__reversed_fs99x","checked":"switch__checked_fs99x","disabled":"switch__disabled_fs99x","focused":"switch__focused_fs99x"};
18
+ var styles = {"component":"switch__component_180is","start":"switch__start_180is","center":"switch__center_180is","addons":"switch__addons_180is","block":"switch__block_180is","switch":"switch__switch_180is","content":"switch__content_180is","label":"switch__label_180is","errorMessage":"switch__errorMessage_180is","hint":"switch__hint_180is","reversed":"switch__reversed_180is","checked":"switch__checked_180is","disabled":"switch__disabled_180is","focused":"switch__focused_180is"};
19
19
  require('./index.css')
20
20
 
21
21
  var Switch = React.forwardRef(function (_a, ref) {
package/cssm/index.module.css CHANGED
@@ -32,6 +32,10 @@
32
32
  --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
33
 
34
34
  /* новые значения, используйте их */
35
+ --gap-2: var(--gap-3xs);
36
+ --gap-4: var(--gap-2xs);
37
+ --gap-12: var(--gap-s);
38
+ --gap-16: var(--gap-m);
35
39
  } :root {
36
40
  } :root {
37
41
  --focus-color: var(--color-light-status-info);
@@ -77,7 +81,7 @@
77
81
  align-items: center;
78
82
  } .addons {
79
83
  margin-left: auto;
80
- padding-left: var(--gap-m);
84
+ padding-left: var(--gap-16);
81
85
  line-height: 24px;
82
86
  } .block {
83
87
  width: 100%;
@@ -86,7 +90,7 @@
86
90
  border-radius: var(--border-radius-xl);
87
91
  width: 36px;
88
92
  height: 20px;
89
- margin: var(--gap-3xs);
93
+ margin: var(--gap-2);
90
94
  flex-shrink: 0;
91
95
  background-color: var(--switch-bg-color);
92
96
  border: 2px solid var(--switch-border-color);
@@ -107,7 +111,7 @@
107
111
  box-sizing: border-box;
108
112
  transition: transform 0.2s ease;
109
113
  } .content {
110
- margin-left: var(--gap-s);
114
+ margin-left: var(--gap-12);
111
115
  flex-grow: 1;
112
116
  } .label {
113
117
  font-size: 16px;
@@ -116,7 +120,7 @@
116
120
  display: block;
117
121
  color: var(--switch-label-color);
118
122
  } .label:not(:only-child) {
119
- margin-bottom: var(--gap-2xs);
123
+ margin-bottom: var(--gap-4);
120
124
  } .errorMessage {
121
125
  font-size: 14px;
122
126
  line-height: 18px;
@@ -131,13 +135,13 @@
131
135
  } /* Reversed state */ .component.reversed {
132
136
  flex-direction: row-reverse;
133
137
  } .reversed .content {
134
- margin-right: var(--gap-m);
138
+ margin-right: var(--gap-16);
135
139
  margin-left: 0;
136
140
  } .reversed .addons {
137
141
  margin-left: 0;
138
142
  padding-left: 0;
139
143
  margin-right: auto;
140
- padding-right: var(--gap-m);
144
+ padding-right: var(--gap-16);
141
145
  } /* Checked state */ .checked .switch {
142
146
  background-color: var(--switch-checked-bg-color)
143
147
  } .checked .switch:hover {
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_fs99x","start":"switch__start_fs99x","center":"switch__center_fs99x","addons":"switch__addons_fs99x","block":"switch__block_fs99x","switch":"switch__switch_fs99x","content":"switch__content_fs99x","label":"switch__label_fs99x","errorMessage":"switch__errorMessage_fs99x","hint":"switch__hint_fs99x","reversed":"switch__reversed_fs99x","checked":"switch__checked_fs99x","disabled":"switch__disabled_fs99x","focused":"switch__focused_fs99x"};
8
+ var styles = {"component":"switch__component_180is","start":"switch__start_180is","center":"switch__center_180is","addons":"switch__addons_180is","block":"switch__block_180is","switch":"switch__switch_180is","content":"switch__content_180is","label":"switch__label_180is","errorMessage":"switch__errorMessage_180is","hint":"switch__hint_180is","reversed":"switch__reversed_180is","checked":"switch__checked_180is","disabled":"switch__disabled_180is","focused":"switch__focused_180is"};
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: 1q52q */
1
+ /* hash: 1dewz */
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);
@@ -33,6 +33,10 @@
33
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 */
34
34
 
35
35
  /* новые значения, используйте их */
36
+ --gap-2: var(--gap-3xs);
37
+ --gap-4: var(--gap-2xs);
38
+ --gap-12: var(--gap-s);
39
+ --gap-16: var(--gap-m);
36
40
  } :root {
37
41
  } :root {
38
42
  --focus-color: var(--color-light-status-info);
@@ -61,7 +65,7 @@
61
65
  /* icon */
62
66
  --switch-icon-color: var(--color-static-neutral-0);
63
67
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
64
- } .switch__component_fs99x {
68
+ } .switch__component_180is {
65
69
  display: inline-flex;
66
70
  align-items: flex-start;
67
71
  margin: 0;
@@ -69,33 +73,33 @@
69
73
  border: 0;
70
74
  cursor: pointer;
71
75
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
72
- } .switch__component_fs99x input {
76
+ } .switch__component_180is input {
73
77
  opacity: 0;
74
78
  position: absolute;
75
- } .switch__start_fs99x {
79
+ } .switch__start_180is {
76
80
  align-items: flex-start;
77
- } .switch__center_fs99x {
81
+ } .switch__center_180is {
78
82
  align-items: center;
79
- } .switch__addons_fs99x {
83
+ } .switch__addons_180is {
80
84
  margin-left: auto;
81
- padding-left: var(--gap-m);
85
+ padding-left: var(--gap-16);
82
86
  line-height: 24px;
83
- } .switch__block_fs99x {
87
+ } .switch__block_180is {
84
88
  width: 100%;
85
- } .switch__switch_fs99x {
89
+ } .switch__switch_180is {
86
90
  position: relative;
87
91
  border-radius: var(--border-radius-xl);
88
92
  width: 36px;
89
93
  height: 20px;
90
- margin: var(--gap-3xs);
94
+ margin: var(--gap-2);
91
95
  flex-shrink: 0;
92
96
  background-color: var(--switch-bg-color);
93
97
  border: 2px solid var(--switch-border-color);
94
98
  transition: background-color 0.2s ease, border-color 0.2s ease;
95
99
  box-sizing: border-box
96
- } .switch__switch_fs99x:hover {
100
+ } .switch__switch_180is:hover {
97
101
  background-color: var(--switch-hover-bg-color);
98
- } .switch__switch_fs99x:before {
102
+ } .switch__switch_180is:before {
99
103
  content: '';
100
104
  position: absolute;
101
105
  top: 0;
@@ -107,58 +111,58 @@
107
111
  background-color: var(--switch-icon-color);
108
112
  box-sizing: border-box;
109
113
  transition: transform 0.2s ease;
110
- } .switch__content_fs99x {
111
- margin-left: var(--gap-s);
114
+ } .switch__content_180is {
115
+ margin-left: var(--gap-12);
112
116
  flex-grow: 1;
113
- } .switch__label_fs99x {
117
+ } .switch__label_180is {
114
118
  font-size: 16px;
115
119
  line-height: 24px;
116
120
  font-weight: 400;
117
121
  display: block;
118
122
  color: var(--switch-label-color);
119
- } .switch__label_fs99x:not(:only-child) {
120
- margin-bottom: var(--gap-2xs);
121
- } .switch__errorMessage_fs99x {
123
+ } .switch__label_180is:not(:only-child) {
124
+ margin-bottom: var(--gap-4);
125
+ } .switch__errorMessage_180is {
122
126
  font-size: 14px;
123
127
  line-height: 18px;
124
128
  font-weight: 400;
125
129
  color: var(--switch-error-color);
126
- } .switch__hint_fs99x {
130
+ } .switch__hint_180is {
127
131
  font-size: 14px;
128
132
  line-height: 18px;
129
133
  font-weight: 400;
130
134
  display: block;
131
135
  color: var(--switch-hint-color);
132
- } /* Reversed state */ .switch__component_fs99x.switch__reversed_fs99x {
136
+ } /* Reversed state */ .switch__component_180is.switch__reversed_180is {
133
137
  flex-direction: row-reverse;
134
- } .switch__reversed_fs99x .switch__content_fs99x {
135
- margin-right: var(--gap-m);
138
+ } .switch__reversed_180is .switch__content_180is {
139
+ margin-right: var(--gap-16);
136
140
  margin-left: 0;
137
- } .switch__reversed_fs99x .switch__addons_fs99x {
141
+ } .switch__reversed_180is .switch__addons_180is {
138
142
  margin-left: 0;
139
143
  padding-left: 0;
140
144
  margin-right: auto;
141
- padding-right: var(--gap-m);
142
- } /* Checked state */ .switch__checked_fs99x .switch__switch_fs99x {
145
+ padding-right: var(--gap-16);
146
+ } /* Checked state */ .switch__checked_180is .switch__switch_180is {
143
147
  background-color: var(--switch-checked-bg-color)
144
- } .switch__checked_fs99x .switch__switch_fs99x:hover {
148
+ } .switch__checked_180is .switch__switch_180is:hover {
145
149
  background-color: var(--switch-checked-hover-bg-color);
146
- } .switch__checked_fs99x .switch__switch_fs99x:before {
150
+ } .switch__checked_180is .switch__switch_180is:before {
147
151
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
148
152
  transform: translateX(16px);
149
- } /* Disabled state */ .switch__disabled_fs99x {
153
+ } /* Disabled state */ .switch__disabled_180is {
150
154
  cursor: var(--disabled-cursor);
151
- } .switch__disabled_fs99x .switch__switch_fs99x {
155
+ } .switch__disabled_180is .switch__switch_180is {
152
156
  background-color: var(--switch-disabled-bg-color)
153
- } .switch__disabled_fs99x .switch__switch_fs99x:before {
157
+ } .switch__disabled_180is .switch__switch_180is:before {
154
158
  background-color: var(--switch-icon-disabled-color);
155
- } .switch__disabled_fs99x.switch__checked_fs99x .switch__switch_fs99x {
159
+ } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
156
160
  background-color: var(--switch-disabled-checked-bg-color);
157
- } .switch__disabled_fs99x .switch__label_fs99x {
161
+ } .switch__disabled_180is .switch__label_180is {
158
162
  color: var(--switch-disabled-color);
159
- } .switch__disabled_fs99x .switch__hint_fs99x {
163
+ } .switch__disabled_180is .switch__hint_180is {
160
164
  color: var(--switch-disabled-color);
161
- } /* Focused state */ .switch__focused_fs99x .switch__switch_fs99x {
165
+ } /* Focused state */ .switch__focused_180is .switch__switch_180is {
162
166
  outline: 2px solid var(--focus-color);
163
167
  outline-offset: 2px;
164
168
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1q52q */
1
+ /* hash: 1dewz */
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);
@@ -33,6 +33,10 @@
33
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 */
34
34
 
35
35
  /* новые значения, используйте их */
36
+ --gap-2: var(--gap-3xs);
37
+ --gap-4: var(--gap-2xs);
38
+ --gap-12: var(--gap-s);
39
+ --gap-16: var(--gap-m);
36
40
  } :root {
37
41
  } :root {
38
42
  --focus-color: var(--color-light-status-info);
@@ -61,7 +65,7 @@
61
65
  /* icon */
62
66
  --switch-icon-color: var(--color-static-neutral-0);
63
67
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
64
- } .switch__component_fs99x {
68
+ } .switch__component_180is {
65
69
  display: inline-flex;
66
70
  align-items: flex-start;
67
71
  margin: 0;
@@ -69,33 +73,33 @@
69
73
  border: 0;
70
74
  cursor: pointer;
71
75
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
72
- } .switch__component_fs99x input {
76
+ } .switch__component_180is input {
73
77
  opacity: 0;
74
78
  position: absolute;
75
- } .switch__start_fs99x {
79
+ } .switch__start_180is {
76
80
  align-items: flex-start;
77
- } .switch__center_fs99x {
81
+ } .switch__center_180is {
78
82
  align-items: center;
79
- } .switch__addons_fs99x {
83
+ } .switch__addons_180is {
80
84
  margin-left: auto;
81
- padding-left: var(--gap-m);
85
+ padding-left: var(--gap-16);
82
86
  line-height: 24px;
83
- } .switch__block_fs99x {
87
+ } .switch__block_180is {
84
88
  width: 100%;
85
- } .switch__switch_fs99x {
89
+ } .switch__switch_180is {
86
90
  position: relative;
87
91
  border-radius: var(--border-radius-xl);
88
92
  width: 36px;
89
93
  height: 20px;
90
- margin: var(--gap-3xs);
94
+ margin: var(--gap-2);
91
95
  flex-shrink: 0;
92
96
  background-color: var(--switch-bg-color);
93
97
  border: 2px solid var(--switch-border-color);
94
98
  transition: background-color 0.2s ease, border-color 0.2s ease;
95
99
  box-sizing: border-box
96
- } .switch__switch_fs99x:hover {
100
+ } .switch__switch_180is:hover {
97
101
  background-color: var(--switch-hover-bg-color);
98
- } .switch__switch_fs99x:before {
102
+ } .switch__switch_180is:before {
99
103
  content: '';
100
104
  position: absolute;
101
105
  top: 0;
@@ -107,58 +111,58 @@
107
111
  background-color: var(--switch-icon-color);
108
112
  box-sizing: border-box;
109
113
  transition: transform 0.2s ease;
110
- } .switch__content_fs99x {
111
- margin-left: var(--gap-s);
114
+ } .switch__content_180is {
115
+ margin-left: var(--gap-12);
112
116
  flex-grow: 1;
113
- } .switch__label_fs99x {
117
+ } .switch__label_180is {
114
118
  font-size: 16px;
115
119
  line-height: 24px;
116
120
  font-weight: 400;
117
121
  display: block;
118
122
  color: var(--switch-label-color);
119
- } .switch__label_fs99x:not(:only-child) {
120
- margin-bottom: var(--gap-2xs);
121
- } .switch__errorMessage_fs99x {
123
+ } .switch__label_180is:not(:only-child) {
124
+ margin-bottom: var(--gap-4);
125
+ } .switch__errorMessage_180is {
122
126
  font-size: 14px;
123
127
  line-height: 18px;
124
128
  font-weight: 400;
125
129
  color: var(--switch-error-color);
126
- } .switch__hint_fs99x {
130
+ } .switch__hint_180is {
127
131
  font-size: 14px;
128
132
  line-height: 18px;
129
133
  font-weight: 400;
130
134
  display: block;
131
135
  color: var(--switch-hint-color);
132
- } /* Reversed state */ .switch__component_fs99x.switch__reversed_fs99x {
136
+ } /* Reversed state */ .switch__component_180is.switch__reversed_180is {
133
137
  flex-direction: row-reverse;
134
- } .switch__reversed_fs99x .switch__content_fs99x {
135
- margin-right: var(--gap-m);
138
+ } .switch__reversed_180is .switch__content_180is {
139
+ margin-right: var(--gap-16);
136
140
  margin-left: 0;
137
- } .switch__reversed_fs99x .switch__addons_fs99x {
141
+ } .switch__reversed_180is .switch__addons_180is {
138
142
  margin-left: 0;
139
143
  padding-left: 0;
140
144
  margin-right: auto;
141
- padding-right: var(--gap-m);
142
- } /* Checked state */ .switch__checked_fs99x .switch__switch_fs99x {
145
+ padding-right: var(--gap-16);
146
+ } /* Checked state */ .switch__checked_180is .switch__switch_180is {
143
147
  background-color: var(--switch-checked-bg-color)
144
- } .switch__checked_fs99x .switch__switch_fs99x:hover {
148
+ } .switch__checked_180is .switch__switch_180is:hover {
145
149
  background-color: var(--switch-checked-hover-bg-color);
146
- } .switch__checked_fs99x .switch__switch_fs99x:before {
150
+ } .switch__checked_180is .switch__switch_180is:before {
147
151
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
148
152
  transform: translateX(16px);
149
- } /* Disabled state */ .switch__disabled_fs99x {
153
+ } /* Disabled state */ .switch__disabled_180is {
150
154
  cursor: var(--disabled-cursor);
151
- } .switch__disabled_fs99x .switch__switch_fs99x {
155
+ } .switch__disabled_180is .switch__switch_180is {
152
156
  background-color: var(--switch-disabled-bg-color)
153
- } .switch__disabled_fs99x .switch__switch_fs99x:before {
157
+ } .switch__disabled_180is .switch__switch_180is:before {
154
158
  background-color: var(--switch-icon-disabled-color);
155
- } .switch__disabled_fs99x.switch__checked_fs99x .switch__switch_fs99x {
159
+ } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
156
160
  background-color: var(--switch-disabled-checked-bg-color);
157
- } .switch__disabled_fs99x .switch__label_fs99x {
161
+ } .switch__disabled_180is .switch__label_180is {
158
162
  color: var(--switch-disabled-color);
159
- } .switch__disabled_fs99x .switch__hint_fs99x {
163
+ } .switch__disabled_180is .switch__hint_180is {
160
164
  color: var(--switch-disabled-color);
161
- } /* Focused state */ .switch__focused_fs99x .switch__switch_fs99x {
165
+ } /* Focused state */ .switch__focused_180is .switch__switch_180is {
162
166
  outline: 2px solid var(--focus-color);
163
167
  outline-offset: 2px;
164
168
  }
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_fs99x","start":"switch__start_fs99x","center":"switch__center_fs99x","addons":"switch__addons_fs99x","block":"switch__block_fs99x","switch":"switch__switch_fs99x","content":"switch__content_fs99x","label":"switch__label_fs99x","errorMessage":"switch__errorMessage_fs99x","hint":"switch__hint_fs99x","reversed":"switch__reversed_fs99x","checked":"switch__checked_fs99x","disabled":"switch__disabled_fs99x","focused":"switch__focused_fs99x"};
7
+ const styles = {"component":"switch__component_180is","start":"switch__start_180is","center":"switch__center_180is","addons":"switch__addons_180is","block":"switch__block_180is","switch":"switch__switch_180is","content":"switch__content_180is","label":"switch__label_180is","errorMessage":"switch__errorMessage_180is","hint":"switch__hint_180is","reversed":"switch__reversed_180is","checked":"switch__checked_180is","disabled":"switch__disabled_180is","focused":"switch__focused_180is"};
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: 1q52q */
1
+ /* hash: 1dewz */
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);
@@ -33,6 +33,10 @@
33
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 */
34
34
 
35
35
  /* новые значения, используйте их */
36
+ --gap-2: var(--gap-3xs);
37
+ --gap-4: var(--gap-2xs);
38
+ --gap-12: var(--gap-s);
39
+ --gap-16: var(--gap-m);
36
40
  } :root {
37
41
  } :root {
38
42
  --focus-color: var(--color-light-status-info);
@@ -61,7 +65,7 @@
61
65
  /* icon */
62
66
  --switch-icon-color: var(--color-static-neutral-0);
63
67
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
64
- } .switch__component_fs99x {
68
+ } .switch__component_180is {
65
69
  display: inline-flex;
66
70
  align-items: flex-start;
67
71
  margin: 0;
@@ -69,33 +73,33 @@
69
73
  border: 0;
70
74
  cursor: pointer;
71
75
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
72
- } .switch__component_fs99x input {
76
+ } .switch__component_180is input {
73
77
  opacity: 0;
74
78
  position: absolute;
75
- } .switch__start_fs99x {
79
+ } .switch__start_180is {
76
80
  align-items: flex-start;
77
- } .switch__center_fs99x {
81
+ } .switch__center_180is {
78
82
  align-items: center;
79
- } .switch__addons_fs99x {
83
+ } .switch__addons_180is {
80
84
  margin-left: auto;
81
- padding-left: var(--gap-m);
85
+ padding-left: var(--gap-16);
82
86
  line-height: 24px;
83
- } .switch__block_fs99x {
87
+ } .switch__block_180is {
84
88
  width: 100%;
85
- } .switch__switch_fs99x {
89
+ } .switch__switch_180is {
86
90
  position: relative;
87
91
  border-radius: var(--border-radius-xl);
88
92
  width: 36px;
89
93
  height: 20px;
90
- margin: var(--gap-3xs);
94
+ margin: var(--gap-2);
91
95
  flex-shrink: 0;
92
96
  background-color: var(--switch-bg-color);
93
97
  border: 2px solid var(--switch-border-color);
94
98
  transition: background-color 0.2s ease, border-color 0.2s ease;
95
99
  box-sizing: border-box
96
- } .switch__switch_fs99x:hover {
100
+ } .switch__switch_180is:hover {
97
101
  background-color: var(--switch-hover-bg-color);
98
- } .switch__switch_fs99x:before {
102
+ } .switch__switch_180is:before {
99
103
  content: '';
100
104
  position: absolute;
101
105
  top: 0;
@@ -107,58 +111,58 @@
107
111
  background-color: var(--switch-icon-color);
108
112
  box-sizing: border-box;
109
113
  transition: transform 0.2s ease;
110
- } .switch__content_fs99x {
111
- margin-left: var(--gap-s);
114
+ } .switch__content_180is {
115
+ margin-left: var(--gap-12);
112
116
  flex-grow: 1;
113
- } .switch__label_fs99x {
117
+ } .switch__label_180is {
114
118
  font-size: 16px;
115
119
  line-height: 24px;
116
120
  font-weight: 400;
117
121
  display: block;
118
122
  color: var(--switch-label-color);
119
- } .switch__label_fs99x:not(:only-child) {
120
- margin-bottom: var(--gap-2xs);
121
- } .switch__errorMessage_fs99x {
123
+ } .switch__label_180is:not(:only-child) {
124
+ margin-bottom: var(--gap-4);
125
+ } .switch__errorMessage_180is {
122
126
  font-size: 14px;
123
127
  line-height: 18px;
124
128
  font-weight: 400;
125
129
  color: var(--switch-error-color);
126
- } .switch__hint_fs99x {
130
+ } .switch__hint_180is {
127
131
  font-size: 14px;
128
132
  line-height: 18px;
129
133
  font-weight: 400;
130
134
  display: block;
131
135
  color: var(--switch-hint-color);
132
- } /* Reversed state */ .switch__component_fs99x.switch__reversed_fs99x {
136
+ } /* Reversed state */ .switch__component_180is.switch__reversed_180is {
133
137
  flex-direction: row-reverse;
134
- } .switch__reversed_fs99x .switch__content_fs99x {
135
- margin-right: var(--gap-m);
138
+ } .switch__reversed_180is .switch__content_180is {
139
+ margin-right: var(--gap-16);
136
140
  margin-left: 0;
137
- } .switch__reversed_fs99x .switch__addons_fs99x {
141
+ } .switch__reversed_180is .switch__addons_180is {
138
142
  margin-left: 0;
139
143
  padding-left: 0;
140
144
  margin-right: auto;
141
- padding-right: var(--gap-m);
142
- } /* Checked state */ .switch__checked_fs99x .switch__switch_fs99x {
145
+ padding-right: var(--gap-16);
146
+ } /* Checked state */ .switch__checked_180is .switch__switch_180is {
143
147
  background-color: var(--switch-checked-bg-color)
144
- } .switch__checked_fs99x .switch__switch_fs99x:hover {
148
+ } .switch__checked_180is .switch__switch_180is:hover {
145
149
  background-color: var(--switch-checked-hover-bg-color);
146
- } .switch__checked_fs99x .switch__switch_fs99x:before {
150
+ } .switch__checked_180is .switch__switch_180is:before {
147
151
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
148
152
  transform: translateX(16px);
149
- } /* Disabled state */ .switch__disabled_fs99x {
153
+ } /* Disabled state */ .switch__disabled_180is {
150
154
  cursor: var(--disabled-cursor);
151
- } .switch__disabled_fs99x .switch__switch_fs99x {
155
+ } .switch__disabled_180is .switch__switch_180is {
152
156
  background-color: var(--switch-disabled-bg-color)
153
- } .switch__disabled_fs99x .switch__switch_fs99x:before {
157
+ } .switch__disabled_180is .switch__switch_180is:before {
154
158
  background-color: var(--switch-icon-disabled-color);
155
- } .switch__disabled_fs99x.switch__checked_fs99x .switch__switch_fs99x {
159
+ } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
156
160
  background-color: var(--switch-disabled-checked-bg-color);
157
- } .switch__disabled_fs99x .switch__label_fs99x {
161
+ } .switch__disabled_180is .switch__label_180is {
158
162
  color: var(--switch-disabled-color);
159
- } .switch__disabled_fs99x .switch__hint_fs99x {
163
+ } .switch__disabled_180is .switch__hint_180is {
160
164
  color: var(--switch-disabled-color);
161
- } /* Focused state */ .switch__focused_fs99x .switch__switch_fs99x {
165
+ } /* Focused state */ .switch__focused_180is .switch__switch_180is {
162
166
  outline: 2px solid var(--focus-color);
163
167
  outline-offset: 2px;
164
168
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.2.5",
3
+ "version": "4.2.6",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -21,6 +21,6 @@
21
21
  "react-merge-refs": "^1.1.0",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
- "themesVersion": "13.0.1",
24
+ "themesVersion": "13.0.2",
25
25
  "varsVersion": "9.11.1"
26
26
  }
package/src/index.module.css CHANGED
@@ -51,7 +51,7 @@
51
51
 
52
52
  .addons {
53
53
  margin-left: auto;
54
- padding-left: var(--gap-m);
54
+ padding-left: var(--gap-16);
55
55
  line-height: 24px;
56
56
  }
57
57
 
@@ -64,7 +64,7 @@
64
64
  border-radius: var(--border-radius-xl);
65
65
  width: 36px;
66
66
  height: 20px;
67
- margin: var(--gap-3xs);
67
+ margin: var(--gap-2);
68
68
  flex-shrink: 0;
69
69
  background-color: var(--switch-bg-color);
70
70
  border: 2px solid var(--switch-border-color);
@@ -91,7 +91,7 @@
91
91
  }
92
92
 
93
93
  .content {
94
- margin-left: var(--gap-s);
94
+ margin-left: var(--gap-12);
95
95
  flex-grow: 1;
96
96
  }
97
97
 
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  .label:not(:only-child) {
105
- margin-bottom: var(--gap-2xs);
105
+ margin-bottom: var(--gap-4);
106
106
  }
107
107
 
108
108
  .errorMessage {
@@ -123,7 +123,7 @@
123
123
  }
124
124
 
125
125
  .reversed .content {
126
- margin-right: var(--gap-m);
126
+ margin-right: var(--gap-16);
127
127
  margin-left: 0;
128
128
  }
129
129
 
@@ -131,7 +131,7 @@
131
131
  margin-left: 0;
132
132
  padding-left: 0;
133
133
  margin-right: auto;
134
- padding-right: var(--gap-m);
134
+ padding-right: var(--gap-16);
135
135
  }
136
136
 
137
137
  /* Checked state */