@alfalab/core-components-switch 6.0.2-alfasans → 6.0.3-alfasans

package/Component.d.ts

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

package/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    forwardRef,\n    type InputHTMLAttributes,\n    type ReactNode,\n    useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n    default: defaultStyles,\n    inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n    /**\n     * Управление состоянием вкл/выкл компонента\n     */\n    checked?: boolean;\n\n    /**\n     * Текст подписи к переключателю\n     */\n    label?: ReactNode;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Переключатель будет отрисован справа от контента\n     */\n    reversed?: boolean;\n\n    /**\n     * Выравнивание\n     */\n    align?: Align;\n\n    /**\n     * Дополнительный слот\n     */\n    addons?: React.ReactNode;\n\n    /**\n     * Растягивать ли компонент на всю ширину\n     */\n    block?: boolean;\n\n    /**\n     * Управление состоянием включен / выключен\n     */\n    disabled?: boolean;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Обработчик переключения компонента\n     */\n    onChange?: (\n        event: ChangeEvent<HTMLInputElement>,\n        payload: {\n            checked: boolean;\n            name: InputHTMLAttributes<HTMLInputElement>['name'];\n        },\n    ) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Набор цветов для компонента\n     * @default default\n     */\n    colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n    (\n        {\n            reversed = false,\n            checked = false,\n            align = 'start',\n            addons,\n            block,\n            disabled,\n            error,\n            label,\n            hint,\n            name,\n            value,\n            className,\n            onChange,\n            dataTestId,\n            colors = 'default',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const [focused] = useFocus(labelRef, 'keyboard');\n\n        const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n            if (onChange) {\n                onChange(e, { checked: e.target.checked, name });\n            }\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <label\n                className={cn(styles.component, styles[align], className, {\n                    [styles.disabled]: disabled,\n                    [colorStyles[colors].disabled]: disabled,\n\n                    [styles.checked]: checked,\n                    [colorStyles[colors].checked]: checked,\n\n                    [styles.reversed]: reversed,\n                    [styles.focused]: focused,\n                    [styles.block]: block,\n                })}\n                ref={mergeRefs([labelRef, ref])}\n            >\n                <input\n                    type='checkbox'\n                    onChange={handleChange}\n                    disabled={disabled}\n                    checked={checked}\n                    name={name}\n                    value={value}\n                    data-test-id={dataTestId}\n                    {...restProps}\n                />\n\n                <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n                {(label || hint || errorMessage) && (\n                    <span className={styles.content}>\n                        {label && (\n                            <span className={cn(styles.label, colorStyles[colors].label)}>\n                                {label}\n                            </span>\n                        )}\n                        {hint && !errorMessage && (\n                            <span className={cn(styles.hint, colorStyles[colors].hint)}>\n                                {hint}\n                            </span>\n                        )}\n\n                        {errorMessage && (\n                            <span className={styles.errorMessage} role='alert'>\n                                {errorMessage}\n                            </span>\n                        )}\n                    </span>\n                )}\n\n                {addons && (\n                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                    <span className={styles.addons} onClick={dom.preventDefault}>\n                        {addons}\n                    </span>\n                )}\n            </label>\n        );\n    },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","dom"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    forwardRef,\n    type InputHTMLAttributes,\n    type ReactNode,\n    useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n    default: defaultStyles,\n    inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n    /**\n     * Управление состоянием вкл/выкл компонента\n     */\n    checked?: boolean;\n\n    /**\n     * Текст подписи к переключателю\n     */\n    label?: ReactNode;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Переключатель будет отрисован справа от контента\n     */\n    reversed?: boolean;\n\n    /**\n     * Выравнивание\n     */\n    align?: Align;\n\n    /**\n     * Дополнительный слот\n     */\n    addons?: React.ReactNode;\n\n    /**\n     * Растягивать ли компонент на всю ширину\n     */\n    block?: boolean;\n\n    /**\n     * Управление состоянием включен / выключен\n     */\n    disabled?: boolean;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Обработчик переключения компонента\n     */\n    onChange?: (\n        event: ChangeEvent<HTMLInputElement>,\n        payload: {\n            checked: boolean;\n            name: InputHTMLAttributes<HTMLInputElement>['name'];\n        },\n    ) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Набор цветов для компонента\n     * @default default\n     */\n    colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n    (\n        {\n            reversed = false,\n            checked = false,\n            align = 'start',\n            addons,\n            block,\n            disabled,\n            error,\n            label,\n            hint,\n            name,\n            value,\n            className,\n            onChange,\n            dataTestId,\n            colors = 'default',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const [focused] = useFocus(labelRef, 'keyboard');\n\n        const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n            if (onChange) {\n                onChange(e, { checked: e.target.checked, name });\n            }\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <label\n                className={cn(styles.component, styles[align], className, {\n                    [styles.disabled]: disabled,\n                    [colorStyles[colors].disabled]: disabled,\n\n                    [styles.checked]: checked,\n                    [colorStyles[colors].checked]: checked,\n\n                    [styles.reversed]: reversed,\n                    [styles.focused]: focused,\n                    [styles.block]: block,\n                })}\n                ref={mergeRefs([labelRef, ref])}\n            >\n                <input\n                    type='checkbox'\n                    onChange={handleChange}\n                    disabled={disabled}\n                    checked={checked}\n                    name={name}\n                    value={value}\n                    data-test-id={dataTestId}\n                    {...restProps}\n                />\n\n                <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n                {(label || hint || errorMessage) && (\n                    <span className={styles.content}>\n                        {label && (\n                            <span className={cn(styles.label, colorStyles[colors].label)}>\n                                {label}\n                            </span>\n                        )}\n                        {hint && !errorMessage && (\n                            <span className={cn(styles.hint, colorStyles[colors].hint)}>\n                                {hint}\n                            </span>\n                        )}\n\n                        {errorMessage && (\n                            <span className={styles.errorMessage} role='alert'>\n                                {errorMessage}\n                            </span>\n                        )}\n                    </span>\n                )}\n\n                {addons && (\n                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                    <span className={styles.addons} onClick={dom.preventDefault}>\n                        {addons}\n                    </span>\n                )}\n            </label>\n        );\n    },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","dom"],"mappings":"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"}

package/cssm/Component.d.ts

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

package/cssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    forwardRef,\n    type InputHTMLAttributes,\n    type ReactNode,\n    useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n    default: defaultStyles,\n    inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n    /**\n     * Управление состоянием вкл/выкл компонента\n     */\n    checked?: boolean;\n\n    /**\n     * Текст подписи к переключателю\n     */\n    label?: ReactNode;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Переключатель будет отрисован справа от контента\n     */\n    reversed?: boolean;\n\n    /**\n     * Выравнивание\n     */\n    align?: Align;\n\n    /**\n     * Дополнительный слот\n     */\n    addons?: React.ReactNode;\n\n    /**\n     * Растягивать ли компонент на всю ширину\n     */\n    block?: boolean;\n\n    /**\n     * Управление состоянием включен / выключен\n     */\n    disabled?: boolean;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Обработчик переключения компонента\n     */\n    onChange?: (\n        event: ChangeEvent<HTMLInputElement>,\n        payload: {\n            checked: boolean;\n            name: InputHTMLAttributes<HTMLInputElement>['name'];\n        },\n    ) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Набор цветов для компонента\n     * @default default\n     */\n    colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n    (\n        {\n            reversed = false,\n            checked = false,\n            align = 'start',\n            addons,\n            block,\n            disabled,\n            error,\n            label,\n            hint,\n            name,\n            value,\n            className,\n            onChange,\n            dataTestId,\n            colors = 'default',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const [focused] = useFocus(labelRef, 'keyboard');\n\n        const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n            if (onChange) {\n                onChange(e, { checked: e.target.checked, name });\n            }\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <label\n                className={cn(styles.component, styles[align], className, {\n                    [styles.disabled]: disabled,\n                    [colorStyles[colors].disabled]: disabled,\n\n                    [styles.checked]: checked,\n                    [colorStyles[colors].checked]: checked,\n\n                    [styles.reversed]: reversed,\n                    [styles.focused]: focused,\n                    [styles.block]: block,\n                })}\n                ref={mergeRefs([labelRef, ref])}\n            >\n                <input\n                    type='checkbox'\n                    onChange={handleChange}\n                    disabled={disabled}\n                    checked={checked}\n                    name={name}\n                    value={value}\n                    data-test-id={dataTestId}\n                    {...restProps}\n                />\n\n                <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n                {(label || hint || errorMessage) && (\n                    <span className={styles.content}>\n                        {label && (\n                            <span className={cn(styles.label, colorStyles[colors].label)}>\n                                {label}\n                            </span>\n                        )}\n                        {hint && !errorMessage && (\n                            <span className={cn(styles.hint, colorStyles[colors].hint)}>\n                                {hint}\n                            </span>\n                        )}\n\n                        {errorMessage && (\n                            <span className={styles.errorMessage} role='alert'>\n                                {errorMessage}\n                            </span>\n                        )}\n                    </span>\n                )}\n\n                {addons && (\n                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                    <span className={styles.addons} onClick={dom.preventDefault}>\n                        {addons}\n                    </span>\n                )}\n            </label>\n        );\n    },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","dom"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    forwardRef,\n    type InputHTMLAttributes,\n    type ReactNode,\n    useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n    default: defaultStyles,\n    inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n    /**\n     * Управление состоянием вкл/выкл компонента\n     */\n    checked?: boolean;\n\n    /**\n     * Текст подписи к переключателю\n     */\n    label?: ReactNode;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Переключатель будет отрисован справа от контента\n     */\n    reversed?: boolean;\n\n    /**\n     * Выравнивание\n     */\n    align?: Align;\n\n    /**\n     * Дополнительный слот\n     */\n    addons?: React.ReactNode;\n\n    /**\n     * Растягивать ли компонент на всю ширину\n     */\n    block?: boolean;\n\n    /**\n     * Управление состоянием включен / выключен\n     */\n    disabled?: boolean;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Обработчик переключения компонента\n     */\n    onChange?: (\n        event: ChangeEvent<HTMLInputElement>,\n        payload: {\n            checked: boolean;\n            name: InputHTMLAttributes<HTMLInputElement>['name'];\n        },\n    ) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Набор цветов для компонента\n     * @default default\n     */\n    colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n    (\n        {\n            reversed = false,\n            checked = false,\n            align = 'start',\n            addons,\n            block,\n            disabled,\n            error,\n            label,\n            hint,\n            name,\n            value,\n            className,\n            onChange,\n            dataTestId,\n            colors = 'default',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const [focused] = useFocus(labelRef, 'keyboard');\n\n        const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n            if (onChange) {\n                onChange(e, { checked: e.target.checked, name });\n            }\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <label\n                className={cn(styles.component, styles[align], className, {\n                    [styles.disabled]: disabled,\n                    [colorStyles[colors].disabled]: disabled,\n\n                    [styles.checked]: checked,\n                    [colorStyles[colors].checked]: checked,\n\n                    [styles.reversed]: reversed,\n                    [styles.focused]: focused,\n                    [styles.block]: block,\n                })}\n                ref={mergeRefs([labelRef, ref])}\n            >\n                <input\n                    type='checkbox'\n                    onChange={handleChange}\n                    disabled={disabled}\n                    checked={checked}\n                    name={name}\n                    value={value}\n                    data-test-id={dataTestId}\n                    {...restProps}\n                />\n\n                <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n                {(label || hint || errorMessage) && (\n                    <span className={styles.content}>\n                        {label && (\n                            <span className={cn(styles.label, colorStyles[colors].label)}>\n                                {label}\n                            </span>\n                        )}\n                        {hint && !errorMessage && (\n                            <span className={cn(styles.hint, colorStyles[colors].hint)}>\n                                {hint}\n                            </span>\n                        )}\n\n                        {errorMessage && (\n                            <span className={styles.errorMessage} role='alert'>\n                                {errorMessage}\n                            </span>\n                        )}\n                    </span>\n                )}\n\n                {addons && (\n                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                    <span className={styles.addons} onClick={dom.preventDefault}>\n                        {addons}\n                    </span>\n                )}\n            </label>\n        );\n    },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","dom"],"mappings":"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"}

package/cssm/types/colors.d.ts

@@ -1 +1 @@
-export declare type Colors = 'default' | 'inverted';
+export type Colors = 'default' | 'inverted';

package/default.css

@@ -20,36 +20,36 @@
     --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
     --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
 }
-.switch__switch_a3snf {
+.switch__switch_1i7xt {
     background-color: var(--switch-bg-color);
 }
-.switch__switch_a3snf:hover {
+.switch__switch_1i7xt:hover {
         background-color: var(--switch-hover-bg-color);
     }
-.switch__label_a3snf {
+.switch__label_1i7xt {
     color: var(--switch-label-color);
 }
-.switch__hint_a3snf {
+.switch__hint_1i7xt {
     color: var(--switch-hint-color);
 }
-.switch__checked_a3snf .switch__switch_a3snf {
+.switch__checked_1i7xt .switch__switch_1i7xt {
     background-color: var(--switch-checked-bg-color);
 }
-.switch__checked_a3snf .switch__switch_a3snf:hover {
+.switch__checked_1i7xt .switch__switch_1i7xt:hover {
         background-color: var(--switch-checked-hover-bg-color);
     }
-.switch__disabled_a3snf .switch__label_a3snf {
+.switch__disabled_1i7xt .switch__label_1i7xt {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_a3snf .switch__hint_a3snf {
+.switch__disabled_1i7xt .switch__hint_1i7xt {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_a3snf .switch__switch_a3snf {
+.switch__disabled_1i7xt .switch__switch_1i7xt {
     background-color: var(--switch-disabled-bg-color);
 }
-.switch__disabled_a3snf .switch__switch_a3snf:before {
+.switch__disabled_1i7xt .switch__switch_1i7xt:before {
         background-color: var(--switch-icon-disabled-color);
     }
-.switch__disabled_a3snf.switch__checked_a3snf .switch__switch_a3snf {
+.switch__disabled_1i7xt.switch__checked_1i7xt .switch__switch_1i7xt {
     background-color: var(--switch-disabled-checked-bg-color);
 }

package/default.module.css.js

@@ -2,7 +2,7 @@
 
 require('./default.css');
 
-var defaultStyles = {"switch":"switch__switch_a3snf","label":"switch__label_a3snf","hint":"switch__hint_a3snf","checked":"switch__checked_a3snf","disabled":"switch__disabled_a3snf"};
+var defaultStyles = {"switch":"switch__switch_1i7xt","label":"switch__label_1i7xt","hint":"switch__hint_1i7xt","checked":"switch__checked_1i7xt","disabled":"switch__disabled_1i7xt"};
 
 module.exports = defaultStyles;
 //# sourceMappingURL=default.module.css.js.map

package/default.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import './vars.css';\n\n.switch {\n    background-color: var(--switch-bg-color);\n\n    &:hover {\n        background-color: var(--switch-hover-bg-color);\n    }\n}\n\n.label {\n    color: var(--switch-label-color);\n}\n\n.hint {\n    color: var(--switch-hint-color);\n}\n\n.checked .switch {\n    background-color: var(--switch-checked-bg-color);\n\n    &:hover {\n        background-color: var(--switch-checked-hover-bg-color);\n    }\n}\n\n.disabled .label {\n    color: var(--switch-disabled-color);\n}\n\n.disabled .hint {\n    color: var(--switch-disabled-color);\n}\n\n.disabled .switch {\n    background-color: var(--switch-disabled-bg-color);\n\n    &:before {\n        background-color: var(--switch-icon-disabled-color);\n    }\n}\n\n.disabled.checked .switch {\n    background-color: var(--switch-disabled-checked-bg-color);\n}\n"],"names":[],"mappings":";;;;AAEgB,oBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
+{"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.switch {\n    background-color: var(--switch-bg-color);\n\n    &:hover {\n        background-color: var(--switch-hover-bg-color);\n    }\n}\n\n.label {\n    color: var(--switch-label-color);\n}\n\n.hint {\n    color: var(--switch-hint-color);\n}\n\n.checked .switch {\n    background-color: var(--switch-checked-bg-color);\n\n    &:hover {\n        background-color: var(--switch-checked-hover-bg-color);\n    }\n}\n\n.disabled .label {\n    color: var(--switch-disabled-color);\n}\n\n.disabled .hint {\n    color: var(--switch-disabled-color);\n}\n\n.disabled .switch {\n    background-color: var(--switch-disabled-bg-color);\n\n    &:before {\n        background-color: var(--switch-icon-disabled-color);\n    }\n}\n\n.disabled.checked .switch {\n    background-color: var(--switch-disabled-checked-bg-color);\n}\n"],"names":[],"mappings":";;;;AAEgB,oBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}

package/esm/Component.d.ts

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

package/esm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    forwardRef,\n    type InputHTMLAttributes,\n    type ReactNode,\n    useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n    default: defaultStyles,\n    inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n    /**\n     * Управление состоянием вкл/выкл компонента\n     */\n    checked?: boolean;\n\n    /**\n     * Текст подписи к переключателю\n     */\n    label?: ReactNode;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Переключатель будет отрисован справа от контента\n     */\n    reversed?: boolean;\n\n    /**\n     * Выравнивание\n     */\n    align?: Align;\n\n    /**\n     * Дополнительный слот\n     */\n    addons?: React.ReactNode;\n\n    /**\n     * Растягивать ли компонент на всю ширину\n     */\n    block?: boolean;\n\n    /**\n     * Управление состоянием включен / выключен\n     */\n    disabled?: boolean;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Обработчик переключения компонента\n     */\n    onChange?: (\n        event: ChangeEvent<HTMLInputElement>,\n        payload: {\n            checked: boolean;\n            name: InputHTMLAttributes<HTMLInputElement>['name'];\n        },\n    ) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Набор цветов для компонента\n     * @default default\n     */\n    colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n    (\n        {\n            reversed = false,\n            checked = false,\n            align = 'start',\n            addons,\n            block,\n            disabled,\n            error,\n            label,\n            hint,\n            name,\n            value,\n            className,\n            onChange,\n            dataTestId,\n            colors = 'default',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const [focused] = useFocus(labelRef, 'keyboard');\n\n        const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n            if (onChange) {\n                onChange(e, { checked: e.target.checked, name });\n            }\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <label\n                className={cn(styles.component, styles[align], className, {\n                    [styles.disabled]: disabled,\n                    [colorStyles[colors].disabled]: disabled,\n\n                    [styles.checked]: checked,\n                    [colorStyles[colors].checked]: checked,\n\n                    [styles.reversed]: reversed,\n                    [styles.focused]: focused,\n                    [styles.block]: block,\n                })}\n                ref={mergeRefs([labelRef, ref])}\n            >\n                <input\n                    type='checkbox'\n                    onChange={handleChange}\n                    disabled={disabled}\n                    checked={checked}\n                    name={name}\n                    value={value}\n                    data-test-id={dataTestId}\n                    {...restProps}\n                />\n\n                <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n                {(label || hint || errorMessage) && (\n                    <span className={styles.content}>\n                        {label && (\n                            <span className={cn(styles.label, colorStyles[colors].label)}>\n                                {label}\n                            </span>\n                        )}\n                        {hint && !errorMessage && (\n                            <span className={cn(styles.hint, colorStyles[colors].hint)}>\n                                {hint}\n                            </span>\n                        )}\n\n                        {errorMessage && (\n                            <span className={styles.errorMessage} role='alert'>\n                                {errorMessage}\n                            </span>\n                        )}\n                    </span>\n                )}\n\n                {addons && (\n                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                    <span className={styles.addons} onClick={dom.preventDefault}>\n                        {addons}\n                    </span>\n                )}\n            </label>\n        );\n    },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    forwardRef,\n    type InputHTMLAttributes,\n    type ReactNode,\n    useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n    default: defaultStyles,\n    inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n    /**\n     * Управление состоянием вкл/выкл компонента\n     */\n    checked?: boolean;\n\n    /**\n     * Текст подписи к переключателю\n     */\n    label?: ReactNode;\n\n    /**\n     * Текст подсказки снизу\n     */\n    hint?: ReactNode;\n\n    /**\n     * Переключатель будет отрисован справа от контента\n     */\n    reversed?: boolean;\n\n    /**\n     * Выравнивание\n     */\n    align?: Align;\n\n    /**\n     * Дополнительный слот\n     */\n    addons?: React.ReactNode;\n\n    /**\n     * Растягивать ли компонент на всю ширину\n     */\n    block?: boolean;\n\n    /**\n     * Управление состоянием включен / выключен\n     */\n    disabled?: boolean;\n\n    /**\n     * Отображение ошибки\n     */\n    error?: ReactNode | boolean;\n\n    /**\n     * Обработчик переключения компонента\n     */\n    onChange?: (\n        event: ChangeEvent<HTMLInputElement>,\n        payload: {\n            checked: boolean;\n            name: InputHTMLAttributes<HTMLInputElement>['name'];\n        },\n    ) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Набор цветов для компонента\n     * @default default\n     */\n    colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n    (\n        {\n            reversed = false,\n            checked = false,\n            align = 'start',\n            addons,\n            block,\n            disabled,\n            error,\n            label,\n            hint,\n            name,\n            value,\n            className,\n            onChange,\n            dataTestId,\n            colors = 'default',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const [focused] = useFocus(labelRef, 'keyboard');\n\n        const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n            if (onChange) {\n                onChange(e, { checked: e.target.checked, name });\n            }\n        };\n\n        const errorMessage = typeof error === 'boolean' ? '' : error;\n\n        return (\n            <label\n                className={cn(styles.component, styles[align], className, {\n                    [styles.disabled]: disabled,\n                    [colorStyles[colors].disabled]: disabled,\n\n                    [styles.checked]: checked,\n                    [colorStyles[colors].checked]: checked,\n\n                    [styles.reversed]: reversed,\n                    [styles.focused]: focused,\n                    [styles.block]: block,\n                })}\n                ref={mergeRefs([labelRef, ref])}\n            >\n                <input\n                    type='checkbox'\n                    onChange={handleChange}\n                    disabled={disabled}\n                    checked={checked}\n                    name={name}\n                    value={value}\n                    data-test-id={dataTestId}\n                    {...restProps}\n                />\n\n                <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n                {(label || hint || errorMessage) && (\n                    <span className={styles.content}>\n                        {label && (\n                            <span className={cn(styles.label, colorStyles[colors].label)}>\n                                {label}\n                            </span>\n                        )}\n                        {hint && !errorMessage && (\n                            <span className={cn(styles.hint, colorStyles[colors].hint)}>\n                                {hint}\n                            </span>\n                        )}\n\n                        {errorMessage && (\n                            <span className={styles.errorMessage} role='alert'>\n                                {errorMessage}\n                            </span>\n                        )}\n                    </span>\n                )}\n\n                {addons && (\n                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                    <span className={styles.addons} onClick={dom.preventDefault}>\n                        {addons}\n                    </span>\n                )}\n            </label>\n        );\n    },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":[],"mappings":"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"}

package/esm/default.css

@@ -20,36 +20,36 @@
     --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
     --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
 }
-.switch__switch_a3snf {
+.switch__switch_1i7xt {
     background-color: var(--switch-bg-color);
 }
-.switch__switch_a3snf:hover {
+.switch__switch_1i7xt:hover {
         background-color: var(--switch-hover-bg-color);
     }
-.switch__label_a3snf {
+.switch__label_1i7xt {
     color: var(--switch-label-color);
 }
-.switch__hint_a3snf {
+.switch__hint_1i7xt {
     color: var(--switch-hint-color);
 }
-.switch__checked_a3snf .switch__switch_a3snf {
+.switch__checked_1i7xt .switch__switch_1i7xt {
     background-color: var(--switch-checked-bg-color);
 }
-.switch__checked_a3snf .switch__switch_a3snf:hover {
+.switch__checked_1i7xt .switch__switch_1i7xt:hover {
         background-color: var(--switch-checked-hover-bg-color);
     }
-.switch__disabled_a3snf .switch__label_a3snf {
+.switch__disabled_1i7xt .switch__label_1i7xt {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_a3snf .switch__hint_a3snf {
+.switch__disabled_1i7xt .switch__hint_1i7xt {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_a3snf .switch__switch_a3snf {
+.switch__disabled_1i7xt .switch__switch_1i7xt {
     background-color: var(--switch-disabled-bg-color);
 }
-.switch__disabled_a3snf .switch__switch_a3snf:before {
+.switch__disabled_1i7xt .switch__switch_1i7xt:before {
         background-color: var(--switch-icon-disabled-color);
     }
-.switch__disabled_a3snf.switch__checked_a3snf .switch__switch_a3snf {
+.switch__disabled_1i7xt.switch__checked_1i7xt .switch__switch_1i7xt {
     background-color: var(--switch-disabled-checked-bg-color);
 }

package/esm/default.module.css.js

@@ -1,6 +1,6 @@
 import './default.css';
 
-var defaultStyles = {"switch":"switch__switch_a3snf","label":"switch__label_a3snf","hint":"switch__hint_a3snf","checked":"switch__checked_a3snf","disabled":"switch__disabled_a3snf"};
+var defaultStyles = {"switch":"switch__switch_1i7xt","label":"switch__label_1i7xt","hint":"switch__hint_1i7xt","checked":"switch__checked_1i7xt","disabled":"switch__disabled_1i7xt"};
 
 export { defaultStyles as default };
 //# sourceMappingURL=default.module.css.js.map

package/esm/default.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import './vars.css';\n\n.switch {\n    background-color: var(--switch-bg-color);\n\n    &:hover {\n        background-color: var(--switch-hover-bg-color);\n    }\n}\n\n.label {\n    color: var(--switch-label-color);\n}\n\n.hint {\n    color: var(--switch-hint-color);\n}\n\n.checked .switch {\n    background-color: var(--switch-checked-bg-color);\n\n    &:hover {\n        background-color: var(--switch-checked-hover-bg-color);\n    }\n}\n\n.disabled .label {\n    color: var(--switch-disabled-color);\n}\n\n.disabled .hint {\n    color: var(--switch-disabled-color);\n}\n\n.disabled .switch {\n    background-color: var(--switch-disabled-bg-color);\n\n    &:before {\n        background-color: var(--switch-icon-disabled-color);\n    }\n}\n\n.disabled.checked .switch {\n    background-color: var(--switch-disabled-checked-bg-color);\n}\n"],"names":[],"mappings":";;AAEgB,oBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
+{"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.switch {\n    background-color: var(--switch-bg-color);\n\n    &:hover {\n        background-color: var(--switch-hover-bg-color);\n    }\n}\n\n.label {\n    color: var(--switch-label-color);\n}\n\n.hint {\n    color: var(--switch-hint-color);\n}\n\n.checked .switch {\n    background-color: var(--switch-checked-bg-color);\n\n    &:hover {\n        background-color: var(--switch-checked-hover-bg-color);\n    }\n}\n\n.disabled .label {\n    color: var(--switch-disabled-color);\n}\n\n.disabled .hint {\n    color: var(--switch-disabled-color);\n}\n\n.disabled .switch {\n    background-color: var(--switch-disabled-bg-color);\n\n    &:before {\n        background-color: var(--switch-icon-disabled-color);\n    }\n}\n\n.disabled.checked .switch {\n    background-color: var(--switch-disabled-checked-bg-color);\n}\n"],"names":[],"mappings":";;AAEgB,oBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}

package/esm/index.css

@@ -33,7 +33,7 @@
     --switch-error-color: var(--color-light-text-negative);
     --switch-icon-color: var(--color-static-neutral-0);
 }
-.switch__component_4xozt {
+.switch__component_vunw2 {
     display: inline-flex;
     align-items: flex-start;
     margin: var(--gap-0);
@@ -42,25 +42,25 @@
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.switch__component_4xozt input {
+.switch__component_vunw2 input {
     opacity: 0;
     position: absolute;
 }
-.switch__start_4xozt {
+.switch__start_vunw2 {
     align-items: flex-start;
 }
-.switch__center_4xozt {
+.switch__center_vunw2 {
     align-items: center;
 }
-.switch__addons_4xozt {
+.switch__addons_vunw2 {
     margin-left: auto;
     padding-left: var(--gap-16);
     line-height: 24px;
 }
-.switch__block_4xozt {
+.switch__block_vunw2 {
     width: 100%;
 }
-.switch__switch_4xozt {
+.switch__switch_vunw2 {
     position: relative;
     border-radius: var(--border-radius-16);
     width: 36px;
@@ -73,7 +73,7 @@
         border-color 0.2s ease;
     box-sizing: border-box;
 }
-.switch__switch_4xozt:before {
+.switch__switch_vunw2:before {
     content: '';
     position: absolute;
     top: var(--gap-0);
@@ -86,11 +86,11 @@
     box-sizing: border-box;
     transition: transform 0.2s ease;
 }
-.switch__content_4xozt {
+.switch__content_vunw2 {
     margin-left: var(--gap-12);
     flex-grow: 1;
 }
-.switch__label_4xozt {
+.switch__label_vunw2 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -98,10 +98,10 @@
     font-family: var(--font-family-alfasans);
     display: block;
 }
-.switch__label_4xozt:not(:only-child) {
+.switch__label_vunw2:not(:only-child) {
     margin-bottom: var(--gap-4);
 }
-.switch__errorMessage_4xozt {
+.switch__errorMessage_vunw2 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -109,7 +109,7 @@
     font-family: var(--font-family-alfasans);
     color: var(--switch-error-color);
 }
-.switch__hint_4xozt {
+.switch__hint_vunw2 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -117,26 +117,26 @@
     font-family: var(--font-family-alfasans);
     display: block;
 }
-.switch__component_4xozt.switch__reversed_4xozt {
+.switch__component_vunw2.switch__reversed_vunw2 {
     flex-direction: row-reverse;
 }
-.switch__reversed_4xozt .switch__content_4xozt {
+.switch__reversed_vunw2 .switch__content_vunw2 {
     margin-right: var(--gap-16);
     margin-left: var(--gap-0);
 }
-.switch__reversed_4xozt .switch__addons_4xozt {
+.switch__reversed_vunw2 .switch__addons_vunw2 {
     margin-left: var(--gap-0);
     padding-left: var(--gap-0);
     margin-right: auto;
     padding-right: var(--gap-16);
 }
-.switch__checked_4xozt .switch__switch_4xozt:before {
+.switch__checked_vunw2 .switch__switch_vunw2:before {
     transform: translateX(16px);
 }
-.switch__disabled_4xozt {
+.switch__disabled_vunw2 {
     cursor: var(--disabled-cursor);
 }
-.switch__focused_4xozt .switch__switch_4xozt {
+.switch__focused_vunw2 .switch__switch_vunw2 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"switch__component_4xozt","start":"switch__start_4xozt","center":"switch__center_4xozt","addons":"switch__addons_4xozt","block":"switch__block_4xozt","switch":"switch__switch_4xozt","content":"switch__content_4xozt","label":"switch__label_4xozt","errorMessage":"switch__errorMessage_4xozt","hint":"switch__hint_4xozt","reversed":"switch__reversed_4xozt","checked":"switch__checked_4xozt","disabled":"switch__disabled_4xozt","focused":"switch__focused_4xozt"};
+var styles = {"component":"switch__component_vunw2","start":"switch__start_vunw2","center":"switch__center_vunw2","addons":"switch__addons_vunw2","block":"switch__block_vunw2","switch":"switch__switch_vunw2","content":"switch__content_vunw2","label":"switch__label_vunw2","errorMessage":"switch__errorMessage_vunw2","hint":"switch__hint_vunw2","reversed":"switch__reversed_vunw2","checked":"switch__checked_vunw2","disabled":"switch__disabled_vunw2","focused":"switch__focused_vunw2"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import './vars.css';\n\n.component {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: var(--gap-0);\n    padding: var(--gap-0);\n    border: 0;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.component input {\n    opacity: 0;\n    position: absolute;\n}\n\n.start {\n    align-items: flex-start;\n}\n\n.center {\n    align-items: center;\n}\n\n.addons {\n    margin-left: auto;\n    padding-left: var(--gap-16);\n    line-height: 24px;\n}\n\n.block {\n    width: 100%;\n}\n\n.switch {\n    position: relative;\n    border-radius: var(--border-radius-16);\n    width: 36px;\n    height: 20px;\n    margin: var(--gap-2);\n    flex-shrink: 0;\n    border: 2px solid var(--switch-border-color);\n    transition:\n        background-color 0.2s ease,\n        border-color 0.2s ease;\n    box-sizing: border-box;\n}\n\n.switch:before {\n    content: '';\n    position: absolute;\n    top: var(--gap-0);\n    left: var(--gap-0);\n    bottom: var(--gap-0);\n    right: var(--gap-16);\n    display: block;\n    border-radius: var(--border-radius-circle);\n    background-color: var(--switch-icon-color);\n    box-sizing: border-box;\n    transition: transform 0.2s ease;\n}\n\n.content {\n    margin-left: var(--gap-12);\n    flex-grow: 1;\n}\n\n.label {\n    @mixin paragraph_primary_medium;\n    display: block;\n}\n\n.label:not(:only-child) {\n    margin-bottom: var(--gap-4);\n}\n\n.errorMessage {\n    @mixin paragraph_component_secondary;\n    color: var(--switch-error-color);\n}\n\n.hint {\n    @mixin paragraph_component_secondary;\n    display: block;\n}\n\n/* Reversed state */\n\n.component.reversed {\n    flex-direction: row-reverse;\n}\n\n.reversed .content {\n    margin-right: var(--gap-16);\n    margin-left: var(--gap-0);\n}\n\n.reversed .addons {\n    margin-left: var(--gap-0);\n    padding-left: var(--gap-0);\n    margin-right: auto;\n    padding-right: var(--gap-16);\n}\n\n/* Checked state */\n\n.checked .switch:before {\n    /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */\n    transform: translateX(16px);\n}\n\n/* Disabled state */\n\n.disabled {\n    cursor: var(--disabled-cursor);\n}\n\n/* Focused state */\n\n.focused .switch {\n    @mixin focus-outline;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.component {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: var(--gap-0);\n    padding: var(--gap-0);\n    border: 0;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.component input {\n    opacity: 0;\n    position: absolute;\n}\n\n.start {\n    align-items: flex-start;\n}\n\n.center {\n    align-items: center;\n}\n\n.addons {\n    margin-left: auto;\n    padding-left: var(--gap-16);\n    line-height: 24px;\n}\n\n.block {\n    width: 100%;\n}\n\n.switch {\n    position: relative;\n    border-radius: var(--border-radius-16);\n    width: 36px;\n    height: 20px;\n    margin: var(--gap-2);\n    flex-shrink: 0;\n    border: 2px solid var(--switch-border-color);\n    transition:\n        background-color 0.2s ease,\n        border-color 0.2s ease;\n    box-sizing: border-box;\n}\n\n.switch:before {\n    content: '';\n    position: absolute;\n    top: var(--gap-0);\n    left: var(--gap-0);\n    bottom: var(--gap-0);\n    right: var(--gap-16);\n    display: block;\n    border-radius: var(--border-radius-circle);\n    background-color: var(--switch-icon-color);\n    box-sizing: border-box;\n    transition: transform 0.2s ease;\n}\n\n.content {\n    margin-left: var(--gap-12);\n    flex-grow: 1;\n}\n\n.label {\n    @mixin paragraph_primary_medium;\n    display: block;\n}\n\n.label:not(:only-child) {\n    margin-bottom: var(--gap-4);\n}\n\n.errorMessage {\n    @mixin paragraph_component_secondary;\n    color: var(--switch-error-color);\n}\n\n.hint {\n    @mixin paragraph_component_secondary;\n    display: block;\n}\n\n/* Reversed state */\n\n.component.reversed {\n    flex-direction: row-reverse;\n}\n\n.reversed .content {\n    margin-right: var(--gap-16);\n    margin-left: var(--gap-0);\n}\n\n.reversed .addons {\n    margin-left: var(--gap-0);\n    padding-left: var(--gap-0);\n    margin-right: auto;\n    padding-right: var(--gap-16);\n}\n\n/* Checked state */\n\n.checked .switch:before {\n    /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */\n    transform: translateX(16px);\n}\n\n/* Disabled state */\n\n.disabled {\n    cursor: var(--disabled-cursor);\n}\n\n/* Focused state */\n\n.focused .switch {\n    @mixin focus-outline;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}