npm - @ozen-ui/kit - Versions diffs - 0.29.0 → 0.30.0 - Mend

@ozen-ui/kit 0.29.0 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/Autocomplete/package.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/Autocomplete/index.js",
+	"module": "../__inner__/esm/components/Autocomplete/index.js",
+	"types": "../__inner__/esm/components/Autocomplete/index.d.ts"
+}

package/__inner__/cjs/components/Card/Card.css CHANGED Viewed

@@ -2,10 +2,17 @@
   position: relative;
   padding: var(--card-padding);
   cursor: var(--card-cursor-style);
-  transition: var(--transition-default);
   box-sizing: border-box;
+  transition:
+    background-color var(--transition-default),
+    box-shadow var(--transition-default),
+    opacity var(--transition-default);
 }
+  .Card::after {
+    transition: border-color var(--transition-default);
+  }
   .Card_size_s {
       --card-padding: var(--space-l);
     }
@@ -30,7 +37,6 @@
         border: var(--card-border-width) var(--card-border-style)
           var(--card-border-color);
         border-radius: var(--paper-border-radius);
-        transition: var(--transition-default);
       }
   .Card_borderWidth_s {

package/__inner__/cjs/components/DataList/DataList.js CHANGED Viewed

@@ -91,7 +91,6 @@ var DataListRender = function (inProps, ref) {
     (0, helpers_1.useScrollContainerToElement)(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
     // Назначает элементу контроля событие управления списком с клавиатуры
     (0, useEventListener_1.useEventListener)({
-        active: opened,
         eventName: 'keydown',
         element: anchorRef,
         handler: function (event) {

package/__inner__/cjs/components/DataList/helpers/useDataListNavigation.js CHANGED Viewed

@@ -21,65 +21,68 @@ function useDataListNavigation(_a) {
     var findInItems = function (value) { var _a; return (_a = savedItems.current) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item === value; }); };
     // Актуализирует состояние при каждом изменении текущего значения
     (0, react_1.useEffect)(function () {
-        if (active) {
-            setState(function (prevState) {
-                var _a, _b, _c;
-                return (tslib_1.__assign(tslib_1.__assign({}, prevState), { focused: (_a = findInItems(prevState.focused)) !== null && _a !== void 0 ? _a : null, selected: (_b = findInItems(current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
-            });
+        var _a, _b, _c;
+        if (!active) {
+            return;
         }
+        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: (_a = findInItems(state.focused)) !== null && _a !== void 0 ? _a : null, selected: (_b = findInItems(current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
     }, [active, current]);
+    var onMouseLeave = function () {
+        if (!active) {
+            return;
+        }
+        setState(tslib_1.__assign(tslib_1.__assign({}, state), { highlighted: null }));
+    };
+    var onMouseEnter = function (item) {
+        if (!active) {
+            return;
+        }
+        setState(tslib_1.__assign(tslib_1.__assign({}, state), { highlighted: item }));
+    };
+    var onClick = function (event, item) {
+        var _a;
+        if (!active) {
+            return;
+        }
+        var focused = item === state.focused ? item : null;
+        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: focused, selected: item }));
+        (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
+    };
+    var onKeyDown = function (event) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!active) {
+            return;
+        }
+        if ((0, isKey_1.isKey)(event, 'Enter')) {
+            event.preventDefault();
+            var selected_1 = (_a = state.focused) !== null && _a !== void 0 ? _a : state.selected;
+            setState(tslib_1.__assign(tslib_1.__assign({}, state), { selected: selected_1, focused: selected_1 }));
+            (_b = savedOnSelect.current) === null || _b === void 0 ? void 0 : _b.call(savedOnSelect, event, selected_1);
+        }
+        if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
+            return;
+        }
+        event.preventDefault();
+        var selected = (_c = state.focused) !== null && _c !== void 0 ? _c : state.selected;
+        var currentIndex = typeof selected !== 'undefined'
+            ? (_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.indexOf(selected)
+            : null;
+        var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
+        var newIndex = isArrowUp
+            ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_e = savedItems.current) === null || _e === void 0 ? void 0 : _e.length) || 0)
+            : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_f = savedItems.current) === null || _f === void 0 ? void 0 : _f.length) || 0);
+        var newItem = (_g = savedItems.current) === null || _g === void 0 ? void 0 : _g[newIndex];
+        setState(tslib_1.__assign(tslib_1.__assign({}, state), { focused: newItem }));
+    };
     (0, react_1.useEffect)(function () {
         if (!active) {
             return undefined;
         }
-        // Инициализация всех событий
-        var onMouseLeave = function () {
-            setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { highlighted: null })); });
-        };
-        var onMouseEnter = function (item) {
-            setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { highlighted: item })); });
-        };
-        var onClick = function (event, item) {
-            var _a;
-            setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { focused: item === prevState.focused ? item : null, selected: item })); });
-            (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
-        };
-        var onKeyDown = function (event) {
-            var _a;
-            if ((0, isKey_1.isKey)(event, 'Enter')) {
-                event.preventDefault();
-                var selected_1;
-                setState(function (prevState) {
-                    var _a;
-                    selected_1 = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
-                    return tslib_1.__assign(tslib_1.__assign({}, prevState), { selected: selected_1, focused: selected_1 });
-                });
-                (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, selected_1);
-            }
-            if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
-                return;
-            }
-            event.preventDefault();
-            setState(function (prevState) {
-                var _a, _b, _c, _d, _e;
-                var selected = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
-                var currentIndex = typeof selected !== 'undefined'
-                    ? (_b = savedItems.current) === null || _b === void 0 ? void 0 : _b.indexOf(selected)
-                    : null;
-                var isArrowUp = (0, isKey_1.isKey)(event, 'ArrowUp');
-                var newIndex = isArrowUp
-                    ? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_c = savedItems.current) === null || _c === void 0 ? void 0 : _c.length) || 0)
-                    : (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.length) || 0);
-                var newItem = (_e = savedItems.current) === null || _e === void 0 ? void 0 : _e[newIndex];
-                return tslib_1.__assign(tslib_1.__assign({}, prevState), { focused: newItem });
-            });
-        };
-        setState(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave })); });
         return function () {
             // Сброс
             setState({});
         };
     }, [active]);
-    return state;
+    return tslib_1.__assign(tslib_1.__assign({}, state), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave });
 }
 exports.useDataListNavigation = useDataListNavigation;

package/__inner__/cjs/components/DataList/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, SyntheticEvent } from 'react';
 import type React from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '../../utils/polymorphicComponentWithRef';
@@ -11,7 +11,7 @@ export type DataListPayload<MULTIPLE extends boolean> = {
     name?: string;
     value: DataListSelected<MULTIPLE>;
 };
-export type DataListOnSelect<MULTIPLE extends boolean> = (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
+export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
 export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Имя списка */
     name?: string;

package/__inner__/cjs/components/FieldInput/FieldInput.js CHANGED Viewed

@@ -50,6 +50,6 @@ exports.FieldInput = (0, polymorphicComponentWithRef_1.polymorphicComponentWithR
         setFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }, [onBlur]);
-    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldInput)({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, defaultValue: defaultValue, value: valueProp }, other, { ref: ref }), children));
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldInput)({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, value: valueState }, other, { ref: ref }), children));
 });
 exports.FieldInput.displayName = 'FieldInput';

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

@@ -1,159 +1,99 @@
-/* stylelint-disable */
 .InputNumber {
-  --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);
-  font: var(--textfield-input-font);
-  cursor: text;
-  display: inline-flex;
-  vertical-align: top;
-  flex-direction: column;
+  --input-number-padding: 0 var(--control-padding-3xs) 0
+    var(--textfield-gutter-x);
 }
-.InputNumber > * {
-    cursor: text;
-  }
-.InputNumber-Body {
-    position: relative;
+  .InputNumber_size_2xs {
+      --input-number-button-block-size: 16px;
+      --input-number-button-inline-size: 24px;
+    }
+  .InputNumber_size_xs {
+      --input-number-button-block-size: 16px;
+      --input-number-button-inline-size: 28px;
+    }
+  .InputNumber_size_s {
+      --input-number-button-block-size: 20px;
+      --input-number-button-inline-size: 32px;
+    }
+  .InputNumber_size_m {
+      --input-number-button-block-size: 24px;
+      --input-number-button-inline-size: 40px;
+    }
+  .InputNumber_size_l {
+      --input-number-button-block-size: 28px;
+      --input-number-button-inline-size: 48px;
+    }
+  .InputNumber-Body {
     display: flex;
-    -moz-column-gap: var(--textfield-input-gap);
-         column-gap: var(--textfield-input-gap);
+    position: relative;
     align-items: center;
     box-sizing: border-box;
-    padding: 0 4px 0 var(--textfield-gutter-x);
-    background-color: var(--textfield-background-color);
-    transition: background-color var(--transition-slow);
     color: var(--textfield-color);
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
     border-radius: var(--border-radius-xs);
+    padding: var(--input-number-padding);
+    background-color: var(--textfield-background-color);
+    transition: background-color var(--transition-slow);
   }
-.InputNumber-FieldContainer {
+  .InputNumber-FieldContainer {
     inline-size: 100%;
     position: relative;
   }
-.InputNumber-Field {
+  .InputNumber-Field {
     border: none;
     outline: none;
     display: flex;
+    font: inherit;
+    background: none;
+    inline-size: 100%;
+    box-sizing: border-box;
     -webkit-appearance: textfield;
        -moz-appearance: textfield;
             appearance: textfield;
-    inline-size: 100%;
-    padding: 0;
-    background: none;
     color: var(--textfield-color);
-    box-sizing: border-box;
+    padding: var(--textfield-input-padding);
     block-size: var(--textfield-input-height);
-    font: inherit;
   }
-.InputNumber-Field::placeholder {
+  .InputNumber-Field::placeholder {
       opacity: 1;
       color: var(--color-content-tertiary);
     }
-.InputNumber-Field:-webkit-autofill,
+  .InputNumber-Field:-webkit-autofill,
     .InputNumber-Field:-webkit-autofill:hover,
     .InputNumber-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);
+      box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
     }
-.InputNumber-Field::-webkit-outer-spin-button,
+  .InputNumber-Field::-webkit-outer-spin-button,
     .InputNumber-Field::-webkit-inner-spin-button {
+      margin: 0;
       -webkit-appearance: none;
               appearance: none;
-      margin: 0;
     }
-.InputNumber-Controls {
+  .InputNumber-Controls {
     display: flex;
     flex-direction: column;
   }
-.InputNumber_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 40px;
-      --textfield-input-padding: 4px 0 4px;
-      --textfield-input-font: var(--typography-text-2xs-font);
-      --textfield-input-gap: var(--space-s);
-      --textfield-button-width: 24px;
-      --textfield-button-height: 16px;
-    }
-.InputNumber_size_2xs .FieldLabel_size_2xs {
-        --field-label-top: 12px;
-      }
-.InputNumber_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);
-      --textfield-button-width: 28px;
-      --textfield-button-height: 16px;
-    }
-.InputNumber_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);
-      --textfield-button-width: 32px;
-      --textfield-button-height: 20px;
-    }
-.InputNumber_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);
-      --textfield-button-width: 40px;
-      --textfield-button-height: 24px;
-    }
-.InputNumber_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);
-      --textfield-button-width: 48px;
-      --textfield-button-height: 28px;
-    }
-.InputNumber_fullWidth {
-    inline-size: 100%;
-  }
-.InputNumber_hasLabel .InputNumber-Field {
-      padding: var(--textfield-input-padding);
-      font: var(--textfield-input-font);
-    }
-.InputNumber_hasLabel .InputNumber-Field::placeholder {
-        opacity: 0;
-      }
-.InputNumber_hasLabel .InputNumber-Field:focus::placeholder {
-        opacity: 1;
-      }
-.InputNumber:hover {
-    --textfield-border-color: var(--color-border-main-hover);
-  }
-.InputNumber_focused,
-  .InputNumber_focused:hover {
-    --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
-    --textfield-border-color: var(--color-border-action);
-  }
-.InputNumber_error,
-  .InputNumber_error.InputNumber:hover,
-  .InputNumber_error.InputNumber_focused,
-  .InputNumber_error.InputNumber_focused:hover {
-    --textfield-border-color: var(--color-border-error);
-  }
-.InputNumber_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;
-  }
 .IconButton.InputNumber-Increment,
 .IconButton.InputNumber-Decrement {
-  inline-size: var(--textfield-button-width);
-  block-size: var(--textfield-button-height);
+  inline-size: var(--input-number-button-inline-size);
+  block-size: var(--input-number-button-block-size);
 }
 .IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
     pointer-events: none;
   }

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

@@ -5,14 +5,17 @@ var tslib_1 = require("tslib");
 require("./InputNumber.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
+var useBoolean_1 = require("../../hooks/useBoolean");
 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 FieldControl_1 = require("../FieldControl");
 var FieldHint_1 = require("../FieldHint");
 var FieldIcon_1 = require("../FieldIcon");
+var FieldInput_1 = require("../FieldInput");
 var FieldLabel_1 = require("../FieldLabel");
 var Fieldset_1 = require("../Fieldset");
 var IconButton_1 = require("../IconButton");
@@ -25,15 +28,15 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
         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, bodyProps = props.bodyProps, 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", "bodyProps"]);
-    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)({
+    var _l = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focused = _l[0], _m = _l[1], onFocus = _m.on, offFocus = _m.off;
+    var _o = tslib_1.__read((0, react_1.useState)(null), 2), timeoutId = _o[0], setTimeoutId = _o[1];
+    var _p = tslib_1.__read((0, react_1.useState)(null), 2), countDirection = _p[0], setCountDirection = _p[1];
+    var _q = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         name: 'InputNumber',
         state: 'value',
         defaultValue: defaultValue,
-    }), 2), valueState = _p[0], setValueState = _p[1];
+    }), 2), valueState = _q[0], setValueState = _q[1];
     var bodyInnerRef = (0, react_1.useRef)(null);
     var fieldInnerRef = (0, react_1.useRef)(null);
     var filled = (0, utils_1.isValidValue)(valueState);
@@ -74,12 +77,12 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
     };
     var handleFocus = function (event) {
         var _a;
-        setFocused(true);
+        onFocus();
         (_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);
+        offFocus();
         (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
     };
     /* В некоторых браузерах input[type=number] позволяет вводить
@@ -126,27 +129,17 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
             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]) }),
+    return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, exports.cnInputNumber)({ size: size }, [className]) }),
         react_1.default.createElement("label", tslib_1.__assign({}, bodyProps, { className: (0, exports.cnInputNumber)('Body'), ref: (0, useMultiRef_1.useMultiRef)([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInputNumber)('RenderLeft'), icon: renderLeft, size: size }),
+            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
             react_1.default.createElement("div", { className: (0, exports.cnInputNumber)('FieldContainer') },
-                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, fieldInnerRef]) }))),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInputNumber)('RenderRight'), icon: renderRight, size: size }),
+                react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { ref: (0, useMultiRef_1.useMultiRef)([labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref, labelRef]), className: (0, exports.cnInputNumber)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]) }), label),
+                react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__assign({ id: id, min: min, max: max, step: step, name: name, type: "number", value: valueState, autoFocus: autoFocus, placeholder: placeholder }, inputProps, { onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, onKeyDown: handleKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]), className: (0, exports.cnInputNumber)('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
+            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
             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", type: "button", 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", type: "button", variant: "ghost" })),
+                react_1.default.createElement(IconButton_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: icons_1.SortUpIcon, disabled: disabled, "aria-label": "increment", className: (0, exports.cnInputNumber)('Increment'), onMouseDown: handleMouseDown('increment') }),
+                react_1.default.createElement(IconButton_1.IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: icons_1.SortDownIcon, disabled: disabled, "aria-label": "decrement", className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement') })),
             react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, exports.cnInputNumber)('Fieldset') })),
-        react_1.default.createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+        react_1.default.createElement(FieldHint_1.FieldHint, null, hint)));
 });
 exports.InputNumber.displayName = 'InputNumber';

package/__inner__/cjs/components/InputNumber/types.d.ts CHANGED Viewed

@@ -2,6 +2,13 @@ import type { HTMLAttributes, Ref, ComponentPropsWithRef, ChangeEvent, MouseEven
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { FieldIconProps } from '../FieldIcon';
 import type { FieldLabelProps } from '../FieldLabel';
+type InputNumberPropsDeprecated = {
+    /**
+     * Ссылка на FieldLabel
+     * @deprecated Используйте labelProps.ref
+     * */
+    labelRef?: FieldLabelProps['ref'];
+};
 export type InputNumberSizeVariant = FormElementSizeVariant;
 export type InputElement = ComponentPropsWithRef<'input'>;
 export type InputNumberEmptyValue = '';
@@ -48,8 +55,6 @@ export type InputNumberProps = {
     inputProps?: InputElement & {
         'data-testid'?: string;
     };
-    /** Ссылка на FieldLabel */
-    labelRef?: FieldLabelProps['ref'];
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
     /** Cвойства Body */
@@ -63,4 +68,5 @@ export type InputNumberProps = {
     /** Ссылка на корневой DOM-элемент компонента */
     ref?: Ref<HTMLDivElement>;
     'data-testid'?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+} & InputNumberPropsDeprecated & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+export {};

package/__inner__/cjs/components/Table/Table.css CHANGED Viewed

@@ -1,4 +1,5 @@
 .Table {
+  --table-border-color: var(--color-border-main);
   border-spacing: 0;
   background-color: var(--color-background-main);
 }
@@ -64,11 +65,11 @@
     }
   .Table_divider_row .TableCell, .Table_divider_all .TableCell {
-        border-block-end: var(--border-width-s) solid var(--color-border-main);
+        border-block-end: var(--border-width-s) solid var(--table-border-color);
       }
   .Table_divider_column .TableCell:not(:last-child), .Table_divider_all .TableCell:not(:last-child) {
-        border-inline-end: var(--border-width-s) solid var(--color-border-main);
+        border-inline-end: var(--border-width-s) solid var(--table-border-color);
       }
   .Table .TableBody .TableRow:last-child .TableCell {

package/__inner__/cjs/components/Table/components/TableRow/TableRow.css CHANGED Viewed

@@ -1,5 +1,5 @@
 .TableRow {
-  transition: background-color var(--transition-slow);
+  transition: background-color var(--transition-default);
 }
   .TableRow_hover:hover {

package/__inner__/cjs/components/Tag/Tag.css CHANGED Viewed

@@ -8,6 +8,10 @@
   outline: none;
   border: none;
   text-decoration: none;
+  transition:
+    box-shadow var(--transition-default),
+    background-color var(--transition-default),
+    color var(--transition-default);
 }
 .Tag_size_2xs {
       font: var(--typography-text-3xs-font);

package/__inner__/esm/components/Card/Card.css CHANGED Viewed

@@ -2,10 +2,17 @@
   position: relative;
   padding: var(--card-padding);
   cursor: var(--card-cursor-style);
-  transition: var(--transition-default);
   box-sizing: border-box;
+  transition:
+    background-color var(--transition-default),
+    box-shadow var(--transition-default),
+    opacity var(--transition-default);
 }
+  .Card::after {
+    transition: border-color var(--transition-default);
+  }
   .Card_size_s {
       --card-padding: var(--space-l);
     }
@@ -30,7 +37,6 @@
         border: var(--card-border-width) var(--card-border-style)
           var(--card-border-color);
         border-radius: var(--paper-border-radius);
-        transition: var(--transition-default);
       }
   .Card_borderWidth_s {

package/__inner__/esm/components/DataList/DataList.js CHANGED Viewed

@@ -88,7 +88,6 @@ var DataListRender = function (inProps, ref) {
     useScrollContainerToElement(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
     // Назначает элементу контроля событие управления списком с клавиатуры
     useEventListener({
-        active: opened,
         eventName: 'keydown',
         element: anchorRef,
         handler: function (event) {

package/__inner__/esm/components/DataList/helpers/useDataListNavigation.js CHANGED Viewed

@@ -18,64 +18,67 @@ export function useDataListNavigation(_a) {
     var findInItems = function (value) { var _a; return (_a = savedItems.current) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item === value; }); };
     // Актуализирует состояние при каждом изменении текущего значения
     useEffect(function () {
-        if (active) {
-            setState(function (prevState) {
-                var _a, _b, _c;
-                return (__assign(__assign({}, prevState), { focused: (_a = findInItems(prevState.focused)) !== null && _a !== void 0 ? _a : null, selected: (_b = findInItems(current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
-            });
+        var _a, _b, _c;
+        if (!active) {
+            return;
         }
+        setState(__assign(__assign({}, state), { focused: (_a = findInItems(state.focused)) !== null && _a !== void 0 ? _a : null, selected: (_b = findInItems(current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
     }, [active, current]);
+    var onMouseLeave = function () {
+        if (!active) {
+            return;
+        }
+        setState(__assign(__assign({}, state), { highlighted: null }));
+    };
+    var onMouseEnter = function (item) {
+        if (!active) {
+            return;
+        }
+        setState(__assign(__assign({}, state), { highlighted: item }));
+    };
+    var onClick = function (event, item) {
+        var _a;
+        if (!active) {
+            return;
+        }
+        var focused = item === state.focused ? item : null;
+        setState(__assign(__assign({}, state), { focused: focused, selected: item }));
+        (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
+    };
+    var onKeyDown = function (event) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!active) {
+            return;
+        }
+        if (isKey(event, 'Enter')) {
+            event.preventDefault();
+            var selected_1 = (_a = state.focused) !== null && _a !== void 0 ? _a : state.selected;
+            setState(__assign(__assign({}, state), { selected: selected_1, focused: selected_1 }));
+            (_b = savedOnSelect.current) === null || _b === void 0 ? void 0 : _b.call(savedOnSelect, event, selected_1);
+        }
+        if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
+            return;
+        }
+        event.preventDefault();
+        var selected = (_c = state.focused) !== null && _c !== void 0 ? _c : state.selected;
+        var currentIndex = typeof selected !== 'undefined'
+            ? (_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.indexOf(selected)
+            : null;
+        var isArrowUp = isKey(event, 'ArrowUp');
+        var newIndex = isArrowUp
+            ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_e = savedItems.current) === null || _e === void 0 ? void 0 : _e.length) || 0)
+            : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_f = savedItems.current) === null || _f === void 0 ? void 0 : _f.length) || 0);
+        var newItem = (_g = savedItems.current) === null || _g === void 0 ? void 0 : _g[newIndex];
+        setState(__assign(__assign({}, state), { focused: newItem }));
+    };
     useEffect(function () {
         if (!active) {
             return undefined;
         }
-        // Инициализация всех событий
-        var onMouseLeave = function () {
-            setState(function (prevState) { return (__assign(__assign({}, prevState), { highlighted: null })); });
-        };
-        var onMouseEnter = function (item) {
-            setState(function (prevState) { return (__assign(__assign({}, prevState), { highlighted: item })); });
-        };
-        var onClick = function (event, item) {
-            var _a;
-            setState(function (prevState) { return (__assign(__assign({}, prevState), { focused: item === prevState.focused ? item : null, selected: item })); });
-            (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
-        };
-        var onKeyDown = function (event) {
-            var _a;
-            if (isKey(event, 'Enter')) {
-                event.preventDefault();
-                var selected_1;
-                setState(function (prevState) {
-                    var _a;
-                    selected_1 = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
-                    return __assign(__assign({}, prevState), { selected: selected_1, focused: selected_1 });
-                });
-                (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, selected_1);
-            }
-            if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
-                return;
-            }
-            event.preventDefault();
-            setState(function (prevState) {
-                var _a, _b, _c, _d, _e;
-                var selected = (_a = prevState.focused) !== null && _a !== void 0 ? _a : prevState.selected;
-                var currentIndex = typeof selected !== 'undefined'
-                    ? (_b = savedItems.current) === null || _b === void 0 ? void 0 : _b.indexOf(selected)
-                    : null;
-                var isArrowUp = isKey(event, 'ArrowUp');
-                var newIndex = isArrowUp
-                    ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_c = savedItems.current) === null || _c === void 0 ? void 0 : _c.length) || 0)
-                    : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.length) || 0);
-                var newItem = (_e = savedItems.current) === null || _e === void 0 ? void 0 : _e[newIndex];
-                return __assign(__assign({}, prevState), { focused: newItem });
-            });
-        };
-        setState(function (prevState) { return (__assign(__assign({}, prevState), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave })); });
         return function () {
             // Сброс
             setState({});
         };
     }, [active]);
-    return state;
+    return __assign(__assign({}, state), { onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave });
 }

package/__inner__/esm/components/DataList/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, SyntheticEvent } from 'react';
 import type React from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '../../utils/polymorphicComponentWithRef';
@@ -11,7 +11,7 @@ export type DataListPayload<MULTIPLE extends boolean> = {
     name?: string;
     value: DataListSelected<MULTIPLE>;
 };
-export type DataListOnSelect<MULTIPLE extends boolean> = (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
+export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
 export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Имя списка */
     name?: string;

package/__inner__/esm/components/FieldInput/FieldInput.js CHANGED Viewed

@@ -47,6 +47,6 @@ export var FieldInput = polymorphicComponentWithRef(function (_a, ref) {
         setFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }, [onBlur]);
-    return (React.createElement(Tag, __assign({ className: cnFieldInput({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, defaultValue: defaultValue, value: valueProp }, other, { ref: ref }), children));
+    return (React.createElement(Tag, __assign({ className: cnFieldInput({}, [className]), required: required, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, value: valueState }, other, { ref: ref }), children));
 });
 FieldInput.displayName = 'FieldInput';

package/__inner__/esm/components/InputNumber/InputNumber.css CHANGED Viewed

@@ -1,159 +1,99 @@
-/* stylelint-disable */
 .InputNumber {
-  --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);
-  font: var(--textfield-input-font);
-  cursor: text;
-  display: inline-flex;
-  vertical-align: top;
-  flex-direction: column;
+  --input-number-padding: 0 var(--control-padding-3xs) 0
+    var(--textfield-gutter-x);
 }
-.InputNumber > * {
-    cursor: text;
-  }
-.InputNumber-Body {
-    position: relative;
+  .InputNumber_size_2xs {
+      --input-number-button-block-size: 16px;
+      --input-number-button-inline-size: 24px;
+    }
+  .InputNumber_size_xs {
+      --input-number-button-block-size: 16px;
+      --input-number-button-inline-size: 28px;
+    }
+  .InputNumber_size_s {
+      --input-number-button-block-size: 20px;
+      --input-number-button-inline-size: 32px;
+    }
+  .InputNumber_size_m {
+      --input-number-button-block-size: 24px;
+      --input-number-button-inline-size: 40px;
+    }
+  .InputNumber_size_l {
+      --input-number-button-block-size: 28px;
+      --input-number-button-inline-size: 48px;
+    }
+  .InputNumber-Body {
     display: flex;
-    -moz-column-gap: var(--textfield-input-gap);
-         column-gap: var(--textfield-input-gap);
+    position: relative;
     align-items: center;
     box-sizing: border-box;
-    padding: 0 4px 0 var(--textfield-gutter-x);
-    background-color: var(--textfield-background-color);
-    transition: background-color var(--transition-slow);
     color: var(--textfield-color);
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
     border-radius: var(--border-radius-xs);
+    padding: var(--input-number-padding);
+    background-color: var(--textfield-background-color);
+    transition: background-color var(--transition-slow);
   }
-.InputNumber-FieldContainer {
+  .InputNumber-FieldContainer {
     inline-size: 100%;
     position: relative;
   }
-.InputNumber-Field {
+  .InputNumber-Field {
     border: none;
     outline: none;
     display: flex;
+    font: inherit;
+    background: none;
+    inline-size: 100%;
+    box-sizing: border-box;
     -webkit-appearance: textfield;
        -moz-appearance: textfield;
             appearance: textfield;
-    inline-size: 100%;
-    padding: 0;
-    background: none;
     color: var(--textfield-color);
-    box-sizing: border-box;
+    padding: var(--textfield-input-padding);
     block-size: var(--textfield-input-height);
-    font: inherit;
   }
-.InputNumber-Field::placeholder {
+  .InputNumber-Field::placeholder {
       opacity: 1;
       color: var(--color-content-tertiary);
     }
-.InputNumber-Field:-webkit-autofill,
+  .InputNumber-Field:-webkit-autofill,
     .InputNumber-Field:-webkit-autofill:hover,
     .InputNumber-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);
+      box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
     }
-.InputNumber-Field::-webkit-outer-spin-button,
+  .InputNumber-Field::-webkit-outer-spin-button,
     .InputNumber-Field::-webkit-inner-spin-button {
+      margin: 0;
       -webkit-appearance: none;
               appearance: none;
-      margin: 0;
     }
-.InputNumber-Controls {
+  .InputNumber-Controls {
     display: flex;
     flex-direction: column;
   }
-.InputNumber_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 40px;
-      --textfield-input-padding: 4px 0 4px;
-      --textfield-input-font: var(--typography-text-2xs-font);
-      --textfield-input-gap: var(--space-s);
-      --textfield-button-width: 24px;
-      --textfield-button-height: 16px;
-    }
-.InputNumber_size_2xs .FieldLabel_size_2xs {
-        --field-label-top: 12px;
-      }
-.InputNumber_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);
-      --textfield-button-width: 28px;
-      --textfield-button-height: 16px;
-    }
-.InputNumber_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);
-      --textfield-button-width: 32px;
-      --textfield-button-height: 20px;
-    }
-.InputNumber_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);
-      --textfield-button-width: 40px;
-      --textfield-button-height: 24px;
-    }
-.InputNumber_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);
-      --textfield-button-width: 48px;
-      --textfield-button-height: 28px;
-    }
-.InputNumber_fullWidth {
-    inline-size: 100%;
-  }
-.InputNumber_hasLabel .InputNumber-Field {
-      padding: var(--textfield-input-padding);
-      font: var(--textfield-input-font);
-    }
-.InputNumber_hasLabel .InputNumber-Field::placeholder {
-        opacity: 0;
-      }
-.InputNumber_hasLabel .InputNumber-Field:focus::placeholder {
-        opacity: 1;
-      }
-.InputNumber:hover {
-    --textfield-border-color: var(--color-border-main-hover);
-  }
-.InputNumber_focused,
-  .InputNumber_focused:hover {
-    --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
-    --textfield-border-color: var(--color-border-action);
-  }
-.InputNumber_error,
-  .InputNumber_error.InputNumber:hover,
-  .InputNumber_error.InputNumber_focused,
-  .InputNumber_error.InputNumber_focused:hover {
-    --textfield-border-color: var(--color-border-error);
-  }
-.InputNumber_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;
-  }
 .IconButton.InputNumber-Increment,
 .IconButton.InputNumber-Decrement {
-  inline-size: var(--textfield-button-width);
-  block-size: var(--textfield-button-height);
+  inline-size: var(--input-number-button-inline-size);
+  block-size: var(--input-number-button-block-size);
 }
 .IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
     pointer-events: none;
   }

package/__inner__/esm/components/InputNumber/InputNumber.js CHANGED Viewed

@@ -2,14 +2,17 @@ import { __assign, __read, __rest } from "tslib";
 import './InputNumber.css';
 import React, { useState, useRef, forwardRef } from 'react';
 import { SortUpIcon, SortDownIcon } from '@ozen-ui/icons';
+import { useBoolean } from '../../hooks/useBoolean';
 import { useControlled } from '../../hooks/useControlled';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useInterval } from '../../hooks/useInterval';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
+import { FieldControl } from '../FieldControl';
 import { FieldHint } from '../FieldHint';
 import { FieldIcon } from '../FieldIcon';
+import { FieldInput } from '../FieldInput';
 import { FieldLabel } from '../FieldLabel';
 import { Fieldset } from '../Fieldset';
 import { IconButton } from '../IconButton';
@@ -22,15 +25,15 @@ export var InputNumber = forwardRef(function (inProps, ref) {
         name: 'InputNumber',
     });
     var _a = props.size, size = _a === void 0 ? INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? 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, bodyProps = props.bodyProps, other = __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", "bodyProps"]);
-    var _l = __read(useState(false), 2), focused = _l[0], setFocused = _l[1];
-    var _m = __read(useState(null), 2), timeoutId = _m[0], setTimeoutId = _m[1];
-    var _o = __read(useState(null), 2), countDirection = _o[0], setCountDirection = _o[1];
-    var _p = __read(useControlled({
+    var _l = __read(useBoolean(false), 2), focused = _l[0], _m = _l[1], onFocus = _m.on, offFocus = _m.off;
+    var _o = __read(useState(null), 2), timeoutId = _o[0], setTimeoutId = _o[1];
+    var _p = __read(useState(null), 2), countDirection = _p[0], setCountDirection = _p[1];
+    var _q = __read(useControlled({
         value: valueProp,
         name: 'InputNumber',
         state: 'value',
         defaultValue: defaultValue,
-    }), 2), valueState = _p[0], setValueState = _p[1];
+    }), 2), valueState = _q[0], setValueState = _q[1];
     var bodyInnerRef = useRef(null);
     var fieldInnerRef = useRef(null);
     var filled = isValidValue(valueState);
@@ -71,12 +74,12 @@ export var InputNumber = forwardRef(function (inProps, ref) {
     };
     var handleFocus = function (event) {
         var _a;
-        setFocused(true);
+        onFocus();
         (_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);
+        offFocus();
         (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
     };
     /* В некоторых браузерах input[type=number] позволяет вводить
@@ -123,27 +126,17 @@ export var InputNumber = forwardRef(function (inProps, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(null, { id: id, name: name, value: value });
         }
     }, countDirection ? 100 : null);
-    return (React.createElement("div", __assign({}, other, { ref: ref, className: cnInputNumber({
-            fullWidth: fullWidth,
-            size: size,
-            error: error,
-            disabled: disabled,
-            required: required,
-            hasLabel: !!label,
-            focused: focused,
-        }, [className]) }),
+    return (React.createElement(FieldControl, __assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: cnInputNumber({ size: size }, [className]) }),
         React.createElement("label", __assign({}, bodyProps, { className: cnInputNumber('Body'), ref: useMultiRef([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
-            React.createElement(FieldIcon, { className: cnInputNumber('RenderLeft'), icon: renderLeft, size: size }),
+            React.createElement(FieldIcon, { icon: renderLeft }),
             React.createElement("div", { className: cnInputNumber('FieldContainer') },
-                React.createElement(FieldLabel, __assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: cnInputNumber('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label),
-                React.createElement("input", __assign({ id: id, name: name, autoFocus: autoFocus, disabled: disabled, value: valueState, required: required, placeholder: placeholder, className: 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: useMultiRef([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]) }))),
-            React.createElement(FieldIcon, { className: cnInputNumber('RenderRight'), icon: renderRight, size: size }),
+                React.createElement(FieldLabel, __assign({}, labelProps, { ref: useMultiRef([labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref, labelRef]), className: cnInputNumber('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]) }), label),
+                React.createElement(FieldInput, __assign({ id: id, min: min, max: max, step: step, name: name, type: "number", value: valueState, autoFocus: autoFocus, placeholder: placeholder }, inputProps, { onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, onKeyDown: handleKeyDown, ref: useMultiRef([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]), className: cnInputNumber('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
+            React.createElement(FieldIcon, { icon: renderRight }),
             React.createElement("span", { className: cnInputNumber('Controls') },
-                React.createElement(IconButton, { tabIndex: -1, size: size, className: cnInputNumber('Increment'), icon: SortUpIcon, onMouseDown: handleMouseDown('increment'), disabled: disabled, "aria-label": "increment", type: "button", variant: "ghost" }),
-                React.createElement(IconButton, { tabIndex: -1, size: size, icon: SortDownIcon, className: cnInputNumber('Decrement'), onMouseDown: handleMouseDown('decrement'), disabled: disabled, "aria-label": "decrement", type: "button", variant: "ghost" })),
+                React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: SortUpIcon, disabled: disabled, "aria-label": "increment", className: cnInputNumber('Increment'), onMouseDown: handleMouseDown('increment') }),
+                React.createElement(IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: SortDownIcon, disabled: disabled, "aria-label": "decrement", className: cnInputNumber('Decrement'), onMouseDown: handleMouseDown('decrement') })),
             React.createElement(Fieldset, { className: cnInputNumber('Fieldset') })),
-        React.createElement(FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+        React.createElement(FieldHint, null, hint)));
 });
 InputNumber.displayName = 'InputNumber';

package/__inner__/esm/components/InputNumber/types.d.ts CHANGED Viewed

@@ -2,6 +2,13 @@ import type { HTMLAttributes, Ref, ComponentPropsWithRef, ChangeEvent, MouseEven
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { FieldIconProps } from '../FieldIcon';
 import type { FieldLabelProps } from '../FieldLabel';
+type InputNumberPropsDeprecated = {
+    /**
+     * Ссылка на FieldLabel
+     * @deprecated Используйте labelProps.ref
+     * */
+    labelRef?: FieldLabelProps['ref'];
+};
 export type InputNumberSizeVariant = FormElementSizeVariant;
 export type InputElement = ComponentPropsWithRef<'input'>;
 export type InputNumberEmptyValue = '';
@@ -48,8 +55,6 @@ export type InputNumberProps = {
     inputProps?: InputElement & {
         'data-testid'?: string;
     };
-    /** Ссылка на FieldLabel */
-    labelRef?: FieldLabelProps['ref'];
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
     /** Cвойства Body */
@@ -63,4 +68,5 @@ export type InputNumberProps = {
     /** Ссылка на корневой DOM-элемент компонента */
     ref?: Ref<HTMLDivElement>;
     'data-testid'?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+} & InputNumberPropsDeprecated & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+export {};

package/__inner__/esm/components/Table/Table.css CHANGED Viewed

@@ -1,4 +1,5 @@
 .Table {
+  --table-border-color: var(--color-border-main);
   border-spacing: 0;
   background-color: var(--color-background-main);
 }
@@ -64,11 +65,11 @@
     }
   .Table_divider_row .TableCell, .Table_divider_all .TableCell {
-        border-block-end: var(--border-width-s) solid var(--color-border-main);
+        border-block-end: var(--border-width-s) solid var(--table-border-color);
       }
   .Table_divider_column .TableCell:not(:last-child), .Table_divider_all .TableCell:not(:last-child) {
-        border-inline-end: var(--border-width-s) solid var(--color-border-main);
+        border-inline-end: var(--border-width-s) solid var(--table-border-color);
       }
   .Table .TableBody .TableRow:last-child .TableCell {

package/__inner__/esm/components/Table/components/TableRow/TableRow.css CHANGED Viewed

@@ -1,5 +1,5 @@
 .TableRow {
-  transition: background-color var(--transition-slow);
+  transition: background-color var(--transition-default);
 }
   .TableRow_hover:hover {

package/__inner__/esm/components/Tag/Tag.css CHANGED Viewed

@@ -8,6 +8,10 @@
   outline: none;
   border: none;
   text-decoration: none;
+  transition:
+    box-shadow var(--transition-default),
+    background-color var(--transition-default),
+    color var(--transition-default);
 }
 .Tag_size_2xs {
       font: var(--typography-text-3xs-font);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "React component library",
   "files": [
     "*"