@alfalab/core-components-number-input 3.0.0 → 3.1.0-snapshot-92b8690

package/components/steppers/default.css

@@ -2,11 +2,11 @@
     --color-light-neutral-translucent-0: #fff;
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
-} .number-input__separator_p81mx {
+} .number-input__separator_1kep7 {
     background-color: var(--color-light-neutral-translucent-300);
-} .number-input__steppers_p81mx {
+} .number-input__steppers_1kep7 {
     background-color: var(--color-light-neutral-translucent-0);
-} .number-input__steppersFocused_p81mx,
-.number-input__steppersDisabled_p81mx {
+} .number-input__steppersFocused_1kep7,
+.number-input__steppersDisabled_1kep7 {
     background-color: var(--color-light-neutral-translucent-200);
 }

package/components/steppers/default.module.css.js

@@ -2,7 +2,7 @@
 
 require('./default.css');
 
-var defaultColors = {"separator":"number-input__separator_p81mx","steppers":"number-input__steppers_p81mx","steppersFocused":"number-input__steppersFocused_p81mx","steppersDisabled":"number-input__steppersDisabled_p81mx"};
+var defaultColors = {"separator":"number-input__separator_1kep7","steppers":"number-input__steppers_1kep7","steppersFocused":"number-input__steppersFocused_1kep7","steppersDisabled":"number-input__steppersDisabled_1kep7"};
 
 module.exports = defaultColors;
 //# sourceMappingURL=default.module.css.js.map

package/components/steppers/default.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.module.css.js","sources":["../../src/components/steppers/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.separator {\n    background-color: var(--color-light-neutral-translucent-300);\n}\n\n.steppers {\n    background-color: var(--color-light-neutral-translucent-0);\n}\n\n.steppersFocused,\n.steppersDisabled {\n    background-color: var(--color-light-neutral-translucent-200);\n}\n"],"names":[],"mappings":";;;;AAEgB,oBAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,UAAU,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,kBAAkB,CAAC,sCAAsC,CAAC;;;;"}
+{"version":3,"file":"default.module.css.js","sources":["../../src/components/steppers/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.separator {\n    background-color: var(--color-light-neutral-translucent-300);\n}\n\n.steppers {\n    background-color: var(--color-light-neutral-translucent-0);\n}\n\n.steppersFocused,\n.steppersDisabled {\n    background-color: var(--color-light-neutral-translucent-200);\n}\n"],"names":[],"mappings":";;;;AAEgB,oBAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,UAAU,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,kBAAkB,CAAC,sCAAsC,CAAC;;;;"}

package/components/steppers/index.css

@@ -3,24 +3,24 @@
     --gap-xs-neg: -8px;
     --gap-4-neg: var(--gap-2xs-neg);
     --gap-8-neg: var(--gap-xs-neg);
-} .number-input__component_1lcow {
+} .number-input__component_ru5jf {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     border-radius: 5px;
     transition: background-color 0.2s ease;
     overflow: visible;
-} .number-input__separator_1lcow {
+} .number-input__separator_ru5jf {
     height: 18px;
     width: 1px;
-} .number-input__button_1lcow {
+} .number-input__button_ru5jf {
     width: 40px;
     height: 40px;
-} .number-input__size-40_1lcow {
+} .number-input__size-40_ru5jf {
     margin-right: var(--gap-8-neg);
     height: 32px;
-} .number-input__size-48_1lcow {
+} .number-input__size-48_ru5jf {
     margin-right: var(--gap-8-neg);
-} .number-input__size-56_1lcow {
+} .number-input__size-56_ru5jf {
     margin-right: var(--gap-4-neg);
 }

package/components/steppers/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"number-input__component_1lcow","separator":"number-input__separator_1lcow","button":"number-input__button_1lcow","size-40":"number-input__size-40_1lcow","size-48":"number-input__size-48_1lcow","size-56":"number-input__size-56_1lcow"};
+var styles = {"component":"number-input__component_ru5jf","separator":"number-input__separator_ru5jf","button":"number-input__button_ru5jf","size-40":"number-input__size-40_ru5jf","size-48":"number-input__size-48_ru5jf","size-56":"number-input__size-56_ru5jf"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/steppers/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/steppers/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n    border-radius: 5px;\n    transition: background-color 0.2s ease;\n    overflow: visible;\n}\n\n.separator {\n    height: 18px;\n    width: 1px;\n}\n\n.button {\n    width: 40px;\n    height: 40px;\n}\n\n.size-40 {\n    margin-right: var(--gap-8-neg);\n    height: 32px;\n}\n\n.size-48 {\n    margin-right: var(--gap-8-neg);\n}\n\n.size-56 {\n    margin-right: var(--gap-4-neg);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,QAAQ,CAAC,4BAA4B,CAAC,SAAS,CAAC,6BAA6B,CAAC,SAAS,CAAC,6BAA6B,CAAC,SAAS,CAAC,6BAA6B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/steppers/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n    border-radius: 5px;\n    transition: background-color 0.2s ease;\n    overflow: visible;\n}\n\n.separator {\n    height: 18px;\n    width: 1px;\n}\n\n.button {\n    width: 40px;\n    height: 40px;\n}\n\n.size-40 {\n    margin-right: var(--gap-8-neg);\n    height: 32px;\n}\n\n.size-48 {\n    margin-right: var(--gap-8-neg);\n}\n\n.size-56 {\n    margin-right: var(--gap-4-neg);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,QAAQ,CAAC,4BAA4B,CAAC,SAAS,CAAC,6BAA6B,CAAC,SAAS,CAAC,6BAA6B,CAAC,SAAS,CAAC,6BAA6B,CAAC;;;;"}

package/components/steppers/inverted.css

@@ -1,11 +1,11 @@
 :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);
-} .number-input__separator_tgfug {
+} .number-input__separator_1fy2r {
     background-color: var(--color-light-neutral-translucent-300-inverted);
-} .number-input__steppers_tgfug {
+} .number-input__steppers_1fy2r {
     background-color: var(--color-light-neutral-translucent-0-inverted);
-} .number-input__steppersFocused_tgfug,
-.number-input__steppersDisabled_tgfug {
+} .number-input__steppersFocused_1fy2r,
+.number-input__steppersDisabled_1fy2r {
     background-color: var(--color-light-neutral-translucent-300-inverted);
 }

package/components/steppers/inverted.module.css.js

@@ -2,7 +2,7 @@
 
 require('./inverted.css');
 
-var invertedColors = {"separator":"number-input__separator_tgfug","steppers":"number-input__steppers_tgfug","steppersFocused":"number-input__steppersFocused_tgfug","steppersDisabled":"number-input__steppersDisabled_tgfug"};
+var invertedColors = {"separator":"number-input__separator_1fy2r","steppers":"number-input__steppers_1fy2r","steppersFocused":"number-input__steppersFocused_1fy2r","steppersDisabled":"number-input__steppersDisabled_1fy2r"};
 
 module.exports = invertedColors;
 //# sourceMappingURL=inverted.module.css.js.map

package/components/steppers/inverted.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"inverted.module.css.js","sources":["../../src/components/steppers/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.separator {\n    background-color: var(--color-light-neutral-translucent-300-inverted);\n}\n\n.steppers {\n    background-color: var(--color-light-neutral-translucent-0-inverted);\n}\n\n.steppersFocused,\n.steppersDisabled {\n    background-color: var(--color-light-neutral-translucent-300-inverted);\n}\n"],"names":[],"mappings":";;;;AAEgB,qBAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,UAAU,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,kBAAkB,CAAC,sCAAsC,CAAC;;;;"}
+{"version":3,"file":"inverted.module.css.js","sources":["../../src/components/steppers/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.separator {\n    background-color: var(--color-light-neutral-translucent-300-inverted);\n}\n\n.steppers {\n    background-color: var(--color-light-neutral-translucent-0-inverted);\n}\n\n.steppersFocused,\n.steppersDisabled {\n    background-color: var(--color-light-neutral-translucent-300-inverted);\n}\n"],"names":[],"mappings":";;;;AAEgB,qBAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,UAAU,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,kBAAkB,CAAC,sCAAsC,CAAC;;;;"}

package/dynamic-mixins/Component.responsive.d.ts

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

package/dynamic-mixins/Component.responsive.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var dynamicMixins$1 = require('@alfalab/core-components-input/dynamic-mixins');
+var dynamicMixins = require('@alfalab/core-components-mq/dynamic-mixins');
+var Component = require('./components/number-input/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var NumberInputResponsive = React.forwardRef(function (_a, ref) {
+    var breakpoint = _a.breakpoint, client = _a.client, _b = _a.defaultMatchMediaValue, defaultMatchMediaValue = _b === void 0 ? client === undefined ? undefined : client === 'desktop' : _b, restProps = tslib.__rest(_a, ["breakpoint", "client", "defaultMatchMediaValue"]);
+    var isDesktop = dynamicMixins.useIsDesktop(breakpoint, defaultMatchMediaValue);
+    return (React__default.default.createElement(Component.NumberInput, tslib.__assign({}, restProps, { Input: dynamicMixins$1.Input, ref: ref, view: isDesktop ? 'desktop' : 'mobile', breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue })));
+});
+NumberInputResponsive.displayName = 'NumberInputResponsive';
+
+exports.NumberInputResponsive = NumberInputResponsive;
+//# sourceMappingURL=Component.responsive.js.map

package/dynamic-mixins/Component.responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.responsive.js","sources":["../src/Component.responsive.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { Input } from '@alfalab/core-components-input';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { NumberInput, NumberInputProps } from './components/number-input';\n\nexport type NumberInputResponsiveProps = Omit<NumberInputProps, 'Input' | 'view'>;\n\nexport const NumberInputResponsive = forwardRef<HTMLInputElement, NumberInputResponsiveProps>(\n    (\n        {\n            breakpoint,\n            client,\n            defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n        return (\n            <NumberInput\n                {...restProps}\n                Input={Input}\n                ref={ref}\n                view={isDesktop ? 'desktop' : 'mobile'}\n                breakpoint={breakpoint}\n                defaultMatchMediaValue={defaultMatchMediaValue}\n            />\n        );\n    },\n);\n\nNumberInputResponsive.displayName = 'NumberInputResponsive';\n"],"names":["forwardRef","__rest","useIsDesktop","React","NumberInput","__assign","Input"],"mappings":";;;;;;;;;;;;;;IASa,qBAAqB,GAAGA,gBAAU,CAC3C,UACI,EAKC,EACD,GAAG,EAAA;AALC,IAAA,IAAA,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,EAAgF,GAAA,EAAA,CAAA,sBAAA,EAAhF,sBAAsB,GAAA,EAAA,KAAA,MAAA,GAAG,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,GAAA,EAAA,EAC7E,SAAS,GAJhBC,YAAA,CAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,wBAAA,CAKC,CADe;IAIhB,IAAM,SAAS,GAAGC,0BAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;AAElE,IAAA,QACIC,sBAAA,CAAA,aAAA,CAACC,qBAAW,EAAAC,cAAA,CAAA,EAAA,EACJ,SAAS,EACb,EAAA,KAAK,EAAEC,qBAAK,EACZ,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,EACtC,UAAU,EAAE,UAAU,EACtB,sBAAsB,EAAE,sBAAsB,EAAA,CAAA,CAChD;AAEV,CAAC;AAGL,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}

package/dynamic-mixins/components/number-input/Component.d.ts

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

package/dynamic-mixins/components/number-input/Component.js

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var core = require('@maskito/core');
+var react = require('@maskito/react');
+var dynamicMixins = require('@alfalab/core-components-shared/dynamic-mixins');
+var utils = require('../../utils.js');
+var Component = require('../steppers/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+
+var NumberInput = React.forwardRef(function (_a, ref) {
+    var propValue = _a.value, onChange = _a.onChange, _b = _a.separator, separator = _b === void 0 ? ',' : _b, _c = _a.fractionLength, fractionLength = _c === void 0 ? utils.MAX_DIGITS : _c, 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, _d = _a.size, size = _d === void 0 ? 48 : _d, disableUserInput = _a.disableUserInput, clearProp = _a.clear, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = tslib.__rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear", "colors"]);
+    var _f = utils.getMinMaxOrDefault({ minProp: minProp, maxProp: maxProp }), min = _f.min, max = _f.max;
+    var withStepper = stepProp !== undefined;
+    var maskOptions = React.useMemo(function () {
+        return utils.createMaskOptions({
+            separator: separator,
+            fractionLength: withStepper ? 0 : fractionLength,
+            min: min,
+            max: max,
+        });
+    }, [separator, fractionLength, min, max, withStepper]);
+    var _g = React.useState(false), focused = _g[0], setFocused = _g[1];
+    var _h = React.useState(function () {
+        if (defaultValue == null) {
+            return withStepper ? dynamicMixins.fnUtils.clamp(0, min, max).toString() : '';
+        }
+        return dynamicMixins.fnUtils
+            .clamp(utils.parseNumber(core.maskitoTransform(defaultValue.toString(), maskOptions)), min, max)
+            .toString();
+    }), value = _h[0], setValue = _h[1];
+    var maskRef = react.useMaskito({ options: maskOptions });
+    React.useEffect(function () {
+        if (propValue !== undefined) {
+            setValue(function (prev) {
+                var parsedNumber = utils.parseNumber(propValue);
+                if (parsedNumber !== utils.parseNumber(prev)) {
+                    return core.maskitoTransform(utils.stringifyNumberWithoutExp(parsedNumber), maskOptions);
+                }
+                return prev;
+            });
+        }
+    }, [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(utils.MINUS_SIGN);
+        return utils.MAX_DIGITS + (hasSeparator ? 1 : 0) + (hasSigns ? 1 : 0);
+    };
+    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,
+            });
+        }
+    };
+    var handleChange = function (event) {
+        var valueString = event.target.value;
+        changeValue(event, utils.parseNumber(valueString));
+    };
+    var handleIncrement = function () {
+        var parsed = utils.parseNumber(value);
+        var nextValue = core.maskitoTransform((Number.isNaN(parsed) ? min : parsed + getStep()).toString(), maskOptions);
+        changeValue(null, utils.parseNumber(nextValue));
+    };
+    var handleDecrement = function () {
+        var parsed = utils.parseNumber(value);
+        var nextValue = core.maskitoTransform((Number.isNaN(parsed) ? max : parsed - getStep()).toString(), maskOptions);
+        changeValue(null, utils.parseNumber(nextValue));
+    };
+    var handleFocus = function (e) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        if (!disableUserInput) {
+            setFocused(true);
+        }
+    };
+    var handleBlur = function (e) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        setFocused(false);
+    };
+    return (React__default.default.createElement(Input, tslib.__assign({ maxLength: getMaxLength(value) }, restProps, { 
+        // В iOS в цифровой клавиатуре невозможно ввести минус.
+        inputMode: min < 0 && dynamicMixins.os.isIOS() ? 'text' : 'decimal', ref: mergeRefs__default.default([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__default.default.createElement(React__default.default.Fragment, null,
+            rightAddons,
+            React__default.default.createElement(Component.Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, focused: focused, value: utils.parseNumber(value), min: min, max: max, onIncrement: handleIncrement, onDecrement: handleDecrement, size: size }))) : (rightAddons) })));
+});
+
+exports.NumberInput = NumberInput;
+//# sourceMappingURL=Component.js.map

package/dynamic-mixins/components/number-input/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["../../../src/components/number-input/Component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    FC,\n    FocusEvent,\n    forwardRef,\n    Ref,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { MaskitoOptions, maskitoTransform } from '@maskito/core';\nimport { useMaskito } from '@maskito/react';\n\nimport type { InputProps } from '@alfalab/core-components-input';\nimport { fnUtils, os } from '@alfalab/core-components-shared';\n\nimport {\n    createMaskOptions,\n    getMinMaxOrDefault,\n    MAX_DIGITS,\n    MINUS_SIGN,\n    parseNumber,\n    stringifyNumberWithoutExp,\n} from '../../utils';\nimport { Steppers } from '../steppers';\n\nexport interface NumberInputProps\n    extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'defaultValue' | 'dataTestId'> {\n    /**\n     * Значение поля ввода\n     */\n    value?: string | number | null;\n\n    /**\n     *  Значение по-умолчанию\n     */\n    defaultValue?: string | number | null;\n\n    /**\n     * Разделитель ',' или '.'\n     */\n    separator?: '.' | ',';\n\n    /**\n     * Количество символов после разделителя\n     * Если указан проп step, то всегда 0\n     */\n    fractionLength?: number;\n\n    /**\n     *  Шаг инкремента/декремента. Используйте только целочисленные значения\n     */\n    step?: number;\n\n    /**\n     * Минимальное значение\n     * @default Number.MIN_SAFE_INTEGER\n     */\n    min?: number;\n\n    /**\n     * Максимальное значение\n     * @default Number.MAX_SAFE_INTEGER\n     */\n    max?: number;\n\n    /**\n     * Отображение компонента в мобильном или десктопном виде\n     */\n    view?: 'desktop' | 'mobile';\n\n    /**\n     *  Компонент инпута\n     */\n    Input: FC<InputProps & { ref?: Ref<HTMLInputElement> }>;\n\n    /**\n     * Обработчик события изменения значения\n     */\n    onChange?: (e: ChangeEvent<HTMLInputElement> | null, payload: { value: number | null }) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     * Для кнопки инкремента используется модификатор -increment-button, декремента -decrement-button\n     */\n    dataTestId?: string;\n}\n\nexport const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(\n    (\n        {\n            value: propValue,\n            onChange,\n            separator = ',',\n            fractionLength = MAX_DIGITS,\n            defaultValue,\n            Input,\n            min: minProp,\n            max: maxProp,\n            rightAddons,\n            dataTestId,\n            disabled,\n            onBlur,\n            onFocus,\n            view,\n            step: stepProp,\n            size = 48,\n            disableUserInput,\n            clear: clearProp,\n            colors = 'default',\n            ...restProps\n        },\n        ref,\n    ) => {\n        const { min, max } = getMinMaxOrDefault({ minProp, maxProp });\n        const withStepper = stepProp !== undefined;\n\n        const maskOptions: MaskitoOptions = useMemo(\n            () =>\n                createMaskOptions({\n                    separator,\n                    fractionLength: withStepper ? 0 : fractionLength,\n                    min,\n                    max,\n                }),\n            [separator, fractionLength, min, max, withStepper],\n        );\n\n        const [focused, setFocused] = useState(false);\n        const [value, setValue] = useState(() => {\n            if (defaultValue == null) {\n                return withStepper ? fnUtils.clamp(0, min, max).toString() : '';\n            }\n\n            return fnUtils\n                .clamp(\n                    parseNumber(maskitoTransform(defaultValue.toString(), maskOptions)),\n                    min,\n                    max,\n                )\n                .toString();\n        });\n\n        const maskRef = useMaskito({ options: maskOptions });\n\n        useEffect(() => {\n            if (propValue !== undefined) {\n                setValue((prev) => {\n                    const parsedNumber = parseNumber(propValue);\n\n                    if (parsedNumber !== parseNumber(prev)) {\n                        return maskitoTransform(\n                            stringifyNumberWithoutExp(parsedNumber),\n                            maskOptions,\n                        );\n                    }\n\n                    return prev;\n                });\n            }\n        }, [maskOptions, propValue, separator]);\n\n        const getMaxLength = (valueString: string) => {\n            const hasSeparator = valueString?.includes(separator);\n            const hasSigns = valueString?.startsWith(MINUS_SIGN);\n\n            return MAX_DIGITS + (hasSeparator ? 1 : 0) + (hasSigns ? 1 : 0);\n        };\n\n        const getStep = () => Math.round(stepProp ?? 1);\n\n        const changeValue = (\n            event: ChangeEvent<HTMLInputElement> | null,\n            newValue: number | null,\n        ) => {\n            const isNaNValue = Number.isNaN(newValue);\n            const valueString = event?.target.value ?? newValue?.toString() ?? '';\n\n            setValue(valueString);\n\n            if (valueString === '' || !isNaNValue) {\n                onChange?.(event, {\n                    value: isNaNValue ? null : newValue,\n                });\n            }\n        };\n\n        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n            const valueString = event.target.value;\n\n            changeValue(event, parseNumber(valueString));\n        };\n\n        const handleIncrement = () => {\n            const parsed = parseNumber(value);\n            const nextValue = maskitoTransform(\n                (Number.isNaN(parsed) ? min : parsed + getStep()).toString(),\n                maskOptions,\n            );\n\n            changeValue(null, parseNumber(nextValue));\n        };\n\n        const handleDecrement = () => {\n            const parsed = parseNumber(value);\n            const nextValue = maskitoTransform(\n                (Number.isNaN(parsed) ? max : parsed - getStep()).toString(),\n                maskOptions,\n            );\n\n            changeValue(null, parseNumber(nextValue));\n        };\n\n        const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n            onFocus?.(e);\n\n            if (!disableUserInput) {\n                setFocused(true);\n            }\n        };\n\n        const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n            onBlur?.(e);\n            setFocused(false);\n        };\n\n        return (\n            <Input\n                maxLength={getMaxLength(value)}\n                {...restProps}\n                // В iOS в цифровой клавиатуре невозможно ввести минус.\n                inputMode={min < 0 && os.isIOS() ? 'text' : 'decimal'}\n                ref={mergeRefs([ref, maskRef])}\n                value={value}\n                onInput={handleChange}\n                dataTestId={dataTestId}\n                colors={colors}\n                disabled={disabled}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                size={size}\n                disableUserInput={disableUserInput}\n                clear={clearProp && /\\d/.test(value)}\n                rightAddons={\n                    withStepper ? (\n                        <React.Fragment>\n                            {rightAddons}\n                            <Steppers\n                                colors={colors}\n                                dataTestId={dataTestId}\n                                disabled={disabled}\n                                focused={focused}\n                                value={parseNumber(value)}\n                                min={min}\n                                max={max}\n                                onIncrement={handleIncrement}\n                                onDecrement={handleDecrement}\n                                size={size}\n                            />\n                        </React.Fragment>\n                    ) : (\n                        rightAddons\n                    )\n                }\n            />\n        );\n    },\n);\n"],"names":["forwardRef","MAX_DIGITS","__rest","getMinMaxOrDefault","useMemo","createMaskOptions","useState","fnUtils","parseNumber","maskitoTransform","useMaskito","useEffect","stringifyNumberWithoutExp","MINUS_SIGN","React","__assign","os","mergeRefs","Steppers"],"mappings":";;;;;;;;;;;;;;;;;;IAyFa,WAAW,GAAGA,gBAAU,CACjC,UACI,EAqBC,EACD,GAAG,EAAA;AArBC,IAAA,IAAO,SAAS,GAAA,EAAA,CAAA,KAAA,CAAA,CAChB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAe,GAAA,EAAA,CAAA,SAAA,CAAA,CAAf,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,CAAA,CACf,EAA2B,GAAA,EAAA,CAAA,cAAA,CAAA,CAA3B,cAAc,GAAG,EAAA,KAAA,MAAA,GAAAC,gBAAU,GAAA,EAAA,CAAA,CAC3B,YAAY,GAAA,EAAA,CAAA,YAAA,CAAA,CACZ,KAAK,GAAA,EAAA,CAAA,KAAA,EACA,OAAO,GAAA,EAAA,CAAA,GAAA,CACP,CAAA,OAAO,SAAA,CACZ,CAAA,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA,CACX,UAAU,GAAA,EAAA,CAAA,UAAA,CAAA,CACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,MAAM,GAAA,EAAA,CAAA,MAAA,CACN,CAAA,OAAO,aAAA,CACP,CAAI,EAAA,CAAA,IAAA,CAAA,KACE,QAAQ,GAAA,EAAA,CAAA,IAAA,CAAA,CACd,EAAS,GAAA,EAAA,CAAA,IAAA,CAAA,CAAT,IAAI,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,CAAA,CACT,gBAAgB,GAAA,EAAA,CAAA,gBAAA,CAAA,CACT,SAAS,GAAA,EAAA,CAAA,KAAA,EAChB,EAAkB,GAAA,EAAA,CAAA,MAAA,CAAA,CAAlB,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,SAAS,GAAA,EAAA,CAAA,CACf,SAAS,GAAAC,YAAA,CAAA,EAAA,EApBhB,wNAqBC;AAGK,IAAA,IAAA,KAAeC,wBAAkB,CAAC,EAAE,OAAO,SAAA,EAAE,OAAO,EAAA,OAAA,EAAE,CAAC,EAArD,GAAG,SAAA,EAAE,GAAG,SAA6C;AAC7D,IAAA,IAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;IAE1C,IAAM,WAAW,GAAmBC,aAAO,CACvC,YAAA;AACI,QAAA,OAAAC,uBAAiB,CAAC;AACd,YAAA,SAAS,EAAA,SAAA;YACT,cAAc,EAAE,WAAW,GAAG,CAAC,GAAG,cAAc;AAChD,YAAA,GAAG,EAAA,GAAA;AACH,YAAA,GAAG,EAAA,GAAA;SACN,CAAC;AALF,KAKE,EACN,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CACrD;IAEK,IAAA,EAAA,GAAwBC,cAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAmB;IACvC,IAAA,EAAA,GAAoBA,cAAQ,CAAC,YAAA;QAC/B,IAAI,YAAY,IAAI,IAAI,EAAE;YACtB,OAAO,WAAW,GAAGC,qBAAO,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE;AAClE;AAED,QAAA,OAAOA;AACF,aAAA,KAAK,CACFC,iBAAW,CAACC,qBAAgB,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,WAAW,CAAC,CAAC,EACnE,GAAG,EACH,GAAG;AAEN,aAAA,QAAQ,EAAE;AACnB,KAAC,CAAC,EAZK,KAAK,QAAA,EAAE,QAAQ,QAYpB;IAEF,IAAM,OAAO,GAAGC,gBAAU,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;AAEpD,IAAAC,eAAS,CAAC,YAAA;QACN,IAAI,SAAS,KAAK,SAAS,EAAE;YACzB,QAAQ,CAAC,UAAC,IAAI,EAAA;AACV,gBAAA,IAAM,YAAY,GAAGH,iBAAW,CAAC,SAAS,CAAC;AAE3C,gBAAA,IAAI,YAAY,KAAKA,iBAAW,CAAC,IAAI,CAAC,EAAE;oBACpC,OAAOC,qBAAgB,CACnBG,+BAAyB,CAAC,YAAY,CAAC,EACvC,WAAW,CACd;AACJ;AAED,gBAAA,OAAO,IAAI;AACf,aAAC,CAAC;AACL;KACJ,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IAEvC,IAAM,YAAY,GAAG,UAAC,WAAmB,EAAA;AACrC,QAAA,IAAM,YAAY,GAAG,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,QAAQ,CAAC,SAAS,CAAC;AACrD,QAAA,IAAM,QAAQ,GAAG,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,UAAU,CAACC,gBAAU,CAAC;QAEpD,OAAOZ,gBAAU,IAAI,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;AACnE,KAAC;AAED,IAAA,IAAM,OAAO,GAAG,YAAA,EAAM,OAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,cAAR,QAAQ,GAAI,CAAC,CAAC,CAAA,EAAA;AAE/C,IAAA,IAAM,WAAW,GAAG,UAChB,KAA2C,EAC3C,QAAuB,EAAA;;QAEvB,IAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;QACzC,IAAM,WAAW,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,MAAA,GAAA,MAAA,GAAA,QAAQ,CAAE,QAAQ,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE;QAErE,QAAQ,CAAC,WAAW,CAAC;AAErB,QAAA,IAAI,WAAW,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;AACnC,YAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,KAAK,EAAE;gBACd,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,QAAQ;AACtC,aAAA,CAAC;AACL;AACL,KAAC;IAED,IAAM,YAAY,GAAG,UAAC,KAAoC,EAAA;AACtD,QAAA,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAEtC,WAAW,CAAC,KAAK,EAAEO,iBAAW,CAAC,WAAW,CAAC,CAAC;AAChD,KAAC;AAED,IAAA,IAAM,eAAe,GAAG,YAAA;AACpB,QAAA,IAAM,MAAM,GAAGA,iBAAW,CAAC,KAAK,CAAC;AACjC,QAAA,IAAM,SAAS,GAAGC,qBAAgB,CAC9B,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,EAAE,EAAE,QAAQ,EAAE,EAC5D,WAAW,CACd;QAED,WAAW,CAAC,IAAI,EAAED,iBAAW,CAAC,SAAS,CAAC,CAAC;AAC7C,KAAC;AAED,IAAA,IAAM,eAAe,GAAG,YAAA;AACpB,QAAA,IAAM,MAAM,GAAGA,iBAAW,CAAC,KAAK,CAAC;AACjC,QAAA,IAAM,SAAS,GAAGC,qBAAgB,CAC9B,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,EAAE,EAAE,QAAQ,EAAE,EAC5D,WAAW,CACd;QAED,WAAW,CAAC,IAAI,EAAED,iBAAW,CAAC,SAAS,CAAC,CAAC;AAC7C,KAAC;IAED,IAAM,WAAW,GAAG,UAAC,CAA+B,EAAA;AAChD,QAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAG,CAAC,CAAC;QAEZ,IAAI,CAAC,gBAAgB,EAAE;YACnB,UAAU,CAAC,IAAI,CAAC;AACnB;AACL,KAAC;IAED,IAAM,UAAU,GAAG,UAAC,CAA+B,EAAA;AAC/C,QAAA,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAG,CAAC,CAAC;QACX,UAAU,CAAC,KAAK,CAAC;AACrB,KAAC;IAED,QACIM,sBAAC,CAAA,aAAA,CAAA,KAAK,EACFC,cAAA,CAAA,EAAA,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,EAAA,EAC1B,SAAS,EAAA;;AAEb,QAAA,SAAS,EAAE,GAAG,GAAG,CAAC,IAAIC,gBAAE,CAAC,KAAK,EAAE,GAAG,MAAM,GAAG,SAAS,EACrD,GAAG,EAAEC,0BAAS,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,EAC9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EACpC,WAAW,EACP,WAAW,IACPH,sBAAC,CAAA,aAAA,CAAAA,sBAAK,CAAC,QAAQ,EAAA,IAAA;YACV,WAAW;YACZA,sBAAC,CAAA,aAAA,CAAAI,kBAAQ,EACL,EAAA,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAEV,iBAAW,CAAC,KAAK,CAAC,EACzB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,eAAe,EAC5B,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAE,IAAI,EAAA,CACZ,CACW,KAEjB,WAAW,CACd,EAEP,CAAA,CAAA;AAEV,CAAC;;;;"}

package/dynamic-mixins/components/number-input/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberInput } from './Component';
+export type { NumberInputProps } from './Component';

package/dynamic-mixins/components/number-input/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.NumberInput = Component.NumberInput;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/components/number-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/components/steppers/Component.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { InputProps } from '@alfalab/core-components-input';
+export declare type SteppersProps = {
+    value: number;
+    min: number;
+    max: number;
+    className?: string;
+    disabled?: boolean;
+    focused?: boolean;
+    onIncrement: () => void;
+    onDecrement: () => void;
+    dataTestId?: string;
+    colors: 'default' | 'inverted';
+    size: InputProps['size'];
+};
+export declare const Steppers: FC<SteppersProps>;

package/dynamic-mixins/components/steppers/Component.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var dynamicMixins = require('@alfalab/core-components-icon-button/dynamic-mixins');
+var dynamicMixins$1 = require('@alfalab/core-components-shared/dynamic-mixins');
+var MinusMIcon = require('@alfalab/icons-glyph/MinusMIcon');
+var MinusSIcon = require('@alfalab/icons-glyph/MinusSIcon');
+var PlusMediumMIcon = require('@alfalab/icons-glyph/PlusMediumMIcon');
+var PlusSIcon = require('@alfalab/icons-glyph/PlusSIcon');
+var default_module = require('./default.module.css.js');
+var index_module = require('./index.module.css.js');
+var inverted_module = require('./inverted.module.css.js');
+
+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 colorStyles = {
+    default: default_module,
+    inverted: inverted_module,
+};
+function preventDefault(e) {
+    e.preventDefault();
+}
+var SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
+var Steppers = function (_a) {
+    var _b;
+    var className = _a.className, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, value = _a.value, min = _a.min, max = _a.max, disabled = _a.disabled, focused = _a.focused, dataTestId = _a.dataTestId, colors = _a.colors, _c = _a.size, size = _c === void 0 ? 48 : _c;
+    var decButtonDisabled = disabled || value <= min;
+    var incButtonDisabled = disabled || value >= max;
+    var MinusIconComponent = size === 40 ? MinusSIcon.MinusSIcon : MinusMIcon.MinusMIcon;
+    var PlusIconComponent = size === 40 ? PlusSIcon.PlusSIcon : PlusMediumMIcon.PlusMediumMIcon;
+    return (React__default.default.createElement("div", { className: cn__default.default(index_module.component, colorStyles[colors].steppers, index_module[SIZE_TO_CLASSNAME_MAP[size]], className, (_b = {},
+            _b[colorStyles[colors].steppersFocused] = focused,
+            _b[colorStyles[colors].steppersDisabled] = disabled,
+            _b)) },
+        React__default.default.createElement(dynamicMixins.IconButton, { colors: colors, disabled: decButtonDisabled, className: index_module.button, icon: React__default.default.createElement(MinusIconComponent, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: dynamicMixins$1.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
+        React__default.default.createElement("div", { className: cn__default.default(index_module.separator, colorStyles[colors].separator) }),
+        React__default.default.createElement(dynamicMixins.IconButton, { colors: colors, disabled: incButtonDisabled, className: index_module.button, icon: React__default.default.createElement(PlusIconComponent, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: dynamicMixins$1.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
+};
+Steppers.displayName = 'Steppers';
+
+exports.Steppers = Steppers;
+//# sourceMappingURL=Component.js.map

package/dynamic-mixins/components/steppers/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["../../../src/components/steppers/Component.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton } from '@alfalab/core-components-icon-button';\nimport { InputProps } from '@alfalab/core-components-input';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';\nimport { MinusSIcon } from '@alfalab/icons-glyph/MinusSIcon';\nimport { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';\nimport { PlusSIcon } from '@alfalab/icons-glyph/PlusSIcon';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\n\nexport type SteppersProps = {\n    value: number;\n    min: number;\n    max: number;\n    className?: string;\n    disabled?: boolean;\n    focused?: boolean;\n    onIncrement: () => void;\n    onDecrement: () => void;\n    dataTestId?: string;\n    colors: 'default' | 'inverted';\n    size: InputProps['size'];\n};\n\nconst colorStyles = {\n    default: defaultColors,\n    inverted: invertedColors,\n};\n\nfunction preventDefault(e: React.MouseEvent<HTMLElement>) {\n    e.preventDefault();\n}\n\nconst SIZE_TO_CLASSNAME_MAP = {\n    s: 'size-48',\n    m: 'size-56',\n    l: 'size-64',\n    xl: 'size-72',\n    40: 'size-40',\n    48: 'size-48',\n    56: 'size-56',\n    64: 'size-64',\n    72: 'size-72',\n};\n\nexport const Steppers: FC<SteppersProps> = ({\n    className,\n    onIncrement,\n    onDecrement,\n    value,\n    min,\n    max,\n    disabled,\n    focused,\n    dataTestId,\n    colors,\n    size = 48,\n}) => {\n    const decButtonDisabled = disabled || value <= min;\n    const incButtonDisabled = disabled || value >= max;\n\n    const MinusIconComponent = size === 40 ? MinusSIcon : MinusMIcon;\n    const PlusIconComponent = size === 40 ? PlusSIcon : PlusMediumMIcon;\n\n    return (\n        <div\n            className={cn(\n                styles.component,\n                colorStyles[colors].steppers,\n                styles[SIZE_TO_CLASSNAME_MAP[size]],\n                className,\n                {\n                    [colorStyles[colors].steppersFocused]: focused,\n                    [colorStyles[colors].steppersDisabled]: disabled,\n                },\n            )}\n        >\n            <IconButton\n                colors={colors}\n                disabled={decButtonDisabled}\n                className={styles.button}\n                icon={<MinusIconComponent />}\n                aria-label='уменьшить'\n                onMouseDown={preventDefault}\n                onClick={onDecrement}\n                dataTestId={getDataTestId(dataTestId, 'decrement-button')}\n                view='secondary'\n            />\n            <div className={cn(styles.separator, colorStyles[colors].separator)} />\n            <IconButton\n                colors={colors}\n                disabled={incButtonDisabled}\n                className={styles.button}\n                icon={<PlusIconComponent />}\n                aria-label='увеличить'\n                onMouseDown={preventDefault}\n                onClick={onIncrement}\n                dataTestId={getDataTestId(dataTestId, 'increment-button')}\n                view='secondary'\n            />\n        </div>\n    );\n};\n\nSteppers.displayName = 'Steppers';\n"],"names":["defaultColors","invertedColors","MinusSIcon","MinusMIcon","PlusSIcon","PlusMediumMIcon","React","cn","styles","IconButton","getDataTestId"],"mappings":"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"}

package/dynamic-mixins/components/steppers/default.css

@@ -0,0 +1,12 @@
+:root {
+    --color-light-neutral-translucent-0: #fff;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
+} .number-input__separator_1kep7 {
+    background-color: var(--color-light-neutral-translucent-300);
+} .number-input__steppers_1kep7 {
+    background-color: var(--color-light-neutral-translucent-0);
+} .number-input__steppersFocused_1kep7,
+.number-input__steppersDisabled_1kep7 {
+    background-color: var(--color-light-neutral-translucent-200);
+}

package/dynamic-mixins/components/steppers/default.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./default.css');
+
+var defaultColors = {"separator":"number-input__separator_1kep7","steppers":"number-input__steppers_1kep7","steppersFocused":"number-input__steppersFocused_1kep7","steppersDisabled":"number-input__steppersDisabled_1kep7"};
+
+module.exports = defaultColors;
+//# sourceMappingURL=default.module.css.js.map

package/dynamic-mixins/components/steppers/default.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.module.css.js","sources":["../../src/components/steppers/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.separator {\n    background-color: var(--color-light-neutral-translucent-300);\n}\n\n.steppers {\n    background-color: var(--color-light-neutral-translucent-0);\n}\n\n.steppersFocused,\n.steppersDisabled {\n    background-color: var(--color-light-neutral-translucent-200);\n}\n"],"names":[],"mappings":";;;;AAEgB,oBAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,UAAU,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,kBAAkB,CAAC,sCAAsC,CAAC;;;;"}

package/dynamic-mixins/components/steppers/index.css

@@ -0,0 +1,26 @@
+:root {
+    --gap-2xs-neg: -4px;
+    --gap-xs-neg: -8px;
+    --gap-4-neg: var(--gap-2xs-neg);
+    --gap-8-neg: var(--gap-xs-neg);
+} .number-input__component_ru5jf {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    border-radius: 5px;
+    transition: background-color 0.2s ease;
+    overflow: visible;
+} .number-input__separator_ru5jf {
+    height: 18px;
+    width: 1px;
+} .number-input__button_ru5jf {
+    width: 40px;
+    height: 40px;
+} .number-input__size-40_ru5jf {
+    margin-right: var(--gap-8-neg);
+    height: 32px;
+} .number-input__size-48_ru5jf {
+    margin-right: var(--gap-8-neg);
+} .number-input__size-56_ru5jf {
+    margin-right: var(--gap-4-neg);
+}

package/dynamic-mixins/components/steppers/index.d.ts

@@ -0,0 +1 @@
+export * from './Component';

package/dynamic-mixins/components/steppers/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Steppers = Component.Steppers;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/components/steppers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/components/steppers/index.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./index.css');
+
+var styles = {"component":"number-input__component_ru5jf","separator":"number-input__separator_ru5jf","button":"number-input__button_ru5jf","size-40":"number-input__size-40_ru5jf","size-48":"number-input__size-48_ru5jf","size-56":"number-input__size-56_ru5jf"};
+
+module.exports = styles;
+//# sourceMappingURL=index.module.css.js.map

package/dynamic-mixins/components/steppers/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/steppers/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n    border-radius: 5px;\n    transition: background-color 0.2s ease;\n    overflow: visible;\n}\n\n.separator {\n    height: 18px;\n    width: 1px;\n}\n\n.button {\n    width: 40px;\n    height: 40px;\n}\n\n.size-40 {\n    margin-right: var(--gap-8-neg);\n    height: 32px;\n}\n\n.size-48 {\n    margin-right: var(--gap-8-neg);\n}\n\n.size-56 {\n    margin-right: var(--gap-4-neg);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,QAAQ,CAAC,4BAA4B,CAAC,SAAS,CAAC,6BAA6B,CAAC,SAAS,CAAC,6BAA6B,CAAC,SAAS,CAAC,6BAA6B,CAAC;;;;"}

package/dynamic-mixins/components/steppers/inverted.css

@@ -0,0 +1,11 @@
+: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);
+} .number-input__separator_1fy2r {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+} .number-input__steppers_1fy2r {
+    background-color: var(--color-light-neutral-translucent-0-inverted);
+} .number-input__steppersFocused_1fy2r,
+.number-input__steppersDisabled_1fy2r {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/dynamic-mixins/components/steppers/inverted.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./inverted.css');
+
+var invertedColors = {"separator":"number-input__separator_1fy2r","steppers":"number-input__steppers_1fy2r","steppersFocused":"number-input__steppersFocused_1fy2r","steppersDisabled":"number-input__steppersDisabled_1fy2r"};
+
+module.exports = invertedColors;
+//# sourceMappingURL=inverted.module.css.js.map

package/dynamic-mixins/components/steppers/inverted.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inverted.module.css.js","sources":["../../src/components/steppers/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.separator {\n    background-color: var(--color-light-neutral-translucent-300-inverted);\n}\n\n.steppers {\n    background-color: var(--color-light-neutral-translucent-0-inverted);\n}\n\n.steppersFocused,\n.steppersDisabled {\n    background-color: var(--color-light-neutral-translucent-300-inverted);\n}\n"],"names":[],"mappings":";;;;AAEgB,qBAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,UAAU,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,kBAAkB,CAAC,sCAAsC,CAAC;;;;"}

package/dynamic-mixins/constants/min-max-safe-integer.d.ts

@@ -0,0 +1,2 @@
+export declare const MAX_SAFE_INTEGER: number;
+export declare const MIN_SAFE_INTEGER: number;

package/dynamic-mixins/constants/min-max-safe-integer.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MAX_SAFE_INTEGER = Math.pow(2, 53) - 1;
+var MIN_SAFE_INTEGER = -MAX_SAFE_INTEGER;
+
+exports.MAX_SAFE_INTEGER = MAX_SAFE_INTEGER;
+exports.MIN_SAFE_INTEGER = MIN_SAFE_INTEGER;
+//# sourceMappingURL=min-max-safe-integer.js.map

package/dynamic-mixins/constants/min-max-safe-integer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"min-max-safe-integer.js","sources":["../../src/constants/min-max-safe-integer.ts"],"sourcesContent":["export const MAX_SAFE_INTEGER = 2 ** 53 - 1;\nexport const MIN_SAFE_INTEGER = -MAX_SAFE_INTEGER;\n"],"names":[],"mappings":";;;;AAAa,IAAA,gBAAgB,GAAG,IAAA,CAAA,GAAA,CAAA,CAAC,EAAI,EAAE,CAAA,GAAG;AAC7B,IAAA,gBAAgB,GAAG,CAAC;;;;;"}

package/dynamic-mixins/desktop/Component.desktop.d.ts

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