@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/Input/Input.css

@@ -0,0 +1,170 @@
+/* stylelint-disable */
+.Input {
+  --textfield-color: var(--color-content-primary);
+  --textfield-background-color: var(--color-background-primary);
+  --textfield-border-width: var(--border-width-s);
+  --textfield-border-color: var(--color-border-main);
+  cursor: text;
+  display: inline-flex;
+  vertical-align: top;
+  flex-direction: column;
+}
+.Input > * {
+    cursor: text;
+  }
+.Input-Fieldset {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+    border-radius: var(--border-radius-xs);
+    border: var(--textfield-border-width) solid var(--textfield-border-color);
+    transition: border var(--transition-default);
+  }
+.Input-Body {
+    position: relative;
+    display: flex;
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 var(--textfield-gutter-x);
+    background-color: var(--textfield-background-color);
+    transition: background-color var(--transition-slow);
+    color: var(--textfield-color);
+    border-radius: var(--border-radius-xs);
+  }
+.Input-FieldContainer {
+    inline-size: 100%;
+    position: relative;
+  }
+.Input-Field {
+    border: none;
+    outline: none;
+    display: flex;
+    inline-size: 100%;
+    padding: 0;
+    background: none;
+    color: var(--textfield-color);
+    box-sizing: border-box;
+    block-size: var(--textfield-input-height);
+    font: var(--textfield-input-font);
+  }
+.Input-Field::placeholder {
+      opacity: 1;
+      color: var(--color-content-tertiary);
+    }
+.Input-Field:-webkit-autofill,
+    .Input-Field:-webkit-autofill:hover,
+    .Input-Field:-webkit-autofill:focus {
+      box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
+      background-color: transparent !important;
+      -webkit-text-fill-color: var(--color-content-info-dark);
+    }
+.Input-Field::-webkit-outer-spin-button,
+    .Input-Field::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+              appearance: none;
+      margin: 0;
+    }
+.Input-Field::-webkit-calendar-picker-indicator {
+      opacity: 0;
+      position: absolute;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+.Input-Field[type='number'] {
+      -webkit-appearance: textfield;
+         -moz-appearance: textfield;
+              appearance: textfield;
+    }
+.Input_size_2xs {
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 32px;
+      --textfield-input-font: var(--typography-text-2xs-font);
+      --textfield-input-padding: 8px 0 8px;
+      --textfield-input-gap: var(--space-s);
+    }
+.Input_size_2xs .Input-Field::-webkit-calendar-picker-indicator {
+        inset-inline-end: -25px;
+      }
+.Input_size_xs {
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 40px;
+      --textfield-input-font: var(--typography-text-xs-font);
+      --textfield-input-padding: 19px 0 4px;
+      --textfield-input-gap: var(--space-s);
+    }
+.Input_size_xs .Input-Field::-webkit-calendar-picker-indicator {
+        inset-inline-end: -25px;
+      }
+.Input_size_s {
+      --textfield-gutter-x: 16px;
+      --textfield-input-height: 48px;
+      --textfield-input-font: var(--typography-text-s-font);
+      --textfield-input-padding: 21px 0 6px;
+      --textfield-input-gap: var(--space-m);
+    }
+.Input_size_s .Input-Field::-webkit-calendar-picker-indicator {
+        inset-inline-end: -30px;
+      }
+.Input_size_m {
+      --textfield-gutter-x: 20px;
+      --textfield-input-height: 56px;
+      --textfield-input-font: var(--typography-text-m-font);
+      --textfield-input-padding: 24px 0 6px;
+      --textfield-input-gap: var(--space-m);
+    }
+.Input_size_m .Input-Field::-webkit-calendar-picker-indicator {
+        inset-inline-end: -34px;
+      }
+.Input_size_l {
+      --textfield-gutter-x: 24px;
+      --textfield-input-height: 64px;
+      --textfield-input-font: var(--typography-text-l-font);
+      --textfield-input-padding: 26px 0 6px;
+      --textfield-input-gap: var(--space-l);
+    }
+.Input_size_l .Input-Field::-webkit-calendar-picker-indicator {
+        inset-inline-end: -39px;
+      }
+.Input_fullWidth {
+    inline-size: 100%;
+  }
+.Input_hasLabel .Input-Field {
+      padding: var(--textfield-input-padding);
+      font: var(--textfield-input-font);
+    }
+.Input_hasLabel .Input-Field::placeholder {
+        opacity: 0;
+      }
+.Input_hasLabel .Input-Field:focus::placeholder {
+        opacity: 1;
+      }
+.Input:hover {
+    --textfield-border-color: var(--color-border-main-hover);
+  }
+.Input_focused,
+  .Input_focused:hover {
+    --textfield-border-width: var(--border-width-m);
+    --textfield-background-color: var(--color-background-main);
+    --textfield-border-color: var(--color-border-action);
+  }
+.Input_error,
+  .Input_error.Input:hover,
+  .Input_error.Input_focused,
+  .Input_error.Input_focused:hover {
+    --textfield-border-color: var(--color-border-error);
+  }
+.Input_disabled {
+    --textfield-border-color: var(--color-border-disabled);
+    --textfield-background-color: var(--color-background-disabled);
+    --textfield-color: var(--color-content-secondary);
+    pointer-events: none;
+    cursor: default;
+  }

package/__inner__/cjs/components/Input/Input.d.ts

@@ -0,0 +1,66 @@
+import './Input.css';
+import React from 'react';
+import type { HTMLAttributes, InputHTMLAttributes, Ref } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { type FieldIconProps } from '../FieldIcon';
+import { type FieldLabelProps } from '../FieldLabel';
+export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
+export type InputTypeVariant = (typeof inputTypeVariant)[number];
+export type InputSizeVariant = FormElementSizeVariant;
+type InputElement = InputHTMLAttributes<HTMLInputElement>;
+export type InputProps = {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: InputSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Атрибут type для элемента input */
+    type?: InputTypeVariant;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Минимальное количество символов разрешенных для ввода */
+    minLength?: InputElement['minLength'];
+    /** Максимальное количество символов разрешенных для ввода */
+    maxLength?: InputElement['maxLength'];
+    /** Текст или иконка слева */
+    renderLeft?: FieldIconProps['icon'];
+    /** Текст или иконка справа */
+    renderRight?: FieldIconProps['icon'];
+    /** Выбранное значение */
+    value?: InputElement['value'];
+    /** Значение по умолчанию (неконтролируемый компонент) */
+    defaultValue?: InputElement['defaultValue'];
+    /** Обработчик события на изменение значения поля */
+    onChange?: InputElement['onChange'];
+    /** Ссылка на элемент input */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Свойства элемента input */
+    inputProps?: InputElement & {
+        'data-testid'?: string;
+    };
+    /** Ссылка на FieldLabel */
+    labelRef?: FieldLabelProps['ref'];
+    /** Свойства FieldLabel */
+    labelProps?: FieldLabelProps;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLDivElement>;
+    'data-testid'?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+export declare const cnInput: import("@bem-react/classname").ClassNameFormatter;
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/__inner__/cjs/components/Input/Input.js

@@ -0,0 +1,74 @@
+"use strict";
+exports.__esModule = true;
+exports.Input = exports.cnInput = exports.inputTypeVariant = void 0;
+var tslib_1 = require("tslib");
+require("./Input.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useMultiRef_1 = require("../../hooks/useMultiRef");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var FieldHint_1 = require("../FieldHint");
+var FieldIcon_1 = require("../FieldIcon");
+var FieldLabel_1 = require("../FieldLabel");
+exports.inputTypeVariant = [
+    'number',
+    'date',
+    'datetime-local',
+    'time',
+    'text',
+    'tel',
+    'password',
+    'email',
+];
+exports.cnInput = (0, classname_1.cn)('Input');
+exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Input'
+    });
+    var _a = props.size, size = _a === void 0 ? 'm' : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, inputRef = props.inputRef, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, inputProps = props.inputProps, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "inputRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onChange", "labelRef", "labelProps"]);
+    var isControlled = typeof valueProp !== 'undefined';
+    var _b = tslib_1.__read((0, react_1.useState)(), 2), focused = _b[0], setFocused = _b[1];
+    var fieldRef = (0, react_1.useRef)(null);
+    var _c = tslib_1.__read((0, react_1.useState)(defaultValue), 2), valueState = _c[0], setValueState = _c[1];
+    var filled = isControlled
+        ? !!valueProp || valueProp === 0
+        : !!valueState || valueState === 0;
+    var handleChange = (0, react_1.useCallback)(function (e) {
+        if (disabled)
+            return;
+        var value = e.target.value;
+        if (!isControlled) {
+            setValueState(value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange, isControlled, disabled]);
+    var handleFocus = (0, react_1.useCallback)(function (e) {
+        var _a;
+        setFocused(true);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus]);
+    var handleBlur = (0, react_1.useCallback)(function (e) {
+        var _a;
+        setFocused(false);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur]);
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnInput)({
+            fullWidth: fullWidth,
+            size: size,
+            error: error,
+            disabled: disabled,
+            required: required,
+            hasLabel: !!label,
+            focused: focused
+        }, [className]) }),
+        react_1["default"].createElement("label", { className: (0, exports.cnInput)('Body') },
+            react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInput)('RenderLeft'), icon: renderLeft, size: size }),
+            react_1["default"].createElement("div", { className: (0, exports.cnInput)('FieldContainer') },
+                label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, exports.cnInput)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
+                react_1["default"].createElement("input", tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, disabled: disabled, value: valueProp, type: type, defaultValue: defaultValue, required: required, placeholder: placeholder }, inputProps, { className: (0, exports.cnInput)('Field', { filled: filled }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ref: (0, useMultiRef_1.useMultiRef)([inputRef, fieldRef]) }))),
+            react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInput)('RenderRight'), icon: renderRight, size: size }),
+            react_1["default"].createElement("fieldset", { className: (0, exports.cnInput)('Fieldset') })),
+        react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+});
+exports.Input.displayName = 'Input';

package/__inner__/cjs/components/Input/index.d.ts

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

package/__inner__/cjs/components/Input/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Input"), exports);

package/__inner__/cjs/components/InputNumber/InputNumber.css

@@ -0,0 +1,172 @@
+/* stylelint-disable */
+.InputNumber {
+  --number-input-color: var(--color-content-primary);
+  --number-input-background-color: var(--color-background-primary);
+  --number-input-border-width: var(--border-width-s);
+  --number-input-border-color: var(--color-border-main);
+  cursor: text;
+  display: inline-flex;
+  vertical-align: top;
+  flex-direction: column;
+}
+.InputNumber > * {
+    cursor: text;
+  }
+.InputNumber-Fieldset {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+    border-radius: var(--border-radius-xs);
+    border: var(--number-input-border-width) solid
+      var(--number-input-border-color);
+    transition: border var(--transition-default);
+  }
+.InputNumber-Body {
+    position: relative;
+    display: flex;
+    -moz-column-gap: var(--number-input-input-gap);
+         column-gap: var(--number-input-input-gap);
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 4px 0 var(--number-input-gutter-x);
+    background-color: var(--number-input-background-color);
+    transition: background-color var(--transition-slow);
+    color: var(--number-input-color);
+    border-radius: var(--border-radius-xs);
+  }
+.InputNumber-FieldContainer {
+    inline-size: 100%;
+    position: relative;
+  }
+.InputNumber-Field {
+    border: none;
+    outline: none;
+    display: flex;
+    -webkit-appearance: textfield;
+       -moz-appearance: textfield;
+            appearance: textfield;
+    inline-size: 100%;
+    padding: 0;
+    background: none;
+    color: var(--number-input-color);
+    box-sizing: border-box;
+    block-size: var(--number-input-input-height);
+    font: var(--number-input-input-font);
+  }
+.InputNumber-Field::placeholder {
+      opacity: 1;
+      color: var(--color-content-tertiary);
+    }
+.InputNumber-Field:-webkit-autofill,
+    .InputNumber-Field:-webkit-autofill:hover,
+    .InputNumber-Field:-webkit-autofill:focus {
+      box-shadow: 0 0 0 1000px var(--number-input-background-color) inset !important;
+      background-color: transparent !important;
+      -webkit-text-fill-color: var(--color-content-info-dark);
+    }
+.InputNumber-Field::-webkit-outer-spin-button,
+    .InputNumber-Field::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+              appearance: none;
+      margin: 0;
+    }
+.InputNumber-Controls {
+    display: flex;
+    flex-direction: column;
+  }
+.InputNumber_size_2xs {
+      --number-input-gutter-x: 12px;
+      --number-input-input-height: 40px;
+      --number-input-input-padding: 4px 0 4px;
+      --number-input-input-font: var(--typography-text-2xs-font);
+      --number-input-input-gap: var(--space-s);
+      --number-input-button-width: 24px;
+      --number-input-button-height: 16px;
+    }
+.InputNumber_size_2xs .FieldLabel_size_2xs {
+        --field-label-top: 12px;
+      }
+.InputNumber_size_xs {
+      --number-input-gutter-x: 12px;
+      --number-input-input-height: 40px;
+      --number-input-input-font: var(--typography-text-xs-font);
+      --number-input-input-padding: 19px 0 4px;
+      --number-input-input-gap: var(--space-s);
+      --number-input-button-width: 28px;
+      --number-input-button-height: 16px;
+    }
+.InputNumber_size_s {
+      --number-input-gutter-x: 16px;
+      --number-input-input-height: 48px;
+      --number-input-input-font: var(--typography-text-s-font);
+      --number-input-input-padding: 21px 0 6px;
+      --number-input-input-gap: var(--space-m);
+      --number-input-button-width: 32px;
+      --number-input-button-height: 20px;
+    }
+.InputNumber_size_m {
+      --number-input-gutter-x: 20px;
+      --number-input-input-height: 56px;
+      --number-input-input-font: var(--typography-text-m-font);
+      --number-input-input-padding: 24px 0 6px;
+      --number-input-input-gap: var(--space-m);
+      --number-input-button-width: 40px;
+      --number-input-button-height: 24px;
+    }
+.InputNumber_size_l {
+      --number-input-gutter-x: 24px;
+      --number-input-input-height: 64px;
+      --number-input-input-font: var(--typography-text-l-font);
+      --number-input-input-padding: 26px 0 6px;
+      --number-input-input-gap: var(--space-l);
+      --number-input-button-width: 48px;
+      --number-input-button-height: 28px;
+    }
+.InputNumber_fullWidth {
+    inline-size: 100%;
+  }
+.InputNumber_hasLabel .InputNumber-Field {
+      padding: var(--number-input-input-padding);
+      font: var(--number-input-input-font);
+    }
+.InputNumber_hasLabel .InputNumber-Field::placeholder {
+        opacity: 0;
+      }
+.InputNumber_hasLabel .InputNumber-Field:focus::placeholder {
+        opacity: 1;
+      }
+.InputNumber:hover {
+    --number-input-border-color: var(--color-border-main-hover);
+  }
+.InputNumber_focused,
+  .InputNumber_focused:hover {
+    --number-input-border-width: var(--border-width-m);
+    --number-input-background-color: var(--color-background-main);
+    --number-input-border-color: var(--color-border-action);
+  }
+.InputNumber_error,
+  .InputNumber_error.InputNumber:hover,
+  .InputNumber_error.InputNumber_focused,
+  .InputNumber_error.InputNumber_focused:hover {
+    --number-input-border-color: var(--color-border-error);
+  }
+.InputNumber_disabled {
+    --number-input-border-color: var(--color-border-disabled);
+    --number-input-background-color: var(--color-background-disabled);
+    --number-input-color: var(--color-content-secondary);
+    pointer-events: none;
+    cursor: default;
+  }
+.IconButton.InputNumber-Increment,
+.IconButton.InputNumber-Decrement {
+  inline-size: var(--number-input-button-width);
+  block-size: var(--number-input-button-height);
+}
+.IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
+    pointer-events: none;
+  }

package/__inner__/cjs/components/InputNumber/InputNumber.d.ts

@@ -0,0 +1,5 @@
+import './InputNumber.css';
+import React from 'react';
+import type { InputNumberProps } from './types';
+export declare const cnInputNumber: import("@bem-react/classname").ClassNameFormatter;
+export declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/InputNumber/InputNumber.js

@@ -0,0 +1,151 @@
+"use strict";
+exports.__esModule = true;
+exports.InputNumber = exports.cnInputNumber = void 0;
+var tslib_1 = require("tslib");
+require("./InputNumber.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useControlled_1 = require("../../hooks/useControlled");
+var useEventListener_1 = require("../../hooks/useEventListener");
+var useInterval_1 = require("../../hooks/useInterval");
+var useMultiRef_1 = require("../../hooks/useMultiRef");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var FieldHint_1 = require("../FieldHint");
+var FieldIcon_1 = require("../FieldIcon");
+var FieldLabel_1 = require("../FieldLabel");
+var IconButton_1 = require("../IconButton");
+var constants_1 = require("./constants");
+var utils_1 = require("./utils");
+exports.cnInputNumber = (0, classname_1.cn)('InputNumber');
+exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'InputNumber'
+    });
+    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps"]);
+    var _l = tslib_1.__read((0, react_1.useState)(false), 2), focused = _l[0], setFocused = _l[1];
+    var _m = tslib_1.__read((0, react_1.useState)(null), 2), timeoutId = _m[0], setTimeoutId = _m[1];
+    var _o = tslib_1.__read((0, react_1.useState)(null), 2), countDirection = _o[0], setCountDirection = _o[1];
+    var _p = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: valueProp,
+        name: 'InputNumber',
+        state: 'value',
+        defaultValue: defaultValue
+    }), 2), valueState = _p[0], setValueState = _p[1];
+    var labelElemRef = (0, react_1.useRef)(null);
+    var fieldRef = (0, react_1.useRef)(null);
+    var filled = (0, utils_1.isValidValue)(valueState);
+    var handleChange = function (event) {
+        if (disabled)
+            return;
+        var valueAsNumber = event.target.valueAsNumber;
+        var value = (0, utils_1.isValidValue)(valueAsNumber) ? valueAsNumber : '';
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, { id: id, name: name, value: value });
+    };
+    var startCount = function (countDirection) {
+        var timeoutId = setTimeout(function () {
+            setCountDirection(countDirection);
+        }, 300);
+        setTimeoutId(timeoutId);
+    };
+    var handleMouseDown = function (countDirection) {
+        return function (e) {
+            var nextValue = (0, utils_1.getValue)({
+                min: min,
+                max: max,
+                step: step,
+                countDirection: countDirection,
+                value: valueState
+            });
+            setValueState(nextValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(e, { id: id, name: name, value: nextValue });
+            startCount(countDirection);
+        };
+    };
+    var handleMouseUp = function () {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        setCountDirection(null);
+        setTimeoutId(null);
+    };
+    var handleFocus = function (event) {
+        var _a;
+        setFocused(true);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+    };
+    var handleBlur = function (event) {
+        var _a;
+        setFocused(false);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+    };
+    /* В некоторых браузерах input[type=number] позволяет вводить
+     * буквенные символы, поэтому мы вручную отключаем подобное поведение.
+     */
+    var handleKeyDown = function (event) {
+        var _a;
+        if ((0, utils_1.isInputInvalid)(event)) {
+            event.preventDefault();
+        }
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+    };
+    /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
+     * внутри HTML-элемента label - фокус не переходил на body или на цель нажатия кнопки мыши.
+     * Если же нажатие кнопки происходит на самом HTML-элементе input, то мы ничего не делаем,
+     * так как в противном случае мы сломаем возможность выделять текст для копирования.
+     */
+    (0, useEventListener_1.useEventListener)({
+        element: labelElemRef,
+        eventName: 'mousedown',
+        handler: function (e) {
+            var _a;
+            if (e.target !== fieldRef.current) {
+                e.preventDefault();
+                (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    });
+    (0, useEventListener_1.useEventListener)({
+        active: focused,
+        eventName: 'mouseup',
+        handler: handleMouseUp
+    });
+    (0, useInterval_1.useInterval)(function () {
+        if (countDirection) {
+            var value = (0, utils_1.getValue)({
+                min: min,
+                max: max,
+                step: step,
+                countDirection: countDirection,
+                value: valueState
+            });
+            setValueState(value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(null, { id: id, name: name, value: value });
+        }
+    }, countDirection ? 100 : null);
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnInputNumber)({
+            fullWidth: fullWidth,
+            size: size,
+            error: error,
+            disabled: disabled,
+            required: required,
+            hasLabel: !!label,
+            focused: focused
+        }, [className]) }),
+        react_1["default"].createElement("label", { ref: labelElemRef, className: (0, exports.cnInputNumber)('Body') },
+            react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInputNumber)('RenderLeft'), icon: renderLeft, size: size }),
+            react_1["default"].createElement("div", { className: (0, exports.cnInputNumber)('FieldContainer') },
+                label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, exports.cnInputNumber)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
+                react_1["default"].createElement("input", tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, disabled: disabled, value: valueState, required: required, placeholder: placeholder, className: (0, exports.cnInputNumber)('Field', { filled: filled }, [
+                        inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
+                    ]), min: min, max: max, step: step }, inputProps, { type: "number", onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldRef]) }))),
+            react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInputNumber)('RenderRight'), icon: renderRight, size: size }),
+            react_1["default"].createElement("span", { className: (0, exports.cnInputNumber)('Controls') },
+                react_1["default"].createElement(IconButton_1.IconButton, { tabIndex: -1, size: size, className: (0, exports.cnInputNumber)('Increment'), icon: icons_1.SortUpIcon, onMouseDown: handleMouseDown('increment'), disabled: disabled, "aria-label": "increment", variant: "ghost" }),
+                react_1["default"].createElement(IconButton_1.IconButton, { tabIndex: -1, size: size, icon: icons_1.SortDownIcon, className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement'), disabled: disabled, "aria-label": "decrement", variant: "ghost" })),
+            react_1["default"].createElement("fieldset", { className: (0, exports.cnInputNumber)('Fieldset') })),
+        react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+});
+exports.InputNumber.displayName = 'InputNumber';

package/__inner__/cjs/components/InputNumber/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const INPUT_NUMBER_DEFAULT_SIZE = "m";
+export declare const INPUT_NUMBER_DEFAULT_STEP = 1;
+export declare const INPUT_NUMBER_DEFAULT_VALUE = "";
+export declare const INPUT_NUMBER_DEFAULT_MAX: number;
+export declare const INPUT_NUMBER_DEFAULT_MIN = 0;
+export declare const INPUT_NUMBER_DEFAULT_AUTO_FOCUS = false;
+export declare const INPUT_NUMBER_DEFAULT_ERROR = false;
+export declare const INPUT_NUMBER_DEFAULT_REQUIRED = false;
+export declare const INPUT_NUMBER_DEFAULT_DISABLED = false;
+export declare const INPUT_NUMBER_DEFAULT_FULL_WIDTH = false;