@alfalab/core-components-number-input 2.1.2 → 2.3.0

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

@@ -6,24 +6,31 @@ import cn from 'classnames';
 import { fnUtils, os } from '@alfalab/core-components-shared/modern';
 import { createMaskOptions, parseNumber, stringifyNumberWithoutExp, MAX_DIGITS, MIN_SAFE_INTEGER, MAX_SAFE_INTEGER, MINUS_SIGN } from '../../utils.js';
 import { Steppers } from '../steppers/Component.js';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/MinusMIcon';
-import '@alfalab/icons-glyph/PlusMediumMIcon';
 
-const defaultColors = {"steppers":"number-input__steppers_1bgb6","steppersFocused":"number-input__steppersFocused_1bgb6","steppersDisabled":"number-input__steppersDisabled_1bgb6"};
+const defaultColors = {"steppers":"number-input__steppers_6qtl2","steppersFocused":"number-input__steppersFocused_6qtl2","steppersDisabled":"number-input__steppersDisabled_6qtl2"};
 require('./default.css')
 
-const styles = {"s":"number-input__s_e739v","m":"number-input__m_e739v"};
+const styles = {"size-48":"number-input__size-48_biro8","size-56":"number-input__size-56_biro8"};
 require('./index.css')
 
-const invertedColors = {"steppers":"number-input__steppers_1ltrq","steppersFocused":"number-input__steppersFocused_1ltrq","steppersDisabled":"number-input__steppersDisabled_1ltrq"};
+const invertedColors = {"steppers":"number-input__steppers_h4a54","steppersFocused":"number-input__steppersFocused_h4a54","steppersDisabled":"number-input__steppersDisabled_h4a54"};
 require('./inverted.css')
 
 const colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
-const NumberInput = forwardRef(({ value: propValue, onChange, separator = ',', fractionLength = MAX_DIGITS, defaultValue, Input, min: minProp, max: maxProp, rightAddons, dataTestId, disabled, onBlur, onFocus, view, step: stepProp, size = 's', disableUserInput, clear: clearProp, colors = 'default', ...restProps }, ref) => {
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
+const NumberInput = forwardRef(({ value: propValue, onChange, separator = ',', fractionLength = MAX_DIGITS, defaultValue, Input, min: minProp, max: maxProp, rightAddons, dataTestId, disabled, onBlur, onFocus, view, step: stepProp, size = 48, disableUserInput, clear: clearProp, colors = 'default', ...restProps }, ref) => {
     const min = Math.max(MIN_SAFE_INTEGER, minProp ?? MIN_SAFE_INTEGER);
     const max = Math.min(MAX_SAFE_INTEGER, maxProp ?? MAX_SAFE_INTEGER);
     const withStepper = stepProp !== undefined;
@@ -98,7 +105,7 @@ const NumberInput = forwardRef(({ value: propValue, onChange, separator = ',', f
         // В 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], {
+            React.createElement(Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(colorStyles[colors].steppers, styles[SIZE_TO_CLASSNAME_MAP[size]], {
                     [colorStyles[colors].steppersFocused]: focused,
                     [colorStyles[colors].steppersDisabled]: disabled,
                 }), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) }));

package/modern/components/number-input/default.css

@@ -1,5 +1,5 @@
-/* hash: wsyhd */
-:root {
+/* hash: 14o49 */
+: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 */ /* 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 {
     --color-light-neutral-translucent-0: #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 */
@@ -16,9 +16,9 @@
 } :root {
 } :root {
 } :root {
-} .number-input__steppers_1bgb6 {
+} .number-input__steppers_6qtl2 {
     background-color: var(--color-light-neutral-translucent-0);
-} .number-input__steppersFocused_1bgb6,
-.number-input__steppersDisabled_1bgb6 {
+} .number-input__steppersFocused_6qtl2,
+.number-input__steppersDisabled_6qtl2 {
     background-color: var(--color-light-neutral-translucent-200);
 }

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

@@ -1,5 +1,5 @@
-/* hash: 1tnj5 */
-:root {
+/* hash: 14pss */
+: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 */ /* 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 {
@@ -16,8 +16,8 @@
     --gap-xs-neg: -8px;
 } :root {
 } :root {
-} .number-input__s_e739v {
+} .number-input__size-48_biro8 {
     margin-right: var(--gap-xs-neg);
-} .number-input__m_e739v {
+} .number-input__size-56_biro8 {
     margin-right: var(--gap-2xs-neg);
 }

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

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

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

@@ -1,5 +1,5 @@
-/* hash: xa94o */
-:root {
+/* hash: 155ew */
+: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 */ /* 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 {
     --color-light-neutral-translucent-0-inverted: rgba(214, 214, 229, 0.07);
     --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 */
@@ -16,9 +16,9 @@
 } :root {
 } :root {
 } :root {
-} .number-input__steppers_1ltrq {
+} .number-input__steppers_h4a54 {
     background-color: var(--color-light-neutral-translucent-0-inverted);
-} .number-input__steppersFocused_1ltrq,
-.number-input__steppersDisabled_1ltrq {
+} .number-input__steppersFocused_h4a54,
+.number-input__steppersDisabled_h4a54 {
     background-color: var(--color-light-neutral-translucent-300-inverted);
 }

package/modern/components/steppers/Component.js

@@ -5,13 +5,13 @@ import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
 import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
 
-const defaultColors = {"separator":"number-input__separator_783ii"};
+const defaultColors = {"separator":"number-input__separator_1bxl4"};
 require('./default.css')
 
-const styles = {"component":"number-input__component_1ykgl","separator":"number-input__separator_1ykgl","button":"number-input__button_1ykgl"};
+const styles = {"component":"number-input__component_27o5k","separator":"number-input__separator_27o5k","button":"number-input__button_27o5k"};
 require('./index.css')
 
-const invertedColors = {"separator":"number-input__separator_ac73e"};
+const invertedColors = {"separator":"number-input__separator_1f1op"};
 require('./inverted.css')
 
 const colorStyles = {

package/modern/components/steppers/default.css

@@ -1,5 +1,5 @@
-/* hash: bnk48 */
-:root {
+/* hash: 1lirz */
+: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 */ /* 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 {
     --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 */
@@ -15,6 +15,6 @@
 } :root {
 } :root {
 } :root {
-} .number-input__separator_783ii {
+} .number-input__separator_1bxl4 {
     background-color: var(--color-light-neutral-translucent-300);
 }

package/modern/components/steppers/index.css

@@ -1,5 +1,5 @@
-/* hash: 1obfi */
-:root {
+/* hash: 1cyee */
+: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 */ /* 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 {
@@ -14,17 +14,17 @@
 } :root {
 } :root {
 } :root {
-} .number-input__component_1ykgl {
+} .number-input__component_27o5k {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     border-radius: 5px;
     transition: background-color 0.2s ease;
     overflow: visible;
-} .number-input__separator_1ykgl {
+} .number-input__separator_27o5k {
     height: 18px;
     width: 1px;
-} .number-input__button_1ykgl {
+} .number-input__button_27o5k {
     width: 40px;
     height: 40px;
 }

package/modern/components/steppers/index.js

@@ -1,7 +1 @@
 export { Steppers } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/core-components-shared/modern';
-import '@alfalab/icons-glyph/MinusMIcon';
-import '@alfalab/icons-glyph/PlusMediumMIcon';

package/modern/components/steppers/inverted.css

@@ -1,5 +1,5 @@
-/* hash: fvybr */
-:root {
+/* hash: 1pr67 */
+: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 */ /* 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 {
     --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 */
@@ -15,6 +15,6 @@
 } :root {
 } :root {
 } :root {
-} .number-input__separator_ac73e {
+} .number-input__separator_1f1op {
     background-color: var(--color-light-neutral-translucent-300-inverted);
 }

package/modern/desktop/Component.desktop.js

@@ -1,16 +1,6 @@
 import React, { forwardRef } from 'react';
 import { InputDesktop } from '@alfalab/core-components-input/modern/desktop';
 import { NumberInput } from '../components/number-input/Component.js';
-import 'react-merge-refs';
-import '@maskito/core';
-import '@maskito/react';
-import 'classnames';
-import '@alfalab/core-components-shared/modern';
-import '../utils.js';
-import '../components/steppers/Component.js';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/MinusMIcon';
-import '@alfalab/icons-glyph/PlusMediumMIcon';
 
 const NumberInputDesktop = forwardRef((props, ref) => React.createElement(NumberInput, { ...props, Input: InputDesktop, ref: ref, view: 'desktop' }));
 

package/modern/desktop/index.js

@@ -1,14 +1 @@
 export { NumberInputDesktop } from './Component.desktop.js';
-import 'react';
-import '@alfalab/core-components-input/modern/desktop';
-import '../components/number-input/Component.js';
-import 'react-merge-refs';
-import '@maskito/core';
-import '@maskito/react';
-import 'classnames';
-import '@alfalab/core-components-shared/modern';
-import '../utils.js';
-import '../components/steppers/Component.js';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/MinusMIcon';
-import '@alfalab/icons-glyph/PlusMediumMIcon';

package/modern/index.js

@@ -1,15 +1 @@
 export { NumberInputResponsive as NumberInput } from './Component.responsive.js';
-import 'react';
-import '@alfalab/core-components-input/modern';
-import '@alfalab/core-components-mq/modern';
-import './components/number-input/Component.js';
-import 'react-merge-refs';
-import '@maskito/core';
-import '@maskito/react';
-import 'classnames';
-import '@alfalab/core-components-shared/modern';
-import './utils.js';
-import './components/steppers/Component.js';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/MinusMIcon';
-import '@alfalab/icons-glyph/PlusMediumMIcon';

package/modern/mobile/Component.mobile.js

@@ -1,16 +1,6 @@
 import React, { forwardRef } from 'react';
 import { InputMobile } from '@alfalab/core-components-input/modern/mobile';
 import { NumberInput } from '../components/number-input/Component.js';
-import 'react-merge-refs';
-import '@maskito/core';
-import '@maskito/react';
-import 'classnames';
-import '@alfalab/core-components-shared/modern';
-import '../utils.js';
-import '../components/steppers/Component.js';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/MinusMIcon';
-import '@alfalab/icons-glyph/PlusMediumMIcon';
 
 const NumberInputMobile = forwardRef((props, ref) => React.createElement(NumberInput, { ...props, Input: InputMobile, ref: ref, view: 'mobile' }));
 

package/modern/mobile/index.js

@@ -1,14 +1 @@
 export { NumberInputMobile } from './Component.mobile.js';
-import 'react';
-import '@alfalab/core-components-input/modern/mobile';
-import '../components/number-input/Component.js';
-import 'react-merge-refs';
-import '@maskito/core';
-import '@maskito/react';
-import 'classnames';
-import '@alfalab/core-components-shared/modern';
-import '../utils.js';
-import '../components/steppers/Component.js';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/MinusMIcon';
-import '@alfalab/icons-glyph/PlusMediumMIcon';

package/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getNumberInputTestIds } from "../utils";

package/modern/shared/index.js

@@ -0,0 +1 @@
+export { getNumberInputTestIds } from '../utils.js';

package/modern/utils.d.ts

@@ -20,4 +20,15 @@ declare function createMinMaxPlugin({ min, max }: {
     max: number;
 }): MaskitoPlugin;
 declare function createNotEmptyPartsPlugin(separator: string): MaskitoPlugin;
-export { MINUS_SIGN, SEPARATORS, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, MAX_DIGITS, parseNumber, stringifyNumberWithoutExp, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin };
+declare function getNumberInputTestIds(dataTestId: string): {
+    input: string;
+    inputWrapper: string;
+    inputWrapperInner: string;
+    leftAddons: string;
+    rightAddons: string;
+    error: string;
+    hint: string;
+    decrementButton: string;
+    incrementButton: string;
+};
+export { MINUS_SIGN, SEPARATORS, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, MAX_DIGITS, parseNumber, stringifyNumberWithoutExp, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin, getNumberInputTestIds };

package/modern/utils.js

@@ -1,5 +1,5 @@
 import { maskitoTransform } from '@maskito/core';
-import { fnUtils } from '@alfalab/core-components-shared/modern';
+import { getDataTestId, fnUtils } from '@alfalab/core-components-shared/modern';
 
 /* eslint-disable no-param-reassign */
 const MINUS_SIGN = '-';
@@ -229,5 +229,18 @@ function createNotEmptyPartsPlugin(separator) {
         return () => element.removeEventListener('blur', listener, evListenerOptions);
     };
 }
+function getNumberInputTestIds(dataTestId) {
+    return {
+        input: dataTestId,
+        inputWrapper: getDataTestId(dataTestId, 'form-control'),
+        inputWrapperInner: getDataTestId(dataTestId, 'form-control-inner'),
+        leftAddons: getDataTestId(dataTestId, 'form-control-left-addons'),
+        rightAddons: getDataTestId(dataTestId, 'form-control-right-addons'),
+        error: getDataTestId(dataTestId, 'form-control-error-message'),
+        hint: getDataTestId(dataTestId, 'form-control-hint'),
+        decrementButton: getDataTestId(dataTestId, 'decrement-button'),
+        incrementButton: getDataTestId(dataTestId, 'increment-button'),
+    };
+}
 
-export { MAX_DIGITS, MAX_SAFE_INTEGER, MINUS_SIGN, MIN_SAFE_INTEGER, SEPARATORS, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin, parseNumber, stringifyNumberWithoutExp };
+export { MAX_DIGITS, MAX_SAFE_INTEGER, MINUS_SIGN, MIN_SAFE_INTEGER, SEPARATORS, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin, getNumberInputTestIds, parseNumber, stringifyNumberWithoutExp };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-number-input",
-    "version": "2.1.2",
+    "version": "2.3.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,9 +14,9 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^14.1.2",
+        "@alfalab/core-components-input": "^14.3.0",
         "@alfalab/core-components-mq": "^4.2.0",
-        "@alfalab/core-components-icon-button": "^6.5.1",
+        "@alfalab/core-components-icon-button": "^6.5.3",
         "@alfalab/core-components-shared": "^0.9.1",
         "@alfalab/icons-glyph": "^2.139.0",
         "@maskito/core": "^1.7.0",

package/shared/index.d.ts

@@ -0,0 +1 @@
+export { getNumberInputTestIds } from "../utils";

package/shared/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getNumberInputTestIds = utils.getNumberInputTestIds;

package/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/src/components/number-input/Component.tsx

@@ -98,6 +98,17 @@ export interface NumberInputProps
     dataTestId?: string;
 }
 
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
+
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     (
         {
@@ -116,7 +127,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             onFocus,
             view,
             step: stepProp,
-            size = 's',
+            size = 48,
             disableUserInput,
             clear: clearProp,
             colors = 'default',
@@ -265,10 +276,14 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
                                 value={parseNumber(value)}
                                 min={min}
                                 max={max}
-                                className={cn(colorStyles[colors].steppers, styles[size], {
-                                    [colorStyles[colors].steppersFocused]: focused,
-                                    [colorStyles[colors].steppersDisabled]: disabled,
-                                })}
+                                className={cn(
+                                    colorStyles[colors].steppers,
+                                    styles[SIZE_TO_CLASSNAME_MAP[size]],
+                                    {
+                                        [colorStyles[colors].steppersFocused]: focused,
+                                        [colorStyles[colors].steppersDisabled]: disabled,
+                                    },
+                                )}
                                 onIncrement={handleIncrement}
                                 onDecrement={handleDecrement}
                             />

package/src/components/number-input/index.module.css

@@ -1,9 +1,9 @@
 @import '@alfalab/core-components-themes/src/default.css';
 
-.s {
+.size-48 {
     margin-right: var(--gap-xs-neg);
 }
 
-.m {
+.size-56 {
     margin-right: var(--gap-2xs-neg);
 }

package/src/shared/index.ts

@@ -0,0 +1 @@
+export { getNumberInputTestIds } from '../utils';

package/src/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/src/utils.ts

@@ -7,7 +7,7 @@ import {
     maskitoTransform,
 } from '@maskito/core';
 
-import { fnUtils } from '@alfalab/core-components-shared';
+import { fnUtils, getDataTestId } from '@alfalab/core-components-shared';
 
 export const MINUS_SIGN = '-';
 export const SEPARATORS = [',', '.'];
@@ -322,3 +322,17 @@ export function createNotEmptyPartsPlugin(separator: string): MaskitoPlugin {
         return () => element.removeEventListener('blur', listener, evListenerOptions);
     };
 }
+
+export function getNumberInputTestIds(dataTestId: string) {
+    return {
+        input: dataTestId,
+        inputWrapper: getDataTestId(dataTestId, 'form-control'),
+        inputWrapperInner: getDataTestId(dataTestId, 'form-control-inner'),
+        leftAddons: getDataTestId(dataTestId, 'form-control-left-addons'),
+        rightAddons: getDataTestId(dataTestId, 'form-control-right-addons'),
+        error: getDataTestId(dataTestId, 'form-control-error-message'),
+        hint: getDataTestId(dataTestId, 'form-control-hint'),
+        decrementButton: getDataTestId(dataTestId, 'decrement-button'),
+        incrementButton: getDataTestId(dataTestId, 'increment-button'),
+    };
+}

package/utils.d.ts

@@ -20,4 +20,15 @@ declare function createMinMaxPlugin({ min, max }: {
     max: number;
 }): MaskitoPlugin;
 declare function createNotEmptyPartsPlugin(separator: string): MaskitoPlugin;
-export { MINUS_SIGN, SEPARATORS, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, MAX_DIGITS, parseNumber, stringifyNumberWithoutExp, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin };
+declare function getNumberInputTestIds(dataTestId: string): {
+    input: string;
+    inputWrapper: string;
+    inputWrapperInner: string;
+    leftAddons: string;
+    rightAddons: string;
+    error: string;
+    hint: string;
+    decrementButton: string;
+    incrementButton: string;
+};
+export { MINUS_SIGN, SEPARATORS, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, MAX_DIGITS, parseNumber, stringifyNumberWithoutExp, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin, getNumberInputTestIds };

package/utils.js

@@ -246,6 +246,19 @@ function createNotEmptyPartsPlugin(separator) {
         return function () { return element.removeEventListener('blur', listener, evListenerOptions); };
     };
 }
+function getNumberInputTestIds(dataTestId) {
+    return {
+        input: dataTestId,
+        inputWrapper: coreComponentsShared.getDataTestId(dataTestId, 'form-control'),
+        inputWrapperInner: coreComponentsShared.getDataTestId(dataTestId, 'form-control-inner'),
+        leftAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-left-addons'),
+        rightAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-right-addons'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'form-control-error-message'),
+        hint: coreComponentsShared.getDataTestId(dataTestId, 'form-control-hint'),
+        decrementButton: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'),
+        incrementButton: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'),
+    };
+}
 
 exports.MAX_DIGITS = MAX_DIGITS;
 exports.MAX_SAFE_INTEGER = MAX_SAFE_INTEGER;
@@ -255,5 +268,6 @@ exports.SEPARATORS = SEPARATORS;
 exports.createMaskOptions = createMaskOptions;
 exports.createMinMaxPlugin = createMinMaxPlugin;
 exports.createNotEmptyPartsPlugin = createNotEmptyPartsPlugin;
+exports.getNumberInputTestIds = getNumberInputTestIds;
 exports.parseNumber = parseNumber;
 exports.stringifyNumberWithoutExp = stringifyNumberWithoutExp;