@alfalab/core-components 42.15.0 → 43.1.0

package/number-input/esm/Component.desktop.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { NumberInputProps } from "./components/number-input/index";
-type NumberInputDesktopProps = Omit<NumberInputProps, 'Input' | 'breakpoint'>;
+type NumberInputDesktopProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
 declare const NumberInputDesktop: React.ForwardRefExoticComponent<NumberInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInputDesktopProps, NumberInputDesktop };

package/number-input/esm/Component.desktop.js

@@ -3,8 +3,16 @@ import React, { forwardRef } from 'react';
 import { InputDesktop } from '../../input/esm/desktop';
 import { NumberInput } from './components/number-input/Component.js';
 import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import 'classnames';
+import '../../shared/esm';
+import './components/steppers/Component.js';
+import '../../icon-button/esm';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';
 import './utils.js';
 
-var NumberInputDesktop = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: InputDesktop, ref: ref })); });
+var NumberInputDesktop = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: InputDesktop, ref: ref, view: 'desktop' })); });
 
 export { NumberInputDesktop };

package/number-input/esm/Component.mobile.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { NumberInputProps } from "./components/number-input/index";
-type NumberInputMobileProps = Omit<NumberInputProps, 'Input' | 'breakpoint'>;
+type NumberInputMobileProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
 declare const NumberInputMobile: React.ForwardRefExoticComponent<NumberInputMobileProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInputMobileProps, NumberInputMobile };

package/number-input/esm/Component.mobile.js

@@ -3,8 +3,16 @@ import React, { forwardRef } from 'react';
 import { InputMobile } from '../../input/esm/mobile';
 import { NumberInput } from './components/number-input/Component.js';
 import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import 'classnames';
+import '../../shared/esm';
+import './components/steppers/Component.js';
+import '../../icon-button/esm';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';
 import './utils.js';
 
-var NumberInputMobile = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: InputMobile, ref: ref })); });
+var NumberInputMobile = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: InputMobile, ref: ref, view: 'mobile' })); });
 
 export { NumberInputMobile };

package/number-input/esm/Component.responsive.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { NumberInputProps } from "./components/number-input/index";
-type NumberInputResponsiveProps = Omit<NumberInputProps, 'Input'>;
+type NumberInputResponsiveProps = Omit<NumberInputProps, 'Input' | 'view'>;
 declare const NumberInputResponsive: React.ForwardRefExoticComponent<NumberInputResponsiveProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInputResponsiveProps, NumberInputResponsive };

package/number-input/esm/Component.responsive.js

@@ -1,10 +1,23 @@
-import { __assign } from 'tslib';
+import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { Input } from '../../input/esm';
+import { useMatchMedia } from '../../mq/esm';
 import { NumberInput } from './components/number-input/Component.js';
 import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import 'classnames';
+import '../../shared/esm';
+import './components/steppers/Component.js';
+import '../../icon-button/esm';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';
 import './utils.js';
 
-var NumberInputResponsive = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: Input, ref: ref })); });
+var NumberInputResponsive = forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    return (React.createElement(NumberInput, __assign({}, restProps, { Input: Input, ref: ref, view: isDesktop ? 'desktop' : 'mobile', breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue })));
+});
 
 export { NumberInputResponsive };

package/number-input/esm/components/number-input/Component.d.ts

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

package/number-input/esm/components/number-input/Component.js

@@ -1,101 +1,113 @@
 import { __rest, __assign } from 'tslib';
-import React, { useRef, useState } from 'react';
+import React, { forwardRef, useMemo, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
-import { createSeparatorsRegExp, getAllowedValue, SEPARATORS, SIGNS } from '../../utils.js';
+import { maskitoTransform } from '@maskito/core';
+import { useMaskito } from '@maskito/react';
+import cn from 'classnames';
+import { fnUtils, os } from '../../../../shared/esm';
+import { createMaskOptions, parseNumber, stringifyNumberWithoutExp, MAX_DIGITS, MIN_SAFE_INTEGER, MAX_SAFE_INTEGER, MINUS_SIGN } from '../../utils.js';
+import { Steppers } from '../steppers/Component.js';
+import '../../../../icon-button/esm';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';
 
-var NumberInput = React.forwardRef(function (_a, ref) {
-    var propValue = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _b = _a.allowSigns, allowSigns = _b === void 0 ? true : _b, _c = _a.separator, separator = _c === void 0 ? ',' : _c, fractionLength = _a.fractionLength, defaultValue = _a.defaultValue, Input = _a.Input, restProps = __rest(_a, ["value", "onChange", "onBlur", "allowSigns", "separator", "fractionLength", "defaultValue", "Input"]);
-    var uncontrolled = propValue === undefined;
-    var inputRef = useRef(null);
-    var _d = useState(defaultValue || ''), value = _d[0], setValue = _d[1];
-    var getNumberValueFromStr = function (valueString) {
-        if (valueString === '')
-            return null;
-        if (valueString.includes(',')) {
-            return parseFloat(valueString.replace(',', '.'));
-        }
-        return parseFloat(valueString);
-    };
-    var restoreCaret = function (target) {
-        setTimeout(function () {
-            var input = target;
-            var positionCursor = input.selectionStart || 0;
-            var isEndPosition = input.value.length === positionCursor;
-            var enteredSign = SIGNS.some(function (s) { return s === input.value[positionCursor - 1]; });
-            var enteredSeparator = SEPARATORS.filter(function (s) { return s !== separator; }).some(function (s) { return s === input.value[positionCursor - 1]; });
-            var shouldRestore = enteredSeparator || enteredSign;
-            if (!isEndPosition && shouldRestore) {
-                input.selectionStart = positionCursor;
-                input.selectionEnd = positionCursor;
-            }
-        });
-    };
-    var handleChange = function (event) {
-        var input = event.target;
-        var newValue = input.value.replace(createSeparatorsRegExp(), separator);
-        var allowedValue = getAllowedValue({
-            value: newValue,
-            fractionLength: fractionLength,
-            allowSigns: allowSigns,
+var defaultColors = {"steppers":"number-input__steppers_vqdas","steppersFocused":"number-input__steppersFocused_vqdas","steppersDisabled":"number-input__steppersDisabled_vqdas"};
+require('./default.css');
+
+var styles = {"s":"number-input__s_77v6k","m":"number-input__m_77v6k"};
+require('./index.css');
+
+var invertedColors = {"steppers":"number-input__steppers_163tu","steppersFocused":"number-input__steppersFocused_163tu","steppersDisabled":"number-input__steppersDisabled_163tu"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+var NumberInput = forwardRef(function (_a, ref) {
+    var _b;
+    var propValue = _a.value, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? ',' : _c, _d = _a.fractionLength, fractionLength = _d === void 0 ? MAX_DIGITS : _d, defaultValue = _a.defaultValue, Input = _a.Input, minProp = _a.min, maxProp = _a.max, rightAddons = _a.rightAddons, dataTestId = _a.dataTestId, disabled = _a.disabled, onBlur = _a.onBlur, onFocus = _a.onFocus; _a.view; var stepProp = _a.step, _e = _a.size, size = _e === void 0 ? 's' : _e, disableUserInput = _a.disableUserInput, clearProp = _a.clear, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = __rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear", "colors"]);
+    var min = Math.max(MIN_SAFE_INTEGER, minProp !== null && minProp !== void 0 ? minProp : MIN_SAFE_INTEGER);
+    var max = Math.min(MAX_SAFE_INTEGER, maxProp !== null && maxProp !== void 0 ? maxProp : MAX_SAFE_INTEGER);
+    var withStepper = stepProp !== undefined;
+    var maskOptions = useMemo(function () {
+        return createMaskOptions({
             separator: separator,
+            fractionLength: withStepper ? 0 : fractionLength,
+            min: min,
+            max: max,
         });
-        if (onChange) {
-            onChange(event, {
-                value: getNumberValueFromStr(allowedValue),
-                valueString: allowedValue,
-            });
+    }, [separator, fractionLength, min, max, withStepper]);
+    var _g = useState(false), focused = _g[0], setFocused = _g[1];
+    var _h = useState(function () {
+        if (defaultValue == null) {
+            return withStepper ? fnUtils.clamp(0, min, max).toString() : '';
         }
-        if (uncontrolled) {
-            setValue(allowedValue);
-        }
-        restoreCaret(input);
-    };
-    var handleKeyDown = function (event) {
-        var disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё ]/;
-        var oneKeyPress = !event.altKey && !event.metaKey && !event.ctrlKey;
-        var target = event.target;
-        // Запрещаем вводить неразрешенные символы за исключением комбинаций клавиш
-        if (oneKeyPress && event.key.length === 1 && disallowedSymbols.test(event.key)) {
-            return event.preventDefault();
-        }
-        var val = target.value;
-        var hasSeparator = (val.match(createSeparatorsRegExp()) || []).length > 0;
-        // Запрещаем вводить второй сепаратор
-        if (hasSeparator && SEPARATORS.some(function (s) { return s === event.key; })) {
-            return event.preventDefault();
-        }
-        // Запрещаем вводить лишний знак
-        if ((!allowSigns || SIGNS.some(function (s) { return s === val[0]; })) &&
-            SIGNS.some(function (s) { return s === event.key; })) {
-            return event.preventDefault();
-        }
-        var selectionStart = target.selectionStart || 0;
-        // Запрещаем вводить цифры в дробную часть, если кол-во цифр больше fractionLength
-        if (hasSeparator &&
-            fractionLength &&
-            event.key.length === 1 &&
-            selectionStart > val.indexOf(separator) &&
-            val.split(separator)[1].length >= fractionLength) {
-            return event.preventDefault();
+        return fnUtils
+            .clamp(parseNumber(maskitoTransform(defaultValue.toString(), maskOptions)), min, max)
+            .toString();
+    }), value = _h[0], setValue = _h[1];
+    var maskRef = useMaskito({ options: maskOptions });
+    useEffect(function () {
+        if (propValue !== undefined) {
+            setValue(function (prev) {
+                var parsedNumber = parseNumber(propValue);
+                if (parsedNumber !== parseNumber(prev)) {
+                    return maskitoTransform(stringifyNumberWithoutExp(parsedNumber), maskOptions);
+                }
+                return prev;
+            });
         }
-        return undefined;
+    }, [maskOptions, propValue, separator]);
+    var getMaxLength = function (valueString) {
+        var hasSeparator = valueString === null || valueString === void 0 ? void 0 : valueString.includes(separator);
+        var hasSigns = valueString === null || valueString === void 0 ? void 0 : valueString.startsWith(MINUS_SIGN);
+        return MAX_DIGITS + (hasSeparator ? 1 : 0) + (hasSigns ? 1 : 0);
     };
-    var handleBlur = function (event) {
-        var valueBlur = event.target.value.replace(new RegExp("\\".concat(separator, "$")), '');
-        if (onChange) {
-            onChange(event, {
-                value: getNumberValueFromStr(valueBlur),
-                valueString: valueBlur,
+    var getStep = function () { return Math.round(stepProp !== null && stepProp !== void 0 ? stepProp : 1); };
+    var changeValue = function (event, newValue) {
+        var _a, _b;
+        var isNaNValue = Number.isNaN(newValue);
+        var valueString = (_b = (_a = event === null || event === void 0 ? void 0 : event.target.value) !== null && _a !== void 0 ? _a : newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== null && _b !== void 0 ? _b : '';
+        setValue(valueString);
+        if (valueString === '' || !isNaNValue) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, {
+                value: isNaNValue ? null : newValue,
             });
         }
-        if (uncontrolled) {
-            setValue(valueBlur);
+    };
+    var handleChange = function (event) {
+        var valueString = event.target.value;
+        changeValue(event, parseNumber(valueString));
+    };
+    var handleIncrement = function () {
+        var parsed = parseNumber(value);
+        var nextValue = maskitoTransform((Number.isNaN(parsed) ? min : parsed + getStep()).toString(), maskOptions);
+        changeValue(null, parseNumber(nextValue));
+    };
+    var handleDecrement = function () {
+        var parsed = parseNumber(value);
+        var nextValue = maskitoTransform((Number.isNaN(parsed) ? max : parsed - getStep()).toString(), maskOptions);
+        changeValue(null, parseNumber(nextValue));
+    };
+    var handleFocus = function (e) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        if (!disableUserInput) {
+            setFocused(true);
         }
-        if (onBlur)
-            onBlur(event);
     };
-    var visibleValue = uncontrolled ? value : propValue === null || propValue === void 0 ? void 0 : propValue.toString();
-    return (React.createElement(Input, __assign({ ref: mergeRefs([ref, inputRef]), value: visibleValue, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, inputMode: 'decimal' }, restProps)));
+    var handleBlur = function (e) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        setFocused(false);
+    };
+    return (React.createElement(Input, __assign({ maxLength: getMaxLength(value) }, restProps, { 
+        // В iOS в цифровой клавиатуре невозможно ввести минус.
+        inputMode: min < 0 && os.isIOS() ? 'text' : 'decimal', ref: mergeRefs([ref, maskRef]), value: value, onInput: handleChange, dataTestId: dataTestId, colors: colors, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, clear: clearProp && /\d/.test(value), rightAddons: withStepper ? (React.createElement(React.Fragment, null,
+            rightAddons,
+            React.createElement(Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(colorStyles[colors].steppers, styles[size], (_b = {},
+                    _b[colorStyles[colors].steppersFocused] = focused,
+                    _b[colorStyles[colors].steppersDisabled] = disabled,
+                    _b)), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) })));
 });
 
 export { NumberInput };

package/{input/default.desktop.css → number-input/esm/components/number-input/default.css}

@@ -1,7 +1,8 @@
-/* hash: t7ldt */
+/* hash: o5lab */
 :root {
 } /* deprecated */ :root {
-    --color-light-text-primary: #0e0e0e; /* 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 */
+    --color-light-neutral-1500-inverted: #fff;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08); /* 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 {
@@ -15,21 +16,9 @@
 } :root {
 } :root {
 } :root {
-} :root {
-
-    /* disabled */
-
-    /* read-only */
-
-    /* error */
-    --input-error-color: var(--color-light-text-primary);
-
-    /* display */
-
-    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-
-    /* mobile */
-} /* ERROR STATE */ .input__error_5z88b {
-    color: var(--input-error-color);
-    caret-color: var(--input-error-color);
+} .number-input__steppers_vqdas {
+    background-color: var(--color-light-neutral-1500-inverted);
+} .number-input__steppersFocused_vqdas,
+.number-input__steppersDisabled_vqdas {
+    background-color: var(--color-light-neutral-translucent-200);
 }

package/number-input/esm/components/number-input/index.css

@@ -0,0 +1,23 @@
+/* hash: bzled */
+:root {
+} /* 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 */ /* 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 {
+} .number-input__s_77v6k {
+    margin-right: var(--gap-xs-neg);
+} .number-input__m_77v6k {
+    margin-right: var(--gap-2xs-neg);
+}

package/number-input/esm/components/number-input/index.js

@@ -2,4 +2,12 @@ export { NumberInput } from './Component.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import 'classnames';
+import '../../../../shared/esm';
+import '../steppers/Component.js';
+import '../../../../icon-button/esm';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';
 import '../../utils.js';

package/number-input/esm/components/number-input/inverted.css

@@ -0,0 +1,24 @@
+/* hash: omvxl */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-1500: #0e0e0e;
+    --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13); /* 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 {
+} :root {
+} :root {
+} .number-input__steppers_163tu {
+    background-color: var(--color-light-neutral-1500);
+} .number-input__steppersFocused_163tu,
+.number-input__steppersDisabled_163tu {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/{stepper-input → number-input}/esm/components/steppers/Component.d.ts

@@ -9,6 +9,7 @@ type SteppersProps = {
     onIncrement: () => void;
     onDecrement: () => void;
     dataTestId?: string;
+    colors: 'default' | 'inverted';
 };
 declare const Steppers: React.FC<SteppersProps>;
 export { SteppersProps, Steppers };

package/number-input/esm/components/steppers/Component.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import cn from 'classnames';
+import { IconButton } from '../../../../icon-button/esm';
+import { getDataTestId } from '../../../../shared/esm';
+import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
+import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
+
+var defaultColors = {"separator":"number-input__separator_1xrwr"};
+require('./default.css');
+
+var styles = {"component":"number-input__component_1ab92","separator":"number-input__separator_1ab92","button":"number-input__button_1ab92"};
+require('./index.css');
+
+var invertedColors = {"separator":"number-input__separator_1uwaa"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+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, colors = _a.colors;
+    var decButtonDisabled = disabled || value <= min;
+    var incButtonDisabled = disabled || value >= max;
+    return (React.createElement("div", { className: cn(styles.component, className) },
+        React.createElement(IconButton, { colors: colors, disabled: decButtonDisabled, className: styles.button, icon: React.createElement(MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
+        React.createElement("div", { className: cn(styles.separator, colorStyles[colors].separator) }),
+        React.createElement(IconButton, { colors: colors, disabled: incButtonDisabled, className: styles.button, icon: React.createElement(PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
+};
+
+export { Steppers };

package/{input/esm/inverted.mobile.css → number-input/esm/components/steppers/default.css}

@@ -1,7 +1,7 @@
-/* hash: 186bq */
+/* hash: 306x5 */
 :root {
 } /* deprecated */ :root {
-    --color-light-text-accent: #ef3124; /* 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 */
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* 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 {
@@ -15,21 +15,6 @@
 } :root {
 } :root {
 } :root {
-} :root {
-
-    /* disabled */
-
-    /* read-only */
-
-    /* error */
-
-    /* display */
-
-    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-
-    /* mobile */
-    --input-inverted-error-mobile-color: var(--color-light-text-accent);
-} /* ERROR STATE */ .input__error_1r976 {
-    color: var(--input-inverted-error-mobile-color);
-    caret-color: var(--input-inverted-error-mobile-color);
+} .number-input__separator_1xrwr {
+    background-color: var(--color-light-neutral-translucent-300);
 }

package/{stepper-input → number-input}/esm/components/steppers/index.css

@@ -1,7 +1,6 @@
-/* hash: 12n4i */
+/* hash: 6nhr0 */
 :root {
-} /* deprecated */ :root {
-    --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1); /* 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 */
+} /* 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 */ /* 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 {
@@ -15,18 +14,17 @@
 } :root {
 } :root {
 } :root {
-} .stepper-input__component_1159p {
+} .number-input__component_1ab92 {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     border-radius: 5px;
     transition: background-color 0.2s ease;
     overflow: visible;
-} .stepper-input__separator_1159p {
+} .number-input__separator_1ab92 {
     height: 18px;
     width: 1px;
-    background-color: var(--color-light-specialbg-tertiary-transparent);
-} .stepper-input__button_1159p {
+} .number-input__button_1ab92 {
     width: 40px;
     height: 40px;
 }