@ozen-ui/kit 0.31.0 → 0.32.1

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

@@ -81,7 +81,7 @@ var DataListRender = function (inProps, ref) {
         var _a, _b;
         var current = focused || selected || '';
         var idx = nodes.get(current);
-        if (idx) {
+        if (idx !== undefined) {
             setSelectedElRef({
                 current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
             });

package/__inner__/cjs/components/FieldControl/FieldControl.js

@@ -4,6 +4,8 @@ exports.FieldControl = exports.cnFieldControl = exports.FIELD_CONTROL_DEFAULT_TA
 var tslib_1 = require("tslib");
 require("./FieldControl.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var useHover_1 = require("../../hooks/useHover");
+var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
@@ -15,6 +17,8 @@ exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
         props: inProps,
         name: 'FieldControl',
     });
+    var innerRef = (0, react_1.useRef)(null);
+    var hovered = (0, useHover_1.useHover)(innerRef);
     var _a = props.as, Tag = _a === void 0 ? exports.FIELD_CONTROL_DEFAULT_TAG : _a, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = tslib_1.__rest(props, ["as", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
     var focused = focusedProp;
     var filled = filledProp;
@@ -64,7 +68,7 @@ exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
             filled: filled,
             focused: focused,
             hasLabel: !!label,
-        }, [className]) }, otherProp, { ref: ref }),
+        }, [className]) }, otherProp, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]) }),
         react_1.default.createElement(index_1.FieldControlContext.Provider, { value: [
                 {
                     error: error,
@@ -75,6 +79,7 @@ exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
                     size: size,
                     filled: filled,
                     focused: focused,
+                    hovered: hovered,
                     value: value,
                 },
                 setState,

package/__inner__/cjs/components/FieldControl/FieldControlContext.d.ts

@@ -9,7 +9,9 @@ export type FieldControlContextValue = {
     fullWidth?: boolean;
     filled?: boolean;
     focused?: boolean;
+    hovered?: boolean;
     label?: string;
     value?: string | number;
 };
 export declare const FieldControlContext: React.Context<[FieldControlContextValue, Dispatch<SetStateAction<FieldControlContextValue>>]>;
+export declare const useFieldControl: () => [FieldControlContextValue, Dispatch<SetStateAction<FieldControlContextValue>>];

package/__inner__/cjs/components/FieldControl/FieldControlContext.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldControlContext = void 0;
+exports.useFieldControl = exports.FieldControlContext = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 exports.FieldControlContext = react_1.default.createContext([{}, function () { return undefined; }]);
+var useFieldControl = function () { return (0, react_1.useContext)(exports.FieldControlContext); };
+exports.useFieldControl = useFieldControl;

package/__inner__/cjs/components/FieldHint/FieldHint.js

@@ -10,7 +10,7 @@ exports.FIELD_HINT_DEFAULT_TAG = 'div';
 exports.cnFieldHint = (0, classname_1.cn)('FieldHint');
 exports.FieldHint = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, errorProp = _a.error, disabledProp = _a.disabled, sizeProp = _a.size, className = _a.className, other = tslib_1.__rest(_a, ["children", "error", "disabled", "size", "className"]);
-    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var context = (0, FieldControl_1.useFieldControl)();
     var _b = tslib_1.__read(context, 1), fieldControl = _b[0];
     var Tag = exports.FIELD_HINT_DEFAULT_TAG;
     var size = sizeProp;

package/__inner__/cjs/components/FieldIcon/FieldIcon.js

@@ -12,7 +12,7 @@ exports.FIELD_ICON_DEFAULT_TAG = 'div';
 exports.cnFieldIcon = (0, classname_1.cn)('FieldIcon');
 exports.FieldIcon = (0, react_1.forwardRef)(function (_a, ref) {
     var icon = _a.icon, className = _a.className, sizeProp = _a.size, other = tslib_1.__rest(_a, ["icon", "className", "size"]);
-    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var context = (0, FieldControl_1.useFieldControl)();
     var _b = tslib_1.__read(context, 1), fieldControl = _b[0];
     var Tag = exports.FIELD_ICON_DEFAULT_TAG;
     var size = sizeProp;

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

@@ -13,7 +13,7 @@ exports.cnFieldInput = (0, classname_1.cn)('FieldInput');
 exports.FieldInput = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
     var _b = _a.as, Tag = _b === void 0 ? exports.FIELD_INPUT_DEFAULT_TAG : _b, className = _a.className, requiredProp = _a.required, disabledProp = _a.disabled, valueProp = _a.value, onChange = _a.onChange, defaultValue = _a.defaultValue, children = _a.children, onFocus = _a.onFocus, onBlur = _a.onBlur, other = tslib_1.__rest(_a, ["as", "className", "required", "disabled", "value", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
     var _c = tslib_1.__read((0, react_1.useState)(), 2), focused = _c[0], setFocused = _c[1];
-    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var context = (0, FieldControl_1.useFieldControl)();
     var _d = tslib_1.__read(context, 2), fieldControl = _d[0], setFieldControl = _d[1];
     var _e = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,

package/__inner__/cjs/components/FieldLabel/FieldLabel.js

@@ -11,7 +11,7 @@ exports.FIELD_LABEL_DEFAULT_TAG = 'span';
 exports.cnFieldLabel = (0, classname_1.cn)('FieldLabel');
 exports.FieldLabel = (0, react_1.forwardRef)(function (_a, ref) {
     var focusedProp = _a.focused, children = _a.children, filledProp = _a.filled, shrink = _a.shrink, requiredProp = _a.required, disabledProp = _a.disabled, className = _a.className, sizeProp = _a.size;
-    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var context = (0, FieldControl_1.useFieldControl)();
     var _b = tslib_1.__read(context, 2), fieldControl = _b[0], setFieldControl = _b[1];
     var Tag = exports.FIELD_LABEL_DEFAULT_TAG;
     var size = sizeProp;

package/__inner__/cjs/components/Select/components/SelectConsumer/SelectInputConsumer.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectInputConsumer = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
+var react_1 = tslib_1.__importDefault(require("react"));
 var FieldControl_1 = require("../../../FieldControl");
 var index_1 = require("../../index");
 var SelectInputConsumer = function (_a) {
     var id = _a.id, name = _a.name, _b = _a.value, valueProp = _b === void 0 ? '' : _b, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, inputProps = _a.inputProps, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fieldProps = _a.fieldProps, renderedValue = _a.renderedValue;
-    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var context = (0, FieldControl_1.useFieldControl)();
     var _c = tslib_1.__read(context, 1), fieldControl = _c[0];
     var disabled = fieldControl.disabled, required = fieldControl.required, filled = fieldControl.filled, focused = fieldControl.focused, label = fieldControl.label;
     var hasLabel = !!label;

package/__inner__/cjs/components/Textarea/components/TextareaConsumer.js

@@ -14,7 +14,7 @@ var index_1 = require("./index");
 var TextareaConsumer = function (_a) {
     var labelProps = _a.labelProps, labelRef = _a.labelRef, maxLength = _a.maxLength, label = _a.label, id = _a.id, name = _a.name, cols = _a.cols, rows = _a.rows, disabled = _a.disabled, valueProp = _a.value, required = _a.required, defaultValue = _a.defaultValue, placeholder = _a.placeholder, autoFocus = _a.autoFocus, textareaProps = _a.textareaProps, onChange = _a.onChange, textareaRef = _a.textareaRef, expand = _a.expand, hint = _a.hint;
     var fieldRef = (0, react_1.useRef)(null);
-    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var context = (0, FieldControl_1.useFieldControl)();
     var _b = tslib_1.__read(context, 1), value = _b[0].value;
     // autoSize
     (0, react_1.useEffect)(function () {

package/__inner__/cjs/components/Textarea/components/TextareaCounter.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaCounter = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
+var react_1 = tslib_1.__importDefault(require("react"));
 var FieldControl_1 = require("../../FieldControl");
 var index_1 = require("../index");
 var TextareaCounter = function (_a) {
     var _b, _c, _d;
     var maxLength = _a.maxLength, disabledProp = _a.disabled;
-    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var context = (0, FieldControl_1.useFieldControl)();
     var _e = tslib_1.__read(context, 1), fieldControl = _e[0];
     var disabled = disabledProp;
     // maxLength

package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDark.css

@@ -64,8 +64,8 @@
   --color-background-action-secondary-pressed: #aeb1c4;
   --color-background-action-secondary-active-disabled: #636574;
   --color-background-action-secondary-light: #2c2c33;
-  --color-background-action-secondary-light-hover: #636574;
-  --color-background-action-secondary-light-pressed: #474853;
+  --color-background-action-secondary-light-hover: #474853;
+  --color-background-action-secondary-light-pressed: #636574;
   --color-background-accent-action-secondary-light: #2c2c33;
   --color-background-accent-action-secondary-light-hover: #474853;
   --color-background-accent-action-secondary-light-pressed: #636574;
@@ -118,10 +118,10 @@
   --color-border-secondary-pressed: #636574;
   --color-border-disabled: #2c2c33;
   --color-border-ghost-disabled: rgb(255 255 255 / 40%);
-  --color-border-focused: #0e290f;
-  --color-border-action: #067607;
-  --color-border-action-hover: #0a540b;
-  --color-border-action-pressed: #0d310e;
+  --color-border-focused: #0d310e;
+  --color-border-action: #039904;
+  --color-border-action-hover: #067607;
+  --color-border-action-pressed: #0a540b;
   --color-border-action-secondary: #d7d8e1;
   --color-border-action-secondary-hover: #c2c5d3;
   --color-border-action-secondary-pressed: #aeb1c4;
@@ -132,7 +132,7 @@
   --color-border-main-on: #fff;
   --color-border-accent-main: #989aa5;
   --color-border-accent-disabled: #5f6374;
-  --color-border-accent-focused: #0e290f;
+  --color-border-accent-focused: #0d310e;
   --color-accent-main-hover: #1b1c24;
   --color-accent-main-pressed: #252732;
   --color-accent-primary-hover: #252732;

package/__inner__/cjs/hooks/useHover/index.d.ts

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

package/__inner__/cjs/hooks/useHover/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useHover"), exports);

package/__inner__/cjs/hooks/useHover/useHover.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from 'react';
+export type UseHoverOptions = {
+    /** Функция обратного вызова на событие перехода курсора на целевой элемент */
+    onEnter?: (e: PointerEvent) => void;
+    /** Функция обратного вызова на событие покидания курсора с целевого элемента */
+    onLeave?: (e: PointerEvent) => void;
+    /** Признак активности обработчика события, используется для повышения производительности. */
+    active?: boolean;
+};
+export declare function useHover<T extends HTMLElement = HTMLElement>(
+/** Ссылка на элемент к которому будет привязано событие */
+elRef: RefObject<T>, 
+/** Дополнительные опции */
+options?: UseHoverOptions): boolean;

package/__inner__/cjs/hooks/useHover/useHover.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHover = void 0;
+var tslib_1 = require("tslib");
+var useBoolean_1 = require("../useBoolean");
+var useEventListener_1 = require("../useEventListener");
+function useHover(
+/** Ссылка на элемент к которому будет привязано событие */
+elRef, 
+/** Дополнительные опции */
+options) {
+    if (options === void 0) { options = { active: true }; }
+    var onLeave = options.onLeave, onEnter = options.onEnter, active = options.active;
+    var _a = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), value = _a[0], _b = _a[1], on = _b.on, off = _b.off;
+    var handleEnter = function (e) {
+        on();
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter(e);
+    };
+    var handleLeave = function (e) {
+        off();
+        onLeave === null || onLeave === void 0 ? void 0 : onLeave(e);
+    };
+    (0, useEventListener_1.useEventListener)({
+        handler: handleEnter,
+        element: elRef,
+        eventName: 'pointerenter',
+        active: active,
+    });
+    (0, useEventListener_1.useEventListener)({
+        handler: handleLeave,
+        element: elRef,
+        eventName: 'pointerleave',
+        active: active,
+    });
+    return value;
+}
+exports.useHover = useHover;

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

@@ -78,7 +78,7 @@ var DataListRender = function (inProps, ref) {
         var _a, _b;
         var current = focused || selected || '';
         var idx = nodes.get(current);
-        if (idx) {
+        if (idx !== undefined) {
             setSelectedElRef({
                 current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
             });

package/__inner__/esm/components/FieldControl/FieldControl.js

@@ -1,6 +1,8 @@
 import { __assign, __read, __rest } from "tslib";
 import './FieldControl.css';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+import { useHover } from '../../hooks/useHover';
+import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
@@ -12,6 +14,8 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'FieldControl',
     });
+    var innerRef = useRef(null);
+    var hovered = useHover(innerRef);
     var _a = props.as, Tag = _a === void 0 ? FIELD_CONTROL_DEFAULT_TAG : _a, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = __rest(props, ["as", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
     var focused = focusedProp;
     var filled = filledProp;
@@ -61,7 +65,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
             filled: filled,
             focused: focused,
             hasLabel: !!label,
-        }, [className]) }, otherProp, { ref: ref }),
+        }, [className]) }, otherProp, { ref: useMultiRef([ref, innerRef]) }),
         React.createElement(FieldControlContext.Provider, { value: [
                 {
                     error: error,
@@ -72,6 +76,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
                     size: size,
                     filled: filled,
                     focused: focused,
+                    hovered: hovered,
                     value: value,
                 },
                 setState,

package/__inner__/esm/components/FieldControl/FieldControlContext.d.ts

@@ -9,7 +9,9 @@ export type FieldControlContextValue = {
     fullWidth?: boolean;
     filled?: boolean;
     focused?: boolean;
+    hovered?: boolean;
     label?: string;
     value?: string | number;
 };
 export declare const FieldControlContext: React.Context<[FieldControlContextValue, Dispatch<SetStateAction<FieldControlContextValue>>]>;
+export declare const useFieldControl: () => [FieldControlContextValue, Dispatch<SetStateAction<FieldControlContextValue>>];

package/__inner__/esm/components/FieldControl/FieldControlContext.js

@@ -1,2 +1,3 @@
-import React from 'react';
+import React, { useContext } from 'react';
 export var FieldControlContext = React.createContext([{}, function () { return undefined; }]);
+export var useFieldControl = function () { return useContext(FieldControlContext); };

package/__inner__/esm/components/FieldHint/FieldHint.js

@@ -1,13 +1,13 @@
 import { __assign, __read, __rest } from "tslib";
 import './FieldHint.css';
-import React, { forwardRef, useContext, Children } from 'react';
+import React, { forwardRef, Children } from 'react';
 import { cn } from '../../utils/classname';
-import { FieldControlContext } from '../FieldControl';
+import { useFieldControl } from '../FieldControl';
 export var FIELD_HINT_DEFAULT_TAG = 'div';
 export var cnFieldHint = cn('FieldHint');
 export var FieldHint = forwardRef(function (_a, ref) {
     var children = _a.children, errorProp = _a.error, disabledProp = _a.disabled, sizeProp = _a.size, className = _a.className, other = __rest(_a, ["children", "error", "disabled", "size", "className"]);
-    var context = useContext(FieldControlContext);
+    var context = useFieldControl();
     var _b = __read(context, 1), fieldControl = _b[0];
     var Tag = FIELD_HINT_DEFAULT_TAG;
     var size = sizeProp;

package/__inner__/esm/components/FieldIcon/FieldIcon.js

@@ -1,15 +1,15 @@
 import { __assign, __read, __rest } from "tslib";
 import './FieldIcon.css';
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef } from 'react';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
 import { renderContent } from '../../utils/renderContent';
-import { FieldControlContext } from '../FieldControl';
+import { useFieldControl } from '../FieldControl';
 export var FIELD_ICON_DEFAULT_TAG = 'div';
 export var cnFieldIcon = cn('FieldIcon');
 export var FieldIcon = forwardRef(function (_a, ref) {
     var icon = _a.icon, className = _a.className, sizeProp = _a.size, other = __rest(_a, ["icon", "className", "size"]);
-    var context = useContext(FieldControlContext);
+    var context = useFieldControl();
     var _b = __read(context, 1), fieldControl = _b[0];
     var Tag = FIELD_ICON_DEFAULT_TAG;
     var size = sizeProp;

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

@@ -1,16 +1,16 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useControlled } from '../../hooks/useControlled';
 import { useIsomorphicEffect } from '../../hooks/useIsomorphicEffect';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
-import { FieldControlContext } from '../FieldControl';
+import { useFieldControl } from '../FieldControl';
 export var FIELD_INPUT_DEFAULT_TAG = 'input';
 export var cnFieldInput = cn('FieldInput');
 export var FieldInput = polymorphicComponentWithRef(function (_a, ref) {
     var _b = _a.as, Tag = _b === void 0 ? FIELD_INPUT_DEFAULT_TAG : _b, className = _a.className, requiredProp = _a.required, disabledProp = _a.disabled, valueProp = _a.value, onChange = _a.onChange, defaultValue = _a.defaultValue, children = _a.children, onFocus = _a.onFocus, onBlur = _a.onBlur, other = __rest(_a, ["as", "className", "required", "disabled", "value", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
     var _c = __read(useState(), 2), focused = _c[0], setFocused = _c[1];
-    var context = useContext(FieldControlContext);
+    var context = useFieldControl();
     var _d = __read(context, 2), fieldControl = _d[0], setFieldControl = _d[1];
     var _e = __read(useControlled({
         value: valueProp,

package/__inner__/esm/components/FieldLabel/FieldLabel.js

@@ -1,14 +1,14 @@
 import { __assign, __read } from "tslib";
 import './FieldLabel.css';
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef } from 'react';
 import { useIsomorphicEffect } from '../../hooks/useIsomorphicEffect';
 import { cn } from '../../utils/classname';
-import { FieldControlContext } from '../FieldControl';
+import { useFieldControl } from '../FieldControl';
 export var FIELD_LABEL_DEFAULT_TAG = 'span';
 export var cnFieldLabel = cn('FieldLabel');
 export var FieldLabel = forwardRef(function (_a, ref) {
     var focusedProp = _a.focused, children = _a.children, filledProp = _a.filled, shrink = _a.shrink, requiredProp = _a.required, disabledProp = _a.disabled, className = _a.className, sizeProp = _a.size;
-    var context = useContext(FieldControlContext);
+    var context = useFieldControl();
     var _b = __read(context, 2), fieldControl = _b[0], setFieldControl = _b[1];
     var Tag = FIELD_LABEL_DEFAULT_TAG;
     var size = sizeProp;

package/__inner__/esm/components/Select/components/SelectConsumer/SelectInputConsumer.js

@@ -1,10 +1,10 @@
 import { __assign, __read } from "tslib";
-import React, { useContext } from 'react';
-import { FieldControlContext } from '../../../FieldControl';
+import React from 'react';
+import { useFieldControl } from '../../../FieldControl';
 import { cnSelect } from '../../index';
 export var SelectInputConsumer = function (_a) {
     var id = _a.id, name = _a.name, _b = _a.value, valueProp = _b === void 0 ? '' : _b, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, inputProps = _a.inputProps, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fieldProps = _a.fieldProps, renderedValue = _a.renderedValue;
-    var context = useContext(FieldControlContext);
+    var context = useFieldControl();
     var _c = __read(context, 1), fieldControl = _c[0];
     var disabled = fieldControl.disabled, required = fieldControl.required, filled = fieldControl.filled, focused = fieldControl.focused, label = fieldControl.label;
     var hasLabel = !!label;

package/__inner__/esm/components/Textarea/components/TextareaConsumer.js

@@ -1,7 +1,7 @@
 import { __assign, __read } from "tslib";
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useMultiRef } from '../../../hooks/useMultiRef';
-import { FieldControlContext } from '../../FieldControl';
+import { useFieldControl } from '../../FieldControl';
 import { FieldHint } from '../../FieldHint';
 import { FieldInput } from '../../FieldInput';
 import { FieldLabel } from '../../FieldLabel';
@@ -11,7 +11,7 @@ import { TextareaCounter } from './index';
 export var TextareaConsumer = function (_a) {
     var labelProps = _a.labelProps, labelRef = _a.labelRef, maxLength = _a.maxLength, label = _a.label, id = _a.id, name = _a.name, cols = _a.cols, rows = _a.rows, disabled = _a.disabled, valueProp = _a.value, required = _a.required, defaultValue = _a.defaultValue, placeholder = _a.placeholder, autoFocus = _a.autoFocus, textareaProps = _a.textareaProps, onChange = _a.onChange, textareaRef = _a.textareaRef, expand = _a.expand, hint = _a.hint;
     var fieldRef = useRef(null);
-    var context = useContext(FieldControlContext);
+    var context = useFieldControl();
     var _b = __read(context, 1), value = _b[0].value;
     // autoSize
     useEffect(function () {

package/__inner__/esm/components/Textarea/components/TextareaCounter.js

@@ -1,11 +1,11 @@
 import { __read } from "tslib";
-import React, { useContext } from 'react';
-import { FieldControlContext } from '../../FieldControl';
+import React from 'react';
+import { useFieldControl } from '../../FieldControl';
 import { cnTextarea } from '../index';
 export var TextareaCounter = function (_a) {
     var _b, _c, _d;
     var maxLength = _a.maxLength, disabledProp = _a.disabled;
-    var context = useContext(FieldControlContext);
+    var context = useFieldControl();
     var _e = __read(context, 1), fieldControl = _e[0];
     var disabled = disabledProp;
     // maxLength

package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDark.css

@@ -64,8 +64,8 @@
   --color-background-action-secondary-pressed: #aeb1c4;
   --color-background-action-secondary-active-disabled: #636574;
   --color-background-action-secondary-light: #2c2c33;
-  --color-background-action-secondary-light-hover: #636574;
-  --color-background-action-secondary-light-pressed: #474853;
+  --color-background-action-secondary-light-hover: #474853;
+  --color-background-action-secondary-light-pressed: #636574;
   --color-background-accent-action-secondary-light: #2c2c33;
   --color-background-accent-action-secondary-light-hover: #474853;
   --color-background-accent-action-secondary-light-pressed: #636574;
@@ -118,10 +118,10 @@
   --color-border-secondary-pressed: #636574;
   --color-border-disabled: #2c2c33;
   --color-border-ghost-disabled: rgb(255 255 255 / 40%);
-  --color-border-focused: #0e290f;
-  --color-border-action: #067607;
-  --color-border-action-hover: #0a540b;
-  --color-border-action-pressed: #0d310e;
+  --color-border-focused: #0d310e;
+  --color-border-action: #039904;
+  --color-border-action-hover: #067607;
+  --color-border-action-pressed: #0a540b;
   --color-border-action-secondary: #d7d8e1;
   --color-border-action-secondary-hover: #c2c5d3;
   --color-border-action-secondary-pressed: #aeb1c4;
@@ -132,7 +132,7 @@
   --color-border-main-on: #fff;
   --color-border-accent-main: #989aa5;
   --color-border-accent-disabled: #5f6374;
-  --color-border-accent-focused: #0e290f;
+  --color-border-accent-focused: #0d310e;
   --color-accent-main-hover: #1b1c24;
   --color-accent-main-pressed: #252732;
   --color-accent-primary-hover: #252732;

package/__inner__/esm/hooks/useHover/index.d.ts

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

package/__inner__/esm/hooks/useHover/index.js

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

package/__inner__/esm/hooks/useHover/useHover.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from 'react';
+export type UseHoverOptions = {
+    /** Функция обратного вызова на событие перехода курсора на целевой элемент */
+    onEnter?: (e: PointerEvent) => void;
+    /** Функция обратного вызова на событие покидания курсора с целевого элемента */
+    onLeave?: (e: PointerEvent) => void;
+    /** Признак активности обработчика события, используется для повышения производительности. */
+    active?: boolean;
+};
+export declare function useHover<T extends HTMLElement = HTMLElement>(
+/** Ссылка на элемент к которому будет привязано событие */
+elRef: RefObject<T>, 
+/** Дополнительные опции */
+options?: UseHoverOptions): boolean;

package/__inner__/esm/hooks/useHover/useHover.js

@@ -0,0 +1,33 @@
+import { __read } from "tslib";
+import { useBoolean } from '../useBoolean';
+import { useEventListener } from '../useEventListener';
+export function useHover(
+/** Ссылка на элемент к которому будет привязано событие */
+elRef, 
+/** Дополнительные опции */
+options) {
+    if (options === void 0) { options = { active: true }; }
+    var onLeave = options.onLeave, onEnter = options.onEnter, active = options.active;
+    var _a = __read(useBoolean(false), 2), value = _a[0], _b = _a[1], on = _b.on, off = _b.off;
+    var handleEnter = function (e) {
+        on();
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter(e);
+    };
+    var handleLeave = function (e) {
+        off();
+        onLeave === null || onLeave === void 0 ? void 0 : onLeave(e);
+    };
+    useEventListener({
+        handler: handleEnter,
+        element: elRef,
+        eventName: 'pointerenter',
+        active: active,
+    });
+    useEventListener({
+        handler: handleLeave,
+        element: elRef,
+        eventName: 'pointerleave',
+        active: active,
+    });
+    return value;
+}

package/package.json

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

package/useHover/package.json

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