@alfalab/core-components-switch 4.2.6 → 4.3.1

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 (14) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +12 -10
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +40 -38
  5. package/index.css +40 -38
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +40 -38
  8. package/moderncssm/Component.d.ts +115 -0
  9. package/moderncssm/Component.js +36 -0
  10. package/moderncssm/index.d.ts +1 -0
  11. package/moderncssm/index.js +1 -0
  12. package/moderncssm/index.module.css +189 -0
  13. package/package.json +4 -4
  14. package/src/index.module.css +11 -11
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_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"};
18
+ var styles = {"component":"switch__component_1xrrg","start":"switch__start_1xrrg","center":"switch__center_1xrrg","addons":"switch__addons_1xrrg","block":"switch__block_1xrrg","switch":"switch__switch_1xrrg","content":"switch__content_1xrrg","label":"switch__label_1xrrg","errorMessage":"switch__errorMessage_1xrrg","hint":"switch__hint_1xrrg","reversed":"switch__reversed_1xrrg","checked":"switch__checked_1xrrg","disabled":"switch__disabled_1xrrg","focused":"switch__focused_1xrrg"};
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);
@@ -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_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
+ var styles = {"component":"switch__component_1xrrg","start":"switch__start_1xrrg","center":"switch__center_1xrrg","addons":"switch__addons_1xrrg","block":"switch__block_1xrrg","switch":"switch__switch_1xrrg","content":"switch__content_1xrrg","label":"switch__label_1xrrg","errorMessage":"switch__errorMessage_1xrrg","hint":"switch__hint_1xrrg","reversed":"switch__reversed_1xrrg","checked":"switch__checked_1xrrg","disabled":"switch__disabled_1xrrg","focused":"switch__focused_1xrrg"};
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: 1dewz */
1
+ /* hash: 1r6wc */
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);
@@ -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_180is {
70
+ } .switch__component_1xrrg {
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_180is input {
78
+ } .switch__component_1xrrg input {
77
79
  opacity: 0;
78
80
  position: absolute;
79
- } .switch__start_180is {
81
+ } .switch__start_1xrrg {
80
82
  align-items: flex-start;
81
- } .switch__center_180is {
83
+ } .switch__center_1xrrg {
82
84
  align-items: center;
83
- } .switch__addons_180is {
85
+ } .switch__addons_1xrrg {
84
86
  margin-left: auto;
85
87
  padding-left: var(--gap-16);
86
88
  line-height: 24px;
87
- } .switch__block_180is {
89
+ } .switch__block_1xrrg {
88
90
  width: 100%;
89
- } .switch__switch_180is {
91
+ } .switch__switch_1xrrg {
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_180is:hover {
102
+ } .switch__switch_1xrrg:hover {
101
103
  background-color: var(--switch-hover-bg-color);
102
- } .switch__switch_180is:before {
104
+ } .switch__switch_1xrrg: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_180is {
116
+ } .switch__content_1xrrg {
115
117
  margin-left: var(--gap-12);
116
118
  flex-grow: 1;
117
- } .switch__label_180is {
119
+ } .switch__label_1xrrg {
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_180is:not(:only-child) {
125
+ } .switch__label_1xrrg:not(:only-child) {
124
126
  margin-bottom: var(--gap-4);
125
- } .switch__errorMessage_180is {
127
+ } .switch__errorMessage_1xrrg {
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_180is {
132
+ } .switch__hint_1xrrg {
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_180is.switch__reversed_180is {
138
+ } /* Reversed state */ .switch__component_1xrrg.switch__reversed_1xrrg {
137
139
  flex-direction: row-reverse;
138
- } .switch__reversed_180is .switch__content_180is {
140
+ } .switch__reversed_1xrrg .switch__content_1xrrg {
139
141
  margin-right: var(--gap-16);
140
- margin-left: 0;
141
- } .switch__reversed_180is .switch__addons_180is {
142
- margin-left: 0;
143
- padding-left: 0;
142
+ margin-left: var(--gap-0);
143
+ } .switch__reversed_1xrrg .switch__addons_1xrrg {
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_180is .switch__switch_180is {
148
+ } /* Checked state */ .switch__checked_1xrrg .switch__switch_1xrrg {
147
149
  background-color: var(--switch-checked-bg-color)
148
- } .switch__checked_180is .switch__switch_180is:hover {
150
+ } .switch__checked_1xrrg .switch__switch_1xrrg:hover {
149
151
  background-color: var(--switch-checked-hover-bg-color);
150
- } .switch__checked_180is .switch__switch_180is:before {
152
+ } .switch__checked_1xrrg .switch__switch_1xrrg:before {
151
153
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
152
154
  transform: translateX(16px);
153
- } /* Disabled state */ .switch__disabled_180is {
155
+ } /* Disabled state */ .switch__disabled_1xrrg {
154
156
  cursor: var(--disabled-cursor);
155
- } .switch__disabled_180is .switch__switch_180is {
157
+ } .switch__disabled_1xrrg .switch__switch_1xrrg {
156
158
  background-color: var(--switch-disabled-bg-color)
157
- } .switch__disabled_180is .switch__switch_180is:before {
159
+ } .switch__disabled_1xrrg .switch__switch_1xrrg:before {
158
160
  background-color: var(--switch-icon-disabled-color);
159
- } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
161
+ } .switch__disabled_1xrrg.switch__checked_1xrrg .switch__switch_1xrrg {
160
162
  background-color: var(--switch-disabled-checked-bg-color);
161
- } .switch__disabled_180is .switch__label_180is {
163
+ } .switch__disabled_1xrrg .switch__label_1xrrg {
162
164
  color: var(--switch-disabled-color);
163
- } .switch__disabled_180is .switch__hint_180is {
165
+ } .switch__disabled_1xrrg .switch__hint_1xrrg {
164
166
  color: var(--switch-disabled-color);
165
- } /* Focused state */ .switch__focused_180is .switch__switch_180is {
167
+ } /* Focused state */ .switch__focused_1xrrg .switch__switch_1xrrg {
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: 1dewz */
1
+ /* hash: 1r6wc */
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);
@@ -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_180is {
70
+ } .switch__component_1xrrg {
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_180is input {
78
+ } .switch__component_1xrrg input {
77
79
  opacity: 0;
78
80
  position: absolute;
79
- } .switch__start_180is {
81
+ } .switch__start_1xrrg {
80
82
  align-items: flex-start;
81
- } .switch__center_180is {
83
+ } .switch__center_1xrrg {
82
84
  align-items: center;
83
- } .switch__addons_180is {
85
+ } .switch__addons_1xrrg {
84
86
  margin-left: auto;
85
87
  padding-left: var(--gap-16);
86
88
  line-height: 24px;
87
- } .switch__block_180is {
89
+ } .switch__block_1xrrg {
88
90
  width: 100%;
89
- } .switch__switch_180is {
91
+ } .switch__switch_1xrrg {
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_180is:hover {
102
+ } .switch__switch_1xrrg:hover {
101
103
  background-color: var(--switch-hover-bg-color);
102
- } .switch__switch_180is:before {
104
+ } .switch__switch_1xrrg: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_180is {
116
+ } .switch__content_1xrrg {
115
117
  margin-left: var(--gap-12);
116
118
  flex-grow: 1;
117
- } .switch__label_180is {
119
+ } .switch__label_1xrrg {
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_180is:not(:only-child) {
125
+ } .switch__label_1xrrg:not(:only-child) {
124
126
  margin-bottom: var(--gap-4);
125
- } .switch__errorMessage_180is {
127
+ } .switch__errorMessage_1xrrg {
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_180is {
132
+ } .switch__hint_1xrrg {
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_180is.switch__reversed_180is {
138
+ } /* Reversed state */ .switch__component_1xrrg.switch__reversed_1xrrg {
137
139
  flex-direction: row-reverse;
138
- } .switch__reversed_180is .switch__content_180is {
140
+ } .switch__reversed_1xrrg .switch__content_1xrrg {
139
141
  margin-right: var(--gap-16);
140
- margin-left: 0;
141
- } .switch__reversed_180is .switch__addons_180is {
142
- margin-left: 0;
143
- padding-left: 0;
142
+ margin-left: var(--gap-0);
143
+ } .switch__reversed_1xrrg .switch__addons_1xrrg {
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_180is .switch__switch_180is {
148
+ } /* Checked state */ .switch__checked_1xrrg .switch__switch_1xrrg {
147
149
  background-color: var(--switch-checked-bg-color)
148
- } .switch__checked_180is .switch__switch_180is:hover {
150
+ } .switch__checked_1xrrg .switch__switch_1xrrg:hover {
149
151
  background-color: var(--switch-checked-hover-bg-color);
150
- } .switch__checked_180is .switch__switch_180is:before {
152
+ } .switch__checked_1xrrg .switch__switch_1xrrg:before {
151
153
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
152
154
  transform: translateX(16px);
153
- } /* Disabled state */ .switch__disabled_180is {
155
+ } /* Disabled state */ .switch__disabled_1xrrg {
154
156
  cursor: var(--disabled-cursor);
155
- } .switch__disabled_180is .switch__switch_180is {
157
+ } .switch__disabled_1xrrg .switch__switch_1xrrg {
156
158
  background-color: var(--switch-disabled-bg-color)
157
- } .switch__disabled_180is .switch__switch_180is:before {
159
+ } .switch__disabled_1xrrg .switch__switch_1xrrg:before {
158
160
  background-color: var(--switch-icon-disabled-color);
159
- } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
161
+ } .switch__disabled_1xrrg.switch__checked_1xrrg .switch__switch_1xrrg {
160
162
  background-color: var(--switch-disabled-checked-bg-color);
161
- } .switch__disabled_180is .switch__label_180is {
163
+ } .switch__disabled_1xrrg .switch__label_1xrrg {
162
164
  color: var(--switch-disabled-color);
163
- } .switch__disabled_180is .switch__hint_180is {
165
+ } .switch__disabled_1xrrg .switch__hint_1xrrg {
164
166
  color: var(--switch-disabled-color);
165
- } /* Focused state */ .switch__focused_180is .switch__switch_180is {
167
+ } /* Focused state */ .switch__focused_1xrrg .switch__switch_1xrrg {
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_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"};
7
+ const styles = {"component":"switch__component_1xrrg","start":"switch__start_1xrrg","center":"switch__center_1xrrg","addons":"switch__addons_1xrrg","block":"switch__block_1xrrg","switch":"switch__switch_1xrrg","content":"switch__content_1xrrg","label":"switch__label_1xrrg","errorMessage":"switch__errorMessage_1xrrg","hint":"switch__hint_1xrrg","reversed":"switch__reversed_1xrrg","checked":"switch__checked_1xrrg","disabled":"switch__disabled_1xrrg","focused":"switch__focused_1xrrg"};
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: 1dewz */
1
+ /* hash: 1r6wc */
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);
@@ -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_180is {
70
+ } .switch__component_1xrrg {
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_180is input {
78
+ } .switch__component_1xrrg input {
77
79
  opacity: 0;
78
80
  position: absolute;
79
- } .switch__start_180is {
81
+ } .switch__start_1xrrg {
80
82
  align-items: flex-start;
81
- } .switch__center_180is {
83
+ } .switch__center_1xrrg {
82
84
  align-items: center;
83
- } .switch__addons_180is {
85
+ } .switch__addons_1xrrg {
84
86
  margin-left: auto;
85
87
  padding-left: var(--gap-16);
86
88
  line-height: 24px;
87
- } .switch__block_180is {
89
+ } .switch__block_1xrrg {
88
90
  width: 100%;
89
- } .switch__switch_180is {
91
+ } .switch__switch_1xrrg {
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_180is:hover {
102
+ } .switch__switch_1xrrg:hover {
101
103
  background-color: var(--switch-hover-bg-color);
102
- } .switch__switch_180is:before {
104
+ } .switch__switch_1xrrg: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_180is {
116
+ } .switch__content_1xrrg {
115
117
  margin-left: var(--gap-12);
116
118
  flex-grow: 1;
117
- } .switch__label_180is {
119
+ } .switch__label_1xrrg {
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_180is:not(:only-child) {
125
+ } .switch__label_1xrrg:not(:only-child) {
124
126
  margin-bottom: var(--gap-4);
125
- } .switch__errorMessage_180is {
127
+ } .switch__errorMessage_1xrrg {
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_180is {
132
+ } .switch__hint_1xrrg {
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_180is.switch__reversed_180is {
138
+ } /* Reversed state */ .switch__component_1xrrg.switch__reversed_1xrrg {
137
139
  flex-direction: row-reverse;
138
- } .switch__reversed_180is .switch__content_180is {
140
+ } .switch__reversed_1xrrg .switch__content_1xrrg {
139
141
  margin-right: var(--gap-16);
140
- margin-left: 0;
141
- } .switch__reversed_180is .switch__addons_180is {
142
- margin-left: 0;
143
- padding-left: 0;
142
+ margin-left: var(--gap-0);
143
+ } .switch__reversed_1xrrg .switch__addons_1xrrg {
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_180is .switch__switch_180is {
148
+ } /* Checked state */ .switch__checked_1xrrg .switch__switch_1xrrg {
147
149
  background-color: var(--switch-checked-bg-color)
148
- } .switch__checked_180is .switch__switch_180is:hover {
150
+ } .switch__checked_1xrrg .switch__switch_1xrrg:hover {
149
151
  background-color: var(--switch-checked-hover-bg-color);
150
- } .switch__checked_180is .switch__switch_180is:before {
152
+ } .switch__checked_1xrrg .switch__switch_1xrrg:before {
151
153
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
152
154
  transform: translateX(16px);
153
- } /* Disabled state */ .switch__disabled_180is {
155
+ } /* Disabled state */ .switch__disabled_1xrrg {
154
156
  cursor: var(--disabled-cursor);
155
- } .switch__disabled_180is .switch__switch_180is {
157
+ } .switch__disabled_1xrrg .switch__switch_1xrrg {
156
158
  background-color: var(--switch-disabled-bg-color)
157
- } .switch__disabled_180is .switch__switch_180is:before {
159
+ } .switch__disabled_1xrrg .switch__switch_1xrrg:before {
158
160
  background-color: var(--switch-icon-disabled-color);
159
- } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
161
+ } .switch__disabled_1xrrg.switch__checked_1xrrg .switch__switch_1xrrg {
160
162
  background-color: var(--switch-disabled-checked-bg-color);
161
- } .switch__disabled_180is .switch__label_180is {
163
+ } .switch__disabled_1xrrg .switch__label_1xrrg {
162
164
  color: var(--switch-disabled-color);
163
- } .switch__disabled_180is .switch__hint_180is {
165
+ } .switch__disabled_1xrrg .switch__hint_1xrrg {
164
166
  color: var(--switch-disabled-color);
165
- } /* Focused state */ .switch__focused_180is .switch__switch_180is {
167
+ } /* Focused state */ .switch__focused_1xrrg .switch__switch_1xrrg {
166
168
  outline: 2px solid var(--focus-color);
167
169
  outline-offset: 2px;
168
170
  }
package/moderncssm/Component.d.ts ADDED
@@ -0,0 +1,115 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
4
+ type Align = 'start' | 'center';
5
+ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
6
+ /**
7
+ * Управление состоянием вкл/выкл компонента
8
+ */
9
+ checked?: boolean;
10
+ /**
11
+ * Текст подписи к переключателю
12
+ */
13
+ label?: ReactNode;
14
+ /**
15
+ * Текст подсказки снизу
16
+ */
17
+ hint?: ReactNode;
18
+ /**
19
+ * Переключатель будет отрисован справа от контента
20
+ */
21
+ reversed?: boolean;
22
+ /**
23
+ * Выравнивание
24
+ */
25
+ align?: Align;
26
+ /**
27
+ * Дополнительный слот
28
+ */
29
+ addons?: React.ReactNode;
30
+ /**
31
+ * Растягивать ли компонент на всю ширину
32
+ */
33
+ block?: boolean;
34
+ /**
35
+ * Управление состоянием включен / выключен
36
+ */
37
+ disabled?: boolean;
38
+ /**
39
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
40
+ * Используйте props disabled
41
+ * Управление состоянием активен / неактивен
42
+ */
43
+ inactive?: boolean;
44
+ /**
45
+ * Отображение ошибки
46
+ */
47
+ error?: ReactNode | boolean;
48
+ /**
49
+ * Обработчик переключения компонента
50
+ */
51
+ onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
52
+ checked: boolean;
53
+ name: InputHTMLAttributes<HTMLInputElement>['name'];
54
+ }) => void;
55
+ /**
56
+ * Идентификатор для систем автоматизированного тестирования
57
+ */
58
+ dataTestId?: string;
59
+ };
60
+ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
61
+ /**
62
+ * Управление состоянием вкл/выкл компонента
63
+ */
64
+ checked?: boolean | undefined;
65
+ /**
66
+ * Текст подписи к переключателю
67
+ */
68
+ label?: ReactNode;
69
+ /**
70
+ * Текст подсказки снизу
71
+ */
72
+ hint?: ReactNode;
73
+ /**
74
+ * Переключатель будет отрисован справа от контента
75
+ */
76
+ reversed?: boolean | undefined;
77
+ /**
78
+ * Выравнивание
79
+ */
80
+ align?: Align | undefined;
81
+ /**
82
+ * Дополнительный слот
83
+ */
84
+ addons?: React.ReactNode;
85
+ /**
86
+ * Растягивать ли компонент на всю ширину
87
+ */
88
+ block?: boolean | undefined;
89
+ /**
90
+ * Управление состоянием включен / выключен
91
+ */
92
+ disabled?: boolean | undefined;
93
+ /**
94
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
95
+ * Используйте props disabled
96
+ * Управление состоянием активен / неактивен
97
+ */
98
+ inactive?: boolean | undefined;
99
+ /**
100
+ * Отображение ошибки
101
+ */
102
+ error?: ReactNode | boolean;
103
+ /**
104
+ * Обработчик переключения компонента
105
+ */
106
+ onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
107
+ checked: boolean;
108
+ name: InputHTMLAttributes<HTMLInputElement>['name'];
109
+ }) => void) | undefined;
110
+ /**
111
+ * Идентификатор для систем автоматизированного тестирования
112
+ */
113
+ dataTestId?: string | undefined;
114
+ } & React.RefAttributes<HTMLLabelElement>>;
115
+ export { SwitchProps, Switch };
package/moderncssm/Component.js ADDED
@@ -0,0 +1,36 @@
1
+ import React, { forwardRef, useRef } from 'react';
2
+ import mergeRefs from 'react-merge-refs';
3
+ import cn from 'classnames';
4
+ import { dom } from '@alfalab/core-components-shared/moderncssm';
5
+ import { useFocus } from '@alfalab/hooks';
6
+ import styles from './index.module.css';
7
+
8
+ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, error, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
9
+ const labelRef = useRef(null);
10
+ const [focused] = useFocus(labelRef, 'keyboard');
11
+ const handleChange = (e) => {
12
+ if (onChange) {
13
+ onChange(e, { checked: e.target.checked, name });
14
+ }
15
+ };
16
+ const errorMessage = typeof error === 'boolean' ? '' : error;
17
+ return (React.createElement("label", { className: cn(styles.component, styles[align], className, {
18
+ [styles.disabled]: disabled || inactive,
19
+ [styles.checked]: checked,
20
+ [styles.reversed]: reversed,
21
+ [styles.focused]: focused,
22
+ [styles.block]: block,
23
+ }), ref: mergeRefs([labelRef, ref]) },
24
+ React.createElement("input", { type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId, ...restProps }),
25
+ React.createElement("span", { className: styles.switch }),
26
+ (label || hint || errorMessage) && (React.createElement("span", { className: styles.content },
27
+ label && React.createElement("span", { className: styles.label }, label),
28
+ hint && !errorMessage && React.createElement("span", { className: styles.hint }, hint),
29
+ errorMessage && (React.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
30
+ addons && (
31
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
32
+ React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
33
+ });
34
+ Switch.displayName = 'Switch';
35
+
36
+ export { Switch };
package/moderncssm/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Component";
package/moderncssm/index.js ADDED
@@ -0,0 +1 @@
1
+ export { Switch } from './Component.js';
package/moderncssm/index.module.css ADDED
@@ -0,0 +1,189 @@
1
+ /* */
2
+
3
+ :root {
4
+ --switch-label-color: var(--color-light-text-primary);
5
+ --switch-hint-color: var(--color-light-text-secondary);
6
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
7
+ --switch-border-color: transparent;
8
+ --switch-error-color: var(--color-light-text-negative);
9
+
10
+ /* hover */
11
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
12
+
13
+ /* checked */
14
+ --switch-checked-bg-color: var(--color-light-status-positive);
15
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
16
+
17
+ /* disabled */
18
+ --switch-disabled-color: var(--color-light-text-secondary);
19
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
20
+
21
+ /* disabled checked */
22
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
23
+
24
+ /* icon */
25
+ --switch-icon-color: var(--color-static-neutral-0);
26
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
27
+ }
28
+
29
+ .component {
30
+ display: inline-flex;
31
+ align-items: flex-start;
32
+ margin: var(--gap-0);
33
+ padding: var(--gap-0);
34
+ border: 0;
35
+ cursor: pointer;
36
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
37
+ }
38
+
39
+ .component input {
40
+ opacity: 0;
41
+ position: absolute;
42
+ }
43
+
44
+ .start {
45
+ align-items: flex-start;
46
+ }
47
+
48
+ .center {
49
+ align-items: center;
50
+ }
51
+
52
+ .addons {
53
+ margin-left: auto;
54
+ padding-left: var(--gap-16);
55
+ line-height: 24px;
56
+ }
57
+
58
+ .block {
59
+ width: 100%;
60
+ }
61
+
62
+ .switch {
63
+ position: relative;
64
+ border-radius: var(--border-radius-16);
65
+ width: 36px;
66
+ height: 20px;
67
+ margin: var(--gap-2);
68
+ flex-shrink: 0;
69
+ background-color: var(--switch-bg-color);
70
+ border: 2px solid var(--switch-border-color);
71
+ transition: background-color 0.2s ease, border-color 0.2s ease;
72
+ box-sizing: border-box
73
+ }
74
+
75
+ .switch:hover {
76
+ background-color: var(--switch-hover-bg-color);
77
+ }
78
+
79
+ .switch:before {
80
+ content: '';
81
+ position: absolute;
82
+ top: var(--gap-0);
83
+ left: var(--gap-0);
84
+ bottom: var(--gap-0);
85
+ right: var(--gap-16);
86
+ display: block;
87
+ border-radius: var(--border-radius-circle);
88
+ background-color: var(--switch-icon-color);
89
+ box-sizing: border-box;
90
+ transition: transform 0.2s ease;
91
+ }
92
+
93
+ .content {
94
+ margin-left: var(--gap-12);
95
+ flex-grow: 1;
96
+ }
97
+
98
+ .label {
99
+ font-size: 16px;
100
+ line-height: 24px;
101
+ font-weight: 400;
102
+ display: block;
103
+ color: var(--switch-label-color);
104
+ }
105
+
106
+ .label:not(:only-child) {
107
+ margin-bottom: var(--gap-4);
108
+ }
109
+
110
+ .errorMessage {
111
+ font-size: 14px;
112
+ line-height: 18px;
113
+ font-weight: 400;
114
+ color: var(--switch-error-color);
115
+ }
116
+
117
+ .hint {
118
+ font-size: 14px;
119
+ line-height: 18px;
120
+ font-weight: 400;
121
+ display: block;
122
+ color: var(--switch-hint-color);
123
+ }
124
+
125
+ /* Reversed state */
126
+
127
+ .component.reversed {
128
+ flex-direction: row-reverse;
129
+ }
130
+
131
+ .reversed .content {
132
+ margin-right: var(--gap-16);
133
+ margin-left: var(--gap-0);
134
+ }
135
+
136
+ .reversed .addons {
137
+ margin-left: var(--gap-0);
138
+ padding-left: var(--gap-0);
139
+ margin-right: auto;
140
+ padding-right: var(--gap-16);
141
+ }
142
+
143
+ /* Checked state */
144
+
145
+ .checked .switch {
146
+ background-color: var(--switch-checked-bg-color)
147
+ }
148
+
149
+ .checked .switch:hover {
150
+ background-color: var(--switch-checked-hover-bg-color);
151
+ }
152
+
153
+ .checked .switch:before {
154
+ /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
155
+ transform: translateX(16px);
156
+ }
157
+
158
+ /* Disabled state */
159
+
160
+ .disabled {
161
+ cursor: var(--disabled-cursor);
162
+ }
163
+
164
+ .disabled .switch {
165
+ background-color: var(--switch-disabled-bg-color)
166
+ }
167
+
168
+ .disabled .switch:before {
169
+ background-color: var(--switch-icon-disabled-color);
170
+ }
171
+
172
+ .disabled.checked .switch {
173
+ background-color: var(--switch-disabled-checked-bg-color);
174
+ }
175
+
176
+ .disabled .label {
177
+ color: var(--switch-disabled-color);
178
+ }
179
+
180
+ .disabled .hint {
181
+ color: var(--switch-disabled-color);
182
+ }
183
+
184
+ /* Focused state */
185
+
186
+ .focused .switch {
187
+ outline: 2px solid var(--focus-color);
188
+ outline-offset: 2px;
189
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.2.6",
3
+ "version": "4.3.1",
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.12.1",
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.0.2",
25
- "varsVersion": "9.11.1"
24
+ "themesVersion": "13.2.0",
25
+ "varsVersion": "9.13.0"
26
26
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-themes/src/default.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
 
3
3
  :root {
4
4
  --switch-label-color: var(--color-light-text-primary);
@@ -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
  }