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

package/modern/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_1ir4t {
+.switch__switch_18pzn {
     background-color: var(--switch-bg-color);
 }
-.switch__switch_1ir4t:hover {
+.switch__switch_18pzn:hover {
         background-color: var(--switch-hover-bg-color);
     }
-.switch__label_1ir4t {
+.switch__label_18pzn {
     color: var(--switch-label-color);
 }
-.switch__hint_1ir4t {
+.switch__hint_18pzn {
     color: var(--switch-hint-color);
 }
-.switch__checked_1ir4t .switch__switch_1ir4t {
+.switch__checked_18pzn .switch__switch_18pzn {
     background-color: var(--switch-checked-bg-color);
 }
-.switch__checked_1ir4t .switch__switch_1ir4t:hover {
+.switch__checked_18pzn .switch__switch_18pzn:hover {
         background-color: var(--switch-checked-hover-bg-color);
     }
-.switch__disabled_1ir4t .switch__label_1ir4t {
+.switch__disabled_18pzn .switch__label_18pzn {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_1ir4t .switch__hint_1ir4t {
+.switch__disabled_18pzn .switch__hint_18pzn {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_1ir4t .switch__switch_1ir4t {
+.switch__disabled_18pzn .switch__switch_18pzn {
     background-color: var(--switch-disabled-bg-color);
 }
-.switch__disabled_1ir4t .switch__switch_1ir4t:before {
+.switch__disabled_18pzn .switch__switch_18pzn:before {
         background-color: var(--switch-icon-disabled-color);
     }
-.switch__disabled_1ir4t.switch__checked_1ir4t .switch__switch_1ir4t {
+.switch__disabled_18pzn.switch__checked_18pzn .switch__switch_18pzn {
     background-color: var(--switch-disabled-checked-bg-color);
 }

package/modern/default.module.css.js

@@ -1,6 +1,6 @@
 import './default.css';
 
-const defaultStyles = {"switch":"switch__switch_1ir4t","label":"switch__label_1ir4t","hint":"switch__hint_1ir4t","checked":"switch__checked_1ir4t","disabled":"switch__disabled_1ir4t"};
+const 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

package/modern/index.css

@@ -12,16 +12,20 @@
     --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);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
     --focus-color: var(--color-light-status-info);
@@ -32,7 +36,7 @@
     --switch-error-color: var(--color-light-text-negative);
     --switch-icon-color: var(--color-static-neutral-0);
 }
-.switch__component_1ktzs {
+.switch__component_12dhf {
     display: inline-flex;
     align-items: flex-start;
     margin: var(--gap-0);
@@ -41,26 +45,27 @@
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.switch__component_1ktzs input {
+.switch__component_12dhf input {
     opacity: 0;
     position: absolute;
 }
-.switch__start_1ktzs {
+.switch__start_12dhf {
     align-items: flex-start;
 }
-.switch__center_1ktzs {
+.switch__center_12dhf {
     align-items: center;
 }
-.switch__addons_1ktzs {
+.switch__addons_12dhf {
     margin-left: auto;
     padding-left: var(--gap-16);
     line-height: 24px;
 }
-.switch__block_1ktzs {
+.switch__block_12dhf {
     width: 100%;
 }
-.switch__switch_1ktzs {
+.switch__switch_12dhf {
     position: relative;
+    display: block;
     border-radius: var(--border-radius-16);
     width: 36px;
     height: 20px;
@@ -72,7 +77,12 @@
         border-color 0.2s ease;
     box-sizing: border-box;
 }
-.switch__switch_1ktzs:before {
+.switch__switchSkeleton_12dhf {
+    width: 36px;
+    height: 20px;
+    margin: var(--gap-2);
+}
+.switch__switch_12dhf:before {
     content: '';
     position: absolute;
     top: var(--gap-0);
@@ -85,54 +95,68 @@
     box-sizing: border-box;
     transition: transform 0.2s ease;
 }
-.switch__content_1ktzs {
+.switch__content_12dhf {
     margin-left: var(--gap-12);
     flex-grow: 1;
 }
-.switch__label_1ktzs {
+.switch__label_12dhf {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
     display: block;
 }
-.switch__label_1ktzs:not(:only-child) {
-    margin-bottom: var(--gap-4);
-}
-.switch__errorMessage_1ktzs {
+.switch__labelWrap_12dhf:not(:only-child) {
+        margin-bottom: var(--gap-4);
+    }
+.switch__labelWrap_12dhf.switch__loading_12dhf {
+        height: var(--gap-12);
+        margin: var(--gap-6) 0;
+    }
+.switch__labelWrap_12dhf.switch__loading_12dhf:not(:only-child) {
+            margin-bottom: var(--gap-2s);
+        }
+.switch__errorMessage_12dhf {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.08px;
+    font-family: var(--font-family-alfasans);
     color: var(--switch-error-color);
 }
-.switch__hint_1ktzs {
+.switch__hint_12dhf {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.08px;
+    font-family: var(--font-family-alfasans);
     display: block;
 }
-.switch__component_1ktzs.switch__reversed_1ktzs {
+.switch__hintWrap_12dhf.switch__loading_12dhf {
+        height: var(--gap-10);
+        margin-bottom: var(--gap-4);
+    }
+.switch__component_12dhf.switch__reversed_12dhf {
     flex-direction: row-reverse;
 }
-.switch__reversed_1ktzs .switch__content_1ktzs {
+.switch__reversed_12dhf .switch__content_12dhf {
     margin-right: var(--gap-16);
     margin-left: var(--gap-0);
 }
-.switch__reversed_1ktzs .switch__addons_1ktzs {
+.switch__reversed_12dhf .switch__addons_12dhf {
     margin-left: var(--gap-0);
     padding-left: var(--gap-0);
     margin-right: auto;
     padding-right: var(--gap-16);
 }
-.switch__checked_1ktzs .switch__switch_1ktzs:before {
+.switch__checked_12dhf .switch__switch_12dhf:before {
     transform: translateX(16px);
 }
-.switch__disabled_1ktzs {
+.switch__disabled_12dhf {
     cursor: var(--disabled-cursor);
 }
-.switch__focused_1ktzs .switch__switch_1ktzs {
+.switch__focused_12dhf .switch__switch_12dhf {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"switch__component_1ktzs","start":"switch__start_1ktzs","center":"switch__center_1ktzs","addons":"switch__addons_1ktzs","block":"switch__block_1ktzs","switch":"switch__switch_1ktzs","content":"switch__content_1ktzs","label":"switch__label_1ktzs","errorMessage":"switch__errorMessage_1ktzs","hint":"switch__hint_1ktzs","reversed":"switch__reversed_1ktzs","checked":"switch__checked_1ktzs","disabled":"switch__disabled_1ktzs","focused":"switch__focused_1ktzs"};
+const styles = {"component":"switch__component_12dhf","start":"switch__start_12dhf","center":"switch__center_12dhf","addons":"switch__addons_12dhf","block":"switch__block_12dhf","switch":"switch__switch_12dhf","switchSkeleton":"switch__switchSkeleton_12dhf","content":"switch__content_12dhf","label":"switch__label_12dhf","labelWrap":"switch__labelWrap_12dhf","loading":"switch__loading_12dhf","errorMessage":"switch__errorMessage_12dhf","hint":"switch__hint_12dhf","hintWrap":"switch__hintWrap_12dhf","reversed":"switch__reversed_12dhf","checked":"switch__checked_12dhf","disabled":"switch__disabled_12dhf","focused":"switch__focused_12dhf"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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/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,eAAe,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    display: block;\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.switchSkeleton {\n    width: 36px;\n    height: 20px;\n    margin: var(--gap-2);\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.labelWrap {\n    &:not(:only-child) {\n        margin-bottom: var(--gap-4);\n    }\n\n    &.loading {\n        height: var(--gap-12);\n        margin: var(--gap-6) 0;\n\n        &:not(:only-child) {\n            margin-bottom: var(--gap-2s);\n        }\n    }\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.hintWrap {\n    &.loading {\n        height: var(--gap-10);\n        margin-bottom: var(--gap-4);\n    }\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,eAAe,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,gBAAgB,CAAC,8BAA8B,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,WAAW,CAAC,yBAAyB,CAAC,SAAS,CAAC,uBAAuB,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,wBAAwB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}

package/modern/inverted.css

@@ -20,36 +20,36 @@
     --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
     --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
 }
-.switch__switch_17cag {
+.switch__switch_15jes {
     background-color: var(--switch-bg-inverted-color);
 }
-.switch__switch_17cag:hover {
+.switch__switch_15jes:hover {
         background-color: var(--switch-hover-bg-inverted-color);
     }
-.switch__label_17cag {
+.switch__label_15jes {
     color: var(--switch-label-inverted-color);
 }
-.switch__hint_17cag {
+.switch__hint_15jes {
     color: var(--switch-hint-inverted-color);
 }
-.switch__checked_17cag .switch__switch_17cag {
+.switch__checked_15jes .switch__switch_15jes {
     background-color: var(--switch-checked-bg-inverted-color);
 }
-.switch__checked_17cag .switch__switch_17cag:hover {
+.switch__checked_15jes .switch__switch_15jes:hover {
         background-color: var(--switch-checked-hover-bg-inverted-color);
     }
-.switch__disabled_17cag .switch__label_17cag {
+.switch__disabled_15jes .switch__label_15jes {
     color: var(--switch-disabled-inverted-color);
 }
-.switch__disabled_17cag .switch__hint_17cag {
+.switch__disabled_15jes .switch__hint_15jes {
     color: var(--switch-disabled-inverted-color);
 }
-.switch__disabled_17cag .switch__switch_17cag {
+.switch__disabled_15jes .switch__switch_15jes {
     background-color: var(--switch-disabled-bg-inverted-color);
 }
-.switch__disabled_17cag .switch__switch_17cag:before {
+.switch__disabled_15jes .switch__switch_15jes:before {
         background-color: var(--switch-icon-disabled-inverted-color);
     }
-.switch__disabled_17cag.switch__checked_17cag .switch__switch_17cag {
+.switch__disabled_15jes.switch__checked_15jes .switch__switch_15jes {
     background-color: var(--switch-disabled-checked-bg-inverted-color);
 }

package/modern/inverted.module.css.js

@@ -1,6 +1,6 @@
 import './inverted.css';
 
-const invertedStyles = {"switch":"switch__switch_17cag","label":"switch__label_17cag","hint":"switch__hint_17cag","checked":"switch__checked_17cag","disabled":"switch__disabled_17cag"};
+const invertedStyles = {"switch":"switch__switch_15jes","label":"switch__label_15jes","hint":"switch__hint_15jes","checked":"switch__checked_15jes","disabled":"switch__disabled_15jes"};
 
 export { invertedStyles as default };
 //# sourceMappingURL=inverted.module.css.js.map

package/moderncssm/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/moderncssm/Component.js

@@ -2,6 +2,7 @@ import React, { forwardRef, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { dom } from '@alfalab/core-components-shared/moderncssm';
+import { Skeleton } from '@alfalab/core-components-skeleton/moderncssm';
 import { useFocus } from '@alfalab/hooks';
 import defaultStyles from './default.module.css';
 import styles from './index.module.css';
@@ -11,7 +12,7 @@ const colorStyles = {
     default: defaultStyles,
     inverted: invertedStyles,
 };
-const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, error, label, hint, name, value, className, onChange, dataTestId, colors = 'default', ...restProps }, ref) => {
+const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, error, label, hint, name, value, className, onChange, dataTestId, colors = 'default', showSkeleton = false, ...restProps }, ref) => {
     const labelRef = useRef(null);
     const [focused] = useFocus(labelRef, 'keyboard');
     const handleChange = (e) => {
@@ -30,10 +31,19 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
             [styles.block]: block,
         }), ref: mergeRefs([labelRef, ref]) },
         React.createElement("input", { 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({
+                [styles.switchSkeleton]: showSkeleton,
+            }) },
+            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, {
+                    [styles.loading]: showSkeleton,
+                }) },
+                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, {
+                    [styles.loading]: showSkeleton,
+                }) },
+                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/moderncssm/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/moderncssm/index.module.css

@@ -39,6 +39,7 @@
 
 .switch {
     position: relative;
+    display: block;
     border-radius: var(--border-radius-16);
     width: 36px;
     height: 20px;
@@ -51,6 +52,12 @@
     box-sizing: border-box;
 }
 
+.switchSkeleton {
+    width: 36px;
+    height: 20px;
+    margin: var(--gap-2);
+}
+
 .switch:before {
     content: '';
     position: absolute;
@@ -74,19 +81,30 @@
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    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;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.08px;
+    font-family: var(--font-family-alfasans);
     color: var(--switch-error-color);
 }
 
@@ -94,10 +112,16 @@
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.08px;
+    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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-switch",
-    "version": "6.0.3",
+    "version": "6.1.0-alfasans",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -10,7 +10,8 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-shared": "^2.1.1",
+        "@alfalab/core-components-shared": "2.1.1-alfasans",
+        "@alfalab/core-components-skeleton": "7.0.2-alfasans",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
@@ -25,6 +26,6 @@
         "directory": "dist"
     },
     "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
-    "themesVersion": "15.0.2",
-    "varsVersion": "11.0.2"
+    "themesVersion": "15.0.2-alfasans",
+    "varsVersion": "11.0.2-alfasans"
 }

package/src/Component.tsx

@@ -9,6 +9,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
 import { dom } from '@alfalab/core-components-shared';
+import { Skeleton } from '@alfalab/core-components-skeleton';
 import { useFocus } from '@alfalab/hooks';
 
 import { type Colors } from './types/colors';
@@ -94,6 +95,12 @@ export type SwitchProps = Omit<
      * @default default
      */
     colors?: Colors;
+
+    /**
+     * Показать скелетон
+     * @default false
+     */
+    showSkeleton?: boolean;
 };
 
 export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
@@ -114,6 +121,7 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
             onChange,
             dataTestId,
             colors = 'default',
+            showSkeleton = false,
             ...restProps
         },
         ref,
@@ -156,19 +164,47 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
                     {...restProps}
                 />
 
-                <span className={cn(styles.switch, colorStyles[colors].switch)} />
+                <Skeleton
+                    visible={showSkeleton}
+                    borderRadius='pill'
+                    colors={colors}
+                    className={cn({
+                        [styles.switchSkeleton]: showSkeleton,
+                    })}
+                >
+                    <span className={cn(styles.switch, colorStyles[colors].switch)} />
+                </Skeleton>
 
                 {(label || hint || errorMessage) && (
                     <span className={styles.content}>
                         {label && (
-                            <span className={cn(styles.label, colorStyles[colors].label)}>
-                                {label}
-                            </span>
+                            <Skeleton
+                                visible={showSkeleton}
+                                borderRadius='pill'
+                                colors={colors}
+                                className={cn(styles.labelWrap, {
+                                    [styles.loading]: showSkeleton,
+                                })}
+                            >
+                                <span className={cn(styles.label, colorStyles[colors].label)}>
+                                    {label}
+                                </span>
+                            </Skeleton>
                         )}
+
                         {hint && !errorMessage && (
-                            <span className={cn(styles.hint, colorStyles[colors].hint)}>
-                                {hint}
-                            </span>
+                            <Skeleton
+                                visible={showSkeleton}
+                                borderRadius='pill'
+                                colors={colors}
+                                className={cn(styles.hintWrap, {
+                                    [styles.loading]: showSkeleton,
+                                })}
+                            >
+                                <span className={cn(styles.hint, colorStyles[colors].hint)}>
+                                    {hint}
+                                </span>
+                            </Skeleton>
                         )}
 
                         {errorMessage && (