@alfalab/core-components-switch 4.1.2 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/Component.d.ts +8 -0
  2. package/Component.js +6 -4
  3. package/cssm/Component.d.ts +8 -0
  4. package/cssm/Component.js +5 -3
  5. package/cssm/index.js +0 -7
  6. package/cssm/index.module.css +9 -2
  7. package/esm/Component.d.ts +8 -0
  8. package/esm/Component.js +6 -4
  9. package/esm/index.css +36 -29
  10. package/esm/index.js +0 -6
  11. package/index.css +36 -29
  12. package/index.js +0 -6
  13. package/modern/Component.d.ts +8 -0
  14. package/modern/Component.js +6 -4
  15. package/modern/index.css +36 -29
  16. package/modern/index.js +0 -5
  17. package/package.json +2 -2
  18. package/src/Component.tsx +16 -2
  19. package/src/index.module.css +6 -0
package/Component.d.ts CHANGED
@@ -41,6 +41,10 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
41
41
  * Управление состоянием активен / неактивен
42
42
  */
43
43
  inactive?: boolean;
44
+ /**
45
+ * Отображение ошибки
46
+ */
47
+ error?: ReactNode | boolean;
44
48
  /**
45
49
  * Обработчик переключения компонента
46
50
  */
@@ -92,6 +96,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
92
96
  * Управление состоянием активен / неактивен
93
97
  */
94
98
  inactive?: boolean | undefined;
99
+ /**
100
+ * Отображение ошибки
101
+ */
102
+ error?: ReactNode | boolean;
95
103
  /**
96
104
  * Обработчик переключения компонента
97
105
  */
package/Component.js CHANGED
@@ -15,12 +15,12 @@ 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_1n62k","start":"switch__start_1n62k","center":"switch__center_1n62k","addons":"switch__addons_1n62k","block":"switch__block_1n62k","switch":"switch__switch_1n62k","content":"switch__content_1n62k","label":"switch__label_1n62k","hint":"switch__hint_1n62k","reversed":"switch__reversed_1n62k","checked":"switch__checked_1n62k","disabled":"switch__disabled_1n62k","focused":"switch__focused_1n62k"};
18
+ var styles = {"component":"switch__component_qqnq9","start":"switch__start_qqnq9","center":"switch__center_qqnq9","addons":"switch__addons_qqnq9","block":"switch__block_qqnq9","switch":"switch__switch_qqnq9","content":"switch__content_qqnq9","label":"switch__label_qqnq9","errorMessage":"switch__errorMessage_qqnq9","hint":"switch__hint_qqnq9","reversed":"switch__reversed_qqnq9","checked":"switch__checked_qqnq9","disabled":"switch__disabled_qqnq9","focused":"switch__focused_qqnq9"};
19
19
  require('./index.css')
20
20
 
21
21
  var Switch = React.forwardRef(function (_a, ref) {
22
22
  var _b;
23
- var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
23
+ var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
24
24
  var labelRef = React.useRef(null);
25
25
  var focused = hooks.useFocus(labelRef, 'keyboard')[0];
26
26
  var handleChange = function (e) {
@@ -28,6 +28,7 @@ var Switch = React.forwardRef(function (_a, ref) {
28
28
  onChange(e, { checked: e.target.checked, name: name });
29
29
  }
30
30
  };
31
+ var errorMessage = typeof error === 'boolean' ? '' : error;
31
32
  return (React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
32
33
  _b[styles.disabled] = disabled || inactive,
33
34
  _b[styles.checked] = checked,
@@ -37,9 +38,10 @@ var Switch = React.forwardRef(function (_a, ref) {
37
38
  _b)), ref: mergeRefs__default.default([labelRef, ref]) },
38
39
  React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
39
40
  React__default.default.createElement("span", { className: styles.switch }),
40
- (label || hint) && (React__default.default.createElement("span", { className: styles.content },
41
+ (label || hint || errorMessage) && (React__default.default.createElement("span", { className: styles.content },
41
42
  label && React__default.default.createElement("span", { className: styles.label }, label),
42
- hint && React__default.default.createElement("span", { className: styles.hint }, hint))),
43
+ hint && !errorMessage && React__default.default.createElement("span", { className: styles.hint }, hint),
44
+ errorMessage && (React__default.default.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
43
45
  addons && (
44
46
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
45
47
  React__default.default.createElement("span", { className: styles.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
package/cssm/Component.d.ts CHANGED
@@ -41,6 +41,10 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
41
41
  * Управление состоянием активен / неактивен
42
42
  */
43
43
  inactive?: boolean;
44
+ /**
45
+ * Отображение ошибки
46
+ */
47
+ error?: ReactNode | boolean;
44
48
  /**
45
49
  * Обработчик переключения компонента
46
50
  */
@@ -92,6 +96,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
92
96
  * Управление состоянием активен / неактивен
93
97
  */
94
98
  inactive?: boolean | undefined;
99
+ /**
100
+ * Отображение ошибки
101
+ */
102
+ error?: ReactNode | boolean;
95
103
  /**
96
104
  * Обработчик переключения компонента
97
105
  */
package/cssm/Component.js CHANGED
@@ -19,7 +19,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
19
19
 
20
20
  var Switch = React.forwardRef(function (_a, ref) {
21
21
  var _b;
22
- var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
22
+ var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
23
23
  var labelRef = React.useRef(null);
24
24
  var focused = hooks.useFocus(labelRef, 'keyboard')[0];
25
25
  var handleChange = function (e) {
@@ -27,6 +27,7 @@ var Switch = React.forwardRef(function (_a, ref) {
27
27
  onChange(e, { checked: e.target.checked, name: name });
28
28
  }
29
29
  };
30
+ var errorMessage = typeof error === 'boolean' ? '' : error;
30
31
  return (React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
31
32
  _b[styles__default.default.disabled] = disabled || inactive,
32
33
  _b[styles__default.default.checked] = checked,
@@ -36,9 +37,10 @@ var Switch = React.forwardRef(function (_a, ref) {
36
37
  _b)), ref: mergeRefs__default.default([labelRef, ref]) },
37
38
  React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
38
39
  React__default.default.createElement("span", { className: styles__default.default.switch }),
39
- (label || hint) && (React__default.default.createElement("span", { className: styles__default.default.content },
40
+ (label || hint || errorMessage) && (React__default.default.createElement("span", { className: styles__default.default.content },
40
41
  label && React__default.default.createElement("span", { className: styles__default.default.label }, label),
41
- hint && React__default.default.createElement("span", { className: styles__default.default.hint }, hint))),
42
+ hint && !errorMessage && React__default.default.createElement("span", { className: styles__default.default.hint }, hint),
43
+ errorMessage && (React__default.default.createElement("span", { className: styles__default.default.errorMessage, role: 'alert' }, errorMessage)))),
42
44
  addons && (
43
45
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
44
46
  React__default.default.createElement("span", { className: styles__default.default.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
package/cssm/index.js CHANGED
@@ -3,13 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
- require('tslib');
7
- require('react');
8
- require('react-merge-refs');
9
- require('classnames');
10
- require('@alfalab/core-components-shared/cssm');
11
- require('@alfalab/hooks');
12
- require('./index.module.css');
13
6
 
14
7
 
15
8
 
package/cssm/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ :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 */
2
2
  } /* deprecated */ :root {
3
3
  --color-light-border-link: #2288fa;
4
4
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -7,7 +7,8 @@
7
7
  --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
8
8
  --color-light-status-positive: #0cc44d;
9
9
  --color-light-status-positive-hover: #04b545;
10
- --color-light-text-primary: #0e0e0e;
10
+ --color-light-text-negative: #ec2d20;
11
+ --color-light-text-primary: rgba(3, 3, 6, 0.88);
11
12
  --color-light-text-secondary: rgba(4, 4, 19, 0.55);
12
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 */
13
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 */
@@ -36,6 +37,7 @@
36
37
  --switch-hint-color: var(--color-light-text-secondary);
37
38
  --switch-bg-color: var(--color-light-neutral-translucent-700);
38
39
  --switch-border-color: transparent;
40
+ --switch-error-color: var(--color-light-text-negative);
39
41
 
40
42
  /* hover */
41
43
  --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
@@ -111,6 +113,11 @@
111
113
  color: var(--switch-label-color);
112
114
  } .label:not(:only-child) {
113
115
  margin-bottom: var(--gap-2xs);
116
+ } .errorMessage {
117
+ font-size: 14px;
118
+ line-height: 18px;
119
+ font-weight: 400;
120
+ color: var(--switch-error-color);
114
121
  } .hint {
115
122
  font-size: 14px;
116
123
  line-height: 18px;
package/esm/Component.d.ts CHANGED
@@ -41,6 +41,10 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
41
41
  * Управление состоянием активен / неактивен
42
42
  */
43
43
  inactive?: boolean;
44
+ /**
45
+ * Отображение ошибки
46
+ */
47
+ error?: ReactNode | boolean;
44
48
  /**
45
49
  * Обработчик переключения компонента
46
50
  */
@@ -92,6 +96,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
92
96
  * Управление состоянием активен / неактивен
93
97
  */
94
98
  inactive?: boolean | undefined;
99
+ /**
100
+ * Отображение ошибки
101
+ */
102
+ error?: ReactNode | boolean;
95
103
  /**
96
104
  * Обработчик переключения компонента
97
105
  */
package/esm/Component.js CHANGED
@@ -5,12 +5,12 @@ 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_1n62k","start":"switch__start_1n62k","center":"switch__center_1n62k","addons":"switch__addons_1n62k","block":"switch__block_1n62k","switch":"switch__switch_1n62k","content":"switch__content_1n62k","label":"switch__label_1n62k","hint":"switch__hint_1n62k","reversed":"switch__reversed_1n62k","checked":"switch__checked_1n62k","disabled":"switch__disabled_1n62k","focused":"switch__focused_1n62k"};
8
+ var styles = {"component":"switch__component_qqnq9","start":"switch__start_qqnq9","center":"switch__center_qqnq9","addons":"switch__addons_qqnq9","block":"switch__block_qqnq9","switch":"switch__switch_qqnq9","content":"switch__content_qqnq9","label":"switch__label_qqnq9","errorMessage":"switch__errorMessage_qqnq9","hint":"switch__hint_qqnq9","reversed":"switch__reversed_qqnq9","checked":"switch__checked_qqnq9","disabled":"switch__disabled_qqnq9","focused":"switch__focused_qqnq9"};
9
9
  require('./index.css')
10
10
 
11
11
  var Switch = forwardRef(function (_a, ref) {
12
12
  var _b;
13
- var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = __rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
13
+ var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = __rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
14
14
  var labelRef = useRef(null);
15
15
  var focused = useFocus(labelRef, 'keyboard')[0];
16
16
  var handleChange = function (e) {
@@ -18,6 +18,7 @@ var Switch = forwardRef(function (_a, ref) {
18
18
  onChange(e, { checked: e.target.checked, name: name });
19
19
  }
20
20
  };
21
+ var errorMessage = typeof error === 'boolean' ? '' : error;
21
22
  return (React.createElement("label", { className: cn(styles.component, styles[align], className, (_b = {},
22
23
  _b[styles.disabled] = disabled || inactive,
23
24
  _b[styles.checked] = checked,
@@ -27,9 +28,10 @@ var Switch = forwardRef(function (_a, ref) {
27
28
  _b)), ref: mergeRefs([labelRef, ref]) },
28
29
  React.createElement("input", __assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
29
30
  React.createElement("span", { className: styles.switch }),
30
- (label || hint) && (React.createElement("span", { className: styles.content },
31
+ (label || hint || errorMessage) && (React.createElement("span", { className: styles.content },
31
32
  label && React.createElement("span", { className: styles.label }, label),
32
- hint && React.createElement("span", { className: styles.hint }, hint))),
33
+ hint && !errorMessage && React.createElement("span", { className: styles.hint }, hint),
34
+ errorMessage && (React.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
33
35
  addons && (
34
36
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
35
37
  React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
package/esm/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 1rt06 */
2
- :root {
1
+ /* hash: 1vwo8 */
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-border-link: #2288fa;
5
5
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -8,7 +8,8 @@
8
8
  --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
9
9
  --color-light-status-positive: #0cc44d;
10
10
  --color-light-status-positive-hover: #04b545;
11
- --color-light-text-primary: #0e0e0e;
11
+ --color-light-text-negative: #ec2d20;
12
+ --color-light-text-primary: rgba(3, 3, 6, 0.88);
12
13
  --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
14
  --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 */
14
15
  } :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 */
@@ -37,6 +38,7 @@
37
38
  --switch-hint-color: var(--color-light-text-secondary);
38
39
  --switch-bg-color: var(--color-light-neutral-translucent-700);
39
40
  --switch-border-color: transparent;
41
+ --switch-error-color: var(--color-light-text-negative);
40
42
 
41
43
  /* hover */
42
44
  --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
@@ -55,7 +57,7 @@
55
57
  /* icon */
56
58
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
59
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
- } .switch__component_1n62k {
60
+ } .switch__component_qqnq9 {
59
61
  display: inline-flex;
60
62
  align-items: flex-start;
61
63
  margin: 0;
@@ -63,20 +65,20 @@
63
65
  border: 0;
64
66
  cursor: pointer;
65
67
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
66
- } .switch__component_1n62k input {
68
+ } .switch__component_qqnq9 input {
67
69
  opacity: 0;
68
70
  position: absolute;
69
- } .switch__start_1n62k {
71
+ } .switch__start_qqnq9 {
70
72
  align-items: flex-start;
71
- } .switch__center_1n62k {
73
+ } .switch__center_qqnq9 {
72
74
  align-items: center;
73
- } .switch__addons_1n62k {
75
+ } .switch__addons_qqnq9 {
74
76
  margin-left: auto;
75
77
  padding-left: var(--gap-m);
76
78
  line-height: 24px;
77
- } .switch__block_1n62k {
79
+ } .switch__block_qqnq9 {
78
80
  width: 100%;
79
- } .switch__switch_1n62k {
81
+ } .switch__switch_qqnq9 {
80
82
  position: relative;
81
83
  border-radius: var(--border-radius-xl);
82
84
  width: 36px;
@@ -87,9 +89,9 @@
87
89
  border: 2px solid var(--switch-border-color);
88
90
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
91
  box-sizing: border-box
90
- } .switch__switch_1n62k:hover {
92
+ } .switch__switch_qqnq9:hover {
91
93
  background-color: var(--switch-hover-bg-color);
92
- } .switch__switch_1n62k:before {
94
+ } .switch__switch_qqnq9:before {
93
95
  content: '';
94
96
  position: absolute;
95
97
  top: 0;
@@ -101,53 +103,58 @@
101
103
  background-color: var(--switch-icon-color);
102
104
  box-sizing: border-box;
103
105
  transition: transform 0.2s ease;
104
- } .switch__content_1n62k {
106
+ } .switch__content_qqnq9 {
105
107
  margin-left: var(--gap-s);
106
108
  flex-grow: 1;
107
- } .switch__label_1n62k {
109
+ } .switch__label_qqnq9 {
108
110
  font-size: 16px;
109
111
  line-height: 24px;
110
112
  font-weight: 400;
111
113
  display: block;
112
114
  color: var(--switch-label-color);
113
- } .switch__label_1n62k:not(:only-child) {
115
+ } .switch__label_qqnq9:not(:only-child) {
114
116
  margin-bottom: var(--gap-2xs);
115
- } .switch__hint_1n62k {
117
+ } .switch__errorMessage_qqnq9 {
118
+ font-size: 14px;
119
+ line-height: 18px;
120
+ font-weight: 400;
121
+ color: var(--switch-error-color);
122
+ } .switch__hint_qqnq9 {
116
123
  font-size: 14px;
117
124
  line-height: 18px;
118
125
  font-weight: 400;
119
126
  display: block;
120
127
  color: var(--switch-hint-color);
121
- } /* Reversed state */ .switch__component_1n62k.switch__reversed_1n62k {
128
+ } /* Reversed state */ .switch__component_qqnq9.switch__reversed_qqnq9 {
122
129
  flex-direction: row-reverse;
123
- } .switch__reversed_1n62k .switch__content_1n62k {
130
+ } .switch__reversed_qqnq9 .switch__content_qqnq9 {
124
131
  margin-right: var(--gap-m);
125
132
  margin-left: 0;
126
- } .switch__reversed_1n62k .switch__addons_1n62k {
133
+ } .switch__reversed_qqnq9 .switch__addons_qqnq9 {
127
134
  margin-left: 0;
128
135
  padding-left: 0;
129
136
  margin-right: auto;
130
137
  padding-right: var(--gap-m);
131
- } /* Checked state */ .switch__checked_1n62k .switch__switch_1n62k {
138
+ } /* Checked state */ .switch__checked_qqnq9 .switch__switch_qqnq9 {
132
139
  background-color: var(--switch-checked-bg-color)
133
- } .switch__checked_1n62k .switch__switch_1n62k:hover {
140
+ } .switch__checked_qqnq9 .switch__switch_qqnq9:hover {
134
141
  background-color: var(--switch-checked-hover-bg-color);
135
- } .switch__checked_1n62k .switch__switch_1n62k:before {
142
+ } .switch__checked_qqnq9 .switch__switch_qqnq9:before {
136
143
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
137
144
  transform: translateX(16px);
138
- } /* Disabled state */ .switch__disabled_1n62k {
145
+ } /* Disabled state */ .switch__disabled_qqnq9 {
139
146
  cursor: var(--disabled-cursor);
140
- } .switch__disabled_1n62k .switch__switch_1n62k {
147
+ } .switch__disabled_qqnq9 .switch__switch_qqnq9 {
141
148
  background-color: var(--switch-disabled-bg-color)
142
- } .switch__disabled_1n62k .switch__switch_1n62k:before {
149
+ } .switch__disabled_qqnq9 .switch__switch_qqnq9:before {
143
150
  background-color: var(--switch-icon-disabled-color);
144
- } .switch__disabled_1n62k.switch__checked_1n62k .switch__switch_1n62k {
151
+ } .switch__disabled_qqnq9.switch__checked_qqnq9 .switch__switch_qqnq9 {
145
152
  background-color: var(--switch-disabled-checked-bg-color);
146
- } .switch__disabled_1n62k .switch__label_1n62k {
153
+ } .switch__disabled_qqnq9 .switch__label_qqnq9 {
147
154
  color: var(--switch-disabled-color);
148
- } .switch__disabled_1n62k .switch__hint_1n62k {
155
+ } .switch__disabled_qqnq9 .switch__hint_qqnq9 {
149
156
  color: var(--switch-disabled-color);
150
- } /* Focused state */ .switch__focused_1n62k .switch__switch_1n62k {
157
+ } /* Focused state */ .switch__focused_qqnq9 .switch__switch_qqnq9 {
151
158
  outline: 2px solid var(--focus-color);
152
159
  outline-offset: 2px;
153
160
  }
package/esm/index.js CHANGED
@@ -1,7 +1 @@
1
1
  export { Switch } from './Component.js';
2
- import 'tslib';
3
- import 'react';
4
- import 'react-merge-refs';
5
- import 'classnames';
6
- import '@alfalab/core-components-shared/esm';
7
- import '@alfalab/hooks';
package/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 1rt06 */
2
- :root {
1
+ /* hash: 1vwo8 */
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-border-link: #2288fa;
5
5
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -8,7 +8,8 @@
8
8
  --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
9
9
  --color-light-status-positive: #0cc44d;
10
10
  --color-light-status-positive-hover: #04b545;
11
- --color-light-text-primary: #0e0e0e;
11
+ --color-light-text-negative: #ec2d20;
12
+ --color-light-text-primary: rgba(3, 3, 6, 0.88);
12
13
  --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
14
  --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 */
14
15
  } :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 */
@@ -37,6 +38,7 @@
37
38
  --switch-hint-color: var(--color-light-text-secondary);
38
39
  --switch-bg-color: var(--color-light-neutral-translucent-700);
39
40
  --switch-border-color: transparent;
41
+ --switch-error-color: var(--color-light-text-negative);
40
42
 
41
43
  /* hover */
42
44
  --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
@@ -55,7 +57,7 @@
55
57
  /* icon */
56
58
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
59
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
- } .switch__component_1n62k {
60
+ } .switch__component_qqnq9 {
59
61
  display: inline-flex;
60
62
  align-items: flex-start;
61
63
  margin: 0;
@@ -63,20 +65,20 @@
63
65
  border: 0;
64
66
  cursor: pointer;
65
67
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
66
- } .switch__component_1n62k input {
68
+ } .switch__component_qqnq9 input {
67
69
  opacity: 0;
68
70
  position: absolute;
69
- } .switch__start_1n62k {
71
+ } .switch__start_qqnq9 {
70
72
  align-items: flex-start;
71
- } .switch__center_1n62k {
73
+ } .switch__center_qqnq9 {
72
74
  align-items: center;
73
- } .switch__addons_1n62k {
75
+ } .switch__addons_qqnq9 {
74
76
  margin-left: auto;
75
77
  padding-left: var(--gap-m);
76
78
  line-height: 24px;
77
- } .switch__block_1n62k {
79
+ } .switch__block_qqnq9 {
78
80
  width: 100%;
79
- } .switch__switch_1n62k {
81
+ } .switch__switch_qqnq9 {
80
82
  position: relative;
81
83
  border-radius: var(--border-radius-xl);
82
84
  width: 36px;
@@ -87,9 +89,9 @@
87
89
  border: 2px solid var(--switch-border-color);
88
90
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
91
  box-sizing: border-box
90
- } .switch__switch_1n62k:hover {
92
+ } .switch__switch_qqnq9:hover {
91
93
  background-color: var(--switch-hover-bg-color);
92
- } .switch__switch_1n62k:before {
94
+ } .switch__switch_qqnq9:before {
93
95
  content: '';
94
96
  position: absolute;
95
97
  top: 0;
@@ -101,53 +103,58 @@
101
103
  background-color: var(--switch-icon-color);
102
104
  box-sizing: border-box;
103
105
  transition: transform 0.2s ease;
104
- } .switch__content_1n62k {
106
+ } .switch__content_qqnq9 {
105
107
  margin-left: var(--gap-s);
106
108
  flex-grow: 1;
107
- } .switch__label_1n62k {
109
+ } .switch__label_qqnq9 {
108
110
  font-size: 16px;
109
111
  line-height: 24px;
110
112
  font-weight: 400;
111
113
  display: block;
112
114
  color: var(--switch-label-color);
113
- } .switch__label_1n62k:not(:only-child) {
115
+ } .switch__label_qqnq9:not(:only-child) {
114
116
  margin-bottom: var(--gap-2xs);
115
- } .switch__hint_1n62k {
117
+ } .switch__errorMessage_qqnq9 {
118
+ font-size: 14px;
119
+ line-height: 18px;
120
+ font-weight: 400;
121
+ color: var(--switch-error-color);
122
+ } .switch__hint_qqnq9 {
116
123
  font-size: 14px;
117
124
  line-height: 18px;
118
125
  font-weight: 400;
119
126
  display: block;
120
127
  color: var(--switch-hint-color);
121
- } /* Reversed state */ .switch__component_1n62k.switch__reversed_1n62k {
128
+ } /* Reversed state */ .switch__component_qqnq9.switch__reversed_qqnq9 {
122
129
  flex-direction: row-reverse;
123
- } .switch__reversed_1n62k .switch__content_1n62k {
130
+ } .switch__reversed_qqnq9 .switch__content_qqnq9 {
124
131
  margin-right: var(--gap-m);
125
132
  margin-left: 0;
126
- } .switch__reversed_1n62k .switch__addons_1n62k {
133
+ } .switch__reversed_qqnq9 .switch__addons_qqnq9 {
127
134
  margin-left: 0;
128
135
  padding-left: 0;
129
136
  margin-right: auto;
130
137
  padding-right: var(--gap-m);
131
- } /* Checked state */ .switch__checked_1n62k .switch__switch_1n62k {
138
+ } /* Checked state */ .switch__checked_qqnq9 .switch__switch_qqnq9 {
132
139
  background-color: var(--switch-checked-bg-color)
133
- } .switch__checked_1n62k .switch__switch_1n62k:hover {
140
+ } .switch__checked_qqnq9 .switch__switch_qqnq9:hover {
134
141
  background-color: var(--switch-checked-hover-bg-color);
135
- } .switch__checked_1n62k .switch__switch_1n62k:before {
142
+ } .switch__checked_qqnq9 .switch__switch_qqnq9:before {
136
143
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
137
144
  transform: translateX(16px);
138
- } /* Disabled state */ .switch__disabled_1n62k {
145
+ } /* Disabled state */ .switch__disabled_qqnq9 {
139
146
  cursor: var(--disabled-cursor);
140
- } .switch__disabled_1n62k .switch__switch_1n62k {
147
+ } .switch__disabled_qqnq9 .switch__switch_qqnq9 {
141
148
  background-color: var(--switch-disabled-bg-color)
142
- } .switch__disabled_1n62k .switch__switch_1n62k:before {
149
+ } .switch__disabled_qqnq9 .switch__switch_qqnq9:before {
143
150
  background-color: var(--switch-icon-disabled-color);
144
- } .switch__disabled_1n62k.switch__checked_1n62k .switch__switch_1n62k {
151
+ } .switch__disabled_qqnq9.switch__checked_qqnq9 .switch__switch_qqnq9 {
145
152
  background-color: var(--switch-disabled-checked-bg-color);
146
- } .switch__disabled_1n62k .switch__label_1n62k {
153
+ } .switch__disabled_qqnq9 .switch__label_qqnq9 {
147
154
  color: var(--switch-disabled-color);
148
- } .switch__disabled_1n62k .switch__hint_1n62k {
155
+ } .switch__disabled_qqnq9 .switch__hint_qqnq9 {
149
156
  color: var(--switch-disabled-color);
150
- } /* Focused state */ .switch__focused_1n62k .switch__switch_1n62k {
157
+ } /* Focused state */ .switch__focused_qqnq9 .switch__switch_qqnq9 {
151
158
  outline: 2px solid var(--focus-color);
152
159
  outline-offset: 2px;
153
160
  }
package/index.js CHANGED
@@ -3,12 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
- require('tslib');
7
- require('react');
8
- require('react-merge-refs');
9
- require('classnames');
10
- require('@alfalab/core-components-shared');
11
- require('@alfalab/hooks');
12
6
 
13
7
 
14
8
 
package/modern/Component.d.ts CHANGED
@@ -41,6 +41,10 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
41
41
  * Управление состоянием активен / неактивен
42
42
  */
43
43
  inactive?: boolean;
44
+ /**
45
+ * Отображение ошибки
46
+ */
47
+ error?: ReactNode | boolean;
44
48
  /**
45
49
  * Обработчик переключения компонента
46
50
  */
@@ -92,6 +96,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
92
96
  * Управление состоянием активен / неактивен
93
97
  */
94
98
  inactive?: boolean | undefined;
99
+ /**
100
+ * Отображение ошибки
101
+ */
102
+ error?: ReactNode | boolean;
95
103
  /**
96
104
  * Обработчик переключения компонента
97
105
  */
package/modern/Component.js CHANGED
@@ -4,10 +4,10 @@ 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_1n62k","start":"switch__start_1n62k","center":"switch__center_1n62k","addons":"switch__addons_1n62k","block":"switch__block_1n62k","switch":"switch__switch_1n62k","content":"switch__content_1n62k","label":"switch__label_1n62k","hint":"switch__hint_1n62k","reversed":"switch__reversed_1n62k","checked":"switch__checked_1n62k","disabled":"switch__disabled_1n62k","focused":"switch__focused_1n62k"};
7
+ const styles = {"component":"switch__component_qqnq9","start":"switch__start_qqnq9","center":"switch__center_qqnq9","addons":"switch__addons_qqnq9","block":"switch__block_qqnq9","switch":"switch__switch_qqnq9","content":"switch__content_qqnq9","label":"switch__label_qqnq9","errorMessage":"switch__errorMessage_qqnq9","hint":"switch__hint_qqnq9","reversed":"switch__reversed_qqnq9","checked":"switch__checked_qqnq9","disabled":"switch__disabled_qqnq9","focused":"switch__focused_qqnq9"};
8
8
  require('./index.css')
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) => {
10
+ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, error, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
11
11
  const labelRef = useRef(null);
12
12
  const [focused] = useFocus(labelRef, 'keyboard');
13
13
  const handleChange = (e) => {
@@ -15,6 +15,7 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
15
15
  onChange(e, { checked: e.target.checked, name });
16
16
  }
17
17
  };
18
+ const errorMessage = typeof error === 'boolean' ? '' : error;
18
19
  return (React.createElement("label", { className: cn(styles.component, styles[align], className, {
19
20
  [styles.disabled]: disabled || inactive,
20
21
  [styles.checked]: checked,
@@ -24,9 +25,10 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
24
25
  }), ref: mergeRefs([labelRef, ref]) },
25
26
  React.createElement("input", { type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId, ...restProps }),
26
27
  React.createElement("span", { className: styles.switch }),
27
- (label || hint) && (React.createElement("span", { className: styles.content },
28
+ (label || hint || errorMessage) && (React.createElement("span", { className: styles.content },
28
29
  label && React.createElement("span", { className: styles.label }, label),
29
- hint && React.createElement("span", { className: styles.hint }, hint))),
30
+ hint && !errorMessage && React.createElement("span", { className: styles.hint }, hint),
31
+ errorMessage && (React.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
30
32
  addons && (
31
33
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
32
34
  React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
package/modern/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 1rt06 */
2
- :root {
1
+ /* hash: 1vwo8 */
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-border-link: #2288fa;
5
5
  --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -8,7 +8,8 @@
8
8
  --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
9
9
  --color-light-status-positive: #0cc44d;
10
10
  --color-light-status-positive-hover: #04b545;
11
- --color-light-text-primary: #0e0e0e;
11
+ --color-light-text-negative: #ec2d20;
12
+ --color-light-text-primary: rgba(3, 3, 6, 0.88);
12
13
  --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
14
  --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 */
14
15
  } :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 */
@@ -37,6 +38,7 @@
37
38
  --switch-hint-color: var(--color-light-text-secondary);
38
39
  --switch-bg-color: var(--color-light-neutral-translucent-700);
39
40
  --switch-border-color: transparent;
41
+ --switch-error-color: var(--color-light-text-negative);
40
42
 
41
43
  /* hover */
42
44
  --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
@@ -55,7 +57,7 @@
55
57
  /* icon */
56
58
  --switch-icon-color: var(--color-static-neutral-1500-inverted);
57
59
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
58
- } .switch__component_1n62k {
60
+ } .switch__component_qqnq9 {
59
61
  display: inline-flex;
60
62
  align-items: flex-start;
61
63
  margin: 0;
@@ -63,20 +65,20 @@
63
65
  border: 0;
64
66
  cursor: pointer;
65
67
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
66
- } .switch__component_1n62k input {
68
+ } .switch__component_qqnq9 input {
67
69
  opacity: 0;
68
70
  position: absolute;
69
- } .switch__start_1n62k {
71
+ } .switch__start_qqnq9 {
70
72
  align-items: flex-start;
71
- } .switch__center_1n62k {
73
+ } .switch__center_qqnq9 {
72
74
  align-items: center;
73
- } .switch__addons_1n62k {
75
+ } .switch__addons_qqnq9 {
74
76
  margin-left: auto;
75
77
  padding-left: var(--gap-m);
76
78
  line-height: 24px;
77
- } .switch__block_1n62k {
79
+ } .switch__block_qqnq9 {
78
80
  width: 100%;
79
- } .switch__switch_1n62k {
81
+ } .switch__switch_qqnq9 {
80
82
  position: relative;
81
83
  border-radius: var(--border-radius-xl);
82
84
  width: 36px;
@@ -87,9 +89,9 @@
87
89
  border: 2px solid var(--switch-border-color);
88
90
  transition: background-color 0.2s ease, border-color 0.2s ease;
89
91
  box-sizing: border-box
90
- } .switch__switch_1n62k:hover {
92
+ } .switch__switch_qqnq9:hover {
91
93
  background-color: var(--switch-hover-bg-color);
92
- } .switch__switch_1n62k:before {
94
+ } .switch__switch_qqnq9:before {
93
95
  content: '';
94
96
  position: absolute;
95
97
  top: 0;
@@ -101,53 +103,58 @@
101
103
  background-color: var(--switch-icon-color);
102
104
  box-sizing: border-box;
103
105
  transition: transform 0.2s ease;
104
- } .switch__content_1n62k {
106
+ } .switch__content_qqnq9 {
105
107
  margin-left: var(--gap-s);
106
108
  flex-grow: 1;
107
- } .switch__label_1n62k {
109
+ } .switch__label_qqnq9 {
108
110
  font-size: 16px;
109
111
  line-height: 24px;
110
112
  font-weight: 400;
111
113
  display: block;
112
114
  color: var(--switch-label-color);
113
- } .switch__label_1n62k:not(:only-child) {
115
+ } .switch__label_qqnq9:not(:only-child) {
114
116
  margin-bottom: var(--gap-2xs);
115
- } .switch__hint_1n62k {
117
+ } .switch__errorMessage_qqnq9 {
118
+ font-size: 14px;
119
+ line-height: 18px;
120
+ font-weight: 400;
121
+ color: var(--switch-error-color);
122
+ } .switch__hint_qqnq9 {
116
123
  font-size: 14px;
117
124
  line-height: 18px;
118
125
  font-weight: 400;
119
126
  display: block;
120
127
  color: var(--switch-hint-color);
121
- } /* Reversed state */ .switch__component_1n62k.switch__reversed_1n62k {
128
+ } /* Reversed state */ .switch__component_qqnq9.switch__reversed_qqnq9 {
122
129
  flex-direction: row-reverse;
123
- } .switch__reversed_1n62k .switch__content_1n62k {
130
+ } .switch__reversed_qqnq9 .switch__content_qqnq9 {
124
131
  margin-right: var(--gap-m);
125
132
  margin-left: 0;
126
- } .switch__reversed_1n62k .switch__addons_1n62k {
133
+ } .switch__reversed_qqnq9 .switch__addons_qqnq9 {
127
134
  margin-left: 0;
128
135
  padding-left: 0;
129
136
  margin-right: auto;
130
137
  padding-right: var(--gap-m);
131
- } /* Checked state */ .switch__checked_1n62k .switch__switch_1n62k {
138
+ } /* Checked state */ .switch__checked_qqnq9 .switch__switch_qqnq9 {
132
139
  background-color: var(--switch-checked-bg-color)
133
- } .switch__checked_1n62k .switch__switch_1n62k:hover {
140
+ } .switch__checked_qqnq9 .switch__switch_qqnq9:hover {
134
141
  background-color: var(--switch-checked-hover-bg-color);
135
- } .switch__checked_1n62k .switch__switch_1n62k:before {
142
+ } .switch__checked_qqnq9 .switch__switch_qqnq9:before {
136
143
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
137
144
  transform: translateX(16px);
138
- } /* Disabled state */ .switch__disabled_1n62k {
145
+ } /* Disabled state */ .switch__disabled_qqnq9 {
139
146
  cursor: var(--disabled-cursor);
140
- } .switch__disabled_1n62k .switch__switch_1n62k {
147
+ } .switch__disabled_qqnq9 .switch__switch_qqnq9 {
141
148
  background-color: var(--switch-disabled-bg-color)
142
- } .switch__disabled_1n62k .switch__switch_1n62k:before {
149
+ } .switch__disabled_qqnq9 .switch__switch_qqnq9:before {
143
150
  background-color: var(--switch-icon-disabled-color);
144
- } .switch__disabled_1n62k.switch__checked_1n62k .switch__switch_1n62k {
151
+ } .switch__disabled_qqnq9.switch__checked_qqnq9 .switch__switch_qqnq9 {
145
152
  background-color: var(--switch-disabled-checked-bg-color);
146
- } .switch__disabled_1n62k .switch__label_1n62k {
153
+ } .switch__disabled_qqnq9 .switch__label_qqnq9 {
147
154
  color: var(--switch-disabled-color);
148
- } .switch__disabled_1n62k .switch__hint_1n62k {
155
+ } .switch__disabled_qqnq9 .switch__hint_qqnq9 {
149
156
  color: var(--switch-disabled-color);
150
- } /* Focused state */ .switch__focused_1n62k .switch__switch_1n62k {
157
+ } /* Focused state */ .switch__focused_qqnq9 .switch__switch_qqnq9 {
151
158
  outline: 2px solid var(--focus-color);
152
159
  outline-offset: 2px;
153
160
  }
package/modern/index.js CHANGED
@@ -1,6 +1 @@
1
1
  export { Switch } from './Component.js';
2
- import 'react';
3
- import 'react-merge-refs';
4
- import 'classnames';
5
- import '@alfalab/core-components-shared/modern';
6
- import '@alfalab/hooks';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "4.1.2",
3
+ "version": "4.2.1",
4
4
  "description": "",
5
5
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
6
6
  "keywords": [],
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@alfalab/hooks": "^1.13.0",
19
- "@alfalab/core-components-shared": "^0.9.1",
19
+ "@alfalab/core-components-shared": "^0.10.0",
20
20
  "classnames": "^2.3.1",
21
21
  "react-merge-refs": "^1.1.0",
22
22
  "tslib": "^2.4.0"
package/src/Component.tsx CHANGED
@@ -60,6 +60,11 @@ export type SwitchProps = Omit<
60
60
  */
61
61
  inactive?: boolean;
62
62
 
63
+ /**
64
+ * Отображение ошибки
65
+ */
66
+ error?: ReactNode | boolean;
67
+
63
68
  /**
64
69
  * Обработчик переключения компонента
65
70
  */
@@ -87,6 +92,7 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
87
92
  block,
88
93
  disabled,
89
94
  inactive,
95
+ error,
90
96
  label,
91
97
  hint,
92
98
  name,
@@ -108,6 +114,8 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
108
114
  }
109
115
  };
110
116
 
117
+ const errorMessage = typeof error === 'boolean' ? '' : error;
118
+
111
119
  return (
112
120
  <label
113
121
  className={cn(styles.component, styles[align], className, {
@@ -132,10 +140,16 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
132
140
 
133
141
  <span className={styles.switch} />
134
142
 
135
- {(label || hint) && (
143
+ {(label || hint || errorMessage) && (
136
144
  <span className={styles.content}>
137
145
  {label && <span className={styles.label}>{label}</span>}
138
- {hint && <span className={styles.hint}>{hint}</span>}
146
+ {hint && !errorMessage && <span className={styles.hint}>{hint}</span>}
147
+
148
+ {errorMessage && (
149
+ <span className={styles.errorMessage} role='alert'>
150
+ {errorMessage}
151
+ </span>
152
+ )}
139
153
  </span>
140
154
  )}
141
155
 
package/src/index.module.css CHANGED
@@ -5,6 +5,7 @@
5
5
  --switch-hint-color: var(--color-light-text-secondary);
6
6
  --switch-bg-color: var(--color-light-neutral-translucent-700);
7
7
  --switch-border-color: transparent;
8
+ --switch-error-color: var(--color-light-text-negative);
8
9
 
9
10
  /* hover */
10
11
  --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
@@ -104,6 +105,11 @@
104
105
  margin-bottom: var(--gap-2xs);
105
106
  }
106
107
 
108
+ .errorMessage {
109
+ @mixin paragraph_component_secondary;
110
+ color: var(--switch-error-color);
111
+ }
112
+
107
113
  .hint {
108
114
  @mixin paragraph_component_secondary;
109
115
  display: block;