@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.0

package/switcher-row/index.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitcherRow = void 0;
+const react_1 = __importDefault(require("react"));
+const checkbox_1 = require("../checkbox");
+const define_slots_1 = require("../helpers/define-slots");
+const radio_button_1 = require("../radio-button");
+const toggle_1 = require("../toggle");
+const bind_1 = __importDefault(require("classnames/bind"));
+const switcher_row_module_scss_1 = __importDefault(require("./switcher-row.module.scss"));
+const cx = bind_1.default.bind(switcher_row_module_scss_1.default);
+/**
+ * Блок вывода полей-переключателей (Checkbox, Toggle, RadioButton).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SwitcherRow({ children, className, style, textAlign, fieldPosition = 'start', 'data-testid': testId = 'switcher-row', }) {
+    var _a;
+    const { toggle, checkbox, radio, label, comment } = (0, define_slots_1.defineSlots)(children, {
+        toggle: toggle_1.Toggle,
+        checkbox: checkbox_1.Checkbox,
+        radio: radio_button_1.RadioButton,
+        label: SwitcherRowLabel,
+        comment: SwitcherRowComment,
+    });
+    const input = (_a = toggle !== null && toggle !== void 0 ? toggle : checkbox) !== null && _a !== void 0 ? _a : radio;
+    const failed = input === null || input === void 0 ? void 0 : input.props.failed;
+    const disabled = input === null || input === void 0 ? void 0 : input.props.disabled;
+    const fieldId = input === null || input === void 0 ? void 0 : input.props.id;
+    const fieldColumn = input && react_1.default.createElement("div", { className: cx('col', 'field-col') }, input);
+    return (react_1.default.createElement("div", { className: cx('root', `text-align-${textAlign}`, { failed, disabled }, className), style: style, "data-testid": testId },
+        fieldPosition === 'start' && fieldColumn,
+        react_1.default.createElement("label", { className: cx('col', 'main-col'), htmlFor: fieldId },
+            label && (react_1.default.createElement("span", { className: cx('label', { 'for-toggle': toggle }), "data-testid": 'switcher-row:label' }, label)),
+            comment && (react_1.default.createElement("span", { className: cx('comment'), "data-testid": 'switcher-row:comment' }, comment))),
+        fieldPosition === 'end' && fieldColumn));
+}
+exports.SwitcherRow = SwitcherRow;
+/**
+ * Слот ярлыка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SwitcherRowLabel({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+/**
+ * Слот комментария.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SwitcherRowComment({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+SwitcherRow.Label = SwitcherRowLabel;
+SwitcherRow.Comment = SwitcherRowComment;

package/switcher-row/switcher-row.module.scss

@@ -0,0 +1,55 @@
+@use '../colors';
+
+.root {
+  --label-color: #{colors.$basic-gray87};
+  --comment-color: #{colors.$basic-gray38};
+  display: flex;
+  flex-direction: row;
+  &.text-align-left {
+    text-align: left;
+  }
+  &.text-align-right {
+    text-align: right;
+  }
+  &.disabled {
+    --label-color: #{colors.$basic-gray24};
+    --comment-color: #{colors.$basic-gray24};
+  }
+  &.failed {
+    --label-color: #{colors.$additional-deep-red};
+  }
+}
+
+.col + .col {
+  margin-left: 12px;
+}
+
+.field-col {
+  flex-grow: 0;
+}
+
+.main-col {
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+.label {
+  display: block;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  color: var(--label-color);
+  &.for-toggle {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+.comment {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  color: var(--comment-color);
+}

package/text/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Size, LineHeight, Weight } from '../styling/fonts';
 import { Token } from '../colors';
-declare type Align = 'left' | 'center' | 'right' | 'justify';
+type Align = 'left' | 'center' | 'right' | 'justify';
 export interface TextProps {
     /** Направление. */
     align?: Align;

package/text-button/index.d.ts

@@ -0,0 +1,42 @@
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, Ref, SVGAttributes } from 'react';
+import { LinkColor } from '../link';
+export type TextButtonSize = 's' | 'm';
+export type TextButtonColor = LinkColor;
+interface CommonProps {
+    /** Размер. */
+    size?: TextButtonSize;
+    /** Цвет. */
+    color?: TextButtonColor;
+    /** Иконка перед текстом. */
+    startIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Иконка после текста. */
+    endIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Ref для элемента button. Будет заполнен только при appearance: 'button'. */
+    buttonRef?: Ref<HTMLButtonElement>;
+    /** Ref для элемента a. Будет заполнен только при appearance: 'link'. */
+    anchorRef?: Ref<HTMLAnchorElement>;
+    /** Нужно ли выводить подчеркивание. */
+    underline?: boolean;
+    /** Отключенное состояние. */
+    disabled?: boolean;
+    /** Отступ от иконок. */
+    iconGutter?: 4 | 8;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export type TextButtonAsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    /** Какой элемент выводить в качестве текстовой кнопки. */
+    as?: 'button';
+};
+export type TextButtonAsAnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    /** Какой элемент выводить в качестве текстовой кнопки. */
+    as: 'anchor';
+};
+export type TextButtonProps = TextButtonAsButtonProps | TextButtonAsAnchorProps;
+/**
+ * Текстовая кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function TextButton({ size, color, children, className, startIcon: StartIcon, endIcon: EndIcon, buttonRef, anchorRef, underline, disabled, iconGutter, 'data-testid': testId, ...restProps }: TextButtonProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/text-button/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextButton = void 0;
+const react_1 = __importDefault(require("react"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const text_button_module_scss_1 = __importDefault(require("./text-button.module.scss"));
+const cx = bind_1.default.bind(text_button_module_scss_1.default);
+/**
+ * Текстовая кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TextButton(_a) {
+    var { size = 'm', color = 'basic-blue', children, className, startIcon: StartIcon, endIcon: EndIcon, buttonRef, anchorRef, underline, disabled, iconGutter = 8, 'data-testid': testId = 'text-button' } = _a, restProps = __rest(_a, ["size", "color", "children", "className", "startIcon", "endIcon", "buttonRef", "anchorRef", "underline", "disabled", "iconGutter", 'data-testid']);
+    const rooClassName = cx('root', `color-${color}`, `size-${size}`, `icon-gutter-${iconGutter}`, underline && 'underline', disabled && 'disabled', className);
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        StartIcon && react_1.default.createElement(StartIcon, { className: cx('icon-start') }),
+        children,
+        EndIcon && react_1.default.createElement(EndIcon, { className: cx('icon-end') })));
+    let result;
+    switch (restProps.as) {
+        case 'anchor':
+            result = (react_1.default.createElement("a", Object.assign({}, restProps, { ref: anchorRef, className: rooClassName, "data-testid": testId }), content));
+            break;
+        case 'button':
+        default:
+            result = (react_1.default.createElement("button", Object.assign({}, restProps, { ref: buttonRef, className: rooClassName, disabled: disabled, "data-testid": testId }), content));
+            break;
+    }
+    return result;
+}
+exports.TextButton = TextButton;

package/text-button/text-button.module.scss

@@ -0,0 +1,99 @@
+@use '../colors';
+@use '../utils';
+
+.root {
+  @include utils.reset-button;
+  @include utils.focus-visible;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 600;
+  white-space: nowrap;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.root,
+.root:link,
+.root:visited,
+.root:hover,
+.root:active {
+  cursor: default;
+  text-decoration: none;
+  border-bottom-color: transparent;
+  &.underline {
+    box-shadow: inset 0 -1px 0 0 currentColor;
+  }
+}
+
+.root:hover {
+  cursor: pointer;
+}
+
+.size-s {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.size-m {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.icon-gutter-4 {
+  --text-button-icon-gutter: 4px;
+}
+
+.icon-gutter-8 {
+  --text-button-icon-gutter: 8px;
+}
+
+// ниже двойные классы для высокой специфичности в монолите
+.root.disabled {
+  color: colors.$basic-gray24;
+  pointer-events: none;
+}
+
+.root:not(.disabled).color-basic-blue {
+  color: colors.$basic-blue;
+  &:hover {
+    color: colors.$additional-deep-blue;
+  }
+}
+
+.root:not(.disabled).color-basic-gray87 {
+  color: colors.$basic-gray87;
+  &:hover {
+    color: colors.$basic-gray54;
+  }
+}
+
+.root:not(.disabled).color-basic-gray38 {
+  color: colors.$basic-gray38;
+  &:hover {
+    color: colors.$basic-gray54;
+  }
+}
+
+.root:not(.disabled).color-basic-white {
+  color: colors.$basic-white;
+  &:hover {
+    color: colors.$basic-gray4;
+  }
+}
+
+// иконки
+.icon-start,
+.icon-end {
+  flex-shrink: 0;
+  fill: currentColor;
+}
+
+.icon-start {
+  margin-right: var(--text-button-icon-gutter);
+}
+
+.icon-end {
+  margin-left: var(--text-button-icon-gutter);
+}

package/text-field/index.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import { BaseInputProps } from '../base-input';
+import { BaseInputProps } from '../base-input-deprecated';
 import { SmallRounds } from '../styling/shapes';
-declare type Variant = 'desktop' | 'mobile';
-export declare type DesktopSize = 'xs' | 's' | 'l';
-declare type Classes = {
+type Variant = 'desktop' | 'mobile';
+export type DesktopSize = 'xs' | 's' | 'l';
+type Classes = {
     root?: string;
     baseInput?: string;
     blockFocused?: string;
 };
-declare type IgnoredInputProps = 'size' | 'onClick' | 'onInput' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'onSelect';
+type IgnoredInputProps = 'size' | 'onClick' | 'onInput' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'onSelect';
 export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, IgnoredInputProps> {
     /** Ярлык. */
     label?: string;
@@ -57,10 +57,11 @@ export declare const HEIGHTS: {
     readonly l: 56;
 };
 export declare const DEFAULTS: {
-    readonly size: "s" | "xs" | "l";
+    readonly size: "xs" | "s" | "l";
 };
 /**
  * Компонент текстового поля.
+ * @deprecated На адаптивных страницах следует использовать Input или Textarea.
  * @param props Свойства.
  * @return Элемент.
  */

package/text-field/index.js

@@ -30,7 +30,7 @@ exports.TextField = exports.DEFAULTS = exports.HEIGHTS = void 0;
 const react_1 = __importStar(require("react"));
 const lodash_1 = require("lodash");
 const box_1 = require("../box");
-const base_input_1 = require("../base-input");
+const base_input_deprecated_1 = require("../base-input-deprecated");
 const shapes_1 = require("../styling/shapes");
 const bind_1 = __importDefault(require("classnames/bind"));
 const text_field_module_scss_1 = __importDefault(require("./text-field.module.scss"));
@@ -52,6 +52,7 @@ const isVisible = (value) => !(0, lodash_1.isNil)(value) && `${value}` !== '';
 const modifiersToClasses = ({ disabled, failed, focused, variant, }) => cx(disabled && 'disabled', failed && 'failed', focused && 'focused', variant && `variant-${variant}`);
 /**
  * Компонент текстового поля.
+ * @deprecated На адаптивных страницах следует использовать Input или Textarea.
  * @param props Свойства.
  * @return Элемент.
  */
@@ -87,7 +88,7 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
             react_1.default.createElement("div", { className: cx('main-column') },
                 withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), htmlFor: id, children: label, "data-testid": 'text-field:label' })),
                 react_1.default.createElement("div", { className: cx('input-wrapper') },
-                    react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { type: type, id: id, name: name, autoComplete: autoComplete, "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
+                    react_1.default.createElement(base_input_deprecated_1.BaseInput, Object.assign({}, baseInputProps, { type: type, id: id, name: name, autoComplete: autoComplete, "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
                             onFocus && onFocus(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(true);

package/textarea/index.d.ts

@@ -0,0 +1,21 @@
+import { TextareaHTMLAttributes, Ref } from 'react';
+import { BaseInputAsTextareaProps } from '../base-input';
+import { FieldBlockProps } from '../field-block';
+type HTMLTextareaProps = Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'defaultValue' | 'disabled' | 'id' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'placeholder' | 'readOnly' | 'required' | 'rows' | 'value'>;
+export interface TextareaProps extends HTMLTextareaProps, FieldBlockProps {
+    /** Ref элемента textarea. */
+    textareaRef?: Ref<HTMLTextAreaElement>;
+    /** Свойства BaseInputProps. */
+    baseInputProps?: BaseInputAsTextareaProps;
+    /** Стили корневого элемента. */
+    style?: Required<FieldBlockProps>['rootProps']['style'];
+    /** CSS-класс корневого элемента. */
+    className?: Required<FieldBlockProps>['rootProps']['className'];
+}
+/**
+ * Текстовая область.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Textarea({ textareaRef, baseInputProps, style, className, autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, rows, value, label, failed, caption, blockProps, 'data-testid': testId, ...restProps }: TextareaProps): JSX.Element;
+export {};

package/textarea/index.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const react_1 = __importStar(require("react"));
+const base_input_1 = require("../base-input");
+const field_block_1 = require("../field-block");
+const utils_1 = require("../input/utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const textarea_module_scss_1 = __importDefault(require("./textarea.module.scss"));
+const cx = bind_1.default.bind(textarea_module_scss_1.default);
+/**
+ * Текстовая область.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Textarea(_a) {
+    var { 
+    // specific Textarea props
+    textareaRef, baseInputProps, 
+    // root props
+    style, className, 
+    // textarea element props (popular)
+    autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, rows = 4, value, 
+    // FieldBlock props
+    label, failed, caption, blockProps, 'data-testid': testId = 'textarea' } = _a, restProps = __rest(_a, ["textareaRef", "baseInputProps", "style", "className", "autoComplete", "autoFocus", "defaultValue", "disabled", "id", "name", "onBlur", "onChange", "onFocus", "onInput", "placeholder", "readOnly", "required", "rows", "value", "label", "failed", "caption", "blockProps", 'data-testid']);
+    const ref = (0, react_1.useRef)(null);
+    const [filled, updateFilled] = (0, utils_1.useFilledState)(ref, { value, defaultValue });
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const handleMouseDown = (0, utils_1.useFieldMouseDown)(ref, blockProps === null || blockProps === void 0 ? void 0 : blockProps.onMouseDown);
+    (0, react_1.useImperativeHandle)(textareaRef, () => ref.current);
+    return (react_1.default.createElement(field_block_1.FieldBlock, Object.assign({}, restProps, { rootProps: Object.assign(Object.assign({}, restProps.rootProps), { style,
+            className }), "data-testid": testId, caption: caption, disabled: disabled, failed: failed, fixedHeight: false, focused: focused, label: label, labelAsPlaceholder: !focused && !filled, labelProps: { htmlFor: id }, size: 'l', blockProps: Object.assign(Object.assign({}, blockProps), { onMouseDown: handleMouseDown }), main: react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { textareaRef: ref, multiline: true, className: cx('textarea', baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.className), style: Object.assign(Object.assign({}, baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.style), { '--placeholder-color': (0, utils_1.definePlaceholderColor)({ failed, disabled }) }), autoComplete: autoComplete, autoFocus: autoFocus, defaultValue: defaultValue, disabled: disabled, id: id, name: name, placeholder: placeholder, readOnly: readOnly, required: required, rows: rows, value: value, onFocus: (event) => {
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+                updateFilled(event);
+                setFocused(true);
+            }, onBlur: (event) => {
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+                updateFilled(event);
+                setFocused(false);
+            }, onInput: (event) => {
+                onInput === null || onInput === void 0 ? void 0 : onInput(event);
+                updateFilled(event);
+            }, onChange: (event) => {
+                onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                updateFilled(event);
+            } })), mainProps: { className: cx('main') } })));
+}
+exports.Textarea = Textarea;

package/textarea/textarea.module.scss

@@ -0,0 +1,15 @@
+@use '../colors';
+
+.main {
+  display: flex;
+  width: 100%;
+}
+
+.textarea {
+  min-width: 0;
+  width: 0;
+  flex-grow: 1;
+  background: inherit;
+  font: inherit;
+  line-height: inherit;
+}

package/toggle/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CheckboxProps } from '../_internal/checkbox';
-export declare type ToggleProps = CheckboxProps;
+import { CheckboxInputProps } from '../types';
+export type ToggleProps = CheckboxInputProps;
 /**
  * Компонент стилизованного переключателя (input[type=checkbox]).
  */
-export declare const Toggle: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Toggle: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<HTMLInputElement>>;

package/toggle/toggle.module.scss

@@ -11,14 +11,23 @@
 
 .input {
   display: none;
+  &:not(:checked) + .switch {
+    --toggle-slider-position: 2px;
+  }
   &:checked + .switch {
-    background: colors.$basic-blue;
-    &::after {
-      left: calc(100% - 22px);
-    }
+    --toggle-slider-position: calc(100% - 22px);
+  }
+  &:not(:checked):not(:disabled) + .switch {
+    --toggle-primary-color: #{colors.$basic-gray12};
+  }
+  &:checked:not(:disabled) + .switch {
+    --toggle-primary-color: #{colors.$basic-blue};
+  }
+  &:not(:checked):disabled + .switch {
+    --toggle-primary-color: #{colors.$basic-gray4};
   }
-  &:disabled + .switch {
-    background: colors.$basic-gray4;
+  &:checked:disabled + .switch {
+    --toggle-primary-color: #{colors.$basic-gray24};
   }
 }
 
@@ -28,13 +37,13 @@
   width: 44px;
   height: 24px;
   border-radius: 12px;
-  background: colors.$basic-gray12;
+  background: var(--toggle-primary-color);
   transition: background 0.16s ease-in-out;
   &::after {
     content: '';
     position: absolute;
     top: 2px;
-    left: 2px;
+    left: var(--toggle-slider-position);
     display: block;
     width: 20px;
     height: 20px;

package/tooltip/index.d.ts

@@ -11,6 +11,7 @@ export interface TooltipProps {
 }
 /**
  * Компонент подсказки.
+ * @deprecated Можно использовать `popup`.
  * @param props Свойства.
  * @return Элемент.
  */

package/tooltip/index.js

@@ -34,6 +34,7 @@ const tooltip_module_scss_1 = __importDefault(require("./tooltip.module.scss"));
 const cx = bind_1.default.bind(tooltip_module_scss_1.default);
 /**
  * Компонент подсказки.
+ * @deprecated Можно использовать `popup`.
  * @param props Свойства.
  * @return Элемент.
  */

package/top-bar/index.d.ts

@@ -1,40 +1,3 @@
-import React from 'react';
-export declare type TopBarSize = 's' | 'm';
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    icon?: React.ReactNode;
-    'data-testid'?: string;
-}
-export interface TopBarProps {
-    /** Свойства кнопок. */
-    buttonsProps?: {
-        start?: ButtonProps;
-        startSecondary?: ButtonProps;
-        end?: ButtonProps;
-        endSecondary?: ButtonProps;
-    };
-    /** CSS-класс корневого элемента. */
-    className?: string;
-    /** Размер. */
-    size?: TopBarSize;
-    /** Подзаголовок. */
-    subtitle?: string;
-    /** Заголовок. */
-    title?: string;
-    /** Нужна ли разделительная черта снизу. */
-    divided?: boolean;
-}
-export declare const TOP_BAR_HEIGHT: Readonly<Record<TopBarSize, number>>;
-/**
- * Компонент шапки модальных окон/экранов.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const TopBar: ({ divided, size, title, subtitle, buttonsProps: { start, startSecondary, end, endSecondary }, className, }: TopBarProps) => JSX.Element;
-/**
- * Компонент кнопки-иконки.
- * @param props Свойства. Поддерживаются свойства button.
- * @param props.icon Иконка.
- * @return Элемент.
- */
-export declare const IconButton: ({ icon, ...buttonProps }: ButtonProps) => JSX.Element;
-export {};
+export type { TopBarProps, TopBarSize } from './types';
+export type { navigationButtons } from './utils';
+export { TopBar, TOP_BAR_HEIGHT } from './top-bar';