@skbkontur/react-ui 0.0.0-2dd5039746 → 0.0.0-308773c7f8

package/components/Toggle/Toggle/Toggle.js

@@ -12,6 +12,8 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { styles, globalClasses } from "../Toggle.styles";
 var colorWarningShown = false;
 export var ToggleDataTids = {
@@ -110,8 +112,110 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     });
   };
 
+  _proto.getContainerSizeClassName = function getContainerSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.containerLarge(this.theme);
+
+      case 'medium':
+        return styles.containerMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.containerSmall(this.theme);
+    }
+  };
+
+  _proto.getHandleSizeClassName = function getHandleSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.handleLarge(this.theme);
+
+      case 'medium':
+        return styles.handleMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.handleSmall(this.theme);
+    }
+  };
+
+  _proto.getButtonSizeClassName = function getButtonSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.buttonLarge(this.theme);
+
+      case 'medium':
+        return styles.buttonMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.buttonSmall(this.theme);
+    }
+  };
+
+  _proto.getRootSizeClassName = function getRootSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.rootLarge(this.theme);
+
+      case 'medium':
+        return styles.rootMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.rootSmall(this.theme);
+    }
+  };
+
+  _proto.getInputSizeClassName = function getInputSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.inputLarge(this.theme);
+
+      case 'medium':
+        return styles.inputMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.inputSmall(this.theme);
+    }
+  };
+
+  _proto.getActiveHandleSizeClassName = function getActiveHandleSizeClassName() {
+    if (isTheme2022(this.theme)) {
+      return '';
+    }
+
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.activeHandleLarge(this.theme);
+
+      case 'medium':
+        return styles.activeHandleMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.activeHandleSmall(this.theme);
+    }
+  };
+
+  _proto.getCaptionSizeClassName = function getCaptionSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.captionLarge(this.theme);
+
+      case 'medium':
+        return styles.captionMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.captionSmall(this.theme);
+    }
+  };
+
   _proto.renderMain = function renderMain() {
-    var _cx, _cx2, _cx4, _cx5, _cx6;
+    var _cx, _cx2, _cx4, _cx5, _cx6, _cx7;
 
     var _this$props = this.props,
         children = _this$props.children,
@@ -119,22 +223,24 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
         error = _this$props.error,
         color = _this$props.color,
         id = _this$props.id,
-        ariaDescribedby = _this$props['aria-describedby'];
+        ariaDescribedby = _this$props['aria-describedby'],
+        ariaLabel = _this$props['aria-label'];
 
     var _this$getProps = this.getProps(),
         loading = _this$getProps.loading,
-        captionPosition = _this$getProps.captionPosition;
+        captionPosition = _this$getProps.captionPosition,
+        disableAnimations = _this$getProps.disableAnimations;
 
     var disabled = this.getProps().disabled || loading;
     var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
-    var containerClassNames = cx(styles.container(this.theme), (_cx = {}, _cx[styles.containerDisabled(this.theme)] = !!disabled, _cx[globalClasses.container] = true, _cx[globalClasses.containerDisabled] = !!disabled, _cx[globalClasses.containerLoading] = loading, _cx));
-    var labelClassNames = cx(styles.root(this.theme), (_cx2 = {}, _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2));
+    var containerClassNames = cx(this.getContainerSizeClassName(), (_cx = {}, _cx[styles.container(this.theme)] = true, _cx[styles.containerDisabled(this.theme)] = !!disabled, _cx[globalClasses.container] = true, _cx[globalClasses.containerDisabled] = !!disabled, _cx[globalClasses.containerLoading] = loading, _cx));
+    var labelClassNames = cx(this.getRootSizeClassName(), this.getActiveHandleSizeClassName(), (_cx2 = {}, _cx2[styles.root(this.theme)] = true, _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2[styles.disableAnimation()] = disableAnimations, _cx2));
     var caption = null;
 
     if (children) {
       var _cx3;
 
-      var captionClass = cx(styles.caption(this.theme), (_cx3 = {}, _cx3[styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[styles.disabledCaption(this.theme)] = !!disabled, _cx3));
+      var captionClass = cx(this.getCaptionSizeClassName(), (_cx3 = {}, _cx3[styles.caption(this.theme)] = true, _cx3[styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[styles.disabledCaption(this.theme)] = !!disabled, _cx3));
       caption = /*#__PURE__*/React.createElement("span", {
         className: captionClass
       }, children);
@@ -146,18 +252,19 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
       "data-tid": ToggleDataTids.root,
       className: labelClassNames
     }, /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.button(this.theme), (_cx4 = {}, _cx4[styles.buttonRight()] = captionPosition === 'left', _cx4[styles.isWarning(this.theme)] = !!warning, _cx4[styles.isError(this.theme)] = !!error, _cx4[styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4))
+      className: cx(this.getButtonSizeClassName(), (_cx4 = {}, _cx4[styles.button(this.theme)] = true, _cx4[styles.buttonRight()] = captionPosition === 'left', _cx4[styles.isWarning(this.theme)] = !!warning, _cx4[styles.isError(this.theme)] = !!error, _cx4[styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4))
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: checked,
       onChange: this.handleChange,
-      className: styles.input(this.theme),
+      className: cx(this.getInputSizeClassName(), isTheme2022(this.theme) && styles.input2022(this.theme), (_cx5 = {}, _cx5[styles.input(this.theme)] = true, _cx5)),
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       ref: this.inputRef,
       disabled: disabled,
       id: id,
       role: "switch",
+      "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby
     }), /*#__PURE__*/React.createElement("div", {
       className: containerClassNames,
@@ -165,14 +272,14 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
         backgroundColor: color,
         boxShadow: "inset 0 0 0 1px " + color
       } : undefined
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.activeBackground(), globalClasses.background, (_cx5 = {}, _cx5[styles.activeBackgroundLoading(this.theme)] = loading, _cx5[styles.disabledBackground(this.theme)] = disabled, _cx5)),
+    }, !isTheme2022(this.theme) && /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.activeBackground(), globalClasses.background, (_cx6 = {}, _cx6[styles.activeBackgroundLoading(this.theme)] = loading, _cx6[styles.disabledBackground(this.theme)] = disabled, _cx6)),
       style: checked && color && !disabled ? {
         backgroundColor: color,
         boxShadow: "inset 0 0 0 1px " + color
       } : undefined
     })), /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.handle(this.theme), globalClasses.handle, (_cx6 = {}, _cx6[styles.handleDisabled(this.theme)] = disabled, _cx6))
+      className: cx(this.getHandleSizeClassName(), globalClasses.handle, (_cx7 = {}, _cx7[styles.handle(this.theme)] = true, _cx7[styles.handleDisabled(this.theme)] = disabled, _cx7))
     })), caption));
   };
 
@@ -198,5 +305,7 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
 }, _class2.defaultProps = {
   disabled: false,
   loading: false,
-  captionPosition: 'right'
+  captionPosition: 'right',
+  disableAnimations: isTestEnv,
+  size: 'small'
 }, _temp)) || _class;

package/components/Toggle/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","styles","globalClasses","colorWarningShown","ToggleDataTids","root","Toggle","props","getProps","defaultProps","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","error","color","id","ariaDescribedby","loading","captionPosition","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","rootLeft","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение `children` относительно переключателя.\n   * @default 'right'\n   */\n  captionPosition?: 'left' | 'right';\n  /**\n   * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n   * @default false\n   */\n  checked?: boolean;\n  /**\n   * Делает `тогл` включенным по умолчанию.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Отключает `тогл`.\n   */\n  disabled?: boolean;\n  /**\n   * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n   */\n  onValueChange?: (value: boolean) => void;\n  /**\n   * Событие вызывающееся при клике на `тогл`.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Состояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n  /**\n   * Событие вызывающееся, когда `тогл` получает фокус.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Событие вызывающееся, когда `тогл` теряет фокус.\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n   */\n  color?: React.CSSProperties['color'];\n  /**\n   * HTML-атрибут `id` для передачи во внутренний `<input />`.\n   */\n  id?: string;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n  root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition'>>;\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color: (props: ToggleProps) => {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\n\n  public static defaultProps: DefaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n  };\n\n  private getProps = createPropsGetter(Toggle.defaultProps);\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { children, warning, error, color, id, 'aria-describedby': ariaDescribedby } = this.props;\n    const { loading, captionPosition } = this.getProps();\n    const disabled = this.getProps().disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(styles.container(this.theme), {\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(styles.root(this.theme), {\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(styles.caption(this.theme), {\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [styles.disabledCaption(this.theme)]: !!disabled,\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n          <div\n            className={cx(styles.button(this.theme), {\n              [styles.buttonRight()]: captionPosition === 'left',\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              checked={checked}\n              onChange={this.handleChange}\n              className={styles.input(this.theme)}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={this.inputRef}\n              disabled={disabled}\n              id={id}\n              role=\"switch\"\n              aria-describedby={ariaDescribedby}\n            />\n            <div\n              className={containerClassNames}\n              style={\n                checked && color && !disabled\n                  ? {\n                      backgroundColor: color,\n                      boxShadow: `inset 0 0 0 1px ${color}`,\n                    }\n                  : undefined\n              }\n            >\n              <div\n                className={cx(styles.activeBackground(), globalClasses.background, {\n                  [styles.activeBackgroundLoading(this.theme)]: loading,\n                  [styles.disabledBackground(this.theme)]: disabled,\n                })}\n                style={\n                  checked && color && !disabled\n                    ? {\n                        backgroundColor: color,\n                        boxShadow: `inset 0 0 0 1px ${color}`,\n                      }\n                    : undefined\n                }\n              />\n            </div>\n            <div\n              className={cx(styles.handle(this.theme), globalClasses.handle, {\n                [styles.handleDisabled(this.theme)]: disabled,\n              })}\n            />\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n    this.setState({\n      focusByTab: false,\n    });\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","isTestEnv","isTheme2022","styles","globalClasses","colorWarningShown","ToggleDataTids","root","Toggle","props","getProps","defaultProps","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","getContainerSizeClassName","size","containerLarge","containerMedium","containerSmall","getHandleSizeClassName","handleLarge","handleMedium","handleSmall","getButtonSizeClassName","buttonLarge","buttonMedium","buttonSmall","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getInputSizeClassName","inputLarge","inputMedium","inputSmall","getActiveHandleSizeClassName","activeHandleLarge","activeHandleMedium","activeHandleSmall","getCaptionSizeClassName","captionLarge","captionMedium","captionSmall","children","error","color","id","ariaDescribedby","ariaLabel","loading","captionPosition","disableAnimations","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nexport type ToggleSize = 'small' | 'medium' | 'large';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение `children` относительно переключателя.\n   * @default 'right'\n   */\n  captionPosition?: 'left' | 'right';\n  /**\n   * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n   * @default false\n   */\n  checked?: boolean;\n  /**\n   * Делает `тогл` включенным по умолчанию.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Отключает `тогл`.\n   */\n  disabled?: boolean;\n  /**\n   * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n   */\n  onValueChange?: (value: boolean) => void;\n  /**\n   * Событие вызывающееся при клике на `тогл`.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Состояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /** Размер */\n  size?: ToggleSize;\n  /**\n   * Событие вызывающееся, когда `тогл` получает фокус.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Событие вызывающееся, когда `тогл` теряет фокус.\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n   */\n  color?: React.CSSProperties['color'];\n  /**\n   * HTML-атрибут `id` для передачи во внутренний `<input />`.\n   */\n  id?: string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n  root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>\n>;\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color: (props: ToggleProps) => {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\n\n  public static defaultProps: DefaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n    disableAnimations: isTestEnv,\n    size: 'small',\n  };\n\n  private getProps = createPropsGetter(Toggle.defaultProps);\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private getContainerSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.containerLarge(this.theme);\n      case 'medium':\n        return styles.containerMedium(this.theme);\n      case 'small':\n      default:\n        return styles.containerSmall(this.theme);\n    }\n  }\n\n  private getHandleSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.handleLarge(this.theme);\n      case 'medium':\n        return styles.handleMedium(this.theme);\n      case 'small':\n      default:\n        return styles.handleSmall(this.theme);\n    }\n  }\n\n  private getButtonSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.buttonLarge(this.theme);\n      case 'medium':\n        return styles.buttonMedium(this.theme);\n      case 'small':\n      default:\n        return styles.buttonSmall(this.theme);\n    }\n  }\n\n  private getRootSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.rootLarge(this.theme);\n      case 'medium':\n        return styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return styles.rootSmall(this.theme);\n    }\n  }\n\n  private getInputSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.inputLarge(this.theme);\n      case 'medium':\n        return styles.inputMedium(this.theme);\n      case 'small':\n      default:\n        return styles.inputSmall(this.theme);\n    }\n  }\n\n  private getActiveHandleSizeClassName() {\n    if (isTheme2022(this.theme)) {\n      return '';\n    }\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.activeHandleLarge(this.theme);\n      case 'medium':\n        return styles.activeHandleMedium(this.theme);\n      case 'small':\n      default:\n        return styles.activeHandleSmall(this.theme);\n    }\n  }\n\n  private getCaptionSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.captionLarge(this.theme);\n      case 'medium':\n        return styles.captionMedium(this.theme);\n      case 'small':\n      default:\n        return styles.captionSmall(this.theme);\n    }\n  }\n\n  private renderMain() {\n    const {\n      children,\n      warning,\n      error,\n      color,\n      id,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n    const { loading, captionPosition, disableAnimations } = this.getProps();\n    const disabled = this.getProps().disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(this.getContainerSizeClassName(), {\n      [styles.container(this.theme)]: true,\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(this.getRootSizeClassName(), this.getActiveHandleSizeClassName(), {\n      [styles.root(this.theme)]: true,\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n      [styles.disableAnimation()]: disableAnimations,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(this.getCaptionSizeClassName(), {\n        [styles.caption(this.theme)]: true,\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [styles.disabledCaption(this.theme)]: !!disabled,\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n          <div\n            className={cx(this.getButtonSizeClassName(), {\n              [styles.button(this.theme)]: true,\n              [styles.buttonRight()]: captionPosition === 'left',\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              checked={checked}\n              onChange={this.handleChange}\n              className={cx(this.getInputSizeClassName(), isTheme2022(this.theme) && styles.input2022(this.theme), {\n                [styles.input(this.theme)]: true,\n              })}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={this.inputRef}\n              disabled={disabled}\n              id={id}\n              role=\"switch\"\n              aria-label={ariaLabel}\n              aria-describedby={ariaDescribedby}\n            />\n            <div\n              className={containerClassNames}\n              style={\n                checked && color && !disabled\n                  ? {\n                      backgroundColor: color,\n                      boxShadow: `inset 0 0 0 1px ${color}`,\n                    }\n                  : undefined\n              }\n            >\n              {!isTheme2022(this.theme) && (\n                <div\n                  className={cx(styles.activeBackground(), globalClasses.background, {\n                    [styles.activeBackgroundLoading(this.theme)]: loading,\n                    [styles.disabledBackground(this.theme)]: disabled,\n                  })}\n                  style={\n                    checked && color && !disabled\n                      ? {\n                          backgroundColor: color,\n                          boxShadow: `inset 0 0 0 1px ${color}`,\n                        }\n                      : undefined\n                  }\n                />\n              )}\n            </div>\n            <div\n              className={cx(this.getHandleSizeClassName(), globalClasses.handle, {\n                [styles.handle(this.theme)]: true,\n                [styles.handleDisabled(this.theme)]: disabled,\n              })}\n            />\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n    this.setState({\n      focusByTab: false,\n    });\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}

package/components/Toggle/Toggle.d.ts

@@ -1,7 +1,8 @@
 import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface ToggleProps extends CommonProps {
+export declare type ToggleSize = 'small' | 'medium' | 'large';
+export interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {
     children?: React.ReactNode;
     /**
      * Положение `children` относительно переключателя.
@@ -47,10 +48,8 @@ export interface ToggleProps extends CommonProps {
      * Если true, выставляет фокус на `тогле` после загрузки страницы.
      */
     autoFocus?: boolean;
-    /**
-     * Атрибут для указания id элемента(-ов), описывающих его
-     */
-    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    /** Размер */
+    size?: ToggleSize;
     /**
      * Событие вызывающееся, когда `тогл` получает фокус.
      */
@@ -67,6 +66,10 @@ export interface ToggleProps extends CommonProps {
      * HTML-атрибут `id` для передачи во внутренний `<input />`.
      */
     id?: string;
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
 }
 export interface ToggleState {
     checked?: boolean;
@@ -75,7 +78,7 @@ export interface ToggleState {
 export declare const ToggleDataTids: {
     readonly root: "Toggle__root";
 };
-declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition'>>;
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>>;
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
  */
@@ -103,6 +106,13 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
      */
     focus: () => void;
     render(): JSX.Element;
+    private getContainerSizeClassName;
+    private getHandleSizeClassName;
+    private getButtonSizeClassName;
+    private getRootSizeClassName;
+    private getInputSizeClassName;
+    private getActiveHandleSizeClassName;
+    private getCaptionSizeClassName;
     private renderMain;
     private inputRef;
     private handleChange;

package/components/Toggle/Toggle.md

@@ -68,8 +68,23 @@ import { Gapped } from '@skbkontur/react-ui';
 </Gapped>
 ```
 
-Тогл с кастомным действием при получении и потере фокуса.
+У тоглов есть 3 стандартных размера.
+
+```jsx harmony
+<Gapped vertical>
+  <Toggle size="small">
+    Маленький
+  </Toggle>
+  <Toggle size="medium">
+    Средний
+  </Toggle>
+  <Toggle size="large">
+    Большой
+  </Toggle>
+</Gapped>
+```
 
+Тогл с кастомным действием при получении и потере фокуса.
 
 ```jsx harmony
 import { Toast } from '@skbkontur/react-ui';
@@ -82,7 +97,6 @@ import { Toast } from '@skbkontur/react-ui';
 </Toggle>
 ```
 
-
 Тогл с кастомным действием при переключении.
 
 ```jsx harmony

package/components/Toggle/Toggle.mixins/Toggle.mixins.js

@@ -0,0 +1,35 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import { css } from "../../../lib/theming/Emotion";
+import { isChrome } from "../../../lib/client";
+import { globalClasses } from "../Toggle.styles";
+export var toggleSizeMixin = function toggleSizeMixin(fontSize, toggleHeight, toggleWidth) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n\n    &::before {\n      width: ", ";\n    }\n  "])), toggleHeight, fontSize, toggleWidth);
+};
+export var buttonSizeMixin = function buttonSizeMixin(labGrotesqueBaselineCompensation, fontSize, toggleHeight, toggleWidth, toggleBorderRadius, toggleButtonOffsetY) {
+  var labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);
+  var buttonFontSize = parseInt(fontSize);
+  var baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    width: ", ";\n    flex: 1 0 ", ";\n\n    border-radius: ", ";\n    line-height: ", ";\n\n    margin-top: calc(", " + ", "px);\n  "])), toggleHeight, toggleWidth, toggleWidth, toggleBorderRadius, toggleHeight, toggleButtonOffsetY, baselineCompensation);
+};
+export var captionSizeMixin = function captionSizeMixin(fontSize, toggleHeight) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n  "])), toggleHeight, fontSize);
+};
+export var handleMixin = function handleMixin(toggleHandleSize, toggleHandleBorderRadius) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "])), toggleHandleBorderRadius, toggleHandleSize, toggleHandleSize);
+};
+export var containerSizeMixin = function containerSizeMixin(toggleBorderRadius) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n  "])), toggleBorderRadius);
+};
+export var inputSizeMixin = function inputSizeMixin(toggleHeight, toggleWidth) {
+  var handleWidthWithBorders = toggleHeight;
+  var height = parseInt(toggleHeight);
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    &:checked ~ .", " .", " {\n      border-radius: ", "px 0 0 ", "px;\n    }\n    &:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ");\n    }\n  "])), globalClasses.containerDisabled, globalClasses.background, height * 0.5, height * 0.5, globalClasses.handle, toggleWidth, handleWidthWithBorders);
+};
+export var activeHandleSizeMixin = function activeHandleSizeMixin(toggleHandleSize, toggleBorderWidth, toggleHandleActiveWidthIncrement, toggleWidth) {
+  var handleWidthWithBorders = toggleHandleSize;
+  var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + toggleBorderWidth + " + " + toggleHandleActiveWidthIncrement + ")";
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    &:active:not(.", ") .", " {\n      width: ", ";\n    }\n    &:active:not(.", ") input:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ") translateX(-4px);\n    }\n  "])), globalClasses.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, toggleWidth, handleWidthWithBorders);
+};

package/components/Toggle/Toggle.mixins/Toggle.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Toggle.mixins.ts"],"names":["css","isChrome","globalClasses","toggleSizeMixin","fontSize","toggleHeight","toggleWidth","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","captionSizeMixin","handleMixin","toggleHandleSize","toggleHandleBorderRadius","containerSizeMixin","inputSizeMixin","handleWidthWithBorders","height","containerDisabled","background","handle","activeHandleSizeMixin","toggleBorderWidth","toggleHandleActiveWidthIncrement","handleActiveWidth","disabled"],"mappings":"gOAAA,SAASA,GAAT,QAAoB,2BAApB;AACA,SAASC,QAAT,QAAyB,kBAAzB;;AAEA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,QAAD,EAAmBC,YAAnB,EAAyCC,WAAzC,EAAiE;AAC9F,SAAON,GAAP;AACiBK,EAAAA,YADjB;AAEeD,EAAAA,QAFf;;;AAKaE,EAAAA,WALb;;;AAQD,CATM;;AAWP,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;AAC7BC,gCAD6B;AAE7BJ,QAF6B;AAG7BC,YAH6B;AAI7BC,WAJ6B;AAK7BG,kBAL6B;AAM7BC,mBAN6B;AAO1B;AACH,MAAMC,yBAAyB,GAAGC,QAAQ,CAACJ,gCAAD,CAA1C;AACA,MAAMK,cAAc,GAAGD,QAAQ,CAACR,QAAD,CAA/B;AACA,MAAMU,oBAAoB,GAAGD,cAAc,IAAI,EAAlB,IAAwBZ,QAAxB,GAAmC,CAACU,yBAApC,GAAgE,CAA7F;AACA,SAAOX,GAAP;AACYK,EAAAA,YADZ;AAEWC,EAAAA,WAFX;AAGcA,EAAAA,WAHd;;AAKmBG,EAAAA,kBALnB;AAMiBJ,EAAAA,YANjB;;AAQqBK,EAAAA,mBARrB,EAQ8CI,oBAR9C;;AAUD,CArBM;;AAuBP,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACX,QAAD,EAAmBC,YAAnB,EAA4C;AAC1E,SAAOL,GAAP;AACiBK,EAAAA,YADjB;AAEeD,EAAAA,QAFf;;AAID,CALM;;AAOP,OAAO,IAAMY,WAAW,GAAG,SAAdA,WAAc,CAACC,gBAAD,EAA2BC,wBAA3B,EAAgE;AACzF,SAAOlB,GAAP;AACmBkB,EAAAA,wBADnB;AAEYD,EAAAA,gBAFZ;AAGWA,EAAAA,gBAHX;;AAKD,CANM;;AAQP,OAAO,IAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACV,kBAAD,EAAgC;AAChE,SAAOT,GAAP;AACmBS,EAAAA,kBADnB;;AAGD,CAJM;;AAMP,OAAO,IAAMW,cAAc,GAAG,SAAjBA,cAAiB,CAACf,YAAD,EAAuBC,WAAvB,EAA+C;AAC3E,MAAMe,sBAAsB,GAAGhB,YAA/B;AACA,MAAMiB,MAAM,GAAGV,QAAQ,CAACP,YAAD,CAAvB;AACA,SAAOL,GAAP;AACiBE,EAAAA,aAAa,CAACqB,iBAD/B,EACqDrB,aAAa,CAACsB,UADnE;AAEqBF,EAAAA,MAAM,GAAG,GAF9B,EAE2CA,MAAM,GAAG,GAFpD;;AAIiBpB,EAAAA,aAAa,CAACuB,MAJ/B;AAK4BnB,EAAAA,WAL5B,EAKwDe,sBALxD;;;AAQD,CAXM;;AAaP,OAAO,IAAMK,qBAAqB,GAAG,SAAxBA,qBAAwB;AACnCT,gBADmC;AAEnCU,iBAFmC;AAGnCC,gCAHmC;AAInCtB,WAJmC;AAKhC;AACH,MAAMe,sBAAsB,GAAGJ,gBAA/B;AACA,MAAMY,iBAAiB,aAAWR,sBAAX,eAA2CM,iBAA3C,WAAkEC,gCAAlE,MAAvB;AACA,SAAO5B,GAAP;AACkBE,EAAAA,aAAa,CAAC4B,QADhC,EAC8C5B,aAAa,CAACuB,MAD5D;AAEaI,EAAAA,iBAFb;;AAIkB3B,EAAAA,aAAa,CAAC4B,QAJhC,EAI8D5B,aAAa,CAACuB,MAJ5E;AAK4BnB,EAAAA,WAL5B,EAKwDe,sBALxD;;;AAQD,CAhBM","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { isChrome } from '../../lib/client';\n\nimport { globalClasses } from './Toggle.styles';\n\nexport const toggleSizeMixin = (fontSize: string, toggleHeight: string, toggleWidth: string) => {\n  return css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n\n    &::before {\n      width: ${toggleWidth};\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  labGrotesqueBaselineCompensation: string,\n  fontSize: string,\n  toggleHeight: string,\n  toggleWidth: string,\n  toggleBorderRadius: string,\n  toggleButtonOffsetY: string,\n) => {\n  const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n  const buttonFontSize = parseInt(fontSize);\n  const baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n  return css`\n    height: ${toggleHeight};\n    width: ${toggleWidth};\n    flex: 1 0 ${toggleWidth};\n\n    border-radius: ${toggleBorderRadius};\n    line-height: ${toggleHeight};\n\n    margin-top: calc(${toggleButtonOffsetY} + ${baselineCompensation}px);\n  `;\n};\n\nexport const captionSizeMixin = (fontSize: string, toggleHeight: string) => {\n  return css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n  `;\n};\n\nexport const handleMixin = (toggleHandleSize: string, toggleHandleBorderRadius: string) => {\n  return css`\n    border-radius: ${toggleHandleBorderRadius};\n    height: ${toggleHandleSize};\n    width: ${toggleHandleSize};\n  `;\n};\n\nexport const containerSizeMixin = (toggleBorderRadius: string) => {\n  return css`\n    border-radius: ${toggleBorderRadius};\n  `;\n};\n\nexport const inputSizeMixin = (toggleHeight: string, toggleWidth: string) => {\n  const handleWidthWithBorders = toggleHeight;\n  const height = parseInt(toggleHeight);\n  return css`\n    &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n      border-radius: ${height * 0.5}px 0 0 ${height * 0.5}px;\n    }\n    &:checked ~ .${globalClasses.handle} {\n      transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders});\n    }\n  `;\n};\n\nexport const activeHandleSizeMixin = (\n  toggleHandleSize: string,\n  toggleBorderWidth: string,\n  toggleHandleActiveWidthIncrement: string,\n  toggleWidth: string,\n) => {\n  const handleWidthWithBorders = toggleHandleSize;\n  const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${toggleBorderWidth} + ${toggleHandleActiveWidthIncrement})`;\n  return css`\n    &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n      width: ${handleActiveWidth};\n    }\n    &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n      transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders}) translateX(-4px);\n    }\n  `;\n};\n"]}

package/components/Toggle/Toggle.mixins/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Toggle/Toggle.mixins.js",
+  "module": "Toggle.mixins",
+  "types": "../Toggle.mixins.d.ts",
+  "sideEffects": false
+}

package/components/Toggle/Toggle.mixins.d.ts

@@ -0,0 +1,7 @@
+export declare const toggleSizeMixin: (fontSize: string, toggleHeight: string, toggleWidth: string) => string;
+export declare const buttonSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, toggleHeight: string, toggleWidth: string, toggleBorderRadius: string, toggleButtonOffsetY: string) => string;
+export declare const captionSizeMixin: (fontSize: string, toggleHeight: string) => string;
+export declare const handleMixin: (toggleHandleSize: string, toggleHandleBorderRadius: string) => string;
+export declare const containerSizeMixin: (toggleBorderRadius: string) => string;
+export declare const inputSizeMixin: (toggleHeight: string, toggleWidth: string) => string;
+export declare const activeHandleSizeMixin: (toggleHandleSize: string, toggleBorderWidth: string, toggleHandleActiveWidthIncrement: string, toggleWidth: string) => string;