@alfalab/core-components-switch 3.2.0 → 4.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 (19) hide show
  1. package/Component.d.ts +4 -0
  2. package/Component.js +7 -7
  3. package/cssm/Component.d.ts +4 -0
  4. package/cssm/Component.js +6 -6
  5. package/cssm/index.js +1 -0
  6. package/cssm/index.module.css +38 -31
  7. package/esm/Component.d.ts +4 -0
  8. package/esm/Component.js +7 -7
  9. package/esm/index.css +58 -51
  10. package/esm/index.js +1 -0
  11. package/index.css +58 -51
  12. package/index.js +1 -0
  13. package/modern/Component.d.ts +4 -0
  14. package/modern/Component.js +7 -7
  15. package/modern/index.css +58 -51
  16. package/modern/index.js +1 -0
  17. package/package.json +2 -1
  18. package/src/Component.tsx +10 -4
  19. package/src/index.module.css +31 -26
package/Component.d.ts CHANGED
@@ -36,6 +36,8 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
36
36
  */
37
37
  disabled?: boolean;
38
38
  /**
39
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
40
+ * Используйте props disabled
39
41
  * Управление состоянием активен / неактивен
40
42
  */
41
43
  inactive?: boolean;
@@ -85,6 +87,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
85
87
  */
86
88
  disabled?: boolean | undefined;
87
89
  /**
90
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
91
+ * Используйте props disabled
88
92
  * Управление состоянием активен / неактивен
89
93
  */
90
94
  inactive?: boolean | undefined;
package/Component.js CHANGED
@@ -6,6 +6,7 @@ var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
+ var coreComponentsShared = require('@alfalab/core-components-shared');
9
10
  var hooks = require('@alfalab/hooks');
10
11
 
11
12
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -14,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
15
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
15
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
17
 
17
- var styles = {"component":"switch__component_xxcqg","start":"switch__start_xxcqg","center":"switch__center_xxcqg","addons":"switch__addons_xxcqg","block":"switch__block_xxcqg","switch":"switch__switch_xxcqg","content":"switch__content_xxcqg","label":"switch__label_xxcqg","hint":"switch__hint_xxcqg","reversed":"switch__reversed_xxcqg","checked":"switch__checked_xxcqg","disabled":"switch__disabled_xxcqg","inactive":"switch__inactive_xxcqg","focused":"switch__focused_xxcqg"};
18
+ var styles = {"component":"switch__component_pizcd","start":"switch__start_pizcd","center":"switch__center_pizcd","addons":"switch__addons_pizcd","block":"switch__block_pizcd","switch":"switch__switch_pizcd","content":"switch__content_pizcd","label":"switch__label_pizcd","hint":"switch__hint_pizcd","reversed":"switch__reversed_pizcd","checked":"switch__checked_pizcd","disabled":"switch__disabled_pizcd","focused":"switch__focused_pizcd"};
18
19
  require('./index.css')
19
20
 
20
21
  var Switch = React.forwardRef(function (_a, ref) {
@@ -27,11 +28,8 @@ var Switch = React.forwardRef(function (_a, ref) {
27
28
  onChange(e, { checked: e.target.checked, name: name });
28
29
  }
29
30
  };
30
- return (
31
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
32
- React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
33
- _b[styles.disabled] = disabled,
34
- _b[styles.inactive] = inactive,
31
+ return (React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
32
+ _b[styles.disabled] = disabled || inactive,
35
33
  _b[styles.checked] = checked,
36
34
  _b[styles.reversed] = reversed,
37
35
  _b[styles.focused] = focused,
@@ -42,7 +40,9 @@ var Switch = React.forwardRef(function (_a, ref) {
42
40
  (label || hint) && (React__default.default.createElement("span", { className: styles.content },
43
41
  label && React__default.default.createElement("span", { className: styles.label }, label),
44
42
  hint && React__default.default.createElement("span", { className: styles.hint }, hint))),
45
- addons && React__default.default.createElement("span", { className: styles.addons }, addons)));
43
+ addons && (
44
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
45
+ React__default.default.createElement("span", { className: styles.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
46
46
  });
47
47
 
48
48
  exports.Switch = Switch;
package/cssm/Component.d.ts CHANGED
@@ -36,6 +36,8 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
36
36
  */
37
37
  disabled?: boolean;
38
38
  /**
39
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
40
+ * Используйте props disabled
39
41
  * Управление состоянием активен / неактивен
40
42
  */
41
43
  inactive?: boolean;
@@ -85,6 +87,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
85
87
  */
86
88
  disabled?: boolean | undefined;
87
89
  /**
90
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
91
+ * Используйте props disabled
88
92
  * Управление состоянием активен / неактивен
89
93
  */
90
94
  inactive?: boolean | undefined;
package/cssm/Component.js CHANGED
@@ -6,6 +6,7 @@ var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
+ var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
9
10
  var hooks = require('@alfalab/hooks');
10
11
  var styles = require('./index.module.css');
11
12
 
@@ -26,11 +27,8 @@ var Switch = React.forwardRef(function (_a, ref) {
26
27
  onChange(e, { checked: e.target.checked, name: name });
27
28
  }
28
29
  };
29
- return (
30
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
31
- React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
32
- _b[styles__default.default.disabled] = disabled,
33
- _b[styles__default.default.inactive] = inactive,
30
+ return (React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
31
+ _b[styles__default.default.disabled] = disabled || inactive,
34
32
  _b[styles__default.default.checked] = checked,
35
33
  _b[styles__default.default.reversed] = reversed,
36
34
  _b[styles__default.default.focused] = focused,
@@ -41,7 +39,9 @@ var Switch = React.forwardRef(function (_a, ref) {
41
39
  (label || hint) && (React__default.default.createElement("span", { className: styles__default.default.content },
42
40
  label && React__default.default.createElement("span", { className: styles__default.default.label }, label),
43
41
  hint && React__default.default.createElement("span", { className: styles__default.default.hint }, hint))),
44
- addons && React__default.default.createElement("span", { className: styles__default.default.addons }, addons)));
42
+ addons && (
43
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
44
+ React__default.default.createElement("span", { className: styles__default.default.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
45
45
  });
46
46
 
47
47
  exports.Switch = Switch;
package/cssm/index.js CHANGED
@@ -7,6 +7,7 @@ require('tslib');
7
7
  require('react');
8
8
  require('react-merge-refs');
9
9
  require('classnames');
10
+ require('@alfalab/core-components-shared/cssm');
10
11
  require('@alfalab/hooks');
11
12
  require('./index.module.css');
12
13
 
package/cssm/index.module.css CHANGED
@@ -1,13 +1,15 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
- --color-light-border-link: #0072ef;
4
- --color-light-border-underline: #c5c5c7;
5
- --color-light-graphic-positive: #2fc26e;
6
- --color-light-graphic-quaternary: #dcdcdd;
7
- --color-light-graphic-secondary: #86868a;
3
+ --color-light-border-link: #2288fa;
4
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
5
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
6
+ --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
7
+ --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
8
+ --color-light-status-positive: #0cc44d;
9
+ --color-light-status-positive-hover: #04b545;
8
10
  --color-light-text-primary: #0e0e0e;
9
- --color-light-text-secondary: rgba(60, 60, 67, 0.66);
10
- --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
11
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55);
12
+ --color-static-neutral-1500-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
11
13
  } :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 */
12
14
  } :root {
13
15
  } :root {
@@ -32,20 +34,26 @@
32
34
  } :root {
33
35
  --switch-label-color: var(--color-light-text-primary);
34
36
  --switch-hint-color: var(--color-light-text-secondary);
35
- --switch-bg-color: var(--color-light-graphic-secondary);
36
- --switch-border-color: var(--color-light-graphic-secondary);
37
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
38
+ --switch-border-color: transparent;
39
+
40
+ /* hover */
41
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
37
42
 
38
43
  /* checked */
39
- --switch-checked-bg-color: var(--color-light-graphic-positive);
40
- --switch-checked-border-color: transparent;
44
+ --switch-checked-bg-color: var(--color-light-status-positive);
45
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
41
46
 
42
47
  /* disabled */
43
48
  --switch-disabled-color: var(--color-light-text-secondary);
44
- --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
45
- --switch-disabled-border-color: var(--color-light-graphic-quaternary);
49
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
50
+
51
+ /* disabled checked */
52
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
46
53
 
47
- /* inactive */
48
- --switch-inactive-color: var(--color-light-border-underline);
54
+ /* icon */
55
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
56
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
49
57
  } .component {
50
58
  display: inline-flex;
51
59
  align-items: flex-start;
@@ -77,8 +85,10 @@
77
85
  background-color: var(--switch-bg-color);
78
86
  border: 2px solid var(--switch-border-color);
79
87
  transition: background-color 0.2s ease, border-color 0.2s ease;
80
- box-sizing: border-box;
81
- } .switch:before {
88
+ box-sizing: border-box
89
+ } .switch:hover {
90
+ background-color: var(--switch-hover-bg-color);
91
+ } .switch:before {
82
92
  content: '';
83
93
  position: absolute;
84
94
  top: 0;
@@ -87,7 +97,7 @@
87
97
  width: 16px;
88
98
  height: 16px;
89
99
  border-radius: var(--border-radius-circle);
90
- background-color: var(--color-static-graphic-light);
100
+ background-color: var(--switch-icon-color);
91
101
  box-sizing: border-box;
92
102
  transition: transform 0.2s ease;
93
103
  } .content {
@@ -118,28 +128,25 @@
118
128
  margin-right: auto;
119
129
  padding-right: var(--gap-m);
120
130
  } /* Checked state */ .checked .switch {
121
- background-color: var(--switch-checked-bg-color);
122
- border-color: var(--switch-checked-border-color);
123
- } .checked .switch:before {
131
+ background-color: var(--switch-checked-bg-color)
132
+ } .checked .switch:hover {
133
+ background-color: var(--switch-checked-hover-bg-color);
134
+ } .checked .switch:before {
124
135
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
125
136
  transform: translateX(16px);
126
137
  } /* Disabled state */ .disabled {
127
138
  cursor: var(--disabled-cursor);
128
139
  } .disabled .switch {
129
- background-color: var(--switch-disabled-bg-color);
130
- border-color: var(--switch-disabled-border-color);
140
+ background-color: var(--switch-disabled-bg-color)
141
+ } .disabled .switch:before {
142
+ background-color: var(--switch-icon-disabled-color);
143
+ } .disabled.checked .switch {
144
+ background-color: var(--switch-disabled-checked-bg-color);
131
145
  } .disabled .label {
132
146
  color: var(--switch-disabled-color);
133
147
  } .disabled .hint {
134
148
  color: var(--switch-disabled-color);
135
- } /* Inactive */ .inactive {
136
- cursor: var(--disabled-cursor);
137
- } .inactive .switch {
138
- background-color: var(--switch-disabled-bg-color);
139
- border-color: var(--switch-disabled-border-color)
140
- } .inactive .switch:before {
141
- background-color: var(--switch-inactive-color);
142
- } /* Focused state */ .focused .switch {
149
+ } /* Focused state */ .focused .switch {
143
150
  outline: 2px solid var(--focus-color);
144
151
  outline-offset: 2px;
145
152
  }
package/esm/Component.d.ts CHANGED
@@ -36,6 +36,8 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
36
36
  */
37
37
  disabled?: boolean;
38
38
  /**
39
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
40
+ * Используйте props disabled
39
41
  * Управление состоянием активен / неактивен
40
42
  */
41
43
  inactive?: boolean;
@@ -85,6 +87,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
85
87
  */
86
88
  disabled?: boolean | undefined;
87
89
  /**
90
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
91
+ * Используйте props disabled
88
92
  * Управление состоянием активен / неактивен
89
93
  */
90
94
  inactive?: boolean | undefined;
package/esm/Component.js CHANGED
@@ -2,9 +2,10 @@ import { __rest, __assign } from 'tslib';
2
2
  import React, { forwardRef, useRef } from 'react';
3
3
  import mergeRefs from 'react-merge-refs';
4
4
  import cn from 'classnames';
5
+ import { dom } from '@alfalab/core-components-shared/esm';
5
6
  import { useFocus } from '@alfalab/hooks';
6
7
 
7
- var styles = {"component":"switch__component_xxcqg","start":"switch__start_xxcqg","center":"switch__center_xxcqg","addons":"switch__addons_xxcqg","block":"switch__block_xxcqg","switch":"switch__switch_xxcqg","content":"switch__content_xxcqg","label":"switch__label_xxcqg","hint":"switch__hint_xxcqg","reversed":"switch__reversed_xxcqg","checked":"switch__checked_xxcqg","disabled":"switch__disabled_xxcqg","inactive":"switch__inactive_xxcqg","focused":"switch__focused_xxcqg"};
8
+ var styles = {"component":"switch__component_pizcd","start":"switch__start_pizcd","center":"switch__center_pizcd","addons":"switch__addons_pizcd","block":"switch__block_pizcd","switch":"switch__switch_pizcd","content":"switch__content_pizcd","label":"switch__label_pizcd","hint":"switch__hint_pizcd","reversed":"switch__reversed_pizcd","checked":"switch__checked_pizcd","disabled":"switch__disabled_pizcd","focused":"switch__focused_pizcd"};
8
9
  require('./index.css')
9
10
 
10
11
  var Switch = forwardRef(function (_a, ref) {
@@ -17,11 +18,8 @@ var Switch = forwardRef(function (_a, ref) {
17
18
  onChange(e, { checked: e.target.checked, name: name });
18
19
  }
19
20
  };
20
- return (
21
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
22
- React.createElement("label", { className: cn(styles.component, styles[align], className, (_b = {},
23
- _b[styles.disabled] = disabled,
24
- _b[styles.inactive] = inactive,
21
+ return (React.createElement("label", { className: cn(styles.component, styles[align], className, (_b = {},
22
+ _b[styles.disabled] = disabled || inactive,
25
23
  _b[styles.checked] = checked,
26
24
  _b[styles.reversed] = reversed,
27
25
  _b[styles.focused] = focused,
@@ -32,7 +30,9 @@ var Switch = forwardRef(function (_a, ref) {
32
30
  (label || hint) && (React.createElement("span", { className: styles.content },
33
31
  label && React.createElement("span", { className: styles.label }, label),
34
32
  hint && React.createElement("span", { className: styles.hint }, hint))),
35
- addons && React.createElement("span", { className: styles.addons }, addons)));
33
+ addons && (
34
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
35
+ React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
36
36
  });
37
37
 
38
38
  export { Switch };
package/esm/index.css CHANGED
@@ -1,14 +1,16 @@
1
- /* hash: 4rfss */
1
+ /* hash: s9zic */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #0072ef;
5
- --color-light-border-underline: #c5c5c7;
6
- --color-light-graphic-positive: #2fc26e;
7
- --color-light-graphic-quaternary: #dcdcdd;
8
- --color-light-graphic-secondary: #86868a;
4
+ --color-light-border-link: #2288fa;
5
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
6
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
7
+ --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
8
+ --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
9
+ --color-light-status-positive: #0cc44d;
10
+ --color-light-status-positive-hover: #04b545;
9
11
  --color-light-text-primary: #0e0e0e;
10
- --color-light-text-secondary: rgba(60, 60, 67, 0.66);
11
- --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
+ --color-static-neutral-1500-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
14
  } :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 */
13
15
  } :root {
14
16
  } :root {
@@ -33,21 +35,27 @@
33
35
  } :root {
34
36
  --switch-label-color: var(--color-light-text-primary);
35
37
  --switch-hint-color: var(--color-light-text-secondary);
36
- --switch-bg-color: var(--color-light-graphic-secondary);
37
- --switch-border-color: var(--color-light-graphic-secondary);
38
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
39
+ --switch-border-color: transparent;
40
+
41
+ /* hover */
42
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
38
43
 
39
44
  /* checked */
40
- --switch-checked-bg-color: var(--color-light-graphic-positive);
41
- --switch-checked-border-color: transparent;
45
+ --switch-checked-bg-color: var(--color-light-status-positive);
46
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
42
47
 
43
48
  /* disabled */
44
49
  --switch-disabled-color: var(--color-light-text-secondary);
45
- --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
46
- --switch-disabled-border-color: var(--color-light-graphic-quaternary);
50
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
51
+
52
+ /* disabled checked */
53
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
47
54
 
48
- /* inactive */
49
- --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_xxcqg {
55
+ /* icon */
56
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
+ } .switch__component_pizcd {
51
59
  display: inline-flex;
52
60
  align-items: flex-start;
53
61
  margin: 0;
@@ -55,20 +63,20 @@
55
63
  border: 0;
56
64
  cursor: pointer;
57
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_xxcqg input {
66
+ } .switch__component_pizcd input {
59
67
  opacity: 0;
60
68
  position: absolute;
61
- } .switch__start_xxcqg {
69
+ } .switch__start_pizcd {
62
70
  align-items: flex-start;
63
- } .switch__center_xxcqg {
71
+ } .switch__center_pizcd {
64
72
  align-items: center;
65
- } .switch__addons_xxcqg {
73
+ } .switch__addons_pizcd {
66
74
  margin-left: auto;
67
75
  padding-left: var(--gap-m);
68
76
  line-height: 24px;
69
- } .switch__block_xxcqg {
77
+ } .switch__block_pizcd {
70
78
  width: 100%;
71
- } .switch__switch_xxcqg {
79
+ } .switch__switch_pizcd {
72
80
  position: relative;
73
81
  border-radius: var(--border-radius-xl);
74
82
  width: 36px;
@@ -78,8 +86,10 @@
78
86
  background-color: var(--switch-bg-color);
79
87
  border: 2px solid var(--switch-border-color);
80
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
- box-sizing: border-box;
82
- } .switch__switch_xxcqg:before {
89
+ box-sizing: border-box
90
+ } .switch__switch_pizcd:hover {
91
+ background-color: var(--switch-hover-bg-color);
92
+ } .switch__switch_pizcd:before {
83
93
  content: '';
84
94
  position: absolute;
85
95
  top: 0;
@@ -88,59 +98,56 @@
88
98
  width: 16px;
89
99
  height: 16px;
90
100
  border-radius: var(--border-radius-circle);
91
- background-color: var(--color-static-graphic-light);
101
+ background-color: var(--switch-icon-color);
92
102
  box-sizing: border-box;
93
103
  transition: transform 0.2s ease;
94
- } .switch__content_xxcqg {
104
+ } .switch__content_pizcd {
95
105
  margin-left: var(--gap-s);
96
106
  flex-grow: 1;
97
- } .switch__label_xxcqg {
107
+ } .switch__label_pizcd {
98
108
  font-size: 16px;
99
109
  line-height: 24px;
100
110
  font-weight: 400;
101
111
  display: block;
102
112
  color: var(--switch-label-color);
103
- } .switch__label_xxcqg:not(:only-child) {
113
+ } .switch__label_pizcd:not(:only-child) {
104
114
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_xxcqg {
115
+ } .switch__hint_pizcd {
106
116
  font-size: 14px;
107
117
  line-height: 18px;
108
118
  font-weight: 400;
109
119
  display: block;
110
120
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_xxcqg.switch__reversed_xxcqg {
121
+ } /* Reversed state */ .switch__component_pizcd.switch__reversed_pizcd {
112
122
  flex-direction: row-reverse;
113
- } .switch__reversed_xxcqg .switch__content_xxcqg {
123
+ } .switch__reversed_pizcd .switch__content_pizcd {
114
124
  margin-right: var(--gap-m);
115
125
  margin-left: 0;
116
- } .switch__reversed_xxcqg .switch__addons_xxcqg {
126
+ } .switch__reversed_pizcd .switch__addons_pizcd {
117
127
  margin-left: 0;
118
128
  padding-left: 0;
119
129
  margin-right: auto;
120
130
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_xxcqg .switch__switch_xxcqg {
122
- background-color: var(--switch-checked-bg-color);
123
- border-color: var(--switch-checked-border-color);
124
- } .switch__checked_xxcqg .switch__switch_xxcqg:before {
131
+ } /* Checked state */ .switch__checked_pizcd .switch__switch_pizcd {
132
+ background-color: var(--switch-checked-bg-color)
133
+ } .switch__checked_pizcd .switch__switch_pizcd:hover {
134
+ background-color: var(--switch-checked-hover-bg-color);
135
+ } .switch__checked_pizcd .switch__switch_pizcd:before {
125
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
137
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_xxcqg {
138
+ } /* Disabled state */ .switch__disabled_pizcd {
128
139
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_xxcqg .switch__switch_xxcqg {
130
- background-color: var(--switch-disabled-bg-color);
131
- border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_xxcqg .switch__label_xxcqg {
140
+ } .switch__disabled_pizcd .switch__switch_pizcd {
141
+ background-color: var(--switch-disabled-bg-color)
142
+ } .switch__disabled_pizcd .switch__switch_pizcd:before {
143
+ background-color: var(--switch-icon-disabled-color);
144
+ } .switch__disabled_pizcd.switch__checked_pizcd .switch__switch_pizcd {
145
+ background-color: var(--switch-disabled-checked-bg-color);
146
+ } .switch__disabled_pizcd .switch__label_pizcd {
133
147
  color: var(--switch-disabled-color);
134
- } .switch__disabled_xxcqg .switch__hint_xxcqg {
148
+ } .switch__disabled_pizcd .switch__hint_pizcd {
135
149
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_xxcqg {
137
- cursor: var(--disabled-cursor);
138
- } .switch__inactive_xxcqg .switch__switch_xxcqg {
139
- background-color: var(--switch-disabled-bg-color);
140
- border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_xxcqg .switch__switch_xxcqg:before {
142
- background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_xxcqg .switch__switch_xxcqg {
150
+ } /* Focused state */ .switch__focused_pizcd .switch__switch_pizcd {
144
151
  outline: 2px solid var(--focus-color);
145
152
  outline-offset: 2px;
146
153
  }
package/esm/index.js CHANGED
@@ -3,4 +3,5 @@ import 'tslib';
3
3
  import 'react';
4
4
  import 'react-merge-refs';
5
5
  import 'classnames';
6
+ import '@alfalab/core-components-shared/esm';
6
7
  import '@alfalab/hooks';
package/index.css CHANGED
@@ -1,14 +1,16 @@
1
- /* hash: 4rfss */
1
+ /* hash: s9zic */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #0072ef;
5
- --color-light-border-underline: #c5c5c7;
6
- --color-light-graphic-positive: #2fc26e;
7
- --color-light-graphic-quaternary: #dcdcdd;
8
- --color-light-graphic-secondary: #86868a;
4
+ --color-light-border-link: #2288fa;
5
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
6
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
7
+ --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
8
+ --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
9
+ --color-light-status-positive: #0cc44d;
10
+ --color-light-status-positive-hover: #04b545;
9
11
  --color-light-text-primary: #0e0e0e;
10
- --color-light-text-secondary: rgba(60, 60, 67, 0.66);
11
- --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
+ --color-static-neutral-1500-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
14
  } :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 */
13
15
  } :root {
14
16
  } :root {
@@ -33,21 +35,27 @@
33
35
  } :root {
34
36
  --switch-label-color: var(--color-light-text-primary);
35
37
  --switch-hint-color: var(--color-light-text-secondary);
36
- --switch-bg-color: var(--color-light-graphic-secondary);
37
- --switch-border-color: var(--color-light-graphic-secondary);
38
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
39
+ --switch-border-color: transparent;
40
+
41
+ /* hover */
42
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
38
43
 
39
44
  /* checked */
40
- --switch-checked-bg-color: var(--color-light-graphic-positive);
41
- --switch-checked-border-color: transparent;
45
+ --switch-checked-bg-color: var(--color-light-status-positive);
46
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
42
47
 
43
48
  /* disabled */
44
49
  --switch-disabled-color: var(--color-light-text-secondary);
45
- --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
46
- --switch-disabled-border-color: var(--color-light-graphic-quaternary);
50
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
51
+
52
+ /* disabled checked */
53
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
47
54
 
48
- /* inactive */
49
- --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_xxcqg {
55
+ /* icon */
56
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
+ } .switch__component_pizcd {
51
59
  display: inline-flex;
52
60
  align-items: flex-start;
53
61
  margin: 0;
@@ -55,20 +63,20 @@
55
63
  border: 0;
56
64
  cursor: pointer;
57
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_xxcqg input {
66
+ } .switch__component_pizcd input {
59
67
  opacity: 0;
60
68
  position: absolute;
61
- } .switch__start_xxcqg {
69
+ } .switch__start_pizcd {
62
70
  align-items: flex-start;
63
- } .switch__center_xxcqg {
71
+ } .switch__center_pizcd {
64
72
  align-items: center;
65
- } .switch__addons_xxcqg {
73
+ } .switch__addons_pizcd {
66
74
  margin-left: auto;
67
75
  padding-left: var(--gap-m);
68
76
  line-height: 24px;
69
- } .switch__block_xxcqg {
77
+ } .switch__block_pizcd {
70
78
  width: 100%;
71
- } .switch__switch_xxcqg {
79
+ } .switch__switch_pizcd {
72
80
  position: relative;
73
81
  border-radius: var(--border-radius-xl);
74
82
  width: 36px;
@@ -78,8 +86,10 @@
78
86
  background-color: var(--switch-bg-color);
79
87
  border: 2px solid var(--switch-border-color);
80
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
- box-sizing: border-box;
82
- } .switch__switch_xxcqg:before {
89
+ box-sizing: border-box
90
+ } .switch__switch_pizcd:hover {
91
+ background-color: var(--switch-hover-bg-color);
92
+ } .switch__switch_pizcd:before {
83
93
  content: '';
84
94
  position: absolute;
85
95
  top: 0;
@@ -88,59 +98,56 @@
88
98
  width: 16px;
89
99
  height: 16px;
90
100
  border-radius: var(--border-radius-circle);
91
- background-color: var(--color-static-graphic-light);
101
+ background-color: var(--switch-icon-color);
92
102
  box-sizing: border-box;
93
103
  transition: transform 0.2s ease;
94
- } .switch__content_xxcqg {
104
+ } .switch__content_pizcd {
95
105
  margin-left: var(--gap-s);
96
106
  flex-grow: 1;
97
- } .switch__label_xxcqg {
107
+ } .switch__label_pizcd {
98
108
  font-size: 16px;
99
109
  line-height: 24px;
100
110
  font-weight: 400;
101
111
  display: block;
102
112
  color: var(--switch-label-color);
103
- } .switch__label_xxcqg:not(:only-child) {
113
+ } .switch__label_pizcd:not(:only-child) {
104
114
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_xxcqg {
115
+ } .switch__hint_pizcd {
106
116
  font-size: 14px;
107
117
  line-height: 18px;
108
118
  font-weight: 400;
109
119
  display: block;
110
120
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_xxcqg.switch__reversed_xxcqg {
121
+ } /* Reversed state */ .switch__component_pizcd.switch__reversed_pizcd {
112
122
  flex-direction: row-reverse;
113
- } .switch__reversed_xxcqg .switch__content_xxcqg {
123
+ } .switch__reversed_pizcd .switch__content_pizcd {
114
124
  margin-right: var(--gap-m);
115
125
  margin-left: 0;
116
- } .switch__reversed_xxcqg .switch__addons_xxcqg {
126
+ } .switch__reversed_pizcd .switch__addons_pizcd {
117
127
  margin-left: 0;
118
128
  padding-left: 0;
119
129
  margin-right: auto;
120
130
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_xxcqg .switch__switch_xxcqg {
122
- background-color: var(--switch-checked-bg-color);
123
- border-color: var(--switch-checked-border-color);
124
- } .switch__checked_xxcqg .switch__switch_xxcqg:before {
131
+ } /* Checked state */ .switch__checked_pizcd .switch__switch_pizcd {
132
+ background-color: var(--switch-checked-bg-color)
133
+ } .switch__checked_pizcd .switch__switch_pizcd:hover {
134
+ background-color: var(--switch-checked-hover-bg-color);
135
+ } .switch__checked_pizcd .switch__switch_pizcd:before {
125
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
137
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_xxcqg {
138
+ } /* Disabled state */ .switch__disabled_pizcd {
128
139
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_xxcqg .switch__switch_xxcqg {
130
- background-color: var(--switch-disabled-bg-color);
131
- border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_xxcqg .switch__label_xxcqg {
140
+ } .switch__disabled_pizcd .switch__switch_pizcd {
141
+ background-color: var(--switch-disabled-bg-color)
142
+ } .switch__disabled_pizcd .switch__switch_pizcd:before {
143
+ background-color: var(--switch-icon-disabled-color);
144
+ } .switch__disabled_pizcd.switch__checked_pizcd .switch__switch_pizcd {
145
+ background-color: var(--switch-disabled-checked-bg-color);
146
+ } .switch__disabled_pizcd .switch__label_pizcd {
133
147
  color: var(--switch-disabled-color);
134
- } .switch__disabled_xxcqg .switch__hint_xxcqg {
148
+ } .switch__disabled_pizcd .switch__hint_pizcd {
135
149
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_xxcqg {
137
- cursor: var(--disabled-cursor);
138
- } .switch__inactive_xxcqg .switch__switch_xxcqg {
139
- background-color: var(--switch-disabled-bg-color);
140
- border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_xxcqg .switch__switch_xxcqg:before {
142
- background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_xxcqg .switch__switch_xxcqg {
150
+ } /* Focused state */ .switch__focused_pizcd .switch__switch_pizcd {
144
151
  outline: 2px solid var(--focus-color);
145
152
  outline-offset: 2px;
146
153
  }
package/index.js CHANGED
@@ -7,6 +7,7 @@ require('tslib');
7
7
  require('react');
8
8
  require('react-merge-refs');
9
9
  require('classnames');
10
+ require('@alfalab/core-components-shared');
10
11
  require('@alfalab/hooks');
11
12
 
12
13
 
package/modern/Component.d.ts CHANGED
@@ -36,6 +36,8 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
36
36
  */
37
37
  disabled?: boolean;
38
38
  /**
39
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
40
+ * Используйте props disabled
39
41
  * Управление состоянием активен / неактивен
40
42
  */
41
43
  inactive?: boolean;
@@ -85,6 +87,8 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
85
87
  */
86
88
  disabled?: boolean | undefined;
87
89
  /**
90
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
91
+ * Используйте props disabled
88
92
  * Управление состоянием активен / неактивен
89
93
  */
90
94
  inactive?: boolean | undefined;
package/modern/Component.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import React, { forwardRef, useRef } from 'react';
2
2
  import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
+ import { dom } from '@alfalab/core-components-shared/modern';
4
5
  import { useFocus } from '@alfalab/hooks';
5
6
 
6
- const styles = {"component":"switch__component_xxcqg","start":"switch__start_xxcqg","center":"switch__center_xxcqg","addons":"switch__addons_xxcqg","block":"switch__block_xxcqg","switch":"switch__switch_xxcqg","content":"switch__content_xxcqg","label":"switch__label_xxcqg","hint":"switch__hint_xxcqg","reversed":"switch__reversed_xxcqg","checked":"switch__checked_xxcqg","disabled":"switch__disabled_xxcqg","inactive":"switch__inactive_xxcqg","focused":"switch__focused_xxcqg"};
7
+ const styles = {"component":"switch__component_pizcd","start":"switch__start_pizcd","center":"switch__center_pizcd","addons":"switch__addons_pizcd","block":"switch__block_pizcd","switch":"switch__switch_pizcd","content":"switch__content_pizcd","label":"switch__label_pizcd","hint":"switch__hint_pizcd","reversed":"switch__reversed_pizcd","checked":"switch__checked_pizcd","disabled":"switch__disabled_pizcd","focused":"switch__focused_pizcd"};
7
8
  require('./index.css')
8
9
 
9
10
  const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
@@ -14,11 +15,8 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
14
15
  onChange(e, { checked: e.target.checked, name });
15
16
  }
16
17
  };
17
- return (
18
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
19
- React.createElement("label", { className: cn(styles.component, styles[align], className, {
20
- [styles.disabled]: disabled,
21
- [styles.inactive]: inactive,
18
+ return (React.createElement("label", { className: cn(styles.component, styles[align], className, {
19
+ [styles.disabled]: disabled || inactive,
22
20
  [styles.checked]: checked,
23
21
  [styles.reversed]: reversed,
24
22
  [styles.focused]: focused,
@@ -29,7 +27,9 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
29
27
  (label || hint) && (React.createElement("span", { className: styles.content },
30
28
  label && React.createElement("span", { className: styles.label }, label),
31
29
  hint && React.createElement("span", { className: styles.hint }, hint))),
32
- addons && React.createElement("span", { className: styles.addons }, addons)));
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
33
  });
34
34
 
35
35
  export { Switch };
package/modern/index.css CHANGED
@@ -1,14 +1,16 @@
1
- /* hash: 4rfss */
1
+ /* hash: s9zic */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #0072ef;
5
- --color-light-border-underline: #c5c5c7;
6
- --color-light-graphic-positive: #2fc26e;
7
- --color-light-graphic-quaternary: #dcdcdd;
8
- --color-light-graphic-secondary: #86868a;
4
+ --color-light-border-link: #2288fa;
5
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
6
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
7
+ --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
8
+ --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
9
+ --color-light-status-positive: #0cc44d;
10
+ --color-light-status-positive-hover: #04b545;
9
11
  --color-light-text-primary: #0e0e0e;
10
- --color-light-text-secondary: rgba(60, 60, 67, 0.66);
11
- --color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
+ --color-static-neutral-1500-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
14
  } :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 */
13
15
  } :root {
14
16
  } :root {
@@ -33,21 +35,27 @@
33
35
  } :root {
34
36
  --switch-label-color: var(--color-light-text-primary);
35
37
  --switch-hint-color: var(--color-light-text-secondary);
36
- --switch-bg-color: var(--color-light-graphic-secondary);
37
- --switch-border-color: var(--color-light-graphic-secondary);
38
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
39
+ --switch-border-color: transparent;
40
+
41
+ /* hover */
42
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
38
43
 
39
44
  /* checked */
40
- --switch-checked-bg-color: var(--color-light-graphic-positive);
41
- --switch-checked-border-color: transparent;
45
+ --switch-checked-bg-color: var(--color-light-status-positive);
46
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
42
47
 
43
48
  /* disabled */
44
49
  --switch-disabled-color: var(--color-light-text-secondary);
45
- --switch-disabled-bg-color: var(--color-light-graphic-quaternary);
46
- --switch-disabled-border-color: var(--color-light-graphic-quaternary);
50
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
51
+
52
+ /* disabled checked */
53
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
47
54
 
48
- /* inactive */
49
- --switch-inactive-color: var(--color-light-border-underline);
50
- } .switch__component_xxcqg {
55
+ /* icon */
56
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
+ } .switch__component_pizcd {
51
59
  display: inline-flex;
52
60
  align-items: flex-start;
53
61
  margin: 0;
@@ -55,20 +63,20 @@
55
63
  border: 0;
56
64
  cursor: pointer;
57
65
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
58
- } .switch__component_xxcqg input {
66
+ } .switch__component_pizcd input {
59
67
  opacity: 0;
60
68
  position: absolute;
61
- } .switch__start_xxcqg {
69
+ } .switch__start_pizcd {
62
70
  align-items: flex-start;
63
- } .switch__center_xxcqg {
71
+ } .switch__center_pizcd {
64
72
  align-items: center;
65
- } .switch__addons_xxcqg {
73
+ } .switch__addons_pizcd {
66
74
  margin-left: auto;
67
75
  padding-left: var(--gap-m);
68
76
  line-height: 24px;
69
- } .switch__block_xxcqg {
77
+ } .switch__block_pizcd {
70
78
  width: 100%;
71
- } .switch__switch_xxcqg {
79
+ } .switch__switch_pizcd {
72
80
  position: relative;
73
81
  border-radius: var(--border-radius-xl);
74
82
  width: 36px;
@@ -78,8 +86,10 @@
78
86
  background-color: var(--switch-bg-color);
79
87
  border: 2px solid var(--switch-border-color);
80
88
  transition: background-color 0.2s ease, border-color 0.2s ease;
81
- box-sizing: border-box;
82
- } .switch__switch_xxcqg:before {
89
+ box-sizing: border-box
90
+ } .switch__switch_pizcd:hover {
91
+ background-color: var(--switch-hover-bg-color);
92
+ } .switch__switch_pizcd:before {
83
93
  content: '';
84
94
  position: absolute;
85
95
  top: 0;
@@ -88,59 +98,56 @@
88
98
  width: 16px;
89
99
  height: 16px;
90
100
  border-radius: var(--border-radius-circle);
91
- background-color: var(--color-static-graphic-light);
101
+ background-color: var(--switch-icon-color);
92
102
  box-sizing: border-box;
93
103
  transition: transform 0.2s ease;
94
- } .switch__content_xxcqg {
104
+ } .switch__content_pizcd {
95
105
  margin-left: var(--gap-s);
96
106
  flex-grow: 1;
97
- } .switch__label_xxcqg {
107
+ } .switch__label_pizcd {
98
108
  font-size: 16px;
99
109
  line-height: 24px;
100
110
  font-weight: 400;
101
111
  display: block;
102
112
  color: var(--switch-label-color);
103
- } .switch__label_xxcqg:not(:only-child) {
113
+ } .switch__label_pizcd:not(:only-child) {
104
114
  margin-bottom: var(--gap-2xs);
105
- } .switch__hint_xxcqg {
115
+ } .switch__hint_pizcd {
106
116
  font-size: 14px;
107
117
  line-height: 18px;
108
118
  font-weight: 400;
109
119
  display: block;
110
120
  color: var(--switch-hint-color);
111
- } /* Reversed state */ .switch__component_xxcqg.switch__reversed_xxcqg {
121
+ } /* Reversed state */ .switch__component_pizcd.switch__reversed_pizcd {
112
122
  flex-direction: row-reverse;
113
- } .switch__reversed_xxcqg .switch__content_xxcqg {
123
+ } .switch__reversed_pizcd .switch__content_pizcd {
114
124
  margin-right: var(--gap-m);
115
125
  margin-left: 0;
116
- } .switch__reversed_xxcqg .switch__addons_xxcqg {
126
+ } .switch__reversed_pizcd .switch__addons_pizcd {
117
127
  margin-left: 0;
118
128
  padding-left: 0;
119
129
  margin-right: auto;
120
130
  padding-right: var(--gap-m);
121
- } /* Checked state */ .switch__checked_xxcqg .switch__switch_xxcqg {
122
- background-color: var(--switch-checked-bg-color);
123
- border-color: var(--switch-checked-border-color);
124
- } .switch__checked_xxcqg .switch__switch_xxcqg:before {
131
+ } /* Checked state */ .switch__checked_pizcd .switch__switch_pizcd {
132
+ background-color: var(--switch-checked-bg-color)
133
+ } .switch__checked_pizcd .switch__switch_pizcd:hover {
134
+ background-color: var(--switch-checked-hover-bg-color);
135
+ } .switch__checked_pizcd .switch__switch_pizcd:before {
125
136
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
126
137
  transform: translateX(16px);
127
- } /* Disabled state */ .switch__disabled_xxcqg {
138
+ } /* Disabled state */ .switch__disabled_pizcd {
128
139
  cursor: var(--disabled-cursor);
129
- } .switch__disabled_xxcqg .switch__switch_xxcqg {
130
- background-color: var(--switch-disabled-bg-color);
131
- border-color: var(--switch-disabled-border-color);
132
- } .switch__disabled_xxcqg .switch__label_xxcqg {
140
+ } .switch__disabled_pizcd .switch__switch_pizcd {
141
+ background-color: var(--switch-disabled-bg-color)
142
+ } .switch__disabled_pizcd .switch__switch_pizcd:before {
143
+ background-color: var(--switch-icon-disabled-color);
144
+ } .switch__disabled_pizcd.switch__checked_pizcd .switch__switch_pizcd {
145
+ background-color: var(--switch-disabled-checked-bg-color);
146
+ } .switch__disabled_pizcd .switch__label_pizcd {
133
147
  color: var(--switch-disabled-color);
134
- } .switch__disabled_xxcqg .switch__hint_xxcqg {
148
+ } .switch__disabled_pizcd .switch__hint_pizcd {
135
149
  color: var(--switch-disabled-color);
136
- } /* Inactive */ .switch__inactive_xxcqg {
137
- cursor: var(--disabled-cursor);
138
- } .switch__inactive_xxcqg .switch__switch_xxcqg {
139
- background-color: var(--switch-disabled-bg-color);
140
- border-color: var(--switch-disabled-border-color)
141
- } .switch__inactive_xxcqg .switch__switch_xxcqg:before {
142
- background-color: var(--switch-inactive-color);
143
- } /* Focused state */ .switch__focused_xxcqg .switch__switch_xxcqg {
150
+ } /* Focused state */ .switch__focused_pizcd .switch__switch_pizcd {
144
151
  outline: 2px solid var(--focus-color);
145
152
  outline-offset: 2px;
146
153
  }
package/modern/index.js CHANGED
@@ -2,4 +2,5 @@ export { Switch } from './Component.js';
2
2
  import 'react';
3
3
  import 'react-merge-refs';
4
4
  import 'classnames';
5
+ import '@alfalab/core-components-shared/modern';
5
6
  import '@alfalab/hooks';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "3.2.0",
3
+ "version": "4.1.0",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -16,6 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@alfalab/hooks": "^1.13.0",
19
+ "@alfalab/core-components-shared": "^0.9.0",
19
20
  "classnames": "^2.3.1",
20
21
  "react-merge-refs": "^1.1.0",
21
22
  "tslib": "^2.4.0"
package/src/Component.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode, useRef
2
2
  import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
4
 
5
+ import { dom } from '@alfalab/core-components-shared';
5
6
  import { useFocus } from '@alfalab/hooks';
6
7
 
7
8
  import styles from './index.module.css';
@@ -53,6 +54,8 @@ export type SwitchProps = Omit<
53
54
  disabled?: boolean;
54
55
 
55
56
  /**
57
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
58
+ * Используйте props disabled
56
59
  * Управление состоянием активен / неактивен
57
60
  */
58
61
  inactive?: boolean;
@@ -106,11 +109,9 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
106
109
  };
107
110
 
108
111
  return (
109
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
110
112
  <label
111
113
  className={cn(styles.component, styles[align], className, {
112
- [styles.disabled]: disabled,
113
- [styles.inactive]: inactive,
114
+ [styles.disabled]: disabled || inactive,
114
115
  [styles.checked]: checked,
115
116
  [styles.reversed]: reversed,
116
117
  [styles.focused]: focused,
@@ -138,7 +139,12 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
138
139
  </span>
139
140
  )}
140
141
 
141
- {addons && <span className={styles.addons}>{addons}</span>}
142
+ {addons && (
143
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
144
+ <span className={styles.addons} onClick={dom.preventDefault}>
145
+ {addons}
146
+ </span>
147
+ )}
142
148
  </label>
143
149
  );
144
150
  },
package/src/index.module.css CHANGED
@@ -3,20 +3,26 @@
3
3
  :root {
4
4
  --switch-label-color: var(--color-light-text-primary);
5
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);
6
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
7
+ --switch-border-color: transparent;
8
+
9
+ /* hover */
10
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
8
11
 
9
12
  /* checked */
10
- --switch-checked-bg-color: var(--color-light-graphic-positive);
11
- --switch-checked-border-color: transparent;
13
+ --switch-checked-bg-color: var(--color-light-status-positive);
14
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
12
15
 
13
16
  /* disabled */
14
17
  --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);
18
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
19
+
20
+ /* disabled checked */
21
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
17
22
 
18
- /* inactive */
19
- --switch-inactive-color: var(--color-light-border-underline);
23
+ /* icon */
24
+ --switch-icon-color: var(--color-static-neutral-1500-inverted);
25
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
20
26
  }
21
27
 
22
28
  .component {
@@ -63,6 +69,10 @@
63
69
  border: 2px solid var(--switch-border-color);
64
70
  transition: background-color 0.2s ease, border-color 0.2s ease;
65
71
  box-sizing: border-box;
72
+
73
+ &:hover {
74
+ background-color: var(--switch-hover-bg-color);
75
+ }
66
76
  }
67
77
 
68
78
  .switch:before {
@@ -74,7 +84,7 @@
74
84
  width: 16px;
75
85
  height: 16px;
76
86
  border-radius: var(--border-radius-circle);
77
- background-color: var(--color-static-graphic-light);
87
+ background-color: var(--switch-icon-color);
78
88
  box-sizing: border-box;
79
89
  transition: transform 0.2s ease;
80
90
  }
@@ -122,7 +132,10 @@
122
132
 
123
133
  .checked .switch {
124
134
  background-color: var(--switch-checked-bg-color);
125
- border-color: var(--switch-checked-border-color);
135
+
136
+ &:hover {
137
+ background-color: var(--switch-checked-hover-bg-color);
138
+ }
126
139
  }
127
140
 
128
141
  .checked .switch:before {
@@ -138,7 +151,14 @@
138
151
 
139
152
  .disabled .switch {
140
153
  background-color: var(--switch-disabled-bg-color);
141
- border-color: var(--switch-disabled-border-color);
154
+
155
+ &:before {
156
+ background-color: var(--switch-icon-disabled-color);
157
+ }
158
+ }
159
+
160
+ .disabled.checked .switch {
161
+ background-color: var(--switch-disabled-checked-bg-color);
142
162
  }
143
163
 
144
164
  .disabled .label {
@@ -149,21 +169,6 @@
149
169
  color: var(--switch-disabled-color);
150
170
  }
151
171
 
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
172
  /* Focused state */
168
173
 
169
174
  .focused .switch {