@alfalab/core-components-switch 4.2.4 → 4.2.5

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 (8) 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 +5 -3
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_1gmyw","start":"switch__start_1gmyw","center":"switch__center_1gmyw","addons":"switch__addons_1gmyw","block":"switch__block_1gmyw","switch":"switch__switch_1gmyw","content":"switch__content_1gmyw","label":"switch__label_1gmyw","errorMessage":"switch__errorMessage_1gmyw","hint":"switch__hint_1gmyw","reversed":"switch__reversed_1gmyw","checked":"switch__checked_1gmyw","disabled":"switch__disabled_1gmyw","focused":"switch__focused_1gmyw"};
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"};
19
19
  require('./index.css')
20
20
 
21
21
  var Switch = React.forwardRef(function (_a, ref) {
package/cssm/index.module.css CHANGED
@@ -20,14 +20,18 @@
20
20
  /* Up */
21
21
 
22
22
  /* Hard up */
23
- } :root {
24
- --border-radius-xl: 16px;
23
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
24
+ --border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
25
25
  --border-radius-circle: 50%;
26
+
27
+ /* новые значения, используйте их */
26
28
  } :root {
27
- --gap-3xs: 2px;
28
- --gap-2xs: 4px;
29
- --gap-s: 12px;
30
- --gap-m: 16px;
29
+ --gap-3xs: 2px; /* deprecated */
30
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
31
+ --gap-s: 12px; /* deprecated */ /* deprecated */
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
+
34
+ /* новые значения, используйте их */
31
35
  } :root {
32
36
  } :root {
33
37
  --focus-color: var(--color-light-status-info);
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_1gmyw","start":"switch__start_1gmyw","center":"switch__center_1gmyw","addons":"switch__addons_1gmyw","block":"switch__block_1gmyw","switch":"switch__switch_1gmyw","content":"switch__content_1gmyw","label":"switch__label_1gmyw","errorMessage":"switch__errorMessage_1gmyw","hint":"switch__hint_1gmyw","reversed":"switch__reversed_1gmyw","checked":"switch__checked_1gmyw","disabled":"switch__disabled_1gmyw","focused":"switch__focused_1gmyw"};
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"};
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: 42vxs */
1
+ /* hash: 1q52q */
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);
@@ -21,14 +21,18 @@
21
21
  /* Up */
22
22
 
23
23
  /* Hard up */
24
- } :root {
25
- --border-radius-xl: 16px;
24
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
25
+ --border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
26
26
  --border-radius-circle: 50%;
27
+
28
+ /* новые значения, используйте их */
27
29
  } :root {
28
- --gap-3xs: 2px;
29
- --gap-2xs: 4px;
30
- --gap-s: 12px;
31
- --gap-m: 16px;
30
+ --gap-3xs: 2px; /* deprecated */
31
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
32
+ --gap-s: 12px; /* deprecated */ /* deprecated */
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
+
35
+ /* новые значения, используйте их */
32
36
  } :root {
33
37
  } :root {
34
38
  --focus-color: var(--color-light-status-info);
@@ -57,7 +61,7 @@
57
61
  /* icon */
58
62
  --switch-icon-color: var(--color-static-neutral-0);
59
63
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
60
- } .switch__component_1gmyw {
64
+ } .switch__component_fs99x {
61
65
  display: inline-flex;
62
66
  align-items: flex-start;
63
67
  margin: 0;
@@ -65,20 +69,20 @@
65
69
  border: 0;
66
70
  cursor: pointer;
67
71
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
68
- } .switch__component_1gmyw input {
72
+ } .switch__component_fs99x input {
69
73
  opacity: 0;
70
74
  position: absolute;
71
- } .switch__start_1gmyw {
75
+ } .switch__start_fs99x {
72
76
  align-items: flex-start;
73
- } .switch__center_1gmyw {
77
+ } .switch__center_fs99x {
74
78
  align-items: center;
75
- } .switch__addons_1gmyw {
79
+ } .switch__addons_fs99x {
76
80
  margin-left: auto;
77
81
  padding-left: var(--gap-m);
78
82
  line-height: 24px;
79
- } .switch__block_1gmyw {
83
+ } .switch__block_fs99x {
80
84
  width: 100%;
81
- } .switch__switch_1gmyw {
85
+ } .switch__switch_fs99x {
82
86
  position: relative;
83
87
  border-radius: var(--border-radius-xl);
84
88
  width: 36px;
@@ -89,9 +93,9 @@
89
93
  border: 2px solid var(--switch-border-color);
90
94
  transition: background-color 0.2s ease, border-color 0.2s ease;
91
95
  box-sizing: border-box
92
- } .switch__switch_1gmyw:hover {
96
+ } .switch__switch_fs99x:hover {
93
97
  background-color: var(--switch-hover-bg-color);
94
- } .switch__switch_1gmyw:before {
98
+ } .switch__switch_fs99x:before {
95
99
  content: '';
96
100
  position: absolute;
97
101
  top: 0;
@@ -103,58 +107,58 @@
103
107
  background-color: var(--switch-icon-color);
104
108
  box-sizing: border-box;
105
109
  transition: transform 0.2s ease;
106
- } .switch__content_1gmyw {
110
+ } .switch__content_fs99x {
107
111
  margin-left: var(--gap-s);
108
112
  flex-grow: 1;
109
- } .switch__label_1gmyw {
113
+ } .switch__label_fs99x {
110
114
  font-size: 16px;
111
115
  line-height: 24px;
112
116
  font-weight: 400;
113
117
  display: block;
114
118
  color: var(--switch-label-color);
115
- } .switch__label_1gmyw:not(:only-child) {
119
+ } .switch__label_fs99x:not(:only-child) {
116
120
  margin-bottom: var(--gap-2xs);
117
- } .switch__errorMessage_1gmyw {
121
+ } .switch__errorMessage_fs99x {
118
122
  font-size: 14px;
119
123
  line-height: 18px;
120
124
  font-weight: 400;
121
125
  color: var(--switch-error-color);
122
- } .switch__hint_1gmyw {
126
+ } .switch__hint_fs99x {
123
127
  font-size: 14px;
124
128
  line-height: 18px;
125
129
  font-weight: 400;
126
130
  display: block;
127
131
  color: var(--switch-hint-color);
128
- } /* Reversed state */ .switch__component_1gmyw.switch__reversed_1gmyw {
132
+ } /* Reversed state */ .switch__component_fs99x.switch__reversed_fs99x {
129
133
  flex-direction: row-reverse;
130
- } .switch__reversed_1gmyw .switch__content_1gmyw {
134
+ } .switch__reversed_fs99x .switch__content_fs99x {
131
135
  margin-right: var(--gap-m);
132
136
  margin-left: 0;
133
- } .switch__reversed_1gmyw .switch__addons_1gmyw {
137
+ } .switch__reversed_fs99x .switch__addons_fs99x {
134
138
  margin-left: 0;
135
139
  padding-left: 0;
136
140
  margin-right: auto;
137
141
  padding-right: var(--gap-m);
138
- } /* Checked state */ .switch__checked_1gmyw .switch__switch_1gmyw {
142
+ } /* Checked state */ .switch__checked_fs99x .switch__switch_fs99x {
139
143
  background-color: var(--switch-checked-bg-color)
140
- } .switch__checked_1gmyw .switch__switch_1gmyw:hover {
144
+ } .switch__checked_fs99x .switch__switch_fs99x:hover {
141
145
  background-color: var(--switch-checked-hover-bg-color);
142
- } .switch__checked_1gmyw .switch__switch_1gmyw:before {
146
+ } .switch__checked_fs99x .switch__switch_fs99x:before {
143
147
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
144
148
  transform: translateX(16px);
145
- } /* Disabled state */ .switch__disabled_1gmyw {
149
+ } /* Disabled state */ .switch__disabled_fs99x {
146
150
  cursor: var(--disabled-cursor);
147
- } .switch__disabled_1gmyw .switch__switch_1gmyw {
151
+ } .switch__disabled_fs99x .switch__switch_fs99x {
148
152
  background-color: var(--switch-disabled-bg-color)
149
- } .switch__disabled_1gmyw .switch__switch_1gmyw:before {
153
+ } .switch__disabled_fs99x .switch__switch_fs99x:before {
150
154
  background-color: var(--switch-icon-disabled-color);
151
- } .switch__disabled_1gmyw.switch__checked_1gmyw .switch__switch_1gmyw {
155
+ } .switch__disabled_fs99x.switch__checked_fs99x .switch__switch_fs99x {
152
156
  background-color: var(--switch-disabled-checked-bg-color);
153
- } .switch__disabled_1gmyw .switch__label_1gmyw {
157
+ } .switch__disabled_fs99x .switch__label_fs99x {
154
158
  color: var(--switch-disabled-color);
155
- } .switch__disabled_1gmyw .switch__hint_1gmyw {
159
+ } .switch__disabled_fs99x .switch__hint_fs99x {
156
160
  color: var(--switch-disabled-color);
157
- } /* Focused state */ .switch__focused_1gmyw .switch__switch_1gmyw {
161
+ } /* Focused state */ .switch__focused_fs99x .switch__switch_fs99x {
158
162
  outline: 2px solid var(--focus-color);
159
163
  outline-offset: 2px;
160
164
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 42vxs */
1
+ /* hash: 1q52q */
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);
@@ -21,14 +21,18 @@
21
21
  /* Up */
22
22
 
23
23
  /* Hard up */
24
- } :root {
25
- --border-radius-xl: 16px;
24
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
25
+ --border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
26
26
  --border-radius-circle: 50%;
27
+
28
+ /* новые значения, используйте их */
27
29
  } :root {
28
- --gap-3xs: 2px;
29
- --gap-2xs: 4px;
30
- --gap-s: 12px;
31
- --gap-m: 16px;
30
+ --gap-3xs: 2px; /* deprecated */
31
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
32
+ --gap-s: 12px; /* deprecated */ /* deprecated */
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
+
35
+ /* новые значения, используйте их */
32
36
  } :root {
33
37
  } :root {
34
38
  --focus-color: var(--color-light-status-info);
@@ -57,7 +61,7 @@
57
61
  /* icon */
58
62
  --switch-icon-color: var(--color-static-neutral-0);
59
63
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
60
- } .switch__component_1gmyw {
64
+ } .switch__component_fs99x {
61
65
  display: inline-flex;
62
66
  align-items: flex-start;
63
67
  margin: 0;
@@ -65,20 +69,20 @@
65
69
  border: 0;
66
70
  cursor: pointer;
67
71
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
68
- } .switch__component_1gmyw input {
72
+ } .switch__component_fs99x input {
69
73
  opacity: 0;
70
74
  position: absolute;
71
- } .switch__start_1gmyw {
75
+ } .switch__start_fs99x {
72
76
  align-items: flex-start;
73
- } .switch__center_1gmyw {
77
+ } .switch__center_fs99x {
74
78
  align-items: center;
75
- } .switch__addons_1gmyw {
79
+ } .switch__addons_fs99x {
76
80
  margin-left: auto;
77
81
  padding-left: var(--gap-m);
78
82
  line-height: 24px;
79
- } .switch__block_1gmyw {
83
+ } .switch__block_fs99x {
80
84
  width: 100%;
81
- } .switch__switch_1gmyw {
85
+ } .switch__switch_fs99x {
82
86
  position: relative;
83
87
  border-radius: var(--border-radius-xl);
84
88
  width: 36px;
@@ -89,9 +93,9 @@
89
93
  border: 2px solid var(--switch-border-color);
90
94
  transition: background-color 0.2s ease, border-color 0.2s ease;
91
95
  box-sizing: border-box
92
- } .switch__switch_1gmyw:hover {
96
+ } .switch__switch_fs99x:hover {
93
97
  background-color: var(--switch-hover-bg-color);
94
- } .switch__switch_1gmyw:before {
98
+ } .switch__switch_fs99x:before {
95
99
  content: '';
96
100
  position: absolute;
97
101
  top: 0;
@@ -103,58 +107,58 @@
103
107
  background-color: var(--switch-icon-color);
104
108
  box-sizing: border-box;
105
109
  transition: transform 0.2s ease;
106
- } .switch__content_1gmyw {
110
+ } .switch__content_fs99x {
107
111
  margin-left: var(--gap-s);
108
112
  flex-grow: 1;
109
- } .switch__label_1gmyw {
113
+ } .switch__label_fs99x {
110
114
  font-size: 16px;
111
115
  line-height: 24px;
112
116
  font-weight: 400;
113
117
  display: block;
114
118
  color: var(--switch-label-color);
115
- } .switch__label_1gmyw:not(:only-child) {
119
+ } .switch__label_fs99x:not(:only-child) {
116
120
  margin-bottom: var(--gap-2xs);
117
- } .switch__errorMessage_1gmyw {
121
+ } .switch__errorMessage_fs99x {
118
122
  font-size: 14px;
119
123
  line-height: 18px;
120
124
  font-weight: 400;
121
125
  color: var(--switch-error-color);
122
- } .switch__hint_1gmyw {
126
+ } .switch__hint_fs99x {
123
127
  font-size: 14px;
124
128
  line-height: 18px;
125
129
  font-weight: 400;
126
130
  display: block;
127
131
  color: var(--switch-hint-color);
128
- } /* Reversed state */ .switch__component_1gmyw.switch__reversed_1gmyw {
132
+ } /* Reversed state */ .switch__component_fs99x.switch__reversed_fs99x {
129
133
  flex-direction: row-reverse;
130
- } .switch__reversed_1gmyw .switch__content_1gmyw {
134
+ } .switch__reversed_fs99x .switch__content_fs99x {
131
135
  margin-right: var(--gap-m);
132
136
  margin-left: 0;
133
- } .switch__reversed_1gmyw .switch__addons_1gmyw {
137
+ } .switch__reversed_fs99x .switch__addons_fs99x {
134
138
  margin-left: 0;
135
139
  padding-left: 0;
136
140
  margin-right: auto;
137
141
  padding-right: var(--gap-m);
138
- } /* Checked state */ .switch__checked_1gmyw .switch__switch_1gmyw {
142
+ } /* Checked state */ .switch__checked_fs99x .switch__switch_fs99x {
139
143
  background-color: var(--switch-checked-bg-color)
140
- } .switch__checked_1gmyw .switch__switch_1gmyw:hover {
144
+ } .switch__checked_fs99x .switch__switch_fs99x:hover {
141
145
  background-color: var(--switch-checked-hover-bg-color);
142
- } .switch__checked_1gmyw .switch__switch_1gmyw:before {
146
+ } .switch__checked_fs99x .switch__switch_fs99x:before {
143
147
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
144
148
  transform: translateX(16px);
145
- } /* Disabled state */ .switch__disabled_1gmyw {
149
+ } /* Disabled state */ .switch__disabled_fs99x {
146
150
  cursor: var(--disabled-cursor);
147
- } .switch__disabled_1gmyw .switch__switch_1gmyw {
151
+ } .switch__disabled_fs99x .switch__switch_fs99x {
148
152
  background-color: var(--switch-disabled-bg-color)
149
- } .switch__disabled_1gmyw .switch__switch_1gmyw:before {
153
+ } .switch__disabled_fs99x .switch__switch_fs99x:before {
150
154
  background-color: var(--switch-icon-disabled-color);
151
- } .switch__disabled_1gmyw.switch__checked_1gmyw .switch__switch_1gmyw {
155
+ } .switch__disabled_fs99x.switch__checked_fs99x .switch__switch_fs99x {
152
156
  background-color: var(--switch-disabled-checked-bg-color);
153
- } .switch__disabled_1gmyw .switch__label_1gmyw {
157
+ } .switch__disabled_fs99x .switch__label_fs99x {
154
158
  color: var(--switch-disabled-color);
155
- } .switch__disabled_1gmyw .switch__hint_1gmyw {
159
+ } .switch__disabled_fs99x .switch__hint_fs99x {
156
160
  color: var(--switch-disabled-color);
157
- } /* Focused state */ .switch__focused_1gmyw .switch__switch_1gmyw {
161
+ } /* Focused state */ .switch__focused_fs99x .switch__switch_fs99x {
158
162
  outline: 2px solid var(--focus-color);
159
163
  outline-offset: 2px;
160
164
  }
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_1gmyw","start":"switch__start_1gmyw","center":"switch__center_1gmyw","addons":"switch__addons_1gmyw","block":"switch__block_1gmyw","switch":"switch__switch_1gmyw","content":"switch__content_1gmyw","label":"switch__label_1gmyw","errorMessage":"switch__errorMessage_1gmyw","hint":"switch__hint_1gmyw","reversed":"switch__reversed_1gmyw","checked":"switch__checked_1gmyw","disabled":"switch__disabled_1gmyw","focused":"switch__focused_1gmyw"};
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"};
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: 42vxs */
1
+ /* hash: 1q52q */
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);
@@ -21,14 +21,18 @@
21
21
  /* Up */
22
22
 
23
23
  /* Hard up */
24
- } :root {
25
- --border-radius-xl: 16px;
24
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
25
+ --border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
26
26
  --border-radius-circle: 50%;
27
+
28
+ /* новые значения, используйте их */
27
29
  } :root {
28
- --gap-3xs: 2px;
29
- --gap-2xs: 4px;
30
- --gap-s: 12px;
31
- --gap-m: 16px;
30
+ --gap-3xs: 2px; /* deprecated */
31
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
32
+ --gap-s: 12px; /* deprecated */ /* deprecated */
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
+
35
+ /* новые значения, используйте их */
32
36
  } :root {
33
37
  } :root {
34
38
  --focus-color: var(--color-light-status-info);
@@ -57,7 +61,7 @@
57
61
  /* icon */
58
62
  --switch-icon-color: var(--color-static-neutral-0);
59
63
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
60
- } .switch__component_1gmyw {
64
+ } .switch__component_fs99x {
61
65
  display: inline-flex;
62
66
  align-items: flex-start;
63
67
  margin: 0;
@@ -65,20 +69,20 @@
65
69
  border: 0;
66
70
  cursor: pointer;
67
71
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
68
- } .switch__component_1gmyw input {
72
+ } .switch__component_fs99x input {
69
73
  opacity: 0;
70
74
  position: absolute;
71
- } .switch__start_1gmyw {
75
+ } .switch__start_fs99x {
72
76
  align-items: flex-start;
73
- } .switch__center_1gmyw {
77
+ } .switch__center_fs99x {
74
78
  align-items: center;
75
- } .switch__addons_1gmyw {
79
+ } .switch__addons_fs99x {
76
80
  margin-left: auto;
77
81
  padding-left: var(--gap-m);
78
82
  line-height: 24px;
79
- } .switch__block_1gmyw {
83
+ } .switch__block_fs99x {
80
84
  width: 100%;
81
- } .switch__switch_1gmyw {
85
+ } .switch__switch_fs99x {
82
86
  position: relative;
83
87
  border-radius: var(--border-radius-xl);
84
88
  width: 36px;
@@ -89,9 +93,9 @@
89
93
  border: 2px solid var(--switch-border-color);
90
94
  transition: background-color 0.2s ease, border-color 0.2s ease;
91
95
  box-sizing: border-box
92
- } .switch__switch_1gmyw:hover {
96
+ } .switch__switch_fs99x:hover {
93
97
  background-color: var(--switch-hover-bg-color);
94
- } .switch__switch_1gmyw:before {
98
+ } .switch__switch_fs99x:before {
95
99
  content: '';
96
100
  position: absolute;
97
101
  top: 0;
@@ -103,58 +107,58 @@
103
107
  background-color: var(--switch-icon-color);
104
108
  box-sizing: border-box;
105
109
  transition: transform 0.2s ease;
106
- } .switch__content_1gmyw {
110
+ } .switch__content_fs99x {
107
111
  margin-left: var(--gap-s);
108
112
  flex-grow: 1;
109
- } .switch__label_1gmyw {
113
+ } .switch__label_fs99x {
110
114
  font-size: 16px;
111
115
  line-height: 24px;
112
116
  font-weight: 400;
113
117
  display: block;
114
118
  color: var(--switch-label-color);
115
- } .switch__label_1gmyw:not(:only-child) {
119
+ } .switch__label_fs99x:not(:only-child) {
116
120
  margin-bottom: var(--gap-2xs);
117
- } .switch__errorMessage_1gmyw {
121
+ } .switch__errorMessage_fs99x {
118
122
  font-size: 14px;
119
123
  line-height: 18px;
120
124
  font-weight: 400;
121
125
  color: var(--switch-error-color);
122
- } .switch__hint_1gmyw {
126
+ } .switch__hint_fs99x {
123
127
  font-size: 14px;
124
128
  line-height: 18px;
125
129
  font-weight: 400;
126
130
  display: block;
127
131
  color: var(--switch-hint-color);
128
- } /* Reversed state */ .switch__component_1gmyw.switch__reversed_1gmyw {
132
+ } /* Reversed state */ .switch__component_fs99x.switch__reversed_fs99x {
129
133
  flex-direction: row-reverse;
130
- } .switch__reversed_1gmyw .switch__content_1gmyw {
134
+ } .switch__reversed_fs99x .switch__content_fs99x {
131
135
  margin-right: var(--gap-m);
132
136
  margin-left: 0;
133
- } .switch__reversed_1gmyw .switch__addons_1gmyw {
137
+ } .switch__reversed_fs99x .switch__addons_fs99x {
134
138
  margin-left: 0;
135
139
  padding-left: 0;
136
140
  margin-right: auto;
137
141
  padding-right: var(--gap-m);
138
- } /* Checked state */ .switch__checked_1gmyw .switch__switch_1gmyw {
142
+ } /* Checked state */ .switch__checked_fs99x .switch__switch_fs99x {
139
143
  background-color: var(--switch-checked-bg-color)
140
- } .switch__checked_1gmyw .switch__switch_1gmyw:hover {
144
+ } .switch__checked_fs99x .switch__switch_fs99x:hover {
141
145
  background-color: var(--switch-checked-hover-bg-color);
142
- } .switch__checked_1gmyw .switch__switch_1gmyw:before {
146
+ } .switch__checked_fs99x .switch__switch_fs99x:before {
143
147
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
144
148
  transform: translateX(16px);
145
- } /* Disabled state */ .switch__disabled_1gmyw {
149
+ } /* Disabled state */ .switch__disabled_fs99x {
146
150
  cursor: var(--disabled-cursor);
147
- } .switch__disabled_1gmyw .switch__switch_1gmyw {
151
+ } .switch__disabled_fs99x .switch__switch_fs99x {
148
152
  background-color: var(--switch-disabled-bg-color)
149
- } .switch__disabled_1gmyw .switch__switch_1gmyw:before {
153
+ } .switch__disabled_fs99x .switch__switch_fs99x:before {
150
154
  background-color: var(--switch-icon-disabled-color);
151
- } .switch__disabled_1gmyw.switch__checked_1gmyw .switch__switch_1gmyw {
155
+ } .switch__disabled_fs99x.switch__checked_fs99x .switch__switch_fs99x {
152
156
  background-color: var(--switch-disabled-checked-bg-color);
153
- } .switch__disabled_1gmyw .switch__label_1gmyw {
157
+ } .switch__disabled_fs99x .switch__label_fs99x {
154
158
  color: var(--switch-disabled-color);
155
- } .switch__disabled_1gmyw .switch__hint_1gmyw {
159
+ } .switch__disabled_fs99x .switch__hint_fs99x {
156
160
  color: var(--switch-disabled-color);
157
- } /* Focused state */ .switch__focused_1gmyw .switch__switch_1gmyw {
161
+ } /* Focused state */ .switch__focused_fs99x .switch__switch_fs99x {
158
162
  outline: 2px solid var(--focus-color);
159
163
  outline-offset: 2px;
160
164
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.2.4",
3
+ "version": "4.2.5",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -16,9 +16,11 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@alfalab/hooks": "^1.13.0",
19
- "@alfalab/core-components-shared": "^0.11.0",
19
+ "@alfalab/core-components-shared": "^0.12.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.0.1",
25
+ "varsVersion": "9.11.1"
24
26
  }