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

package/side-page/index.js

@@ -40,11 +40,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidePage = void 0;
 const react_1 = __importStar(require("react"));
 const define_slots_1 = require("../helpers/define-slots");
-const utils_1 = require("../modal/utils");
-const layer_1 = require("../helpers/layer");
-const body_scroll_1 = require("../_internal/body-scroll");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
 const slots_1 = require("./slots");
 const CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
+const modal_overlay_1 = require("../modal-overlay");
+const utils_1 = require("../modal-overlay/utils");
 const bind_1 = __importDefault(require("classnames/bind"));
 const side_page_module_scss_1 = __importDefault(require("./side-page.module.scss"));
 const cx = bind_1.default.bind(side_page_module_scss_1.default);
@@ -59,38 +59,33 @@ const transitionClasses = {
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePage = (_a) => {
+function SidePage(_a) {
     var { shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited } = _a, restProps = __rest(_a, ["shown", "withTransitions", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
     const transitionDuration = withTransitions ? 300 : 0;
     return (react_1.default.createElement(CSSTransition_1.default, { in: shown, timeout: transitionDuration, classNames: transitionClasses, unmountOnExit: true, onEntering: onEntering, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }, transitionStatus => (react_1.default.createElement(SidePageInner, Object.assign({}, restProps, { transitionStatus, transitionDuration })))));
-};
+}
 exports.SidePage = SidePage;
 /**
  * Фиктивный компонент, необходимый для того чтобы задействовать хук блокировки прокрутки внутри CSSTransition.
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePageInner = ({ size = 'm', children, onClose, withScrollDisable, scrollDisableOptions, transitionStatus, transitionDuration, }) => {
-    const layer = (0, layer_1.useLayer)() + 100;
-    const overlayBind = (0, utils_1.useCloseHandler)(onClose);
+function SidePageInner({ size = 'm', children, onClose, withScrollDisable = false, scrollDisableOptions, transitionStatus, transitionDuration, }) {
+    const overlayClickBind = (0, utils_1.useExactClick)(onClose);
     const ref = (0, react_1.useRef)(null);
-    const overlayStyles = {
-        zIndex: layer,
-        '--transition-duration': `${transitionDuration}ms`,
-    };
+    (0, page_scroll_lock_1.usePageScrollLock)(ref, Object.assign({ lockEnabled: withScrollDisable }, scrollDisableOptions));
     const { header, body, footer } = (0, define_slots_1.defineSlots)(children, {
-        header: exports.SidePage.Header,
-        body: exports.SidePage.Body,
-        footer: exports.SidePage.Footer,
+        header: SidePage.Header,
+        body: SidePage.Body,
+        footer: SidePage.Footer,
     });
-    (0, body_scroll_1.useBodyScrollLock)(ref, withScrollDisable, scrollDisableOptions);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: cx('overlay'), style: overlayStyles }, (transitionStatus !== 'entering' && overlayBind)),
-        react_1.default.createElement(layer_1.LayerProvider, { value: layer },
-            react_1.default.createElement("div", { className: cx('main', `size-${size}`) },
-                header,
-                react_1.default.createElement("div", { className: cx('body') }, body),
-                footer))));
-};
-exports.SidePage.Header = slots_1.SidePageHeader;
-exports.SidePage.Body = slots_1.SidePageBody;
-exports.SidePage.Footer = slots_1.SidePageFooter;
+    const overlayProps = Object.assign({ style: { '--transition-duration': `${transitionDuration}ms` } }, (transitionStatus !== 'entering' && overlayClickBind));
+    return (react_1.default.createElement(modal_overlay_1.ModalOverlay, Object.assign({}, overlayProps),
+        react_1.default.createElement("div", { className: cx('side-page', `size-${size}`) },
+            header,
+            react_1.default.createElement("div", { ref: ref, className: cx('body') }, body),
+            footer)));
+}
+SidePage.Header = slots_1.SidePageHeader;
+SidePage.Body = slots_1.SidePageBody;
+SidePage.Footer = slots_1.SidePageFooter;

package/side-page/side-page.module.scss

@@ -1,17 +1,10 @@
 @use '../colors';
+@use '../breakpoints';
+@use '../top-bar/top-bar-util';
+@use '../bottom-bar/bottom-bar-util';
+@use '../modal-overlay/modal-overlay-util';
 
-$overlay-color: rgba(0, 0, 0, 0.24);
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: $overlay-color;
-}
-
-.main {
+.side-page {
   position: absolute;
   top: 0;
   right: 0;
@@ -20,18 +13,34 @@ $overlay-color: rgba(0, 0, 0, 0.24);
   display: flex;
   flex-direction: column;
   background: #fff;
-}
-
-.size-s {
-  max-width: 488px;
-}
-
-.size-m {
-  max-width: 968px;
+  @include breakpoints.down('xs') {
+    width: 100%;
+    .header {
+      @include top-bar-util.size-m;
+    }
+    .footer {
+      @include bottom-bar-util.size-m;
+    }
+  }
+  @include breakpoints.up('xs') {
+    &.size-s {
+      max-width: 488px;
+    }
+    &.size-m {
+      max-width: 968px;
+    }
+    .header {
+      @include top-bar-util.size-xl;
+    }
+    .footer {
+      @include bottom-bar-util.size-l;
+    }
+  }
 }
 
 .header {
   flex-shrink: 0;
+  width: 100%;
 }
 
 .body {
@@ -42,32 +51,29 @@ $overlay-color: rgba(0, 0, 0, 0.24);
 .footer {
   flex-shrink: 0;
   width: 100%;
-  &.padded {
-    padding: 0 40px;
-  }
 }
 
 // transitions
 .enter {
   background-color: transparent;
-  .main {
+  .side-page {
     transform: translateX(100%);
   }
 }
 
 .enter-active {
   transition: background-color var(--transition-duration) ease-in-out;
-  background-color: $overlay-color;
+  background-color: modal-overlay-util.$overlay-color;
   overflow: hidden;
-  .main {
+  .side-page {
     transition: transform var(--transition-duration) ease-in-out;
     transform: translateX(0);
   }
 }
 
 .exit {
-  background-color: $overlay-color;
-  .main {
+  background-color: modal-overlay-util.$overlay-color;
+  .side-page {
     transform: translateX(0);
   }
 }
@@ -76,7 +82,7 @@ $overlay-color: rgba(0, 0, 0, 0.24);
   transition: background-color var(--transition-duration) ease-in-out;
   background-color: transparent;
   overflow: hidden;
-  .main {
+  .side-page {
     transition: transform var(--transition-duration) ease-in-out;
     transform: translateX(100%);
   }

package/side-page/slots.d.ts

@@ -1,34 +1,26 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { TopBarProps } from '../top-bar';
 import { BottomBarProps } from '../bottom-bar';
 /**
+ * Шапка SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SidePageHeader: {
-    ({ onBack, onClose, ...topBarProps }: TopBarProps & {
-        onBack?: (() => void) | undefined;
-        onClose?: (() => void) | undefined;
-    }): JSX.Element;
-    displayName: string;
-};
+export declare function SidePageHeader({ onBack, onClose, buttons, ...topBarProps }: TopBarProps & {
+    onBack?: () => void;
+    onClose?: () => void;
+}): JSX.Element;
 /**
+ * Основной контент SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SidePageBody: {
-    ({ children }: {
-        children?: React.ReactNode;
-    }): JSX.Element;
-    displayName: string;
-};
+export declare function SidePageBody({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
 /**
+ * Подвал SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SidePageFooter: {
-    ({ padded, ...props }: BottomBarProps & {
-        padded?: boolean | undefined;
-    }): JSX.Element;
-    displayName: string;
-};
+export declare function SidePageFooter({ ...props }: BottomBarProps): JSX.Element;

package/side-page/slots.js

@@ -18,47 +18,35 @@ exports.SidePageFooter = exports.SidePageBody = exports.SidePageHeader = void 0;
 const react_1 = __importDefault(require("react"));
 const top_bar_1 = require("../top-bar");
 const bottom_bar_1 = require("../bottom-bar");
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/cross"));
-const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
-const side_page_module_scss_1 = __importDefault(require("./side-page.module.scss"));
+const utils_1 = require("../top-bar/utils");
 const classnames_1 = __importDefault(require("classnames"));
+const side_page_module_scss_1 = __importDefault(require("./side-page.module.scss"));
 /**
+ * Шапка SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePageHeader = (_a) => {
-    var { onBack, onClose } = _a, topBarProps = __rest(_a, ["onBack", "onClose"]);
-    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, topBarProps, { size: 'm', className: side_page_module_scss_1.default.header, buttonsProps: Object.assign(Object.assign(Object.assign({}, topBarProps.buttonsProps), (onBack && {
-            start: {
-                'data-testid': 'side-page:back',
-                onClick: onBack,
-                icon: react_1.default.createElement(arrow_left_1.default, null),
-            },
-        })), (onClose && {
-            end: {
-                'data-testid': 'side-page:close',
-                onClick: onClose,
-                icon: react_1.default.createElement(cross_1.default, null),
-            },
-        })) })));
-};
+function SidePageHeader(_a) {
+    var { onBack, onClose, buttons } = _a, topBarProps = __rest(_a, ["onBack", "onClose", "buttons"]);
+    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, topBarProps, { size: 'unset', className: side_page_module_scss_1.default.header, buttons: (0, utils_1.navigationButtons)({ buttons, onBack, onClose }) })));
+}
 exports.SidePageHeader = SidePageHeader;
-exports.SidePageHeader.displayName = 'SidePage.Header';
 /**
+ * Основной контент SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePageBody = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+function SidePageBody({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
 exports.SidePageBody = SidePageBody;
-exports.SidePageBody.displayName = 'SidePage.Body';
 /**
+ * Подвал SidePage.
  * @param props Свойства.
  * @return Элемент.
  */
-const SidePageFooter = (_a) => {
-    var { padded = true } = _a, // @todo по умолчанию true для обратной совместимости - убрать true в ближайшем мажоре
-    props = __rest(_a, ["padded"]);
-    return (react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, props, { size: 'l', className: (0, classnames_1.default)(side_page_module_scss_1.default.footer, padded && side_page_module_scss_1.default.padded) })));
-};
+function SidePageFooter(_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, props, { size: 'unset', className: (0, classnames_1.default)(side_page_module_scss_1.default.footer) }));
+}
 exports.SidePageFooter = SidePageFooter;
-exports.SidePageFooter.displayName = 'SidePage.Footer';

package/spinner/index.d.ts

@@ -1,22 +1,34 @@
 import React from 'react';
 import { Token } from '../colors';
-declare type SpinnerColor = Extract<Token, 'basic-blue' | 'basic-white'>;
-declare type Size = 'small' | 'medium' | 'large';
+/**
+ * @deprecated Следует использовать 's' | 'm' | 'l'.
+ */
+type SpinnerLegacySize = 'small' | 'medium' | 'large';
+export type SpinnerSize = 's' | 'm' | 'l';
 export interface SpinnerProps {
     /** Размер. */
-    size?: Size;
+    size?: SpinnerSize | SpinnerLegacySize;
     /** Цвет. */
-    color?: SpinnerColor;
+    color?: Token;
     /** Класс. */
     className?: string;
     /** Стили. */
     style?: React.CSSProperties;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string | null;
 }
-export declare const DIAMETERS: Record<Size, number>;
+export declare const DIAMETERS: Record<SpinnerSize | SpinnerLegacySize, number>;
 /**
  * Компонент спиннера.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Spinner: ({ size, color, className, style, }: SpinnerProps) => JSX.Element;
+export declare function Spinner({ size, color, className, style, 'data-testid': testId, }: SpinnerProps): JSX.Element;
+/**
+ * Спиннер.
+ * Выделен в отдельный компонент для возможности использования без обертки в виде div.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SpinnerSVG({ size, color, className, style, 'data-testid': testId, }: SpinnerProps): JSX.Element;
 export {};

package/spinner/index.js

@@ -3,32 +3,45 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = exports.DIAMETERS = void 0;
+exports.SpinnerSVG = exports.Spinner = exports.DIAMETERS = void 0;
 const react_1 = __importDefault(require("react"));
 const lodash_1 = require("lodash");
-const bind_1 = __importDefault(require("classnames/bind"));
 const colors_1 = require("../colors");
+const bind_1 = __importDefault(require("classnames/bind"));
 const spinner_module_scss_1 = __importDefault(require("./spinner.module.scss"));
 const cx = bind_1.default.bind(spinner_module_scss_1.default);
 exports.DIAMETERS = {
+    s: 20,
+    m: 48,
+    l: 80,
+    // legacy, @todo удалить со временем:
     small: 20,
     medium: 48,
     large: 80,
 };
 const DEFAULT_COLOR = 'basic-blue';
-const AVAILABLE_COLORS = ['basic-blue', 'basic-white'];
 /**
  * Компонент спиннера.
  * @param props Свойства.
  * @return Элемент.
  */
-const Spinner = ({ size = 'medium', color = DEFAULT_COLOR, className, style, }) => {
-    const readySize = (0, lodash_1.has)(exports.DIAMETERS, size) ? size : 'medium';
-    const readyColor = AVAILABLE_COLORS.includes(color) ? color : DEFAULT_COLOR;
-    const diameter = exports.DIAMETERS[readySize];
-    const radius = diameter / 2;
-    return (react_1.default.createElement("div", { className: className, style: style },
-        react_1.default.createElement("svg", { className: cx('spinner', `size-${readySize}`), viewBox: `0 0 ${diameter} ${diameter}`, width: diameter, height: diameter, stroke: colors_1.COLORS.get(readyColor) },
-            react_1.default.createElement("circle", { className: cx('circle'), cx: radius, cy: radius, r: radius - 1 }))));
-};
+function Spinner({ size = 'm', color = DEFAULT_COLOR, className, style, 'data-testid': testId = 'spinner', }) {
+    const readySize = (0, lodash_1.has)(exports.DIAMETERS, size) ? size : 'm';
+    const readyColor = colors_1.COLORS.has(color) ? color : DEFAULT_COLOR;
+    return (react_1.default.createElement("div", { className: className, style: style, "data-testid": testId },
+        react_1.default.createElement(SpinnerSVG, { size: readySize, color: readyColor, "data-testid": null })));
+}
 exports.Spinner = Spinner;
+/**
+ * Спиннер.
+ * Выделен в отдельный компонент для возможности использования без обертки в виде div.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SpinnerSVG({ size = 'm', color = DEFAULT_COLOR, className, style, 'data-testid': testId = 'spinner', }) {
+    const diameter = exports.DIAMETERS[size];
+    const radius = diameter / 2;
+    return (react_1.default.createElement("svg", { style: style, className: cx('spinner', `size-${size}`, className), viewBox: `0 0 ${diameter} ${diameter}`, width: diameter, height: diameter, stroke: colors_1.COLORS.get(color), "data-testid": testId },
+        react_1.default.createElement("circle", { className: cx('circle'), cx: radius, cy: radius, r: radius - 1 })));
+}
+exports.SpinnerSVG = SpinnerSVG;

package/spinner/spinner.module.scss

@@ -1,10 +1,18 @@
 $pi: 3.141592653589793;
 $sizes: (
+  s: 20,
+  m: 48,
+  l: 80,
+  // legacy, @todo удалить со временем:
   small: 20,
   medium: 48,
   large: 80,
 );
 $durations: (
+  s: 600ms,
+  m: 750ms,
+  l: 950ms,
+  // legacy, @todo удалить со временем:
   small: 600ms,
   medium: 750ms,
   large: 950ms,

package/stepper/index.d.ts

@@ -1,30 +1,38 @@
-import React from 'react';
-declare type Size = 's' | 'm';
-interface StepperCSS extends React.CSSProperties {
+import React, { CSSProperties, InputHTMLAttributes, MouseEventHandler } from 'react';
+/** Размер Stepper (влияет на высоту и минимальную ширину). */
+export type StepperSize = 's' | 'm';
+/** Стили Stepper. */
+export interface StepperStyle extends CSSProperties {
+    /** Ширина. */
     '--stepper-width'?: string;
 }
-export interface StepperProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style'> {
+export interface StepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'style'> {
     /** Нужно ли выводить кнопку добавления. */
     canAdd?: boolean;
     /** Нужно ли выводить кнопку вычитания. */
     canSubtract?: boolean;
+    /** Делает кнопку "+" отключенной. */
+    plusDisabled?: boolean;
+    /** Делает кнопку "-" отключенной. */
+    minusDisabled?: boolean;
+    /** Нужно ли предотвращать blur на поле при нажатии "+/-". */
+    buttonClickBehavior?: 'prevent-input-blur';
     /** Сработает при добавлении. */
-    onAdd?: React.MouseEventHandler;
+    onAdd?: MouseEventHandler;
     /** Сработает при вычитании. */
-    onSubtract?: React.MouseEventHandler;
+    onSubtract?: MouseEventHandler;
     /** Размер. */
-    size?: Size;
+    size?: StepperSize;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
     /** Стили корневого элемента. */
-    style?: StepperCSS;
+    style?: StepperStyle;
     /** Нужно ли показывать состояние ошибки. */
     failed?: boolean;
 }
 /**
- * Компонент поля количества.
+ * Stepper - поле ввода количества.
  * @param props Свойства.
  * @return Элемент.
  */
 export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLInputElement>>;
-export {};

package/stepper/index.js

@@ -45,16 +45,25 @@ const stepper_module_scss_1 = __importDefault(require("./stepper.module.scss"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const cx = bind_1.default.bind(stepper_module_scss_1.default);
 /**
- * Компонент поля количества.
+ * Stepper - поле ввода количества.
  * @param props Свойства.
  * @return Элемент.
  */
-exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
-    var { canAdd = true, canSubtract = true, className, disabled, readOnly, onAdd, onBlur, onChange, onFocus, onSubtract, size = 'm', style, value, failed, 'data-testid': testId = 'stepper' } = _a, inputProps = __rest(_a, ["canAdd", "canSubtract", "className", "disabled", "readOnly", "onAdd", "onBlur", "onChange", "onFocus", "onSubtract", "size", "style", "value", "failed", 'data-testid']);
+exports.Stepper = (0, react_1.forwardRef)(function Stepper(_a, forwardedRef) {
+    var _b, _c;
+    var { buttonClickBehavior, canAdd = true, canSubtract = true, className, disabled, plusDisabled = disabled, minusDisabled = disabled, readOnly, onAdd, onBlur, onChange, onFocus, onSubtract, size = 'm', style, value, failed, 'data-testid': testId = 'stepper' } = _a, inputProps = __rest(_a, ["buttonClickBehavior", "canAdd", "canSubtract", "className", "disabled", "plusDisabled", "minusDisabled", "readOnly", "onAdd", "onBlur", "onChange", "onFocus", "onSubtract", "size", "style", "value", "failed", 'data-testid']);
+    const ref = (0, react_1.useRef)(null);
     const [focused, setFocused] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", { "data-testid": testId, style: style, className: cx('root', `size-${size}`, { disabled, focused, readonly: readOnly, failed }, className) },
-        react_1.default.createElement("button", { className: cx('button', { hidden: !canSubtract }), "data-testid": 'stepper:minus', onClick: canSubtract && !disabled && !readOnly ? onSubtract : undefined },
-            react_1.default.createElement(minus_1.default, null)),
+    (0, react_1.useImperativeHandle)(forwardedRef, () => ref.current);
+    const noBlurOnMousedown = (0, react_1.useCallback)(event => {
+        if (focused && event.target !== ref.current && buttonClickBehavior === 'prevent-input-blur') {
+            event.preventDefault();
+        }
+    }, [focused, buttonClickBehavior]);
+    const rootClassName = cx('root', `size-${size}`, { disabled, focused, failed }, className);
+    return (react_1.default.createElement("div", { "data-testid": testId, style: style, className: rootClassName, onMouseDown: noBlurOnMousedown },
+        react_1.default.createElement("button", { tabIndex: -1, hidden: !canSubtract, disabled: (_b = minusDisabled !== null && minusDisabled !== void 0 ? minusDisabled : disabled) !== null && _b !== void 0 ? _b : readOnly, className: cx('button'), "data-testid": 'stepper:minus', "aria-label": '\u0423\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: noBlurOnMousedown, onClick: canSubtract && !minusDisabled && !disabled && !readOnly ? onSubtract : undefined },
+            react_1.default.createElement(minus_1.default, { className: stepper_module_scss_1.default.svg })),
         react_1.default.createElement("input", Object.assign({}, inputProps, { ref: ref, readOnly: readOnly, "data-testid": 'stepper:input', className: cx('input'), value: value, disabled: disabled, onChange: onChange, onFocus: e => {
                 setFocused(true);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -62,6 +71,6 @@ exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
                 setFocused(false);
                 onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
             } })),
-        react_1.default.createElement("button", { className: cx('button', { hidden: !canAdd }), "data-testid": 'stepper:plus', onClick: canAdd && !disabled && !readOnly ? onAdd : undefined },
-            react_1.default.createElement(plus_1.default, null))));
+        react_1.default.createElement("button", { tabIndex: -1, hidden: !canAdd, disabled: (_c = plusDisabled !== null && plusDisabled !== void 0 ? plusDisabled : disabled) !== null && _c !== void 0 ? _c : readOnly, className: cx('button'), "data-testid": 'stepper:plus', "aria-label": '\u0423\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: noBlurOnMousedown, onClick: canAdd && !plusDisabled && !disabled && !readOnly ? onAdd : undefined },
+            react_1.default.createElement(plus_1.default, { className: stepper_module_scss_1.default.svg }))));
 });

package/stepper/stepper.module.scss

@@ -7,24 +7,15 @@
   border-radius: 4px;
   color: colors.$basic-gray87;
   background: colors.$basic-gray8;
-  &.focused:not(.disabled) {
+  &.focused {
     border-color: colors.$basic-blue;
   }
   &.disabled {
     color: colors.$basic-gray24;
     border-color: colors.$basic-gray4;
     background: colors.$basic-gray4;
-    .button {
-      fill: colors.$basic-gray24;
-    }
   }
-  &.readonly {
-    .button {
-      fill: colors.$basic-gray24;
-    }
-  }
-  &.failed:not(.disabled):not(.focused) {
-    border-color: transparent;
+  &.failed {
     color: colors.$additional-deep-red;
   }
   &.size-s {
@@ -65,7 +56,7 @@
   background: transparent;
   width: var(--stepper-button-width);
   height: 100%;
-  fill: colors.$basic-gray87;
+  color: colors.$basic-gray87;
   flex-shrink: 0;
   &:first-child {
     justify-content: flex-end;
@@ -73,11 +64,19 @@
   &:last-child {
     justify-content: flex-start;
   }
-  &:not(.hidden) {
+  &:not(.hidden):not(:disabled) {
     cursor: pointer;
   }
-  &.hidden {
-    opacity: 0;
+  &:disabled {
+    color: colors.$basic-gray24;
     pointer-events: none;
   }
+  &[hidden] {
+    pointer-events: none;
+    opacity: 0;
+  }
+}
+
+.svg {
+  fill: currentColor;
 }

package/styling/fonts.d.ts

@@ -1,6 +1,6 @@
-export declare type Size = 12 | 14 | 16 | 20 | 24 | 32 | 48 | 64;
-export declare type LineHeight = 16 | 20 | 24 | 28 | 32 | 40 | 60 | 80;
-export declare type Weight = 400 | 600 | 700;
+export type Size = 12 | 14 | 16 | 20 | 24 | 32 | 48 | 64;
+export type LineHeight = 16 | 20 | 24 | 28 | 32 | 40 | 60 | 80;
+export type Weight = 400 | 600 | 700;
 export declare const SIZES: Set<Size>;
 export declare const LINE_HEIGHTS: Set<LineHeight>;
 export declare const WEIGHTS: Set<Weight>;

package/switcher-row/index.d.ts

@@ -0,0 +1,42 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface SwitcherRowProps {
+    /** Содержимое. */
+    children?: ReactNode;
+    /** Направление текста. */
+    textAlign?: 'left' | 'right';
+    /** Стили корневого элемента. */
+    style?: CSSProperties;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Позиция поля. */
+    fieldPosition?: 'start' | 'end';
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+/**
+ * Блок вывода полей-переключателей (Checkbox, Toggle, RadioButton).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SwitcherRow({ children, className, style, textAlign, fieldPosition, 'data-testid': testId, }: SwitcherRowProps): JSX.Element;
+export declare namespace SwitcherRow {
+    var Label: typeof SwitcherRowLabel;
+    var Comment: typeof SwitcherRowComment;
+}
+/**
+ * Слот ярлыка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function SwitcherRowLabel({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+/**
+ * Слот комментария.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function SwitcherRowComment({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+export {};