@alfalab/core-components-switch 4.2.6 → 4.3.0

package/Component.js

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"switch__component_180is","start":"switch__start_180is","center":"switch__center_180is","addons":"switch__addons_180is","block":"switch__block_180is","switch":"switch__switch_180is","content":"switch__content_180is","label":"switch__label_180is","errorMessage":"switch__errorMessage_180is","hint":"switch__hint_180is","reversed":"switch__reversed_180is","checked":"switch__checked_180is","disabled":"switch__disabled_180is","focused":"switch__focused_180is"};
+var styles = {"component":"switch__component_13p1i","start":"switch__start_13p1i","center":"switch__center_13p1i","addons":"switch__addons_13p1i","block":"switch__block_13p1i","switch":"switch__switch_13p1i","content":"switch__content_13p1i","label":"switch__label_13p1i","errorMessage":"switch__errorMessage_13p1i","hint":"switch__hint_13p1i","reversed":"switch__reversed_13p1i","checked":"switch__checked_13p1i","disabled":"switch__disabled_13p1i","focused":"switch__focused_13p1i"};
 require('./index.css')
 
 var Switch = React.forwardRef(function (_a, ref) {

package/esm/Component.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import { dom } from '@alfalab/core-components-shared/esm';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"component":"switch__component_180is","start":"switch__start_180is","center":"switch__center_180is","addons":"switch__addons_180is","block":"switch__block_180is","switch":"switch__switch_180is","content":"switch__content_180is","label":"switch__label_180is","errorMessage":"switch__errorMessage_180is","hint":"switch__hint_180is","reversed":"switch__reversed_180is","checked":"switch__checked_180is","disabled":"switch__disabled_180is","focused":"switch__focused_180is"};
+var styles = {"component":"switch__component_13p1i","start":"switch__start_13p1i","center":"switch__center_13p1i","addons":"switch__addons_13p1i","block":"switch__block_13p1i","switch":"switch__switch_13p1i","content":"switch__content_13p1i","label":"switch__label_13p1i","errorMessage":"switch__errorMessage_13p1i","hint":"switch__hint_13p1i","reversed":"switch__reversed_13p1i","checked":"switch__checked_13p1i","disabled":"switch__disabled_13p1i","focused":"switch__focused_13p1i"};
 require('./index.css')
 
 var Switch = forwardRef(function (_a, ref) {

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1dewz */
+/* hash: b1g6i */
 :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 */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -65,7 +65,7 @@
     /* icon */
     --switch-icon-color: var(--color-static-neutral-0);
     --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
-} .switch__component_180is {
+} .switch__component_13p1i {
     display: inline-flex;
     align-items: flex-start;
     margin: 0;
@@ -73,20 +73,20 @@
     border: 0;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .switch__component_180is input {
+} .switch__component_13p1i input {
     opacity: 0;
     position: absolute;
-} .switch__start_180is {
+} .switch__start_13p1i {
     align-items: flex-start;
-} .switch__center_180is {
+} .switch__center_13p1i {
     align-items: center;
-} .switch__addons_180is {
+} .switch__addons_13p1i {
     margin-left: auto;
     padding-left: var(--gap-16);
     line-height: 24px;
-} .switch__block_180is {
+} .switch__block_13p1i {
     width: 100%;
-} .switch__switch_180is {
+} .switch__switch_13p1i {
     position: relative;
     border-radius: var(--border-radius-xl);
     width: 36px;
@@ -97,9 +97,9 @@
     border: 2px solid var(--switch-border-color);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box
-} .switch__switch_180is:hover {
+} .switch__switch_13p1i:hover {
         background-color: var(--switch-hover-bg-color);
-    } .switch__switch_180is:before {
+    } .switch__switch_13p1i:before {
     content: '';
     position: absolute;
     top: 0;
@@ -111,58 +111,58 @@
     background-color: var(--switch-icon-color);
     box-sizing: border-box;
     transition: transform 0.2s ease;
-} .switch__content_180is {
+} .switch__content_13p1i {
     margin-left: var(--gap-12);
     flex-grow: 1;
-} .switch__label_180is {
+} .switch__label_13p1i {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
     color: var(--switch-label-color);
-} .switch__label_180is:not(:only-child) {
+} .switch__label_13p1i:not(:only-child) {
     margin-bottom: var(--gap-4);
-} .switch__errorMessage_180is {
+} .switch__errorMessage_13p1i {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--switch-error-color);
-} .switch__hint_180is {
+} .switch__hint_13p1i {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--switch-hint-color);
-} /* Reversed state */ .switch__component_180is.switch__reversed_180is {
+} /* Reversed state */ .switch__component_13p1i.switch__reversed_13p1i {
     flex-direction: row-reverse;
-} .switch__reversed_180is .switch__content_180is {
+} .switch__reversed_13p1i .switch__content_13p1i {
     margin-right: var(--gap-16);
     margin-left: 0;
-} .switch__reversed_180is .switch__addons_180is {
+} .switch__reversed_13p1i .switch__addons_13p1i {
     margin-left: 0;
     padding-left: 0;
     margin-right: auto;
     padding-right: var(--gap-16);
-} /* Checked state */ .switch__checked_180is .switch__switch_180is {
+} /* Checked state */ .switch__checked_13p1i .switch__switch_13p1i {
     background-color: var(--switch-checked-bg-color)
-} .switch__checked_180is .switch__switch_180is:hover {
+} .switch__checked_13p1i .switch__switch_13p1i:hover {
         background-color: var(--switch-checked-hover-bg-color);
-    } .switch__checked_180is .switch__switch_180is:before {
+    } .switch__checked_13p1i .switch__switch_13p1i:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
-} /* Disabled state */ .switch__disabled_180is {
+} /* Disabled state */ .switch__disabled_13p1i {
     cursor: var(--disabled-cursor);
-} .switch__disabled_180is .switch__switch_180is {
+} .switch__disabled_13p1i .switch__switch_13p1i {
     background-color: var(--switch-disabled-bg-color)
-} .switch__disabled_180is .switch__switch_180is:before {
+} .switch__disabled_13p1i .switch__switch_13p1i:before {
         background-color: var(--switch-icon-disabled-color);
-    } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
+    } .switch__disabled_13p1i.switch__checked_13p1i .switch__switch_13p1i {
     background-color: var(--switch-disabled-checked-bg-color);
-} .switch__disabled_180is .switch__label_180is {
+} .switch__disabled_13p1i .switch__label_13p1i {
     color: var(--switch-disabled-color);
-} .switch__disabled_180is .switch__hint_180is {
+} .switch__disabled_13p1i .switch__hint_13p1i {
     color: var(--switch-disabled-color);
-} /* Focused state */ .switch__focused_180is .switch__switch_180is {
+} /* Focused state */ .switch__focused_13p1i .switch__switch_13p1i {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 1dewz */
+/* hash: b1g6i */
 :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 */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -65,7 +65,7 @@
     /* icon */
     --switch-icon-color: var(--color-static-neutral-0);
     --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
-} .switch__component_180is {
+} .switch__component_13p1i {
     display: inline-flex;
     align-items: flex-start;
     margin: 0;
@@ -73,20 +73,20 @@
     border: 0;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .switch__component_180is input {
+} .switch__component_13p1i input {
     opacity: 0;
     position: absolute;
-} .switch__start_180is {
+} .switch__start_13p1i {
     align-items: flex-start;
-} .switch__center_180is {
+} .switch__center_13p1i {
     align-items: center;
-} .switch__addons_180is {
+} .switch__addons_13p1i {
     margin-left: auto;
     padding-left: var(--gap-16);
     line-height: 24px;
-} .switch__block_180is {
+} .switch__block_13p1i {
     width: 100%;
-} .switch__switch_180is {
+} .switch__switch_13p1i {
     position: relative;
     border-radius: var(--border-radius-xl);
     width: 36px;
@@ -97,9 +97,9 @@
     border: 2px solid var(--switch-border-color);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box
-} .switch__switch_180is:hover {
+} .switch__switch_13p1i:hover {
         background-color: var(--switch-hover-bg-color);
-    } .switch__switch_180is:before {
+    } .switch__switch_13p1i:before {
     content: '';
     position: absolute;
     top: 0;
@@ -111,58 +111,58 @@
     background-color: var(--switch-icon-color);
     box-sizing: border-box;
     transition: transform 0.2s ease;
-} .switch__content_180is {
+} .switch__content_13p1i {
     margin-left: var(--gap-12);
     flex-grow: 1;
-} .switch__label_180is {
+} .switch__label_13p1i {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
     color: var(--switch-label-color);
-} .switch__label_180is:not(:only-child) {
+} .switch__label_13p1i:not(:only-child) {
     margin-bottom: var(--gap-4);
-} .switch__errorMessage_180is {
+} .switch__errorMessage_13p1i {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--switch-error-color);
-} .switch__hint_180is {
+} .switch__hint_13p1i {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--switch-hint-color);
-} /* Reversed state */ .switch__component_180is.switch__reversed_180is {
+} /* Reversed state */ .switch__component_13p1i.switch__reversed_13p1i {
     flex-direction: row-reverse;
-} .switch__reversed_180is .switch__content_180is {
+} .switch__reversed_13p1i .switch__content_13p1i {
     margin-right: var(--gap-16);
     margin-left: 0;
-} .switch__reversed_180is .switch__addons_180is {
+} .switch__reversed_13p1i .switch__addons_13p1i {
     margin-left: 0;
     padding-left: 0;
     margin-right: auto;
     padding-right: var(--gap-16);
-} /* Checked state */ .switch__checked_180is .switch__switch_180is {
+} /* Checked state */ .switch__checked_13p1i .switch__switch_13p1i {
     background-color: var(--switch-checked-bg-color)
-} .switch__checked_180is .switch__switch_180is:hover {
+} .switch__checked_13p1i .switch__switch_13p1i:hover {
         background-color: var(--switch-checked-hover-bg-color);
-    } .switch__checked_180is .switch__switch_180is:before {
+    } .switch__checked_13p1i .switch__switch_13p1i:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
-} /* Disabled state */ .switch__disabled_180is {
+} /* Disabled state */ .switch__disabled_13p1i {
     cursor: var(--disabled-cursor);
-} .switch__disabled_180is .switch__switch_180is {
+} .switch__disabled_13p1i .switch__switch_13p1i {
     background-color: var(--switch-disabled-bg-color)
-} .switch__disabled_180is .switch__switch_180is:before {
+} .switch__disabled_13p1i .switch__switch_13p1i:before {
         background-color: var(--switch-icon-disabled-color);
-    } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
+    } .switch__disabled_13p1i.switch__checked_13p1i .switch__switch_13p1i {
     background-color: var(--switch-disabled-checked-bg-color);
-} .switch__disabled_180is .switch__label_180is {
+} .switch__disabled_13p1i .switch__label_13p1i {
     color: var(--switch-disabled-color);
-} .switch__disabled_180is .switch__hint_180is {
+} .switch__disabled_13p1i .switch__hint_13p1i {
     color: var(--switch-disabled-color);
-} /* Focused state */ .switch__focused_180is .switch__switch_180is {
+} /* Focused state */ .switch__focused_13p1i .switch__switch_13p1i {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/Component.js

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { dom } from '@alfalab/core-components-shared/modern';
 import { useFocus } from '@alfalab/hooks';
 
-const styles = {"component":"switch__component_180is","start":"switch__start_180is","center":"switch__center_180is","addons":"switch__addons_180is","block":"switch__block_180is","switch":"switch__switch_180is","content":"switch__content_180is","label":"switch__label_180is","errorMessage":"switch__errorMessage_180is","hint":"switch__hint_180is","reversed":"switch__reversed_180is","checked":"switch__checked_180is","disabled":"switch__disabled_180is","focused":"switch__focused_180is"};
+const styles = {"component":"switch__component_13p1i","start":"switch__start_13p1i","center":"switch__center_13p1i","addons":"switch__addons_13p1i","block":"switch__block_13p1i","switch":"switch__switch_13p1i","content":"switch__content_13p1i","label":"switch__label_13p1i","errorMessage":"switch__errorMessage_13p1i","hint":"switch__hint_13p1i","reversed":"switch__reversed_13p1i","checked":"switch__checked_13p1i","disabled":"switch__disabled_13p1i","focused":"switch__focused_13p1i"};
 require('./index.css')
 
 const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, error, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1dewz */
+/* hash: b1g6i */
 :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 */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -65,7 +65,7 @@
     /* icon */
     --switch-icon-color: var(--color-static-neutral-0);
     --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
-} .switch__component_180is {
+} .switch__component_13p1i {
     display: inline-flex;
     align-items: flex-start;
     margin: 0;
@@ -73,20 +73,20 @@
     border: 0;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .switch__component_180is input {
+} .switch__component_13p1i input {
     opacity: 0;
     position: absolute;
-} .switch__start_180is {
+} .switch__start_13p1i {
     align-items: flex-start;
-} .switch__center_180is {
+} .switch__center_13p1i {
     align-items: center;
-} .switch__addons_180is {
+} .switch__addons_13p1i {
     margin-left: auto;
     padding-left: var(--gap-16);
     line-height: 24px;
-} .switch__block_180is {
+} .switch__block_13p1i {
     width: 100%;
-} .switch__switch_180is {
+} .switch__switch_13p1i {
     position: relative;
     border-radius: var(--border-radius-xl);
     width: 36px;
@@ -97,9 +97,9 @@
     border: 2px solid var(--switch-border-color);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box
-} .switch__switch_180is:hover {
+} .switch__switch_13p1i:hover {
         background-color: var(--switch-hover-bg-color);
-    } .switch__switch_180is:before {
+    } .switch__switch_13p1i:before {
     content: '';
     position: absolute;
     top: 0;
@@ -111,58 +111,58 @@
     background-color: var(--switch-icon-color);
     box-sizing: border-box;
     transition: transform 0.2s ease;
-} .switch__content_180is {
+} .switch__content_13p1i {
     margin-left: var(--gap-12);
     flex-grow: 1;
-} .switch__label_180is {
+} .switch__label_13p1i {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
     color: var(--switch-label-color);
-} .switch__label_180is:not(:only-child) {
+} .switch__label_13p1i:not(:only-child) {
     margin-bottom: var(--gap-4);
-} .switch__errorMessage_180is {
+} .switch__errorMessage_13p1i {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--switch-error-color);
-} .switch__hint_180is {
+} .switch__hint_13p1i {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--switch-hint-color);
-} /* Reversed state */ .switch__component_180is.switch__reversed_180is {
+} /* Reversed state */ .switch__component_13p1i.switch__reversed_13p1i {
     flex-direction: row-reverse;
-} .switch__reversed_180is .switch__content_180is {
+} .switch__reversed_13p1i .switch__content_13p1i {
     margin-right: var(--gap-16);
     margin-left: 0;
-} .switch__reversed_180is .switch__addons_180is {
+} .switch__reversed_13p1i .switch__addons_13p1i {
     margin-left: 0;
     padding-left: 0;
     margin-right: auto;
     padding-right: var(--gap-16);
-} /* Checked state */ .switch__checked_180is .switch__switch_180is {
+} /* Checked state */ .switch__checked_13p1i .switch__switch_13p1i {
     background-color: var(--switch-checked-bg-color)
-} .switch__checked_180is .switch__switch_180is:hover {
+} .switch__checked_13p1i .switch__switch_13p1i:hover {
         background-color: var(--switch-checked-hover-bg-color);
-    } .switch__checked_180is .switch__switch_180is:before {
+    } .switch__checked_13p1i .switch__switch_13p1i:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
-} /* Disabled state */ .switch__disabled_180is {
+} /* Disabled state */ .switch__disabled_13p1i {
     cursor: var(--disabled-cursor);
-} .switch__disabled_180is .switch__switch_180is {
+} .switch__disabled_13p1i .switch__switch_13p1i {
     background-color: var(--switch-disabled-bg-color)
-} .switch__disabled_180is .switch__switch_180is:before {
+} .switch__disabled_13p1i .switch__switch_13p1i:before {
         background-color: var(--switch-icon-disabled-color);
-    } .switch__disabled_180is.switch__checked_180is .switch__switch_180is {
+    } .switch__disabled_13p1i.switch__checked_13p1i .switch__switch_13p1i {
     background-color: var(--switch-disabled-checked-bg-color);
-} .switch__disabled_180is .switch__label_180is {
+} .switch__disabled_13p1i .switch__label_13p1i {
     color: var(--switch-disabled-color);
-} .switch__disabled_180is .switch__hint_180is {
+} .switch__disabled_13p1i .switch__hint_13p1i {
     color: var(--switch-disabled-color);
-} /* Focused state */ .switch__focused_180is .switch__switch_180is {
+} /* Focused state */ .switch__focused_13p1i .switch__switch_13p1i {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/moderncssm/Component.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+type Align = 'start' | 'center';
+type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
+    /**
+     * Управление состоянием вкл/выкл компонента
+     */
+    checked?: boolean;
+    /**
+     * Текст подписи к переключателю
+     */
+    label?: ReactNode;
+    /**
+     * Текст подсказки снизу
+     */
+    hint?: ReactNode;
+    /**
+     * Переключатель будет отрисован справа от контента
+     */
+    reversed?: boolean;
+    /**
+     * Выравнивание
+     */
+    align?: Align;
+    /**
+     * Дополнительный слот
+     */
+    addons?: React.ReactNode;
+    /**
+     * Растягивать ли компонент на всю ширину
+     */
+    block?: boolean;
+    /**
+     * Управление состоянием включен / выключен
+     */
+    disabled?: boolean;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Используйте props disabled
+     * Управление состоянием активен / неактивен
+     */
+    inactive?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Обработчик переключения компонента
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        checked: boolean;
+        name: InputHTMLAttributes<HTMLInputElement>['name'];
+    }) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
+    /**
+     * Управление состоянием вкл/выкл компонента
+     */
+    checked?: boolean | undefined;
+    /**
+     * Текст подписи к переключателю
+     */
+    label?: ReactNode;
+    /**
+     * Текст подсказки снизу
+     */
+    hint?: ReactNode;
+    /**
+     * Переключатель будет отрисован справа от контента
+     */
+    reversed?: boolean | undefined;
+    /**
+     * Выравнивание
+     */
+    align?: Align | undefined;
+    /**
+     * Дополнительный слот
+     */
+    addons?: React.ReactNode;
+    /**
+     * Растягивать ли компонент на всю ширину
+     */
+    block?: boolean | undefined;
+    /**
+     * Управление состоянием включен / выключен
+     */
+    disabled?: boolean | undefined;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Используйте props disabled
+     * Управление состоянием активен / неактивен
+     */
+    inactive?: boolean | undefined;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Обработчик переключения компонента
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
+        checked: boolean;
+        name: InputHTMLAttributes<HTMLInputElement>['name'];
+    }) => void) | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+} & React.RefAttributes<HTMLLabelElement>>;
+export { SwitchProps, Switch };

package/moderncssm/Component.js

@@ -0,0 +1,36 @@
+import React, { forwardRef, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { dom } from '@alfalab/core-components-shared/moderncssm';
+import { useFocus } from '@alfalab/hooks';
+import styles from './index.module.css';
+
+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) => {
+        if (onChange) {
+            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,
+            [styles.reversed]: reversed,
+            [styles.focused]: focused,
+            [styles.block]: block,
+        }), 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 || errorMessage) && (React.createElement("span", { className: styles.content },
+            label && React.createElement("span", { className: styles.label }, label),
+            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))));
+});
+Switch.displayName = 'Switch';
+
+export { Switch };

package/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { Switch } from './Component.js';

package/moderncssm/index.module.css

@@ -0,0 +1,189 @@
+/* */
+
+:root {
+    --switch-label-color: var(--color-light-text-primary);
+    --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);
+
+    /* checked */
+    --switch-checked-bg-color: var(--color-light-status-positive);
+    --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
+
+    /* disabled */
+    --switch-disabled-color: var(--color-light-text-secondary);
+    --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
+
+    /* disabled checked */
+    --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
+
+    /* icon */
+    --switch-icon-color: var(--color-static-neutral-0);
+    --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
+}
+
+.component {
+    display: inline-flex;
+    align-items: flex-start;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.component input {
+    opacity: 0;
+    position: absolute;
+}
+
+.start {
+    align-items: flex-start;
+}
+
+.center {
+    align-items: center;
+}
+
+.addons {
+    margin-left: auto;
+    padding-left: var(--gap-16);
+    line-height: 24px;
+}
+
+.block {
+    width: 100%;
+}
+
+.switch {
+    position: relative;
+    border-radius: var(--border-radius-xl);
+    width: 36px;
+    height: 20px;
+    margin: var(--gap-2);
+    flex-shrink: 0;
+    background-color: var(--switch-bg-color);
+    border: 2px solid var(--switch-border-color);
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    box-sizing: border-box
+}
+
+.switch:hover {
+        background-color: var(--switch-hover-bg-color);
+    }
+
+.switch:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 16px;
+    display: block;
+    border-radius: var(--border-radius-circle);
+    background-color: var(--switch-icon-color);
+    box-sizing: border-box;
+    transition: transform 0.2s ease;
+}
+
+.content {
+    margin-left: var(--gap-12);
+    flex-grow: 1;
+}
+
+.label {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    display: block;
+    color: var(--switch-label-color);
+}
+
+.label:not(:only-child) {
+    margin-bottom: var(--gap-4);
+}
+
+.errorMessage {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    color: var(--switch-error-color);
+}
+
+.hint {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    display: block;
+    color: var(--switch-hint-color);
+}
+
+/* Reversed state */
+
+.component.reversed {
+    flex-direction: row-reverse;
+}
+
+.reversed .content {
+    margin-right: var(--gap-16);
+    margin-left: 0;
+}
+
+.reversed .addons {
+    margin-left: 0;
+    padding-left: 0;
+    margin-right: auto;
+    padding-right: var(--gap-16);
+}
+
+/* Checked state */
+
+.checked .switch {
+    background-color: var(--switch-checked-bg-color)
+}
+
+.checked .switch:hover {
+        background-color: var(--switch-checked-hover-bg-color);
+    }
+
+.checked .switch:before {
+    /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
+    transform: translateX(16px);
+}
+
+/* Disabled state */
+
+.disabled {
+    cursor: var(--disabled-cursor);
+}
+
+.disabled .switch {
+    background-color: var(--switch-disabled-bg-color)
+}
+
+.disabled .switch:before {
+        background-color: var(--switch-icon-disabled-color);
+    }
+
+.disabled.checked .switch {
+    background-color: var(--switch-disabled-checked-bg-color);
+}
+
+.disabled .label {
+    color: var(--switch-disabled-color);
+}
+
+.disabled .hint {
+    color: var(--switch-disabled-color);
+}
+
+/* Focused state */
+
+.focused .switch {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-switch",
-    "version": "4.2.6",
+    "version": "4.3.0",
     "description": "",
     "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
     "keywords": [],
@@ -21,6 +21,6 @@
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 :root {
     --switch-label-color: var(--color-light-text-primary);