@alfalab/core-components-switch 3.0.7 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/Component.js +1 -1
  2. package/esm/Component.js +1 -1
  3. package/esm/index.css +26 -26
  4. package/index.css +26 -26
  5. package/modern/Component.js +1 -1
  6. package/modern/index.css +26 -26
  7. package/package.json +1 -1
  8. package/src/Component.tsx +145 -0
  9. package/src/index.module.css +171 -0
  10. package/src/index.ts +1 -0
package/Component.js CHANGED
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
16
 
17
- var styles = {"component":"switch__component_vtete","start":"switch__start_vtete","center":"switch__center_vtete","addons":"switch__addons_vtete","block":"switch__block_vtete","switch":"switch__switch_vtete","content":"switch__content_vtete","label":"switch__label_vtete","hint":"switch__hint_vtete","reversed":"switch__reversed_vtete","checked":"switch__checked_vtete","disabled":"switch__disabled_vtete","inactive":"switch__inactive_vtete","focused":"switch__focused_vtete"};
17
+ var styles = {"component":"switch__component_195dg","start":"switch__start_195dg","center":"switch__center_195dg","addons":"switch__addons_195dg","block":"switch__block_195dg","switch":"switch__switch_195dg","content":"switch__content_195dg","label":"switch__label_195dg","hint":"switch__hint_195dg","reversed":"switch__reversed_195dg","checked":"switch__checked_195dg","disabled":"switch__disabled_195dg","inactive":"switch__inactive_195dg","focused":"switch__focused_195dg"};
18
18
  require('./index.css')
19
19
 
20
20
  var Switch = React.forwardRef(function (_a, ref) {
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
4
4
  import cn from 'classnames';
5
5
  import { useFocus } from '@alfalab/hooks';
6
6
 
7
- var styles = {"component":"switch__component_vtete","start":"switch__start_vtete","center":"switch__center_vtete","addons":"switch__addons_vtete","block":"switch__block_vtete","switch":"switch__switch_vtete","content":"switch__content_vtete","label":"switch__label_vtete","hint":"switch__hint_vtete","reversed":"switch__reversed_vtete","checked":"switch__checked_vtete","disabled":"switch__disabled_vtete","inactive":"switch__inactive_vtete","focused":"switch__focused_vtete"};
7
+ var styles = {"component":"switch__component_195dg","start":"switch__start_195dg","center":"switch__center_195dg","addons":"switch__addons_195dg","block":"switch__block_195dg","switch":"switch__switch_195dg","content":"switch__content_195dg","label":"switch__label_195dg","hint":"switch__hint_195dg","reversed":"switch__reversed_195dg","checked":"switch__checked_195dg","disabled":"switch__disabled_195dg","inactive":"switch__inactive_195dg","focused":"switch__focused_195dg"};
8
8
  require('./index.css')
9
9
 
10
10
  var Switch = forwardRef(function (_a, ref) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1xgwp */
1
+ /* hash: 1bwak */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* inactive */
49
49
  --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_vtete {
50
+ } .switch__component_195dg {
51
51
  display: inline-flex;
52
52
  align-items: flex-start;
53
53
  margin: 0;
@@ -55,20 +55,20 @@
55
55
  border: 0;
56
56
  cursor: pointer;
57
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_vtete input {
58
+ } .switch__component_195dg input {
59
59
  opacity: 0;
60
60
  position: absolute;
61
- } .switch__start_vtete {
61
+ } .switch__start_195dg {
62
62
  align-items: flex-start;
63
- } .switch__center_vtete {
63
+ } .switch__center_195dg {
64
64
  align-items: center;
65
- } .switch__addons_vtete {
65
+ } .switch__addons_195dg {
66
66
  margin-left: auto;
67
67
  padding-left: var(--gap-m);
68
68
  line-height: 24px;
69
- } .switch__block_vtete {
69
+ } .switch__block_195dg {
70
70
  width: 100%;
71
- } .switch__switch_vtete {
71
+ } .switch__switch_195dg {
72
72
  position: relative;
73
73
  border-radius: var(--border-radius-xl);
74
74
  width: 36px;
@@ -79,7 +79,7 @@
79
79
  border: 2px solid var(--switch-border-color);
80
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
81
  box-sizing: border-box;
82
- } .switch__switch_vtete:before {
82
+ } .switch__switch_195dg:before {
83
83
  content: '';
84
84
  position: absolute;
85
85
  top: 0;
@@ -91,56 +91,56 @@
91
91
  background-color: var(--color-static-graphic-light);
92
92
  box-sizing: border-box;
93
93
  transition: transform 0.2s ease;
94
- } .switch__content_vtete {
94
+ } .switch__content_195dg {
95
95
  margin-left: var(--gap-s);
96
96
  flex-grow: 1;
97
- } .switch__label_vtete {
97
+ } .switch__label_195dg {
98
98
  font-size: 16px;
99
99
  line-height: 24px;
100
100
  font-weight: 400;
101
101
  display: block;
102
102
  color: var(--switch-label-color);
103
- } .switch__label_vtete:not(:only-child) {
103
+ } .switch__label_195dg:not(:only-child) {
104
104
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_vtete {
105
+ } .switch__hint_195dg {
106
106
  font-size: 14px;
107
107
  line-height: 18px;
108
108
  font-weight: 400;
109
109
  display: block;
110
110
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_vtete.switch__reversed_vtete {
111
+ } /* Reversed state */ .switch__component_195dg.switch__reversed_195dg {
112
112
  flex-direction: row-reverse;
113
- } .switch__reversed_vtete .switch__content_vtete {
113
+ } .switch__reversed_195dg .switch__content_195dg {
114
114
  margin-right: var(--gap-m);
115
115
  margin-left: 0;
116
- } .switch__reversed_vtete .switch__addons_vtete {
116
+ } .switch__reversed_195dg .switch__addons_195dg {
117
117
  margin-left: 0;
118
118
  padding-left: 0;
119
119
  margin-right: auto;
120
120
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_vtete .switch__switch_vtete {
121
+ } /* Checked state */ .switch__checked_195dg .switch__switch_195dg {
122
122
  background-color: var(--switch-checked-bg-color);
123
123
  border-color: var(--switch-checked-border-color);
124
- } .switch__checked_vtete .switch__switch_vtete:before {
124
+ } .switch__checked_195dg .switch__switch_195dg:before {
125
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
126
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_vtete {
127
+ } /* Disabled state */ .switch__disabled_195dg {
128
128
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_vtete .switch__switch_vtete {
129
+ } .switch__disabled_195dg .switch__switch_195dg {
130
130
  background-color: var(--switch-disabled-bg-color);
131
131
  border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_vtete .switch__label_vtete {
132
+ } .switch__disabled_195dg .switch__label_195dg {
133
133
  color: var(--switch-disabled-color);
134
- } .switch__disabled_vtete .switch__hint_vtete {
134
+ } .switch__disabled_195dg .switch__hint_195dg {
135
135
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_vtete {
136
+ } /* Inactive */ .switch__inactive_195dg {
137
137
  cursor: var(--disabled-cursor);
138
- } .switch__inactive_vtete .switch__switch_vtete {
138
+ } .switch__inactive_195dg .switch__switch_195dg {
139
139
  background-color: var(--switch-disabled-bg-color);
140
140
  border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_vtete .switch__switch_vtete:before {
141
+ } .switch__inactive_195dg .switch__switch_195dg:before {
142
142
  background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_vtete .switch__switch_vtete {
143
+ } /* Focused state */ .switch__focused_195dg .switch__switch_195dg {
144
144
  outline: 2px solid var(--focus-color);
145
145
  outline-offset: 2px;
146
146
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1xgwp */
1
+ /* hash: 1bwak */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* inactive */
49
49
  --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_vtete {
50
+ } .switch__component_195dg {
51
51
  display: inline-flex;
52
52
  align-items: flex-start;
53
53
  margin: 0;
@@ -55,20 +55,20 @@
55
55
  border: 0;
56
56
  cursor: pointer;
57
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_vtete input {
58
+ } .switch__component_195dg input {
59
59
  opacity: 0;
60
60
  position: absolute;
61
- } .switch__start_vtete {
61
+ } .switch__start_195dg {
62
62
  align-items: flex-start;
63
- } .switch__center_vtete {
63
+ } .switch__center_195dg {
64
64
  align-items: center;
65
- } .switch__addons_vtete {
65
+ } .switch__addons_195dg {
66
66
  margin-left: auto;
67
67
  padding-left: var(--gap-m);
68
68
  line-height: 24px;
69
- } .switch__block_vtete {
69
+ } .switch__block_195dg {
70
70
  width: 100%;
71
- } .switch__switch_vtete {
71
+ } .switch__switch_195dg {
72
72
  position: relative;
73
73
  border-radius: var(--border-radius-xl);
74
74
  width: 36px;
@@ -79,7 +79,7 @@
79
79
  border: 2px solid var(--switch-border-color);
80
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
81
  box-sizing: border-box;
82
- } .switch__switch_vtete:before {
82
+ } .switch__switch_195dg:before {
83
83
  content: '';
84
84
  position: absolute;
85
85
  top: 0;
@@ -91,56 +91,56 @@
91
91
  background-color: var(--color-static-graphic-light);
92
92
  box-sizing: border-box;
93
93
  transition: transform 0.2s ease;
94
- } .switch__content_vtete {
94
+ } .switch__content_195dg {
95
95
  margin-left: var(--gap-s);
96
96
  flex-grow: 1;
97
- } .switch__label_vtete {
97
+ } .switch__label_195dg {
98
98
  font-size: 16px;
99
99
  line-height: 24px;
100
100
  font-weight: 400;
101
101
  display: block;
102
102
  color: var(--switch-label-color);
103
- } .switch__label_vtete:not(:only-child) {
103
+ } .switch__label_195dg:not(:only-child) {
104
104
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_vtete {
105
+ } .switch__hint_195dg {
106
106
  font-size: 14px;
107
107
  line-height: 18px;
108
108
  font-weight: 400;
109
109
  display: block;
110
110
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_vtete.switch__reversed_vtete {
111
+ } /* Reversed state */ .switch__component_195dg.switch__reversed_195dg {
112
112
  flex-direction: row-reverse;
113
- } .switch__reversed_vtete .switch__content_vtete {
113
+ } .switch__reversed_195dg .switch__content_195dg {
114
114
  margin-right: var(--gap-m);
115
115
  margin-left: 0;
116
- } .switch__reversed_vtete .switch__addons_vtete {
116
+ } .switch__reversed_195dg .switch__addons_195dg {
117
117
  margin-left: 0;
118
118
  padding-left: 0;
119
119
  margin-right: auto;
120
120
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_vtete .switch__switch_vtete {
121
+ } /* Checked state */ .switch__checked_195dg .switch__switch_195dg {
122
122
  background-color: var(--switch-checked-bg-color);
123
123
  border-color: var(--switch-checked-border-color);
124
- } .switch__checked_vtete .switch__switch_vtete:before {
124
+ } .switch__checked_195dg .switch__switch_195dg:before {
125
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
126
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_vtete {
127
+ } /* Disabled state */ .switch__disabled_195dg {
128
128
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_vtete .switch__switch_vtete {
129
+ } .switch__disabled_195dg .switch__switch_195dg {
130
130
  background-color: var(--switch-disabled-bg-color);
131
131
  border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_vtete .switch__label_vtete {
132
+ } .switch__disabled_195dg .switch__label_195dg {
133
133
  color: var(--switch-disabled-color);
134
- } .switch__disabled_vtete .switch__hint_vtete {
134
+ } .switch__disabled_195dg .switch__hint_195dg {
135
135
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_vtete {
136
+ } /* Inactive */ .switch__inactive_195dg {
137
137
  cursor: var(--disabled-cursor);
138
- } .switch__inactive_vtete .switch__switch_vtete {
138
+ } .switch__inactive_195dg .switch__switch_195dg {
139
139
  background-color: var(--switch-disabled-bg-color);
140
140
  border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_vtete .switch__switch_vtete:before {
141
+ } .switch__inactive_195dg .switch__switch_195dg:before {
142
142
  background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_vtete .switch__switch_vtete {
143
+ } /* Focused state */ .switch__focused_195dg .switch__switch_195dg {
144
144
  outline: 2px solid var(--focus-color);
145
145
  outline-offset: 2px;
146
146
  }
package/modern/Component.js CHANGED
@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
4
  import { useFocus } from '@alfalab/hooks';
5
5
 
6
- const styles = {"component":"switch__component_vtete","start":"switch__start_vtete","center":"switch__center_vtete","addons":"switch__addons_vtete","block":"switch__block_vtete","switch":"switch__switch_vtete","content":"switch__content_vtete","label":"switch__label_vtete","hint":"switch__hint_vtete","reversed":"switch__reversed_vtete","checked":"switch__checked_vtete","disabled":"switch__disabled_vtete","inactive":"switch__inactive_vtete","focused":"switch__focused_vtete"};
6
+ const styles = {"component":"switch__component_195dg","start":"switch__start_195dg","center":"switch__center_195dg","addons":"switch__addons_195dg","block":"switch__block_195dg","switch":"switch__switch_195dg","content":"switch__content_195dg","label":"switch__label_195dg","hint":"switch__hint_195dg","reversed":"switch__reversed_195dg","checked":"switch__checked_195dg","disabled":"switch__disabled_195dg","inactive":"switch__inactive_195dg","focused":"switch__focused_195dg"};
7
7
  require('./index.css')
8
8
 
9
9
  const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1xgwp */
1
+ /* hash: 1bwak */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* inactive */
49
49
  --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_vtete {
50
+ } .switch__component_195dg {
51
51
  display: inline-flex;
52
52
  align-items: flex-start;
53
53
  margin: 0;
@@ -55,20 +55,20 @@
55
55
  border: 0;
56
56
  cursor: pointer;
57
57
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_vtete input {
58
+ } .switch__component_195dg input {
59
59
  opacity: 0;
60
60
  position: absolute;
61
- } .switch__start_vtete {
61
+ } .switch__start_195dg {
62
62
  align-items: flex-start;
63
- } .switch__center_vtete {
63
+ } .switch__center_195dg {
64
64
  align-items: center;
65
- } .switch__addons_vtete {
65
+ } .switch__addons_195dg {
66
66
  margin-left: auto;
67
67
  padding-left: var(--gap-m);
68
68
  line-height: 24px;
69
- } .switch__block_vtete {
69
+ } .switch__block_195dg {
70
70
  width: 100%;
71
- } .switch__switch_vtete {
71
+ } .switch__switch_195dg {
72
72
  position: relative;
73
73
  border-radius: var(--border-radius-xl);
74
74
  width: 36px;
@@ -79,7 +79,7 @@
79
79
  border: 2px solid var(--switch-border-color);
80
80
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
81
  box-sizing: border-box;
82
- } .switch__switch_vtete:before {
82
+ } .switch__switch_195dg:before {
83
83
  content: '';
84
84
  position: absolute;
85
85
  top: 0;
@@ -91,56 +91,56 @@
91
91
  background-color: var(--color-static-graphic-light);
92
92
  box-sizing: border-box;
93
93
  transition: transform 0.2s ease;
94
- } .switch__content_vtete {
94
+ } .switch__content_195dg {
95
95
  margin-left: var(--gap-s);
96
96
  flex-grow: 1;
97
- } .switch__label_vtete {
97
+ } .switch__label_195dg {
98
98
  font-size: 16px;
99
99
  line-height: 24px;
100
100
  font-weight: 400;
101
101
  display: block;
102
102
  color: var(--switch-label-color);
103
- } .switch__label_vtete:not(:only-child) {
103
+ } .switch__label_195dg:not(:only-child) {
104
104
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_vtete {
105
+ } .switch__hint_195dg {
106
106
  font-size: 14px;
107
107
  line-height: 18px;
108
108
  font-weight: 400;
109
109
  display: block;
110
110
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_vtete.switch__reversed_vtete {
111
+ } /* Reversed state */ .switch__component_195dg.switch__reversed_195dg {
112
112
  flex-direction: row-reverse;
113
- } .switch__reversed_vtete .switch__content_vtete {
113
+ } .switch__reversed_195dg .switch__content_195dg {
114
114
  margin-right: var(--gap-m);
115
115
  margin-left: 0;
116
- } .switch__reversed_vtete .switch__addons_vtete {
116
+ } .switch__reversed_195dg .switch__addons_195dg {
117
117
  margin-left: 0;
118
118
  padding-left: 0;
119
119
  margin-right: auto;
120
120
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_vtete .switch__switch_vtete {
121
+ } /* Checked state */ .switch__checked_195dg .switch__switch_195dg {
122
122
  background-color: var(--switch-checked-bg-color);
123
123
  border-color: var(--switch-checked-border-color);
124
- } .switch__checked_vtete .switch__switch_vtete:before {
124
+ } .switch__checked_195dg .switch__switch_195dg:before {
125
125
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
126
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_vtete {
127
+ } /* Disabled state */ .switch__disabled_195dg {
128
128
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_vtete .switch__switch_vtete {
129
+ } .switch__disabled_195dg .switch__switch_195dg {
130
130
  background-color: var(--switch-disabled-bg-color);
131
131
  border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_vtete .switch__label_vtete {
132
+ } .switch__disabled_195dg .switch__label_195dg {
133
133
  color: var(--switch-disabled-color);
134
- } .switch__disabled_vtete .switch__hint_vtete {
134
+ } .switch__disabled_195dg .switch__hint_195dg {
135
135
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_vtete {
136
+ } /* Inactive */ .switch__inactive_195dg {
137
137
  cursor: var(--disabled-cursor);
138
- } .switch__inactive_vtete .switch__switch_vtete {
138
+ } .switch__inactive_195dg .switch__switch_195dg {
139
139
  background-color: var(--switch-disabled-bg-color);
140
140
  border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_vtete .switch__switch_vtete:before {
141
+ } .switch__inactive_195dg .switch__switch_195dg:before {
142
142
  background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_vtete .switch__switch_vtete {
143
+ } /* Focused state */ .switch__focused_195dg .switch__switch_195dg {
144
144
  outline: 2px solid var(--focus-color);
145
145
  outline-offset: 2px;
146
146
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "3.0.7",
3
+ "version": "3.1.0",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
package/src/Component.tsx ADDED
@@ -0,0 +1,145 @@
1
+ import React, { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
2
+ import mergeRefs from 'react-merge-refs';
3
+ import cn from 'classnames';
4
+
5
+ import { useFocus } from '@alfalab/hooks';
6
+
7
+ import styles from './index.module.css';
8
+
9
+ type Align = 'start' | 'center';
10
+
11
+ export type SwitchProps = Omit<
12
+ InputHTMLAttributes<HTMLInputElement>,
13
+ 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'
14
+ > & {
15
+ /**
16
+ * Управление состоянием вкл/выкл компонента
17
+ */
18
+ checked?: boolean;
19
+
20
+ /**
21
+ * Текст подписи к переключателю
22
+ */
23
+ label?: ReactNode;
24
+
25
+ /**
26
+ * Текст подсказки снизу
27
+ */
28
+ hint?: ReactNode;
29
+
30
+ /**
31
+ * Переключатель будет отрисован справа от контента
32
+ */
33
+ reversed?: boolean;
34
+
35
+ /**
36
+ * Выравнивание
37
+ */
38
+ align?: Align;
39
+
40
+ /**
41
+ * Дополнительный слот
42
+ */
43
+ addons?: React.ReactNode;
44
+
45
+ /**
46
+ * Растягивать ли компонент на всю ширину
47
+ */
48
+ block?: boolean;
49
+
50
+ /**
51
+ * Управление состоянием включен / выключен
52
+ */
53
+ disabled?: boolean;
54
+
55
+ /**
56
+ * Управление состоянием активен / неактивен
57
+ */
58
+ inactive?: boolean;
59
+
60
+ /**
61
+ * Обработчик переключения компонента
62
+ */
63
+ onChange?: (
64
+ event: ChangeEvent<HTMLInputElement>,
65
+ payload: {
66
+ checked: boolean;
67
+ name: InputHTMLAttributes<HTMLInputElement>['name'];
68
+ },
69
+ ) => void;
70
+
71
+ /**
72
+ * Идентификатор для систем автоматизированного тестирования
73
+ */
74
+ dataTestId?: string;
75
+ };
76
+
77
+ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
78
+ (
79
+ {
80
+ reversed = false,
81
+ checked = false,
82
+ align = 'start',
83
+ addons,
84
+ block,
85
+ disabled,
86
+ inactive,
87
+ label,
88
+ hint,
89
+ name,
90
+ value,
91
+ className,
92
+ onChange,
93
+ dataTestId,
94
+ ...restProps
95
+ },
96
+ ref,
97
+ ) => {
98
+ const labelRef = useRef<HTMLLabelElement>(null);
99
+
100
+ const [focused] = useFocus(labelRef, 'keyboard');
101
+
102
+ const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
103
+ if (onChange) {
104
+ onChange(e, { checked: e.target.checked, name });
105
+ }
106
+ };
107
+
108
+ return (
109
+ // eslint-disable-next-line jsx-a11y/label-has-associated-control
110
+ <label
111
+ className={cn(styles.component, styles[align], className, {
112
+ [styles.disabled]: disabled,
113
+ [styles.inactive]: inactive,
114
+ [styles.checked]: checked,
115
+ [styles.reversed]: reversed,
116
+ [styles.focused]: focused,
117
+ [styles.block]: block,
118
+ })}
119
+ ref={mergeRefs([labelRef, ref])}
120
+ >
121
+ <input
122
+ type='checkbox'
123
+ onChange={handleChange}
124
+ disabled={disabled || inactive}
125
+ checked={checked}
126
+ name={name}
127
+ value={value}
128
+ data-test-id={dataTestId}
129
+ {...restProps}
130
+ />
131
+
132
+ <span className={styles.switch} />
133
+
134
+ {(label || hint) && (
135
+ <span className={styles.content}>
136
+ {label && <span className={styles.label}>{label}</span>}
137
+ {hint && <span className={styles.hint}>{hint}</span>}
138
+ </span>
139
+ )}
140
+
141
+ {addons && <span className={styles.addons}>{addons}</span>}
142
+ </label>
143
+ );
144
+ },
145
+ );
package/src/index.module.css ADDED
@@ -0,0 +1,171 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
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-graphic-secondary);
7
+ --switch-border-color: var(--color-light-graphic-secondary);
8
+
9
+ /* checked */
10
+ --switch-checked-bg-color: var(--color-light-graphic-accent);
11
+ --switch-checked-border-color: var(--color-light-graphic-accent);
12
+
13
+ /* disabled */
14
+ --switch-disabled-color: var(--color-light-text-secondary);
15
+ --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
16
+ --switch-disabled-border-color: var(--color-light-graphic-quaternary);
17
+
18
+ /* inactive */
19
+ --switch-inactive-color: var(--color-light-border-underline);
20
+ }
21
+
22
+ .component {
23
+ display: inline-flex;
24
+ align-items: flex-start;
25
+ margin: 0;
26
+ padding: 0;
27
+ border: 0;
28
+ cursor: pointer;
29
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
30
+ }
31
+
32
+ .component input {
33
+ opacity: 0;
34
+ position: absolute;
35
+ }
36
+
37
+ .start {
38
+ align-items: flex-start;
39
+ }
40
+
41
+ .center {
42
+ align-items: center;
43
+ }
44
+
45
+ .addons {
46
+ margin-left: auto;
47
+ padding-left: var(--gap-m);
48
+ line-height: 24px;
49
+ }
50
+
51
+ .block {
52
+ width: 100%;
53
+ }
54
+
55
+ .switch {
56
+ position: relative;
57
+ border-radius: var(--border-radius-xl);
58
+ width: 36px;
59
+ height: 20px;
60
+ margin: var(--gap-3xs);
61
+ flex-shrink: 0;
62
+ background-color: var(--switch-bg-color);
63
+ border: 2px solid var(--switch-border-color);
64
+ transition: background-color 0.2s ease, border-color 0.2s ease;
65
+ box-sizing: border-box;
66
+ }
67
+
68
+ .switch:before {
69
+ content: '';
70
+ position: absolute;
71
+ top: 0;
72
+ left: 0;
73
+ display: block;
74
+ width: 16px;
75
+ height: 16px;
76
+ border-radius: var(--border-radius-circle);
77
+ background-color: var(--color-static-graphic-light);
78
+ box-sizing: border-box;
79
+ transition: transform 0.2s ease;
80
+ }
81
+
82
+ .content {
83
+ margin-left: var(--gap-s);
84
+ flex-grow: 1;
85
+ }
86
+
87
+ .label {
88
+ @mixin paragraph_primary_medium;
89
+ display: block;
90
+ color: var(--switch-label-color);
91
+ }
92
+
93
+ .label:not(:only-child) {
94
+ margin-bottom: var(--gap-2xs);
95
+ }
96
+
97
+ .hint {
98
+ @mixin paragraph_component_secondary;
99
+ display: block;
100
+ color: var(--switch-hint-color);
101
+ }
102
+
103
+ /* Reversed state */
104
+
105
+ .component.reversed {
106
+ flex-direction: row-reverse;
107
+ }
108
+
109
+ .reversed .content {
110
+ margin-right: var(--gap-m);
111
+ margin-left: 0;
112
+ }
113
+
114
+ .reversed .addons {
115
+ margin-left: 0;
116
+ padding-left: 0;
117
+ margin-right: auto;
118
+ padding-right: var(--gap-m);
119
+ }
120
+
121
+ /* Checked state */
122
+
123
+ .checked .switch {
124
+ background-color: var(--switch-checked-bg-color);
125
+ border-color: var(--switch-checked-border-color);
126
+ }
127
+
128
+ .checked .switch:before {
129
+ /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
130
+ transform: translateX(16px);
131
+ }
132
+
133
+ /* Disabled state */
134
+
135
+ .disabled {
136
+ cursor: var(--disabled-cursor);
137
+ }
138
+
139
+ .disabled .switch {
140
+ background-color: var(--switch-disabled-bg-color);
141
+ border-color: var(--switch-disabled-border-color);
142
+ }
143
+
144
+ .disabled .label {
145
+ color: var(--switch-disabled-color);
146
+ }
147
+
148
+ .disabled .hint {
149
+ color: var(--switch-disabled-color);
150
+ }
151
+
152
+ /* Inactive */
153
+
154
+ .inactive {
155
+ cursor: var(--disabled-cursor);
156
+ }
157
+
158
+ .inactive .switch {
159
+ background-color: var(--switch-disabled-bg-color);
160
+ border-color: var(--switch-disabled-border-color);
161
+
162
+ &:before {
163
+ background-color: var(--switch-inactive-color);
164
+ }
165
+ }
166
+
167
+ /* Focused state */
168
+
169
+ .focused .switch {
170
+ @mixin focus-outline;
171
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';