@alfalab/core-components-number-input 2.0.0 → 2.0.2

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

@@ -10,10 +10,20 @@ import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/icons-glyph/MinusMIcon';
 import '@alfalab/icons-glyph/PlusMediumMIcon';
 
-const styles = {"steppers":"number-input__steppers_1g1qu","steppersFocused":"number-input__steppersFocused_1g1qu","steppersDisable":"number-input__steppersDisable_1g1qu","s":"number-input__s_1g1qu","m":"number-input__m_1g1qu"};
+const defaultColors = {"steppers":"number-input__steppers_rxb9r","steppersFocused":"number-input__steppersFocused_rxb9r","steppersDisabled":"number-input__steppersDisabled_rxb9r"};
+require('./default.css')
+
+const styles = {"s":"number-input__s_ua8m2","m":"number-input__m_ua8m2"};
 require('./index.css')
 
-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, ...restProps }, ref) => {
+const invertedColors = {"steppers":"number-input__steppers_12art","steppersFocused":"number-input__steppersFocused_12art","steppersDisabled":"number-input__steppersDisabled_12art"};
+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 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;
@@ -86,11 +96,11 @@ const NumberInput = forwardRef(({ value: propValue, onChange, separator = ',', f
     };
     return (React.createElement(Input, { maxLength: getMaxLength(value), ...restProps, 
         // В iOS в цифровой клавиатуре невозможно ввести минус.
-        inputMode: min < 0 && os.isIOS() ? 'text' : 'decimal', ref: mergeRefs([ref, maskRef]), value: value, onInput: handleChange, dataTestId: dataTestId, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, clear: clearProp && /\d/.test(value), rightAddons: withStepper ? (React.createElement(React.Fragment, null,
+        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, { dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(styles.steppers, styles[size], {
-                    [styles.steppersFocused]: focused,
-                    [styles.steppersDisable]: disabled,
+            React.createElement(Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(colorStyles[colors].steppers, styles[size], {
+                    [colorStyles[colors].steppersFocused]: focused,
+                    [colorStyles[colors].steppersDisabled]: disabled,
                 }), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) }));
 });
 

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

@@ -0,0 +1,24 @@
+/* hash: 1v873 */
+:root {
+} /* deprecated */ :root {
+    --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 {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__steppers_rxb9r {
+    background-color: var(--color-light-neutral-1500-inverted);
+} .number-input__steppersFocused_rxb9r,
+.number-input__steppersDisabled_rxb9r {
+    background-color: var(--color-light-neutral-translucent-200);
+}

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

@@ -1,8 +1,6 @@
-/* hash: ppwj9 */
+/* hash: wriah */
 :root {
-} /* deprecated */ :root {
-    --color-light-neutral-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 */
+} /* 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 {
@@ -18,13 +16,8 @@
     --gap-xs-neg: -8px;
 } :root {
 } :root {
-} .number-input__steppers_1g1qu {
-    background-color: var(--color-light-neutral-0);
-} .number-input__steppersFocused_1g1qu,
-.number-input__steppersDisable_1g1qu {
-    background-color: var(--color-light-neutral-translucent-200);
-} .number-input__s_1g1qu {
+} .number-input__s_ua8m2 {
     margin-right: var(--gap-xs-neg);
-} .number-input__m_1g1qu {
+} .number-input__m_ua8m2 {
     margin-right: var(--gap-2xs-neg);
 }

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

@@ -0,0 +1,24 @@
+/* hash: 1vphq */
+: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_12art {
+    background-color: var(--color-light-neutral-1500);
+} .number-input__steppersFocused_12art,
+.number-input__steppersDisabled_12art {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/modern/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/modern/components/steppers/Component.js

@@ -5,19 +5,29 @@ import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
 import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
 
-const styles = {"component":"number-input__component_1k8eq","separator":"number-input__separator_1k8eq","button":"number-input__button_1k8eq"};
+const defaultColors = {"separator":"number-input__separator_5558q"};
+require('./default.css')
+
+const styles = {"component":"number-input__component_dl4y5","separator":"number-input__separator_dl4y5","button":"number-input__button_dl4y5"};
 require('./index.css')
 
+const invertedColors = {"separator":"number-input__separator_898tm"};
+require('./inverted.css')
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 function preventDefault(e) {
     e.preventDefault();
 }
-const Steppers = ({ className, onIncrement, onDecrement, value, min, max, disabled, dataTestId, }) => {
+const Steppers = ({ className, onIncrement, onDecrement, value, min, max, disabled, dataTestId, colors, }) => {
     const decButtonDisabled = disabled || value <= min;
     const incButtonDisabled = disabled || value >= max;
     return (React.createElement("div", { className: cn(styles.component, className) },
-        React.createElement(IconButton, { 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: styles.separator }),
-        React.createElement(IconButton, { 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' })));
+        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/modern/components/steppers/default.css

@@ -0,0 +1,20 @@
+/* hash: 1a2sq */
+:root {
+} /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__separator_5558q {
+    background-color: var(--color-light-neutral-translucent-300);
+}

package/modern/components/steppers/index.css

@@ -1,7 +1,6 @@
-/* hash: 1x7ch */
+/* hash: 73hh8 */
 :root {
-} /* 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 */
+} /* 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 {
-} .number-input__component_1k8eq {
+} .number-input__component_dl4y5 {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     border-radius: 5px;
     transition: background-color 0.2s ease;
     overflow: visible;
-} .number-input__separator_1k8eq {
+} .number-input__separator_dl4y5 {
     height: 18px;
     width: 1px;
-    background-color: var(--color-light-neutral-translucent-300);
-} .number-input__button_1k8eq {
+} .number-input__button_dl4y5 {
     width: 40px;
     height: 40px;
 }

package/modern/components/steppers/inverted.css

@@ -0,0 +1,20 @@
+/* hash: 1eb6x */
+:root {
+} /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__separator_898tm {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/modern/{Component.desktop.d.ts → desktop/Component.desktop.d.ts}

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

package/modern/{Component.desktop.js → desktop/Component.desktop.js}

@@ -1,13 +1,13 @@
 import React, { forwardRef } from 'react';
 import { InputDesktop } from '@alfalab/core-components-input/modern/desktop';
-import { NumberInput } from './components/number-input/Component.js';
+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 '../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/desktop/index.d.ts

@@ -1,2 +1,2 @@
-export { NumberInputDesktop, NumberInputDesktopProps } from "../Component.desktop";
+export { NumberInputDesktop, NumberInputDesktopProps } from "./Component.desktop";
 export {};

package/modern/desktop/index.js

@@ -1,4 +1,4 @@
-export { NumberInputDesktop } from '../Component.desktop.js';
+export { NumberInputDesktop } from './Component.desktop.js';
 import 'react';
 import '@alfalab/core-components-input/modern/desktop';
 import '../components/number-input/Component.js';

package/{cssm → modern/mobile}/Component.mobile.d.ts

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

package/modern/{Component.mobile.js → mobile/Component.mobile.js}

@@ -1,13 +1,13 @@
 import React, { forwardRef } from 'react';
 import { InputMobile } from '@alfalab/core-components-input/modern/mobile';
-import { NumberInput } from './components/number-input/Component.js';
+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 '../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/index.d.ts

@@ -1,2 +1,2 @@
-export { NumberInputMobile, NumberInputMobileProps } from "../Component.mobile";
+export { NumberInputMobile, NumberInputMobileProps } from "./Component.mobile";
 export {};

package/modern/mobile/index.js

@@ -1,4 +1,4 @@
-export { NumberInputMobile } from '../Component.mobile.js';
+export { NumberInputMobile } from './Component.mobile.js';
 import 'react';
 import '@alfalab/core-components-input/modern/mobile';
 import '../components/number-input/Component.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-number-input",
-    "version": "2.0.0",
+    "version": "2.0.2",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,9 +14,9 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^13.0.0",
+        "@alfalab/core-components-input": "^13.0.2",
         "@alfalab/core-components-mq": "^4.2.0",
-        "@alfalab/core-components-icon-button": "^6.4.0",
+        "@alfalab/core-components-icon-button": "^6.4.2",
         "@alfalab/core-components-shared": "^0.8.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "@maskito/core": "^1.7.0",

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

@@ -27,7 +27,14 @@ import {
 } from '../../utils';
 import { Steppers } from '../steppers';
 
+import defaultColors from './default.module.css';
 import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 
 export interface NumberInputProps
     extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'defaultValue'> {
@@ -106,6 +113,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             size = 's',
             disableUserInput,
             clear: clearProp,
+            colors = 'default',
             ...restProps
         },
         ref,
@@ -233,6 +241,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
                 value={value}
                 onInput={handleChange}
                 dataTestId={dataTestId}
+                colors={colors}
                 disabled={disabled}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
@@ -244,14 +253,15 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
                         <React.Fragment>
                             {rightAddons}
                             <Steppers
+                                colors={colors}
                                 dataTestId={dataTestId}
                                 disabled={disabled}
                                 value={parseNumber(value)}
                                 min={min}
                                 max={max}
-                                className={cn(styles.steppers, styles[size], {
-                                    [styles.steppersFocused]: focused,
-                                    [styles.steppersDisable]: disabled,
+                                className={cn(colorStyles[colors].steppers, styles[size], {
+                                    [colorStyles[colors].steppersFocused]: focused,
+                                    [colorStyles[colors].steppersDisabled]: disabled,
                                 })}
                                 onIncrement={handleIncrement}
                                 onDecrement={handleDecrement}

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

@@ -0,0 +1,10 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.steppers {
+    background-color: var(--color-light-neutral-1500-inverted);
+}
+
+.steppersFocused,
+.steppersDisabled {
+    background-color: var(--color-light-neutral-translucent-200);
+}

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

@@ -1,14 +1,5 @@
 @import '@alfalab/core-components-themes/src/default.css';
 
-.steppers {
-    background-color: var(--color-light-neutral-0);
-}
-
-.steppersFocused,
-.steppersDisable {
-    background-color: var(--color-light-neutral-translucent-200);
-}
-
 .s {
     margin-right: var(--gap-xs-neg);
 }

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

@@ -0,0 +1,10 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.steppers {
+    background-color: var(--color-light-neutral-1500);
+}
+
+.steppersFocused,
+.steppersDisabled {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/src/components/steppers/Component.tsx

@@ -6,7 +6,9 @@ import { getDataTestId } from '@alfalab/core-components-shared';
 import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
 import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
 
+import defaultColors from './default.module.css';
 import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
 
 export type SteppersProps = {
     value: number;
@@ -17,6 +19,12 @@ export type SteppersProps = {
     onIncrement: () => void;
     onDecrement: () => void;
     dataTestId?: string;
+    colors: 'default' | 'inverted';
+};
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
 };
 
 function preventDefault(e: React.MouseEvent<HTMLElement>) {
@@ -32,6 +40,7 @@ export const Steppers: React.FC<SteppersProps> = ({
     max,
     disabled,
     dataTestId,
+    colors,
 }) => {
     const decButtonDisabled = disabled || value <= min;
     const incButtonDisabled = disabled || value >= max;
@@ -39,6 +48,7 @@ export const Steppers: React.FC<SteppersProps> = ({
     return (
         <div className={cn(styles.component, className)}>
             <IconButton
+                colors={colors}
                 disabled={decButtonDisabled}
                 className={styles.button}
                 icon={<MinusMIcon />}
@@ -48,8 +58,9 @@ export const Steppers: React.FC<SteppersProps> = ({
                 dataTestId={getDataTestId(dataTestId, 'decrement-button')}
                 view='secondary'
             />
-            <div className={styles.separator} />
+            <div className={cn(styles.separator, colorStyles[colors].separator)} />
             <IconButton
+                colors={colors}
                 disabled={incButtonDisabled}
                 className={styles.button}
                 icon={<PlusMediumMIcon />}

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

@@ -0,0 +1,5 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.separator {
+    background-color: var(--color-light-neutral-translucent-300);
+}

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

@@ -12,7 +12,6 @@
 .separator {
     height: 18px;
     width: 1px;
-    background-color: var(--color-light-neutral-translucent-300);
 }
 
 .button {

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

@@ -0,0 +1,5 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.separator {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/src/{Component.desktop.tsx → desktop/Component.desktop.tsx}

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { InputDesktop } from '@alfalab/core-components-input/desktop';
 
-import { NumberInput, NumberInputProps } from './components/number-input';
+import { NumberInput, NumberInputProps } from '../components/number-input';
 
 export type NumberInputDesktopProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
 

package/src/desktop/index.ts

@@ -1 +1 @@
-export { NumberInputDesktop, NumberInputDesktopProps } from '../Component.desktop';
+export { NumberInputDesktop, NumberInputDesktopProps } from './Component.desktop';

package/src/{Component.mobile.tsx → mobile/Component.mobile.tsx}

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { InputMobile } from '@alfalab/core-components-input/mobile';
 
-import { NumberInput, NumberInputProps } from './components/number-input';
+import { NumberInput, NumberInputProps } from '../components/number-input';
 
 export type NumberInputMobileProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
 

package/src/mobile/index.ts

@@ -1 +1 @@
-export { NumberInputMobile, NumberInputMobileProps } from '../Component.mobile';
+export { NumberInputMobile, NumberInputMobileProps } from './Component.mobile';