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

package/Component.d.ts

@@ -54,6 +54,11 @@ export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | '
      * @default default
      */
     colors?: Colors;
+    /**
+     * Показать скелетон
+     * @default false
+     */
+    showSkeleton?: boolean;
 };
 export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
     /**
@@ -108,5 +113,10 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
      * @default default
      */
     colors?: Colors;
+    /**
+     * Показать скелетон
+     * @default false
+     */
+    showSkeleton?: boolean;
 } & React.RefAttributes<HTMLLabelElement>>;
 export {};

package/Component.js

@@ -7,6 +7,7 @@ var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsShared = require('@alfalab/core-components-shared');
+var coreComponentsSkeleton = require('@alfalab/core-components-skeleton');
 var hooks = require('@alfalab/hooks');
 var default_module = require('./default.module.css.js');
 var index_module = require('./index.module.css.js');
@@ -23,8 +24,8 @@ var colorStyles = {
     inverted: inverted_module,
 };
 var Switch = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors"]);
+    var _b, _c, _d, _e;
+    var _f = _a.reversed, reversed = _f === void 0 ? false : _f, _g = _a.checked, checked = _g === void 0 ? false : _g, _h = _a.align, align = _h === void 0 ? 'start' : _h, addons = _a.addons, block = _a.block, disabled = _a.disabled, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.showSkeleton, showSkeleton = _k === void 0 ? false : _k, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors", "showSkeleton"]);
     var labelRef = React.useRef(null);
     var focused = hooks.useFocus(labelRef, 'keyboard')[0];
     var handleChange = function (e) {
@@ -43,10 +44,19 @@ var Switch = React.forwardRef(function (_a, ref) {
             _b[index_module.block] = block,
             _b)), ref: mergeRefs__default.default([labelRef, ref]) },
         React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
-        React__default.default.createElement("span", { className: cn__default.default(index_module.switch, colorStyles[colors].switch) }),
+        React__default.default.createElement(coreComponentsSkeleton.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default((_c = {},
+                _c[index_module.switchSkeleton] = showSkeleton,
+                _c)) },
+            React__default.default.createElement("span", { className: cn__default.default(index_module.switch, colorStyles[colors].switch) })),
         (label || hint || errorMessage) && (React__default.default.createElement("span", { className: index_module.content },
-            label && (React__default.default.createElement("span", { className: cn__default.default(index_module.label, colorStyles[colors].label) }, label)),
-            hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(index_module.hint, colorStyles[colors].hint) }, hint)),
+            label && (React__default.default.createElement(coreComponentsSkeleton.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default(index_module.labelWrap, (_d = {},
+                    _d[index_module.loading] = showSkeleton,
+                    _d)) },
+                React__default.default.createElement("span", { className: cn__default.default(index_module.label, colorStyles[colors].label) }, label))),
+            hint && !errorMessage && (React__default.default.createElement(coreComponentsSkeleton.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default(index_module.hintWrap, (_e = {},
+                    _e[index_module.loading] = showSkeleton,
+                    _e)) },
+                React__default.default.createElement("span", { className: cn__default.default(index_module.hint, colorStyles[colors].hint) }, hint))),
             errorMessage && (React__default.default.createElement("span", { className: index_module.errorMessage, role: 'alert' }, errorMessage)))),
         addons && (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions

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 { Skeleton } from '@alfalab/core-components-skeleton';\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    /**\n     * Показать скелетон\n     * @default false\n     */\n    showSkeleton?: boolean;\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            showSkeleton = false,\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                <Skeleton\n                    visible={showSkeleton}\n                    borderRadius='pill'\n                    colors={colors}\n                    className={cn({\n                        [styles.switchSkeleton]: showSkeleton,\n                    })}\n                >\n                    <span className={cn(styles.switch, colorStyles[colors].switch)} />\n                </Skeleton>\n\n                {(label || hint || errorMessage) && (\n                    <span className={styles.content}>\n                        {label && (\n                            <Skeleton\n                                visible={showSkeleton}\n                                borderRadius='pill'\n                                colors={colors}\n                                className={cn(styles.labelWrap, {\n                                    [styles.loading]: showSkeleton,\n                                })}\n                            >\n                                <span className={cn(styles.label, colorStyles[colors].label)}>\n                                    {label}\n                                </span>\n                            </Skeleton>\n                        )}\n\n                        {hint && !errorMessage && (\n                            <Skeleton\n                                visible={showSkeleton}\n                                borderRadius='pill'\n                                colors={colors}\n                                className={cn(styles.hintWrap, {\n                                    [styles.loading]: showSkeleton,\n                                })}\n                            >\n                                <span className={cn(styles.hint, colorStyles[colors].hint)}>\n                                    {hint}\n                                </span>\n                            </Skeleton>\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","Skeleton","dom"],"mappings":"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"}

package/cssm/Component.d.ts

@@ -54,6 +54,11 @@ export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | '
      * @default default
      */
     colors?: Colors;
+    /**
+     * Показать скелетон
+     * @default false
+     */
+    showSkeleton?: boolean;
 };
 export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
     /**
@@ -108,5 +113,10 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
      * @default default
      */
     colors?: Colors;
+    /**
+     * Показать скелетон
+     * @default false
+     */
+    showSkeleton?: boolean;
 } & React.RefAttributes<HTMLLabelElement>>;
 export {};

package/cssm/Component.js

@@ -6,7 +6,8 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var cssm = require('@alfalab/core-components-shared/cssm');
+var cssm$1 = require('@alfalab/core-components-shared/cssm');
+var cssm = require('@alfalab/core-components-skeleton/cssm');
 var hooks = require('@alfalab/hooks');
 var defaultStyles = require('./default.module.css');
 var styles = require('./index.module.css');
@@ -26,8 +27,8 @@ var colorStyles = {
     inverted: invertedStyles__default.default,
 };
 var Switch = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors"]);
+    var _b, _c, _d, _e;
+    var _f = _a.reversed, reversed = _f === void 0 ? false : _f, _g = _a.checked, checked = _g === void 0 ? false : _g, _h = _a.align, align = _h === void 0 ? 'start' : _h, addons = _a.addons, block = _a.block, disabled = _a.disabled, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.showSkeleton, showSkeleton = _k === void 0 ? false : _k, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors", "showSkeleton"]);
     var labelRef = React.useRef(null);
     var focused = hooks.useFocus(labelRef, 'keyboard')[0];
     var handleChange = function (e) {
@@ -46,14 +47,23 @@ var Switch = React.forwardRef(function (_a, ref) {
             _b[styles__default.default.block] = block,
             _b)), ref: mergeRefs__default.default([labelRef, ref]) },
         React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
-        React__default.default.createElement("span", { className: cn__default.default(styles__default.default.switch, colorStyles[colors].switch) }),
+        React__default.default.createElement(cssm.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default((_c = {},
+                _c[styles__default.default.switchSkeleton] = showSkeleton,
+                _c)) },
+            React__default.default.createElement("span", { className: cn__default.default(styles__default.default.switch, colorStyles[colors].switch) })),
         (label || hint || errorMessage) && (React__default.default.createElement("span", { className: styles__default.default.content },
-            label && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.label, colorStyles[colors].label) }, label)),
-            hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.hint, colorStyles[colors].hint) }, hint)),
+            label && (React__default.default.createElement(cssm.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default(styles__default.default.labelWrap, (_d = {},
+                    _d[styles__default.default.loading] = showSkeleton,
+                    _d)) },
+                React__default.default.createElement("span", { className: cn__default.default(styles__default.default.label, colorStyles[colors].label) }, label))),
+            hint && !errorMessage && (React__default.default.createElement(cssm.Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn__default.default(styles__default.default.hintWrap, (_e = {},
+                    _e[styles__default.default.loading] = showSkeleton,
+                    _e)) },
+                React__default.default.createElement("span", { className: cn__default.default(styles__default.default.hint, colorStyles[colors].hint) }, hint))),
             errorMessage && (React__default.default.createElement("span", { className: styles__default.default.errorMessage, role: 'alert' }, errorMessage)))),
         addons && (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        React__default.default.createElement("span", { className: styles__default.default.addons, onClick: cssm.dom.preventDefault }, addons))));
+        React__default.default.createElement("span", { className: styles__default.default.addons, onClick: cssm$1.dom.preventDefault }, addons))));
 });
 Switch.displayName = 'Switch';
 

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 { Skeleton } from '@alfalab/core-components-skeleton';\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    /**\n     * Показать скелетон\n     * @default false\n     */\n    showSkeleton?: boolean;\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            showSkeleton = false,\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                <Skeleton\n                    visible={showSkeleton}\n                    borderRadius='pill'\n                    colors={colors}\n                    className={cn({\n                        [styles.switchSkeleton]: showSkeleton,\n                    })}\n                >\n                    <span className={cn(styles.switch, colorStyles[colors].switch)} />\n                </Skeleton>\n\n                {(label || hint || errorMessage) && (\n                    <span className={styles.content}>\n                        {label && (\n                            <Skeleton\n                                visible={showSkeleton}\n                                borderRadius='pill'\n                                colors={colors}\n                                className={cn(styles.labelWrap, {\n                                    [styles.loading]: showSkeleton,\n                                })}\n                            >\n                                <span className={cn(styles.label, colorStyles[colors].label)}>\n                                    {label}\n                                </span>\n                            </Skeleton>\n                        )}\n\n                        {hint && !errorMessage && (\n                            <Skeleton\n                                visible={showSkeleton}\n                                borderRadius='pill'\n                                colors={colors}\n                                className={cn(styles.hintWrap, {\n                                    [styles.loading]: showSkeleton,\n                                })}\n                            >\n                                <span className={cn(styles.hint, colorStyles[colors].hint)}>\n                                    {hint}\n                                </span>\n                            </Skeleton>\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","Skeleton","dom"],"mappings":"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"}

package/cssm/index.module.css

@@ -12,10 +12,13 @@
     --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-s: 12px;
+    --gap-2s: 14px;
     --gap-m: 16px;
     --gap-0: 0px;
     --gap-2: var(--gap-3xs);
     --gap-4: var(--gap-2xs);
+    --gap-6: 6px;
+    --gap-10: 10px;
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
 }
@@ -62,6 +65,7 @@
 }
 .switch {
     position: relative;
+    display: block;
     border-radius: var(--border-radius-16);
     width: 36px;
     height: 20px;
@@ -73,6 +77,11 @@
         border-color 0.2s ease;
     box-sizing: border-box;
 }
+.switchSkeleton {
+    width: 36px;
+    height: 20px;
+    margin: var(--gap-2);
+}
 .switch:before {
     content: '';
     position: absolute;
@@ -98,9 +107,16 @@
     font-family: var(--font-family-alfasans);
     display: block;
 }
-.label:not(:only-child) {
-    margin-bottom: var(--gap-4);
-}
+.labelWrap:not(:only-child) {
+        margin-bottom: var(--gap-4);
+    }
+.labelWrap.loading {
+        height: var(--gap-12);
+        margin: var(--gap-6) 0;
+    }
+.labelWrap.loading:not(:only-child) {
+            margin-bottom: var(--gap-2s);
+        }
 .errorMessage {
     font-size: 14px;
     line-height: 18px;
@@ -117,6 +133,10 @@
     font-family: var(--font-family-alfasans);
     display: block;
 }
+.hintWrap.loading {
+        height: var(--gap-10);
+        margin-bottom: var(--gap-4);
+    }
 .component.reversed {
     flex-direction: row-reverse;
 }

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_1i7xt {
+.switch__switch_18pzn {
     background-color: var(--switch-bg-color);
 }
-.switch__switch_1i7xt:hover {
+.switch__switch_18pzn:hover {
         background-color: var(--switch-hover-bg-color);
     }
-.switch__label_1i7xt {
+.switch__label_18pzn {
     color: var(--switch-label-color);
 }
-.switch__hint_1i7xt {
+.switch__hint_18pzn {
     color: var(--switch-hint-color);
 }
-.switch__checked_1i7xt .switch__switch_1i7xt {
+.switch__checked_18pzn .switch__switch_18pzn {
     background-color: var(--switch-checked-bg-color);
 }
-.switch__checked_1i7xt .switch__switch_1i7xt:hover {
+.switch__checked_18pzn .switch__switch_18pzn:hover {
         background-color: var(--switch-checked-hover-bg-color);
     }
-.switch__disabled_1i7xt .switch__label_1i7xt {
+.switch__disabled_18pzn .switch__label_18pzn {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_1i7xt .switch__hint_1i7xt {
+.switch__disabled_18pzn .switch__hint_18pzn {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_1i7xt .switch__switch_1i7xt {
+.switch__disabled_18pzn .switch__switch_18pzn {
     background-color: var(--switch-disabled-bg-color);
 }
-.switch__disabled_1i7xt .switch__switch_1i7xt:before {
+.switch__disabled_18pzn .switch__switch_18pzn:before {
         background-color: var(--switch-icon-disabled-color);
     }
-.switch__disabled_1i7xt.switch__checked_1i7xt .switch__switch_1i7xt {
+.switch__disabled_18pzn.switch__checked_18pzn .switch__switch_18pzn {
     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_1i7xt","label":"switch__label_1i7xt","hint":"switch__hint_1i7xt","checked":"switch__checked_1i7xt","disabled":"switch__disabled_1i7xt"};
+var defaultStyles = {"switch":"switch__switch_18pzn","label":"switch__label_18pzn","hint":"switch__hint_18pzn","checked":"switch__checked_18pzn","disabled":"switch__disabled_18pzn"};
 
 module.exports = defaultStyles;
 //# sourceMappingURL=default.module.css.js.map

package/esm/Component.d.ts

@@ -54,6 +54,11 @@ export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | '
      * @default default
      */
     colors?: Colors;
+    /**
+     * Показать скелетон
+     * @default false
+     */
+    showSkeleton?: boolean;
 };
 export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
     /**
@@ -108,5 +113,10 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
      * @default default
      */
     colors?: Colors;
+    /**
+     * Показать скелетон
+     * @default false
+     */
+    showSkeleton?: boolean;
 } & React.RefAttributes<HTMLLabelElement>>;
 export {};

package/esm/Component.js

@@ -3,6 +3,7 @@ import React, { forwardRef, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { dom } from '@alfalab/core-components-shared/esm';
+import { Skeleton } from '@alfalab/core-components-skeleton/esm';
 import { useFocus } from '@alfalab/hooks';
 import defaultStyles from './default.module.css.js';
 import styles from './index.module.css.js';
@@ -13,8 +14,8 @@ var colorStyles = {
     inverted: invertedStyles,
 };
 var Switch = forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = __rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors"]);
+    var _b, _c, _d, _e;
+    var _f = _a.reversed, reversed = _f === void 0 ? false : _f, _g = _a.checked, checked = _g === void 0 ? false : _g, _h = _a.align, align = _h === void 0 ? 'start' : _h, addons = _a.addons, block = _a.block, disabled = _a.disabled, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _j = _a.colors, colors = _j === void 0 ? 'default' : _j, _k = _a.showSkeleton, showSkeleton = _k === void 0 ? false : _k, restProps = __rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors", "showSkeleton"]);
     var labelRef = useRef(null);
     var focused = useFocus(labelRef, 'keyboard')[0];
     var handleChange = function (e) {
@@ -33,10 +34,19 @@ var Switch = forwardRef(function (_a, ref) {
             _b[styles.block] = block,
             _b)), ref: mergeRefs([labelRef, ref]) },
         React.createElement("input", __assign({ type: 'checkbox', onChange: handleChange, disabled: disabled, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
-        React.createElement("span", { className: cn(styles.switch, colorStyles[colors].switch) }),
+        React.createElement(Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn((_c = {},
+                _c[styles.switchSkeleton] = showSkeleton,
+                _c)) },
+            React.createElement("span", { className: cn(styles.switch, colorStyles[colors].switch) })),
         (label || hint || errorMessage) && (React.createElement("span", { className: styles.content },
-            label && (React.createElement("span", { className: cn(styles.label, colorStyles[colors].label) }, label)),
-            hint && !errorMessage && (React.createElement("span", { className: cn(styles.hint, colorStyles[colors].hint) }, hint)),
+            label && (React.createElement(Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn(styles.labelWrap, (_d = {},
+                    _d[styles.loading] = showSkeleton,
+                    _d)) },
+                React.createElement("span", { className: cn(styles.label, colorStyles[colors].label) }, label))),
+            hint && !errorMessage && (React.createElement(Skeleton, { visible: showSkeleton, borderRadius: 'pill', colors: colors, className: cn(styles.hintWrap, (_e = {},
+                    _e[styles.loading] = showSkeleton,
+                    _e)) },
+                React.createElement("span", { className: cn(styles.hint, colorStyles[colors].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

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 { Skeleton } from '@alfalab/core-components-skeleton';\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    /**\n     * Показать скелетон\n     * @default false\n     */\n    showSkeleton?: boolean;\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            showSkeleton = false,\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                <Skeleton\n                    visible={showSkeleton}\n                    borderRadius='pill'\n                    colors={colors}\n                    className={cn({\n                        [styles.switchSkeleton]: showSkeleton,\n                    })}\n                >\n                    <span className={cn(styles.switch, colorStyles[colors].switch)} />\n                </Skeleton>\n\n                {(label || hint || errorMessage) && (\n                    <span className={styles.content}>\n                        {label && (\n                            <Skeleton\n                                visible={showSkeleton}\n                                borderRadius='pill'\n                                colors={colors}\n                                className={cn(styles.labelWrap, {\n                                    [styles.loading]: showSkeleton,\n                                })}\n                            >\n                                <span className={cn(styles.label, colorStyles[colors].label)}>\n                                    {label}\n                                </span>\n                            </Skeleton>\n                        )}\n\n                        {hint && !errorMessage && (\n                            <Skeleton\n                                visible={showSkeleton}\n                                borderRadius='pill'\n                                colors={colors}\n                                className={cn(styles.hintWrap, {\n                                    [styles.loading]: showSkeleton,\n                                })}\n                            >\n                                <span className={cn(styles.hint, colorStyles[colors].hint)}>\n                                    {hint}\n                                </span>\n                            </Skeleton>\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_1i7xt {
+.switch__switch_18pzn {
     background-color: var(--switch-bg-color);
 }
-.switch__switch_1i7xt:hover {
+.switch__switch_18pzn:hover {
         background-color: var(--switch-hover-bg-color);
     }
-.switch__label_1i7xt {
+.switch__label_18pzn {
     color: var(--switch-label-color);
 }
-.switch__hint_1i7xt {
+.switch__hint_18pzn {
     color: var(--switch-hint-color);
 }
-.switch__checked_1i7xt .switch__switch_1i7xt {
+.switch__checked_18pzn .switch__switch_18pzn {
     background-color: var(--switch-checked-bg-color);
 }
-.switch__checked_1i7xt .switch__switch_1i7xt:hover {
+.switch__checked_18pzn .switch__switch_18pzn:hover {
         background-color: var(--switch-checked-hover-bg-color);
     }
-.switch__disabled_1i7xt .switch__label_1i7xt {
+.switch__disabled_18pzn .switch__label_18pzn {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_1i7xt .switch__hint_1i7xt {
+.switch__disabled_18pzn .switch__hint_18pzn {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_1i7xt .switch__switch_1i7xt {
+.switch__disabled_18pzn .switch__switch_18pzn {
     background-color: var(--switch-disabled-bg-color);
 }
-.switch__disabled_1i7xt .switch__switch_1i7xt:before {
+.switch__disabled_18pzn .switch__switch_18pzn:before {
         background-color: var(--switch-icon-disabled-color);
     }
-.switch__disabled_1i7xt.switch__checked_1i7xt .switch__switch_1i7xt {
+.switch__disabled_18pzn.switch__checked_18pzn .switch__switch_18pzn {
     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_1i7xt","label":"switch__label_1i7xt","hint":"switch__hint_1i7xt","checked":"switch__checked_1i7xt","disabled":"switch__disabled_1i7xt"};
+var defaultStyles = {"switch":"switch__switch_18pzn","label":"switch__label_18pzn","hint":"switch__hint_18pzn","checked":"switch__checked_18pzn","disabled":"switch__disabled_18pzn"};
 
 export { defaultStyles as default };
 //# sourceMappingURL=default.module.css.js.map