@alfalab/core-components 45.5.0-rc.2 → 45.5.0

package/side-panel/modern/desktop/index.js

@@ -11,7 +11,7 @@ import '../Context.js';
 import '../../../base-modal/modern';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-cf7702ee.js';
+import '../layout.module-ce6004f9.js';
 import '../components/footer/Component.desktop.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/index.js

@@ -5,7 +5,7 @@ import '../../shared/modern';
 import './components/controls/Component.js';
 import 'classnames';
 import './ResponsiveContext.js';
-import './layout.module-cf7702ee.js';
+import './layout.module-ce6004f9.js';
 import './components/header/Component.js';
 import '../../navigation-bar/modern';
 import './consts.js';

package/side-panel/modern/mobile/Component.mobile.js

@@ -9,7 +9,7 @@ import { ResponsiveContext } from '../ResponsiveContext.js';
 import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-cf7702ee.js';
+import '../layout.module-ce6004f9.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar/modern';
 import '../consts.js';

package/side-panel/modern/mobile/index.js

@@ -8,7 +8,7 @@ import '../../../shared/modern';
 import '../Context.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-cf7702ee.js';
+import '../layout.module-ce6004f9.js';
 import '../components/footer/Component.mobile.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/slider/Component.d.ts

@@ -73,11 +73,13 @@ type SliderProps = {
         valueTo?: number;
     }) => void;
     /**
+     * @deprecated
      * Обработчик начала перетаскивания ползунка
      */
     onStart?: () => void;
     /**
      * Обработчик окончания перетаскивания ползунка
+     * @description https://refreshless.com/nouislider/events-callbacks/#section-change
      */
     onEnd?: () => void;
     /**

package/slider/Component.js

@@ -37,9 +37,6 @@ var Slider = function (_a) {
             pips: pips,
             range: range,
         });
-        slider.on('change', function () {
-            busyRef.current = false;
-        });
         // eslint-disable-next-line consistent-return
         return function () { return slider.destroy(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -52,13 +49,14 @@ var Slider = function (_a) {
             busyRef.current = true;
             onStart === null || onStart === void 0 ? void 0 : onStart();
         });
-        slider.on('end', function () {
+        slider.on('change', function () {
+            busyRef.current = false;
             onEnd === null || onEnd === void 0 ? void 0 : onEnd();
         });
         // eslint-disable-next-line consistent-return
         return function () {
             slider.off('start');
-            slider.off('end');
+            slider.off('change');
         };
     }, [onStart, onEnd]);
     React.useEffect(function () {

package/slider/cssm/Component.d.ts

@@ -73,11 +73,13 @@ type SliderProps = {
         valueTo?: number;
     }) => void;
     /**
+     * @deprecated
      * Обработчик начала перетаскивания ползунка
      */
     onStart?: () => void;
     /**
      * Обработчик окончания перетаскивания ползунка
+     * @description https://refreshless.com/nouislider/events-callbacks/#section-change
      */
     onEnd?: () => void;
     /**

package/slider/cssm/Component.js

@@ -36,9 +36,6 @@ var Slider = function (_a) {
             pips: pips,
             range: range,
         });
-        slider.on('change', function () {
-            busyRef.current = false;
-        });
         // eslint-disable-next-line consistent-return
         return function () { return slider.destroy(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -51,13 +48,14 @@ var Slider = function (_a) {
             busyRef.current = true;
             onStart === null || onStart === void 0 ? void 0 : onStart();
         });
-        slider.on('end', function () {
+        slider.on('change', function () {
+            busyRef.current = false;
             onEnd === null || onEnd === void 0 ? void 0 : onEnd();
         });
         // eslint-disable-next-line consistent-return
         return function () {
             slider.off('start');
-            slider.off('end');
+            slider.off('change');
         };
     }, [onStart, onEnd]);
     React.useEffect(function () {

package/slider/esm/Component.d.ts

@@ -73,11 +73,13 @@ type SliderProps = {
         valueTo?: number;
     }) => void;
     /**
+     * @deprecated
      * Обработчик начала перетаскивания ползунка
      */
     onStart?: () => void;
     /**
      * Обработчик окончания перетаскивания ползунка
+     * @description https://refreshless.com/nouislider/events-callbacks/#section-change
      */
     onEnd?: () => void;
     /**

package/slider/esm/Component.js

@@ -29,9 +29,6 @@ var Slider = function (_a) {
             pips: pips,
             range: range,
         });
-        slider.on('change', function () {
-            busyRef.current = false;
-        });
         // eslint-disable-next-line consistent-return
         return function () { return slider.destroy(); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -44,13 +41,14 @@ var Slider = function (_a) {
             busyRef.current = true;
             onStart === null || onStart === void 0 ? void 0 : onStart();
         });
-        slider.on('end', function () {
+        slider.on('change', function () {
+            busyRef.current = false;
             onEnd === null || onEnd === void 0 ? void 0 : onEnd();
         });
         // eslint-disable-next-line consistent-return
         return function () {
             slider.off('start');
-            slider.off('end');
+            slider.off('change');
         };
     }, [onStart, onEnd]);
     useEffect(function () {

package/slider/modern/Component.d.ts

@@ -73,11 +73,13 @@ type SliderProps = {
         valueTo?: number;
     }) => void;
     /**
+     * @deprecated
      * Обработчик начала перетаскивания ползунка
      */
     onStart?: () => void;
     /**
      * Обработчик окончания перетаскивания ползунка
+     * @description https://refreshless.com/nouislider/events-callbacks/#section-change
      */
     onEnd?: () => void;
     /**

package/slider/modern/Component.js

@@ -27,9 +27,6 @@ const Slider = ({ min = 0, max = 100, step = 1, value = 0, valueTo, disabled, pi
             pips: pips,
             range,
         });
-        slider.on('change', () => {
-            busyRef.current = false;
-        });
         // eslint-disable-next-line consistent-return
         return () => slider.destroy();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -42,13 +39,14 @@ const Slider = ({ min = 0, max = 100, step = 1, value = 0, valueTo, disabled, pi
             busyRef.current = true;
             onStart?.();
         });
-        slider.on('end', () => {
+        slider.on('change', () => {
+            busyRef.current = false;
             onEnd?.();
         });
         // eslint-disable-next-line consistent-return
         return () => {
             slider.off('start');
-            slider.off('end');
+            slider.off('change');
         };
     }, [onStart, onEnd]);
     useEffect(() => {

package/switch/Component.d.ts

@@ -41,6 +41,10 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
      * Управление состоянием активен / неактивен
      */
     inactive?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
     /**
      * Обработчик переключения компонента
      */
@@ -92,6 +96,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
      * Управление состоянием активен / неактивен
      */
     inactive?: boolean | undefined;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
     /**
      * Обработчик переключения компонента
      */

package/switch/Component.js

@@ -13,12 +13,12 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"switch__component_5llq9","start":"switch__start_5llq9","center":"switch__center_5llq9","addons":"switch__addons_5llq9","block":"switch__block_5llq9","switch":"switch__switch_5llq9","content":"switch__content_5llq9","label":"switch__label_5llq9","hint":"switch__hint_5llq9","reversed":"switch__reversed_5llq9","checked":"switch__checked_5llq9","disabled":"switch__disabled_5llq9","focused":"switch__focused_5llq9"};
+var styles = {"component":"switch__component_5llq9","start":"switch__start_5llq9","center":"switch__center_5llq9","addons":"switch__addons_5llq9","block":"switch__block_5llq9","switch":"switch__switch_5llq9","content":"switch__content_5llq9","label":"switch__label_5llq9","errorMessage":"switch__errorMessage_5llq9","hint":"switch__hint_5llq9","reversed":"switch__reversed_5llq9","checked":"switch__checked_5llq9","disabled":"switch__disabled_5llq9","focused":"switch__focused_5llq9"};
 require('./index.css');
 
 var Switch = React.forwardRef(function (_a, ref) {
     var _b;
-    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"]);
+    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"]);
     var labelRef = React.useRef(null);
     var focused = hooks.useFocus(labelRef, 'keyboard')[0];
     var handleChange = function (e) {
@@ -26,6 +26,7 @@ var Switch = React.forwardRef(function (_a, ref) {
             onChange(e, { checked: e.target.checked, name: name });
         }
     };
+    var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
             _b[styles.disabled] = disabled || inactive,
             _b[styles.checked] = checked,
@@ -35,9 +36,10 @@ var Switch = React.forwardRef(function (_a, ref) {
             _b)), ref: mergeRefs__default.default([labelRef, ref]) },
         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)),
         React__default.default.createElement("span", { className: styles.switch }),
-        (label || hint) && (React__default.default.createElement("span", { className: styles.content },
+        (label || hint || errorMessage) && (React__default.default.createElement("span", { className: styles.content },
             label && React__default.default.createElement("span", { className: styles.label }, label),
-            hint && React__default.default.createElement("span", { className: styles.hint }, hint))),
+            hint && !errorMessage && React__default.default.createElement("span", { className: styles.hint }, hint),
+            errorMessage && (React__default.default.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
         addons && (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React__default.default.createElement("span", { className: styles.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));

package/switch/cssm/Component.d.ts

@@ -41,6 +41,10 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
      * Управление состоянием активен / неактивен
      */
     inactive?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
     /**
      * Обработчик переключения компонента
      */
@@ -92,6 +96,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
      * Управление состоянием активен / неактивен
      */
     inactive?: boolean | undefined;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
     /**
      * Обработчик переключения компонента
      */

package/switch/cssm/Component.js

@@ -17,7 +17,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var Switch = React.forwardRef(function (_a, ref) {
     var _b;
-    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"]);
+    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"]);
     var labelRef = React.useRef(null);
     var focused = hooks.useFocus(labelRef, 'keyboard')[0];
     var handleChange = function (e) {
@@ -25,6 +25,7 @@ var Switch = React.forwardRef(function (_a, ref) {
             onChange(e, { checked: e.target.checked, name: name });
         }
     };
+    var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
             _b[styles__default.default.disabled] = disabled || inactive,
             _b[styles__default.default.checked] = checked,
@@ -34,9 +35,10 @@ var Switch = React.forwardRef(function (_a, ref) {
             _b)), ref: mergeRefs__default.default([labelRef, ref]) },
         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)),
         React__default.default.createElement("span", { className: styles__default.default.switch }),
-        (label || hint) && (React__default.default.createElement("span", { className: styles__default.default.content },
+        (label || hint || errorMessage) && (React__default.default.createElement("span", { className: styles__default.default.content },
             label && React__default.default.createElement("span", { className: styles__default.default.label }, label),
-            hint && React__default.default.createElement("span", { className: styles__default.default.hint }, hint))),
+            hint && !errorMessage && React__default.default.createElement("span", { className: styles__default.default.hint }, hint),
+            errorMessage && (React__default.default.createElement("span", { className: styles__default.default.errorMessage, role: 'alert' }, errorMessage)))),
         addons && (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React__default.default.createElement("span", { className: styles__default.default.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));

package/switch/cssm/index.module.css

@@ -7,6 +7,7 @@
     --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
     --color-light-status-positive: #0cc44d;
     --color-light-status-positive-hover: #04b545;
+    --color-light-text-negative: #ec2e14;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
     --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 */
@@ -36,6 +37,7 @@
     --switch-hint-color: var(--color-light-text-secondary);
     --switch-bg-color: var(--color-light-neutral-translucent-700);
     --switch-border-color: transparent;
+    --switch-error-color: var(--color-light-text-negative);
 
     /* hover */
     --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
@@ -111,6 +113,11 @@
     color: var(--switch-label-color);
 } .label:not(:only-child) {
     margin-bottom: var(--gap-2xs);
+} .errorMessage {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    color: var(--switch-error-color);
 } .hint {
     font-size: 14px;
     line-height: 18px;

package/switch/esm/Component.d.ts

@@ -41,6 +41,10 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
      * Управление состоянием активен / неактивен
      */
     inactive?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
     /**
      * Обработчик переключения компонента
      */
@@ -92,6 +96,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
      * Управление состоянием активен / неактивен
      */
     inactive?: boolean | undefined;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
     /**
      * Обработчик переключения компонента
      */

package/switch/esm/Component.js

@@ -5,12 +5,12 @@ import cn from 'classnames';
 import { dom } from '../../shared/esm';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"component":"switch__component_5llq9","start":"switch__start_5llq9","center":"switch__center_5llq9","addons":"switch__addons_5llq9","block":"switch__block_5llq9","switch":"switch__switch_5llq9","content":"switch__content_5llq9","label":"switch__label_5llq9","hint":"switch__hint_5llq9","reversed":"switch__reversed_5llq9","checked":"switch__checked_5llq9","disabled":"switch__disabled_5llq9","focused":"switch__focused_5llq9"};
+var styles = {"component":"switch__component_5llq9","start":"switch__start_5llq9","center":"switch__center_5llq9","addons":"switch__addons_5llq9","block":"switch__block_5llq9","switch":"switch__switch_5llq9","content":"switch__content_5llq9","label":"switch__label_5llq9","errorMessage":"switch__errorMessage_5llq9","hint":"switch__hint_5llq9","reversed":"switch__reversed_5llq9","checked":"switch__checked_5llq9","disabled":"switch__disabled_5llq9","focused":"switch__focused_5llq9"};
 require('./index.css');
 
 var Switch = forwardRef(function (_a, ref) {
     var _b;
-    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"]);
+    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"]);
     var labelRef = useRef(null);
     var focused = useFocus(labelRef, 'keyboard')[0];
     var handleChange = function (e) {
@@ -18,6 +18,7 @@ var Switch = forwardRef(function (_a, ref) {
             onChange(e, { checked: e.target.checked, name: name });
         }
     };
+    var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React.createElement("label", { className: cn(styles.component, styles[align], className, (_b = {},
             _b[styles.disabled] = disabled || inactive,
             _b[styles.checked] = checked,
@@ -27,9 +28,10 @@ var Switch = forwardRef(function (_a, ref) {
             _b)), ref: mergeRefs([labelRef, ref]) },
         React.createElement("input", __assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
         React.createElement("span", { className: styles.switch }),
-        (label || hint) && (React.createElement("span", { className: styles.content },
+        (label || hint || errorMessage) && (React.createElement("span", { className: styles.content },
             label && React.createElement("span", { className: styles.label }, label),
-            hint && React.createElement("span", { className: styles.hint }, hint))),
+            hint && !errorMessage && React.createElement("span", { className: styles.hint }, hint),
+            errorMessage && (React.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
         addons && (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));

package/switch/esm/index.css

@@ -8,6 +8,7 @@
     --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
     --color-light-status-positive: #0cc44d;
     --color-light-status-positive-hover: #04b545;
+    --color-light-text-negative: #ec2e14;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
     --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 */
@@ -37,6 +38,7 @@
     --switch-hint-color: var(--color-light-text-secondary);
     --switch-bg-color: var(--color-light-neutral-translucent-700);
     --switch-border-color: transparent;
+    --switch-error-color: var(--color-light-text-negative);
 
     /* hover */
     --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
@@ -112,6 +114,11 @@
     color: var(--switch-label-color);
 } .switch__label_5llq9:not(:only-child) {
     margin-bottom: var(--gap-2xs);
+} .switch__errorMessage_5llq9 {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    color: var(--switch-error-color);
 } .switch__hint_5llq9 {
     font-size: 14px;
     line-height: 18px;

package/switch/index.css

@@ -8,6 +8,7 @@
     --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
     --color-light-status-positive: #0cc44d;
     --color-light-status-positive-hover: #04b545;
+    --color-light-text-negative: #ec2e14;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
     --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 */
@@ -37,6 +38,7 @@
     --switch-hint-color: var(--color-light-text-secondary);
     --switch-bg-color: var(--color-light-neutral-translucent-700);
     --switch-border-color: transparent;
+    --switch-error-color: var(--color-light-text-negative);
 
     /* hover */
     --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
@@ -112,6 +114,11 @@
     color: var(--switch-label-color);
 } .switch__label_5llq9:not(:only-child) {
     margin-bottom: var(--gap-2xs);
+} .switch__errorMessage_5llq9 {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    color: var(--switch-error-color);
 } .switch__hint_5llq9 {
     font-size: 14px;
     line-height: 18px;

package/switch/modern/Component.d.ts

@@ -41,6 +41,10 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
      * Управление состоянием активен / неактивен
      */
     inactive?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
     /**
      * Обработчик переключения компонента
      */
@@ -92,6 +96,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
      * Управление состоянием активен / неактивен
      */
     inactive?: boolean | undefined;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
     /**
      * Обработчик переключения компонента
      */

package/switch/modern/Component.js

@@ -4,10 +4,10 @@ import cn from 'classnames';
 import { dom } from '../../shared/modern';
 import { useFocus } from '@alfalab/hooks';
 
-const styles = {"component":"switch__component_5llq9","start":"switch__start_5llq9","center":"switch__center_5llq9","addons":"switch__addons_5llq9","block":"switch__block_5llq9","switch":"switch__switch_5llq9","content":"switch__content_5llq9","label":"switch__label_5llq9","hint":"switch__hint_5llq9","reversed":"switch__reversed_5llq9","checked":"switch__checked_5llq9","disabled":"switch__disabled_5llq9","focused":"switch__focused_5llq9"};
+const styles = {"component":"switch__component_5llq9","start":"switch__start_5llq9","center":"switch__center_5llq9","addons":"switch__addons_5llq9","block":"switch__block_5llq9","switch":"switch__switch_5llq9","content":"switch__content_5llq9","label":"switch__label_5llq9","errorMessage":"switch__errorMessage_5llq9","hint":"switch__hint_5llq9","reversed":"switch__reversed_5llq9","checked":"switch__checked_5llq9","disabled":"switch__disabled_5llq9","focused":"switch__focused_5llq9"};
 require('./index.css');
 
-const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
+const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, error, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
     const labelRef = useRef(null);
     const [focused] = useFocus(labelRef, 'keyboard');
     const handleChange = (e) => {
@@ -15,6 +15,7 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
             onChange(e, { checked: e.target.checked, name });
         }
     };
+    const errorMessage = typeof error === 'boolean' ? '' : error;
     return (React.createElement("label", { className: cn(styles.component, styles[align], className, {
             [styles.disabled]: disabled || inactive,
             [styles.checked]: checked,
@@ -24,9 +25,10 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
         }), ref: mergeRefs([labelRef, ref]) },
         React.createElement("input", { type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId, ...restProps }),
         React.createElement("span", { className: styles.switch }),
-        (label || hint) && (React.createElement("span", { className: styles.content },
+        (label || hint || errorMessage) && (React.createElement("span", { className: styles.content },
             label && React.createElement("span", { className: styles.label }, label),
-            hint && React.createElement("span", { className: styles.hint }, hint))),
+            hint && !errorMessage && React.createElement("span", { className: styles.hint }, hint),
+            errorMessage && (React.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
         addons && (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));

package/switch/modern/index.css

@@ -8,6 +8,7 @@
     --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
     --color-light-status-positive: #0cc44d;
     --color-light-status-positive-hover: #04b545;
+    --color-light-text-negative: #ec2e14;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
     --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 */
@@ -37,6 +38,7 @@
     --switch-hint-color: var(--color-light-text-secondary);
     --switch-bg-color: var(--color-light-neutral-translucent-700);
     --switch-border-color: transparent;
+    --switch-error-color: var(--color-light-text-negative);
 
     /* hover */
     --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
@@ -112,6 +114,11 @@
     color: var(--switch-label-color);
 } .switch__label_5llq9:not(:only-child) {
     margin-bottom: var(--gap-2xs);
+} .switch__errorMessage_5llq9 {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    color: var(--switch-error-color);
 } .switch__hint_5llq9 {
     font-size: 14px;
     line-height: 18px;

package/tabs/components/primary-tablist/Component.collapsible.js

@@ -9,7 +9,7 @@ var desktop = require('../../../picker-button/desktop');
 var hooks_useTablistTitles = require('../../hooks/use-tablist-titles.js');
 var syntheticEvents = require('../../synthetic-events.js');
 var components_title_Component = require('../title/Component.js');
-var index_module = require('../../index.module-1dc7ab34.js');
+var index_module = require('../../index.module-1a2e5af7.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/tabs/components/primary-tablist/Component.desktop.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var components_primaryTablist_Component = require('./Component.js');
-var index_module = require('../../index.module-1dc7ab34.js');
+var index_module = require('../../index.module-1a2e5af7.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/tabs/components/primary-tablist/Component.mobile.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var components_primaryTablist_Component = require('./Component.js');
-var index_module = require('../../index.module-1dc7ab34.js');
+var index_module = require('../../index.module-1a2e5af7.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/tabs/components/primary-tablist/index.css

@@ -455,4 +455,6 @@
     justify-content: center;
     align-items: center;
     margin-left: var(--gap-xs);
+} .tabs__rightAddonsMarginZero_1hwcb {
+    margin-left: 0;
 }

package/tabs/components/primary-tablist/mobile.css

@@ -462,6 +462,8 @@
     justify-content: center;
     align-items: center;
     margin-left: var(--gap-xs);
+}.tabs__rightAddonsMarginZero_1hwcb {
+    margin-left: 0;
 } :root {
     --color-dark-indigo: #0b1f35; /* deprecated */
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6); /* deprecated */

package/tabs/components/secondary-tablist/Component.desktop.js

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var desktop = require('../../../tag/desktop');
 var components_secondaryTablist_Component = require('./Component.js');
-var index_module = require('../../index.module-fb7f58aa.js');
+var index_module = require('../../index.module-140851b3.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }