@alfalab/core-components 42.4.0 → 42.5.1

package/stepped-progress-bar/esm/inverted.css

@@ -16,8 +16,8 @@
 } :root {
 } :root {
 } :root {
-} .stepped-progress-bar__bar_ylevs {
+} .stepped-progress-bar__bar_cco1o {
     background: var(--color-light-specialbg-tertiary-transparent-inverted);
-} .stepped-progress-bar__description_ylevs {
+} .stepped-progress-bar__description_cco1o {
     color: var(--color-light-text-secondary-inverted);
 }

package/stepped-progress-bar/index.css

@@ -15,13 +15,13 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .stepped-progress-bar__component_vhzkk {
+} .stepped-progress-bar__component_1vfa7 {
     display: flex;
     flex-direction: column;
     text-align: center;
-} .stepped-progress-bar__stepsContainer_vhzkk {
+} .stepped-progress-bar__stepsContainer_1vfa7 {
     width: 100%;
     display: flex;
-} .stepped-progress-bar__description_vhzkk {
+} .stepped-progress-bar__description_1vfa7 {
     margin-top: var(--gap-xs);
 }

package/stepped-progress-bar/inverted.css

@@ -16,8 +16,8 @@
 } :root {
 } :root {
 } :root {
-} .stepped-progress-bar__bar_ylevs {
+} .stepped-progress-bar__bar_cco1o {
     background: var(--color-light-specialbg-tertiary-transparent-inverted);
-} .stepped-progress-bar__description_ylevs {
+} .stepped-progress-bar__description_cco1o {
     color: var(--color-light-text-secondary-inverted);
 }

package/stepped-progress-bar/modern/Component.js

@@ -3,13 +3,13 @@ import cn from 'classnames';
 import { Typography } from '../../typography/modern';
 import { StepBar } from './components/step-bar/Component.js';
 
-const defaultColors = {"bar":"stepped-progress-bar__bar_xdkgs","description":"stepped-progress-bar__description_xdkgs"};
+const defaultColors = {"bar":"stepped-progress-bar__bar_b4tmo","description":"stepped-progress-bar__description_b4tmo"};
 require('./default.css');
 
-const styles = {"component":"stepped-progress-bar__component_vhzkk","stepsContainer":"stepped-progress-bar__stepsContainer_vhzkk","description":"stepped-progress-bar__description_vhzkk"};
+const styles = {"component":"stepped-progress-bar__component_1vfa7","stepsContainer":"stepped-progress-bar__stepsContainer_1vfa7","description":"stepped-progress-bar__description_1vfa7"};
 require('./index.css');
 
-const invertedColors = {"bar":"stepped-progress-bar__bar_ylevs","description":"stepped-progress-bar__description_ylevs"};
+const invertedColors = {"bar":"stepped-progress-bar__bar_cco1o","description":"stepped-progress-bar__description_cco1o"};
 require('./inverted.css');
 
 const colorStyles = {

package/stepped-progress-bar/modern/components/step-bar/Component.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import cn from 'classnames';
 
-const styles = {"bar":"stepped-progress-bar__bar_1uv1y","positive":"stepped-progress-bar__positive_1uv1y","attention":"stepped-progress-bar__attention_1uv1y","negative":"stepped-progress-bar__negative_1uv1y","link":"stepped-progress-bar__link_1uv1y","tertiary":"stepped-progress-bar__tertiary_1uv1y","secondary":"stepped-progress-bar__secondary_1uv1y","primary":"stepped-progress-bar__primary_1uv1y","accent":"stepped-progress-bar__accent_1uv1y"};
+const styles = {"bar":"stepped-progress-bar__bar_i2oqr","positive":"stepped-progress-bar__positive_i2oqr","attention":"stepped-progress-bar__attention_i2oqr","negative":"stepped-progress-bar__negative_i2oqr","link":"stepped-progress-bar__link_i2oqr","tertiary":"stepped-progress-bar__tertiary_i2oqr","secondary":"stepped-progress-bar__secondary_i2oqr","primary":"stepped-progress-bar__primary_i2oqr","accent":"stepped-progress-bar__accent_i2oqr"};
 require('./index.css');
 
 const StepBar = memo(({ isDone, view = 'positive', classNameStep }) => (React.createElement("span", { "data-test-id": isDone ? 'on' : 'off', className: cn(styles.bar, isDone && styles[view], classNameStep) })));

package/stepped-progress-bar/modern/components/step-bar/index.css

@@ -24,27 +24,27 @@
     --gap-2xs: 4px;
 } :root {
 } :root {
-} .stepped-progress-bar__bar_1uv1y {
+} .stepped-progress-bar__bar_i2oqr {
     width: 100%;
     height: var(--gap-2xs);
     margin-right: var(--gap-2xs);
     border-radius: var(--border-radius-xs);
-} .stepped-progress-bar__bar_1uv1y:last-child {
+} .stepped-progress-bar__bar_i2oqr:last-child {
     margin-right: 0;
-} .stepped-progress-bar__bar_1uv1y.stepped-progress-bar__positive_1uv1y {
+} .stepped-progress-bar__bar_i2oqr.stepped-progress-bar__positive_i2oqr {
         background: var(--color-light-graphic-positive);
-    } .stepped-progress-bar__bar_1uv1y.stepped-progress-bar__attention_1uv1y {
+    } .stepped-progress-bar__bar_i2oqr.stepped-progress-bar__attention_i2oqr {
         background: var(--color-light-graphic-attention);
-    } .stepped-progress-bar__bar_1uv1y.stepped-progress-bar__negative_1uv1y {
+    } .stepped-progress-bar__bar_i2oqr.stepped-progress-bar__negative_i2oqr {
         background: var(--color-light-graphic-negative);
-    } .stepped-progress-bar__bar_1uv1y.stepped-progress-bar__link_1uv1y {
+    } .stepped-progress-bar__bar_i2oqr.stepped-progress-bar__link_i2oqr {
         background: var(--color-light-graphic-link);
-    } .stepped-progress-bar__bar_1uv1y.stepped-progress-bar__tertiary_1uv1y {
+    } .stepped-progress-bar__bar_i2oqr.stepped-progress-bar__tertiary_i2oqr {
         background: var(--color-light-graphic-tertiary);
-    } .stepped-progress-bar__bar_1uv1y.stepped-progress-bar__secondary_1uv1y {
+    } .stepped-progress-bar__bar_i2oqr.stepped-progress-bar__secondary_i2oqr {
         background: var(--color-light-graphic-secondary);
-    } .stepped-progress-bar__bar_1uv1y.stepped-progress-bar__primary_1uv1y {
+    } .stepped-progress-bar__bar_i2oqr.stepped-progress-bar__primary_i2oqr {
         background: var(--color-light-graphic-primary);
-    } .stepped-progress-bar__bar_1uv1y.stepped-progress-bar__accent_1uv1y {
+    } .stepped-progress-bar__bar_i2oqr.stepped-progress-bar__accent_i2oqr {
         background: var(--color-light-graphic-accent);
     }

package/stepped-progress-bar/modern/default.css

@@ -16,8 +16,8 @@
 } :root {
 } :root {
 } :root {
-} .stepped-progress-bar__bar_xdkgs {
+} .stepped-progress-bar__bar_b4tmo {
     background: var(--color-light-specialbg-tertiary-transparent);
-} .stepped-progress-bar__description_xdkgs {
+} .stepped-progress-bar__description_b4tmo {
     color: var(--color-light-text-secondary);
 }

package/stepped-progress-bar/modern/index.css

@@ -15,13 +15,13 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .stepped-progress-bar__component_vhzkk {
+} .stepped-progress-bar__component_1vfa7 {
     display: flex;
     flex-direction: column;
     text-align: center;
-} .stepped-progress-bar__stepsContainer_vhzkk {
+} .stepped-progress-bar__stepsContainer_1vfa7 {
     width: 100%;
     display: flex;
-} .stepped-progress-bar__description_vhzkk {
+} .stepped-progress-bar__description_1vfa7 {
     margin-top: var(--gap-xs);
 }

package/stepped-progress-bar/modern/inverted.css

@@ -16,8 +16,8 @@
 } :root {
 } :root {
 } :root {
-} .stepped-progress-bar__bar_ylevs {
+} .stepped-progress-bar__bar_cco1o {
     background: var(--color-light-specialbg-tertiary-transparent-inverted);
-} .stepped-progress-bar__description_ylevs {
+} .stepped-progress-bar__description_cco1o {
     color: var(--color-light-text-secondary-inverted);
 }

package/stepper-input/Component.desktop-d873d97d.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from "react";
+import { BaseFormControlProps, BaseInputProps } from "./index-ebda875c";
+type FormControlDesktopProps = Omit<BaseFormControlProps, "styles" | "colorStyles">;
+declare const FormControlDesktop: React.ForwardRefExoticComponent<FormControlDesktopProps & React.RefAttributes<HTMLDivElement>>;
+type InputDesktopProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'>;
+declare const InputDesktop: React.ForwardRefExoticComponent<InputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { FormControlDesktopProps, FormControlDesktop, InputDesktopProps, InputDesktop };

package/stepper-input/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseStepperInputProps } from "./components/base-stepper-input/index";
+type StepperInputDesktopProps = Omit<BaseStepperInputProps, 'Input' | 'view' | 'breakpoint'>;
+declare const StepperInputDesktop: React.ForwardRefExoticComponent<StepperInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { StepperInputDesktopProps, StepperInputDesktop };

package/stepper-input/Component.desktop.js

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var desktop = require('../number-input/desktop');
+var components_baseStepperInput_Component = require('./components/base-stepper-input/Component.js');
+require('classnames');
+require('./utils.js');
+require('./components/steppers/Component.js');
+require('../icon-button');
+require('../shared');
+require('@alfalab/icons-glyph/MinusMIcon');
+require('@alfalab/icons-glyph/PlusMediumMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var StepperInputDesktop = React.forwardRef(function (_a, ref) {
+    var restProps = tslib.__rest(_a, []);
+    return (React__default.default.createElement(components_baseStepperInput_Component.BaseStepperInput, tslib.__assign({}, restProps, { view: 'desktop', Input: desktop.NumberInputDesktop, ref: ref })));
+});
+
+exports.StepperInputDesktop = StepperInputDesktop;

package/stepper-input/Component.mobile-10265133.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseInputProps } from "./index-ebda875c";
+type InputMobileProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'>;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export * from "./Component.mobile-ebda875c";
+export { InputMobileProps, InputMobile };

package/stepper-input/Component.mobile-889187dd.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+import { NumberInputProps } from "./index-889187dd";
+type NumberInputMobileProps = Omit<NumberInputProps, 'Input' | 'breakpoint'>;
+declare const NumberInputMobile: React.ForwardRefExoticComponent<NumberInputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export * from "./Component.mobile-10265133";
+export { NumberInputMobileProps, NumberInputMobile };

package/stepper-input/Component.mobile-ebda875c.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/stepper-input/Component.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseStepperInputProps } from "./components/base-stepper-input/index";
+type StepperInputMobileProps = Omit<BaseStepperInputProps, 'Input' | 'view' | 'breakpoint'>;
+declare const StepperInputMobile: React.ForwardRefExoticComponent<StepperInputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { StepperInputMobileProps, StepperInputMobile };

package/stepper-input/Component.mobile.js

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mobile = require('../number-input/mobile');
+var components_baseStepperInput_Component = require('./components/base-stepper-input/Component.js');
+require('classnames');
+require('./utils.js');
+require('./components/steppers/Component.js');
+require('../icon-button');
+require('../shared');
+require('@alfalab/icons-glyph/MinusMIcon');
+require('@alfalab/icons-glyph/PlusMediumMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var StepperInputMobile = React.forwardRef(function (_a, ref) {
+    var restProps = tslib.__rest(_a, []);
+    return (React__default.default.createElement(components_baseStepperInput_Component.BaseStepperInput, tslib.__assign({}, restProps, { view: 'mobile', Input: mobile.NumberInputMobile, ref: ref })));
+});
+
+exports.StepperInputMobile = StepperInputMobile;

package/stepper-input/Component.responsive-d873d97d.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseInputProps } from "./index-ebda875c";
+type InputProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "colorStyles" | "FormControlComponent"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { InputProps, Input };

package/stepper-input/Component.responsive.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseStepperInputProps } from "./components/base-stepper-input/index";
+type StepperInputResponsiveProps = Omit<BaseStepperInputProps, 'Input' | 'view'>;
+declare const StepperInputResponsive: React.ForwardRefExoticComponent<StepperInputResponsiveProps & React.RefAttributes<HTMLInputElement>>;
+export { StepperInputResponsiveProps, StepperInputResponsive };

package/stepper-input/Component.responsive.js

@@ -0,0 +1,26 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../mq');
+var coreComponentsNumberInput = require('../number-input');
+var components_baseStepperInput_Component = require('./components/base-stepper-input/Component.js');
+require('classnames');
+require('./utils.js');
+require('./components/steppers/Component.js');
+require('../icon-button');
+require('../shared');
+require('@alfalab/icons-glyph/MinusMIcon');
+require('@alfalab/icons-glyph/PlusMediumMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var StepperInputResponsive = React.forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    return (React__default.default.createElement(components_baseStepperInput_Component.BaseStepperInput, tslib.__assign({}, restProps, { Input: coreComponentsNumberInput.NumberInput, view: isDesktop ? 'desktop' : 'mobile', breakpoint: breakpoint, ref: ref })));
+});
+
+exports.StepperInputResponsive = StepperInputResponsive;

package/stepper-input/components/base-stepper-input/Component.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+import React from 'react';
+import { FC } from "react";
+import { NumberInputProps } from "../../../number-input";
+type BaseStepperInputProps = Omit<NumberInputProps, 'value' | 'onChange' | 'allowSigns' | 'separator' | 'fractionLength' | 'rightAddons' | 'success' | 'defaultValue'> & {
+    /**
+     *  Значение поля
+     */
+    value?: string | number;
+    /**
+     * Значение по умолчанию
+     * @default 0
+     */
+    defaultValue?: number;
+    /**
+     *  Минимальное допустимое значение
+     *  @default 0
+     */
+    min?: number;
+    /**
+     *  Максимальное допустимое значение
+     *  @default Number.MAX_SAFE_INTEGER
+     */
+    max?: number;
+    /**
+     *  Шаг инкремента/декремента. Используйте только целочисленные значения
+     *  @default 1
+     */
+    step?: number;
+    /**
+     * Компонент ввода значения
+     */
+    Input: FC<NumberInputProps & {
+        ref?: React.Ref<HTMLInputElement>;
+    }>;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: 'desktop' | 'mobile';
+    /**
+     * Обработчик события изменения значения
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement> | null, payload: {
+        /**
+         * Числовое значение инпута
+         */
+        value: number | null;
+        /**
+         * Строковое значение инпута
+         * Используйте для изменения значения инпута
+         */
+        valueString: string;
+    }) => void;
+};
+declare const BaseStepperInput: React.ForwardRefExoticComponent<Omit<NumberInputProps, "rightAddons" | "defaultValue" | "onChange" | "separator" | "value" | "success" | "fractionLength" | "allowSigns"> & {
+    /**
+     *  Значение поля
+     */
+    value?: string | number | undefined;
+    /**
+     * Значение по умолчанию
+     * @default 0
+     */
+    defaultValue?: number | undefined;
+    /**
+     *  Минимальное допустимое значение
+     *  @default 0
+     */
+    min?: number | undefined;
+    /**
+     *  Максимальное допустимое значение
+     *  @default Number.MAX_SAFE_INTEGER
+     */
+    max?: number | undefined;
+    /**
+     *  Шаг инкремента/декремента. Используйте только целочисленные значения
+     *  @default 1
+     */
+    step?: number | undefined;
+    /**
+     * Компонент ввода значения
+     */
+    Input: FC<NumberInputProps & {
+        ref?: React.Ref<HTMLInputElement>;
+    }>;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: "desktop" | "mobile" | undefined;
+    /**
+     * Обработчик события изменения значения
+     */
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement> | null, payload: {
+        /**
+         * Числовое значение инпута
+         */
+        value: number | null;
+        /**
+         * Строковое значение инпута
+         * Используйте для изменения значения инпута
+         */
+        valueString: string;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { BaseStepperInputProps, BaseStepperInput };

package/stepper-input/components/base-stepper-input/Component.js

@@ -0,0 +1,98 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var utils = require('../../utils.js');
+var components_steppers_Component = require('../steppers/Component.js');
+require('../../../icon-button');
+require('../../../shared');
+require('@alfalab/icons-glyph/MinusMIcon');
+require('@alfalab/icons-glyph/PlusMediumMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"steppers":"stepper-input__steppers_1vbp2","steppersFocused":"stepper-input__steppersFocused_1vbp2","s":"stepper-input__s_1vbp2","m":"stepper-input__m_1vbp2"};
+require('./index.css');
+
+var MAX_SAFE_INTEGER = Math.pow(2, 53) - 1;
+var MIN_SAFE_INTEGER = -MAX_SAFE_INTEGER;
+var BaseStepperInput = React.forwardRef(function (_a, ref) {
+    var _b;
+    var valueProp = _a.value, minProp = _a.min, maxProp = _a.max, _c = _a.defaultValue, defaultValueProp = _c === void 0 ? 0 : _c, disableUserInput = _a.disableUserInput, _d = _a.step, stepProp = _d === void 0 ? 1 : _d, Input = _a.Input, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? 'm' : _e, onFocus = _a.onFocus, onBlur = _a.onBlur, disabled = _a.disabled, view = _a.view, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["value", "min", "max", "defaultValue", "disableUserInput", "step", "Input", "onChange", "size", "onFocus", "onBlur", "disabled", "view", "dataTestId"]);
+    var min = Math.max(MIN_SAFE_INTEGER, minProp !== null && minProp !== void 0 ? minProp : 0);
+    var max = Math.min(MAX_SAFE_INTEGER, maxProp !== null && maxProp !== void 0 ? maxProp : MAX_SAFE_INTEGER);
+    var defaultValue = utils.getValidValue(defaultValueProp, min, max);
+    var step = Math.round(stepProp);
+    var _f = React.useState(defaultValue.toString()), value = _f[0], setValue = _f[1];
+    var _g = React.useState(false), focused = _g[0], setFocused = _g[1];
+    var uncontrolled = valueProp === undefined;
+    var inputValue = valueProp !== null && valueProp !== void 0 ? valueProp : value;
+    var handleChange = function (e, payload) {
+        var nextNumber = payload.value;
+        var nextString = utils.prepareString(payload.valueString);
+        if (uncontrolled) {
+            setValue(nextString);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, { value: nextNumber, valueString: nextString });
+    };
+    var handleInputChange = function (e, payload) {
+        var isFocusEvent = 'relatedTarget' in e;
+        // Вызывается в onBlur у NumberInput
+        if (isFocusEvent) {
+            var isEmpty = utils.isEmptyValue(payload.valueString);
+            var validValue = utils.getValidValue(inputValue, min, max);
+            if (validValue.toString() !== inputValue.toString()) {
+                return handleChange(e, {
+                    value: isEmpty ? defaultValue : validValue,
+                    valueString: isEmpty ? defaultValue.toString() : validValue.toString(),
+                });
+            }
+        }
+        // Запрещаем ввод цифр больше max.
+        if (utils.isNumber(payload.value) && payload.value > max) {
+            if (max < 0 && payload.value < 0)
+                return handleChange(e, payload);
+            return handleChange(e, { value: max, valueString: max.toString() });
+        }
+        // Запрещаем ввод цифр меньше min.
+        if (utils.isNumber(payload.value) && payload.value < min) {
+            if (min > 0 && payload.value > 0)
+                return handleChange(e, payload);
+            return handleChange(e, { value: min, valueString: min.toString() });
+        }
+        return handleChange(e, payload);
+    };
+    var handleIncrement = function () {
+        var nextValue = utils.isEmptyValue(inputValue)
+            ? min
+            : utils.getValidValue(utils.valueToInt(inputValue) + step, min, max);
+        handleChange(null, { value: nextValue, valueString: nextValue.toString() });
+    };
+    var handleDecrement = function () {
+        var nextValue = utils.isEmptyValue(inputValue)
+            ? max
+            : utils.getValidValue(utils.valueToInt(inputValue) - step, min, max);
+        handleChange(null, { value: nextValue, valueString: nextValue.toString() });
+    };
+    var handleFocus = function (e) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        if (view === 'desktop') {
+            setFocused(true);
+        }
+    };
+    var handleBlur = function (e) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        if (view === 'desktop') {
+            setFocused(false);
+        }
+    };
+    return (React__default.default.createElement(Input, tslib.__assign({}, restProps, { ref: ref, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, value: inputValue, onChange: handleInputChange, fractionLength: 0, disabled: disabled, allowSigns: min < 0, dataTestId: dataTestId, rightAddons: React__default.default.createElement(components_steppers_Component.Steppers, { dataTestId: dataTestId, disabled: disabled, value: utils.valueToInt(inputValue), min: min, max: max, className: cn__default.default(styles.steppers, styles[size], (_b = {},
+                _b[styles.steppersFocused] = focused && view === 'desktop',
+                _b)), onIncrement: handleIncrement, onDecrement: handleDecrement }) })));
+});
+
+exports.BaseStepperInput = BaseStepperInput;

package/stepper-input/components/base-stepper-input/index.css

@@ -0,0 +1,29 @@
+/* hash: 8lwmv */
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-primary: #fff;
+    --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs-neg: -4px;
+    --gap-xs-neg: -8px;
+} :root {
+} :root {
+} .stepper-input__steppers_1vbp2 {
+    background-color: var(--color-light-bg-primary);
+} .stepper-input__steppersFocused_1vbp2 {
+    background-color: var(--color-light-specialbg-secondary-transparent);
+} .stepper-input__s_1vbp2 {
+    margin-right: var(--gap-xs-neg);
+} .stepper-input__m_1vbp2 {
+    margin-right: var(--gap-2xs-neg);
+}

package/stepper-input/components/base-stepper-input/index.d.ts

@@ -0,0 +1 @@
+export { BaseStepperInput, BaseStepperInputProps } from "./Component";

package/stepper-input/components/base-stepper-input/index.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseStepperInput_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('classnames');
+require('../../utils.js');
+require('../steppers/Component.js');
+require('../../../icon-button');
+require('../../../shared');
+require('@alfalab/icons-glyph/MinusMIcon');
+require('@alfalab/icons-glyph/PlusMediumMIcon');
+
+
+
+exports.BaseStepperInput = components_baseStepperInput_Component.BaseStepperInput;

package/stepper-input/components/steppers/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+type SteppersProps = {
+    value: number;
+    min: number;
+    max: number;
+    className?: string;
+    disabled?: boolean;
+    onIncrement: () => void;
+    onDecrement: () => void;
+    dataTestId?: string;
+};
+declare const Steppers: React.FC<SteppersProps>;
+export { SteppersProps, Steppers };

package/stepper-input/components/steppers/Component.js

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsIconButton = require('../../../icon-button');
+var coreComponentsShared = require('../../../shared');
+var MinusMIcon = require('@alfalab/icons-glyph/MinusMIcon');
+var PlusMediumMIcon = require('@alfalab/icons-glyph/PlusMediumMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"stepper-input__component_e8xii","separator":"stepper-input__separator_e8xii","button":"stepper-input__button_e8xii"};
+require('./index.css');
+
+function preventDefault(e) {
+    e.preventDefault();
+}
+var Steppers = function (_a) {
+    var className = _a.className, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, value = _a.value, min = _a.min, max = _a.max, disabled = _a.disabled, dataTestId = _a.dataTestId;
+    var decButtonDisabled = disabled || value <= min;
+    var incButtonDisabled = disabled || value >= max;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className) },
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { disabled: decButtonDisabled, className: styles.button, icon: React__default.default.createElement(MinusMIcon.MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
+        React__default.default.createElement("div", { className: styles.separator }),
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { disabled: incButtonDisabled, className: styles.button, icon: React__default.default.createElement(PlusMediumMIcon.PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
+};
+
+exports.Steppers = Steppers;