@ozen-ui/kit 0.50.2 → 0.51.0

package/__inner__/cjs/components/Autocomplete/helper.d.ts

@@ -32,6 +32,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     disableShowChevron?: boolean | undefined;
     dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
 } & {
+    error?: boolean | undefined;
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     className?: string | undefined;
@@ -40,7 +41,6 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     disabled?: boolean | undefined;
     placeholder?: string | undefined;
     required?: boolean | undefined;
-    error?: boolean | undefined;
     fullWidth?: boolean | undefined;
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
@@ -132,6 +132,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     disableShowChevron?: boolean | undefined;
     dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
 } & {
+    error?: boolean | undefined;
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     className?: string | undefined;
@@ -140,7 +141,6 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     disabled?: boolean | undefined;
     placeholder?: string | undefined;
     required?: boolean | undefined;
-    error?: boolean | undefined;
     fullWidth?: boolean | undefined;
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {

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

@@ -1,6 +1,6 @@
 export declare const BADGE_DEFAULT_SIZE = "s";
 export declare const BADGE_DEFAULT_TAG = "div";
 export declare const BADGE_DEFAULT_VARIANT = "standard";
-export declare const BADGE_DEFAULT_COLOR = "defaultDark";
+export declare const BADGE_DEFAULT_COLOR = "neutralDark";
 export declare const BADGE_DEFAULT_HORIZONTAL_ORIGIN = "right";
 export declare const BADGE_DEFAULT_VERTICAL_ORIGIN = "top";

package/__inner__/cjs/components/Badge/constants.js

@@ -4,6 +4,6 @@ exports.BADGE_DEFAULT_VERTICAL_ORIGIN = exports.BADGE_DEFAULT_HORIZONTAL_ORIGIN
 exports.BADGE_DEFAULT_SIZE = 's';
 exports.BADGE_DEFAULT_TAG = 'div';
 exports.BADGE_DEFAULT_VARIANT = 'standard';
-exports.BADGE_DEFAULT_COLOR = 'defaultDark';
+exports.BADGE_DEFAULT_COLOR = 'neutralDark';
 exports.BADGE_DEFAULT_HORIZONTAL_ORIGIN = 'right';
 exports.BADGE_DEFAULT_VERTICAL_ORIGIN = 'top';

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

@@ -16,7 +16,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
     onError?: import("./types").DatePickerPropOnError | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
     open?: boolean | undefined;
     defaultOpen?: undefined;
 }, "ref"> | Omit<{
@@ -33,7 +33,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
     onError?: import("./types").DatePickerPropOnError | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
     open?: undefined;
     defaultOpen?: boolean | undefined;
 }, "ref">) & React.RefAttributes<HTMLDivElement>>;

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

@@ -68,7 +68,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
 } & {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "error" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
 }> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Tooltip/Tooltip.css

@@ -1,31 +1,31 @@
 /* stylelint-disable */
 .Tooltip {
   max-inline-size: 300px;
-  color: var(--color-content-primary);
 }
+.Tooltip-Content {
+    color: var(--color-content-primary);
+  }
+.Tooltip-Content_size_xs {
+        font: var(--typography-text-xs-font);
+        letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+        text-transform: var(--typography-text-xs-text_transform, none);
+      }
+.Tooltip-Content_size_s {
+        font: var(--typography-text-s-font);
+        letter-spacing: var(--typography-text-s-letter_spacing, 0);
+        text-transform: var(--typography-text-s-text_transform, none);
+      }
+.Tooltip-Content_variant_dark,
+    .Tooltip-Content_inverse {
+      color: var(--color-content-primary-inverse);
+    }
 .Tooltip_size_xs {
       min-inline-size: 28px;
       min-block-size: 28px;
       padding: var(--spacing-2xs) var(--spacing-xs);
-
-      font: var(--typography-text-xs-font);
-
-      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
-
-      text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Tooltip_size_s {
       min-inline-size: 40px;
       min-block-size: 40px;
       padding: var(--spacing-xs) var(--spacing-s);
-
-      font: var(--typography-text-s-font);
-
-      letter-spacing: var(--typography-text-s-letter_spacing, 0);
-
-      text-transform: var(--typography-text-s-text_transform, none);
     }
-.Tooltip_variant_dark,
-  .Tooltip_inverse {
-    color: var(--color-content-primary-inverse);
-  }

package/__inner__/cjs/components/Tooltip/Tooltip.js

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 require("./Tooltip.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var logger_1 = require("@ozen-ui/logger");
+var useBoolean_1 = require("../../hooks/useBoolean");
 var useControlled_1 = require("../../hooks/useControlled");
 var useDebounceCallback_1 = require("../../hooks/useDebounceCallback");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
@@ -16,14 +17,14 @@ var constants_1 = require("./constants");
 exports.cnTooltip = (0, classname_1.cn)('Tooltip');
 exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Tooltip' });
-    var _a = props.trigger, trigger = _a === void 0 ? constants_1.TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? constants_1.TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_INVERSE : _j, variant = props.variant, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, _k = props.as, as = _k === void 0 ? constants_1.TOOLTIP_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
+    var _a = props.trigger, trigger = _a === void 0 ? constants_1.TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? constants_1.TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_INVERSE : _j, _k = props.as, as = _k === void 0 ? constants_1.TOOLTIP_DEFAULT_TAG : _k, variant = props.variant, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, other = tslib_1.__rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "as", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose"]);
     if (process.env.NODE_ENV !== 'production' && variant) {
         (0, logger_1.deprecate)('Свойство «variant» устарело. Для замены используйте «inverse».');
     }
-    var _l = tslib_1.__read((0, react_1.useState)(), 2), delay = _l[0], setDelay = _l[1];
-    var _m = tslib_1.__read((0, react_1.useState)(), 2), hasFocus = _m[0], setHasFocus = _m[1];
-    var _o = tslib_1.__read((0, react_1.useState)(), 2), hasHover = _o[0], setHasHover = _o[1];
     var anchorRef = (0, react_1.useRef)(null);
+    var _l = tslib_1.__read((0, react_1.useState)(), 2), delay = _l[0], setDelay = _l[1];
+    var _m = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _m[0], setFocused = _m[1];
+    var _o = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), hovered = _o[0], setHovered = _o[1];
     var modifiers = [
         {
             name: 'arrow',
@@ -38,22 +39,27 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
         name: 'Tooltip',
         state: 'open',
     }), 2), openState = _p[0], setOpenState = _p[1];
-    (0, react_1.useEffect)(function () {
-        setDelay(openState ? delayLeave : delayEnter);
-    }, [openState, delayEnter, delayLeave]);
-    var handleOpen = function (open) {
-        if (disabled) {
+    var setOpen = function (open) {
+        if (disabled && open)
             return;
-        }
-        if (open) {
+        if (open)
             onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-        }
-        else {
+        else
             onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
         setOpenState(open);
     };
-    var _q = tslib_1.__read((0, useDebounceCallback_1.useDebounceCallback)(handleOpen, delay), 1), debounceSetOpen = _q[0];
+    var _q = tslib_1.__read((0, useDebounceCallback_1.useDebounceCallback)(setOpen, delay), 2), setOpenWithDelay = _q[0], clearTimeout = _q[1];
+    var closeWithDelay = function () { return setOpenWithDelay(false); };
+    (0, react_1.useEffect)(function () {
+        setDelay(openState ? delayLeave : delayEnter);
+    }, [openState, delayEnter, delayLeave]);
+    (0, react_1.useEffect)(function () {
+        if (!disabled)
+            return;
+        clearTimeout();
+        if (openState)
+            setOpen(false);
+    }, [disabled, openState]);
     var resolveChildren = (0, react_1.useMemo)(function () {
         return typeof children !== 'object' || shouldWrapChildren ? (react_1.default.createElement("span", null, children)) : (children);
     }, [children, shouldWrapChildren]);
@@ -61,36 +67,34 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     var childrenMultiRef = (0, useMultiRef_1.useMultiRef)([anchorRef, childrenRef]);
     var handleMouseEnter = function () {
         if (trigger === 'hover' || trigger === 'hover&focus') {
-            setHasHover(true);
-            debounceSetOpen(true);
+            setHovered.on();
+            setOpenWithDelay(true);
         }
     };
     var handleMouseLeave = function () {
         if (trigger === 'hover' || trigger === 'hover&focus') {
-            setHasHover(false);
-            if (!hasFocus)
-                debounceSetOpen(false);
+            setHovered.off();
+            if (!focused)
+                setOpenWithDelay(false);
         }
     };
     var handleClick = function () {
-        if (trigger === 'click') {
-            debounceSetOpen(!openState);
-        }
+        if (trigger === 'click')
+            setOpenWithDelay(!openState);
     };
     var handleFocus = function () {
         if (trigger === 'focus' || trigger === 'hover&focus') {
-            setHasFocus(true);
-            debounceSetOpen(true);
+            setFocused.on();
+            setOpenWithDelay(true);
         }
     };
     var handleBlur = function () {
         if (trigger === 'focus' || trigger === 'hover&focus') {
-            setHasFocus(false);
-            if (!hasHover)
-                debounceSetOpen(false);
+            setFocused.off();
+            if (!hovered)
+                setOpenWithDelay(false);
         }
     };
-    var handleClose = function () { return debounceSetOpen(false); };
     var composeChildrenProps = (0, react_1.useMemo)(function () {
         var onClick = childrenProps.onClick, onFocus = childrenProps.onFocus, onBlur = childrenProps.onBlur, onMouseEnter = childrenProps.onMouseEnter, onMouseLeave = childrenProps.onMouseLeave;
         return {
@@ -117,6 +121,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
             },
         };
     }, [
+        trigger,
         childrenProps,
         childrenMultiRef,
         handleMouseEnter,
@@ -127,8 +132,9 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.cloneElement(resolveChildren, composeChildrenProps),
-        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
+        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState, onClose: closeWithDelay, className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
-            }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
+            }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }),
+            react_1.default.createElement("div", { className: (0, exports.cnTooltip)('Content', { size: size, variant: variant, inverse: inverse }) }, label))));
 });
 exports.Tooltip.displayName = 'Tooltip';

package/__inner__/cjs/components/Typography/Typography.css

@@ -29,6 +29,9 @@
 .Typography_align_initial {
       text-align: initial;
     }
+.Typography_align_inherit {
+      text-align: inherit;
+    }
 .Typography_color_primary {
       color: var(--color-content-primary);
     }
@@ -119,6 +122,9 @@
 .Typography_color_accentDisabled {
       color: var(--color-content-accent-disabled);
     }
+.Typography_color_inherit {
+      color: inherit;
+    }
 .Typography_variant_heading-4xl {
       font: var(--typography-heading-4xl-font);
       letter-spacing: var(--typography-heading-4xl-letter_spacing, 0);
@@ -327,6 +333,11 @@
 .Typography_variant_caption-3xs_1.Typography_defaultMargin {
         margin-block-end: var(--spacing-3xs);
       }
+.Typography_variant_inherit {
+      font: inherit;
+      letter-spacing: inherit;
+      text-transform: inherit;
+    }
 .Typography_link {
     color: var(--color-content-action);
   }

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

@@ -1,13 +1,13 @@
 import './Typography.css';
 import type { ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
-export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1"];
+export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1", "inherit"];
 export type TypographyVariant = (typeof typographyVariant)[number];
 export declare const typographyDisplayVariant: readonly ["block", "inline", "inlineBlock"];
 export type TypographyDisplayVariant = (typeof typographyDisplayVariant)[number];
-export declare const typographyAlignVariant: readonly ["left", "center", "right"];
+export declare const typographyAlignVariant: readonly ["left", "center", "right", "initial", "inherit"];
 export type TypographyAlignVariant = (typeof typographyAlignVariant)[number];
-export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionPressed", "actionHover", "actionDark", "actionOn", "error", "errorHover", "errorPressed", "errorDark", "warning", "warningHover", "warningPressed", "warningDark", "success", "successHover", "successDark", "successPressed", "info", "infoHover", "infoPressed", "infoDark", "primaryInverse", "accentPrimary", "accentSecondary", "accentDisabled"];
+export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionPressed", "actionHover", "actionDark", "actionOn", "error", "errorHover", "errorPressed", "errorDark", "warning", "warningHover", "warningPressed", "warningDark", "success", "successHover", "successDark", "successPressed", "info", "infoHover", "infoPressed", "infoDark", "primaryInverse", "accentPrimary", "accentSecondary", "accentDisabled", "inherit"];
 export type TypographyColorVariant = (typeof typographyColorVariant)[number];
 export type TypographyBaseProps = {
     /** Вариант типографики */

package/__inner__/cjs/components/Typography/Typography.js

@@ -36,13 +36,20 @@ exports.typographyVariant = [
     'text-3xs_1',
     'caption-3xs',
     'caption-3xs_1',
+    'inherit',
 ];
 exports.typographyDisplayVariant = [
     'block',
     'inline',
     'inlineBlock',
 ];
-exports.typographyAlignVariant = ['left', 'center', 'right'];
+exports.typographyAlignVariant = [
+    'left',
+    'center',
+    'right',
+    'initial',
+    'inherit',
+];
 exports.typographyColorVariant = [
     'primary',
     'secondary',
@@ -74,6 +81,7 @@ exports.typographyColorVariant = [
     'accentPrimary',
     'accentSecondary',
     'accentDisabled',
+    'inherit',
 ];
 exports.cnTypography = (0, classname_1.cn)('Typography');
 exports.Typography = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {

package/__inner__/cjs/components/Typography/utils.js

@@ -28,4 +28,5 @@ exports.matchVariantToTag = {
     'text-3xs_1': 'p',
     'caption-3xs': 'span',
     'caption-3xs_1': 'span',
+    inherit: 'p',
 };

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

@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from 'react';
 export type UseBooleanControllers = {
     /** Установить значение в {true} */
     on: () => void;
@@ -5,6 +6,8 @@ export type UseBooleanControllers = {
     off: () => void;
     /** Перевести значение в противоположное состояние */
     toggle: () => void;
+    /** Перевести значение в собственное состояние */
+    set: Dispatch<SetStateAction<boolean>>;
 };
 export type UseBooleanReturnValue = [boolean, UseBooleanControllers];
 export declare function useBoolean(

package/__inner__/cjs/hooks/useBoolean/useBoolean.js

@@ -11,6 +11,6 @@ defaultValue) {
     var on = (0, react_1.useCallback)(function () { return setValue(true); }, []);
     var off = (0, react_1.useCallback)(function () { return setValue(false); }, []);
     var toggle = (0, react_1.useCallback)(function () { return setValue(function (value) { return !value; }); }, []);
-    return [value, { on: on, off: off, toggle: toggle }];
+    return [value, { on: on, off: off, toggle: toggle, set: setValue }];
 }
 exports.useBoolean = useBoolean;

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

@@ -8,9 +8,5 @@ export interface UseControlledProps<T = unknown> {
     /** Имя свойства для предупреждения */
     state?: string;
 }
-/**
- * Управляет значением компонента
- * при контролируемом и неконтролируемом
- * поведении
- * */
+/** Управляет значением компонента при контролируемом и неконтролируемом поведении */
 export declare const useControlled: <T = unknown>({ value: valueProp, defaultValue: defaultProp, name, state, }: UseControlledProps<T>) => [T | undefined, (newValue: T) => void, boolean];

package/__inner__/cjs/hooks/useControlled/useControlled.js

@@ -4,37 +4,31 @@ exports.useControlled = void 0;
 var tslib_1 = require("tslib");
 /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
 var react_1 = require("react");
-/**
- * Управляет значением компонента
- * при контролируемом и неконтролируемом
- * поведении
- * */
+var logger_1 = require("@ozen-ui/logger");
+/** Управляет значением компонента при контролируемом и неконтролируемом поведении */
 var useControlled = function (_a) {
     var valueProp = _a.value, defaultProp = _a.defaultValue, name = _a.name, _b = _a.state, state = _b === void 0 ? 'value' : _b;
-    /**
-     * Определение контролируемого поведения
-     * при первом рендере
-     * (неизменяемое значение)
-     * */
+    /** Определение контролируемого поведения при первом рендере (неизменяемое значение) */
     var isControlled = (0, react_1.useRef)(valueProp !== undefined).current;
     var _c = tslib_1.__read((0, react_1.useState)(defaultProp), 2), valueState = _c[0], setValue = _c[1];
     var value = isControlled ? valueProp : valueState;
     if (process.env.NODE_ENV !== 'production') {
         (0, react_1.useEffect)(function () {
             if (isControlled !== (valueProp !== undefined)) {
-                console.error([
-                    "\u00D6zen-UI: \u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 '".concat(state, "' \u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 ").concat(name, " \u043F\u043E\u043C\u0435\u043D\u044F\u043B\u043E\u0441\u044C \u0441 ").concat(isControlled ? '' : 'не', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u043D\u0430 ").concat(isControlled ? 'не' : '', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0435."),
-                    'Компоненты не должны переключаться с неконтролируемого поведения в контролируемое, или наоборот.',
-                    'Поведение определяется после первого рендера и является контролируемым, если значение не «undefined».',
+                logger_1.logger.error([
+                    "\u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 \u00AB".concat(state, "\u00BB \u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 ").concat(name, " \u043F\u043E\u043C\u0435\u043D\u044F\u043B\u043E\u0441\u044C \u0441 ").concat(isControlled ? '' : 'не', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u043D\u0430 ").concat(isControlled ? 'не' : '', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0435."),
+                    "\n",
+                    'Компоненты не должны переключаться с неконтролируемого поведения в контролируемое, или наоборот. Поведение определяется после первого рендера и является контролируемым, если значение не «undefined».',
                 ].join('\n'));
             }
         }, [state, name, valueProp]);
         var defaultValue_1 = (0, react_1.useRef)(defaultProp).current;
         (0, react_1.useEffect)(function () {
             if (!isControlled && defaultValue_1 !== defaultProp) {
-                console.error([
-                    "\u00D6zen-UI: \u041D\u0435\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ".concat(name, " \u0441\u043C\u0435\u043D\u0438\u043B default ").concat(state, " \u043F\u043E\u0441\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0439 \u0438\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 ").concat(name, "."),
-                    "\u0415\u0441\u043B\u0438 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043C\u0435\u043D\u044F\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u043C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C.",
+                logger_1.logger.error([
+                    "\u041D\u0435\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ".concat(name, " \u0441\u043C\u0435\u043D\u0438\u043B \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0434\u043B\u044F \u00AB").concat(state, "\u00BB \u043F\u043E\u0441\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0439 \u0438\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438."),
+                    "\n",
+                    "\u0415\u0441\u043B\u0438 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043C\u0435\u043D\u044F\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043B\u044F \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u043C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C.",
                 ].join('\n'));
             }
         }, [JSON.stringify(defaultProp)]);

package/__inner__/esm/components/Autocomplete/helper.d.ts

@@ -32,6 +32,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     disableShowChevron?: boolean | undefined;
     dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
 } & {
+    error?: boolean | undefined;
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     className?: string | undefined;
@@ -40,7 +41,6 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     disabled?: boolean | undefined;
     placeholder?: string | undefined;
     required?: boolean | undefined;
-    error?: boolean | undefined;
     fullWidth?: boolean | undefined;
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
@@ -132,6 +132,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     disableShowChevron?: boolean | undefined;
     dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
 } & {
+    error?: boolean | undefined;
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     className?: string | undefined;
@@ -140,7 +141,6 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     disabled?: boolean | undefined;
     placeholder?: string | undefined;
     required?: boolean | undefined;
-    error?: boolean | undefined;
     fullWidth?: boolean | undefined;
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {

package/__inner__/esm/components/Badge/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const BADGE_DEFAULT_SIZE = "s";
 export declare const BADGE_DEFAULT_TAG = "div";
 export declare const BADGE_DEFAULT_VARIANT = "standard";
-export declare const BADGE_DEFAULT_COLOR = "defaultDark";
+export declare const BADGE_DEFAULT_COLOR = "neutralDark";
 export declare const BADGE_DEFAULT_HORIZONTAL_ORIGIN = "right";
 export declare const BADGE_DEFAULT_VERTICAL_ORIGIN = "top";

package/__inner__/esm/components/Badge/constants.js

@@ -1,6 +1,6 @@
 export var BADGE_DEFAULT_SIZE = 's';
 export var BADGE_DEFAULT_TAG = 'div';
 export var BADGE_DEFAULT_VARIANT = 'standard';
-export var BADGE_DEFAULT_COLOR = 'defaultDark';
+export var BADGE_DEFAULT_COLOR = 'neutralDark';
 export var BADGE_DEFAULT_HORIZONTAL_ORIGIN = 'right';
 export var BADGE_DEFAULT_VERTICAL_ORIGIN = 'top';

package/__inner__/esm/components/DatePicker/DatePicker.d.ts

@@ -16,7 +16,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
     onError?: import("./types").DatePickerPropOnError | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
     open?: boolean | undefined;
     defaultOpen?: undefined;
 }, "ref"> | Omit<{
@@ -33,7 +33,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
     onError?: import("./types").DatePickerPropOnError | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
     open?: undefined;
     defaultOpen?: boolean | undefined;
 }, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/FilePicker/FilePicker.d.ts

@@ -68,7 +68,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
 } & {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "error" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
 }> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Tooltip/Tooltip.css

@@ -1,31 +1,31 @@
 /* stylelint-disable */
 .Tooltip {
   max-inline-size: 300px;
-  color: var(--color-content-primary);
 }
+.Tooltip-Content {
+    color: var(--color-content-primary);
+  }
+.Tooltip-Content_size_xs {
+        font: var(--typography-text-xs-font);
+        letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+        text-transform: var(--typography-text-xs-text_transform, none);
+      }
+.Tooltip-Content_size_s {
+        font: var(--typography-text-s-font);
+        letter-spacing: var(--typography-text-s-letter_spacing, 0);
+        text-transform: var(--typography-text-s-text_transform, none);
+      }
+.Tooltip-Content_variant_dark,
+    .Tooltip-Content_inverse {
+      color: var(--color-content-primary-inverse);
+    }
 .Tooltip_size_xs {
       min-inline-size: 28px;
       min-block-size: 28px;
       padding: var(--spacing-2xs) var(--spacing-xs);
-
-      font: var(--typography-text-xs-font);
-
-      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
-
-      text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Tooltip_size_s {
       min-inline-size: 40px;
       min-block-size: 40px;
       padding: var(--spacing-xs) var(--spacing-s);
-
-      font: var(--typography-text-s-font);
-
-      letter-spacing: var(--typography-text-s-letter_spacing, 0);
-
-      text-transform: var(--typography-text-s-text_transform, none);
     }
-.Tooltip_variant_dark,
-  .Tooltip_inverse {
-    color: var(--color-content-primary-inverse);
-  }

package/__inner__/esm/components/Tooltip/Tooltip.js

@@ -1,7 +1,8 @@
 import { __assign, __read, __rest } from "tslib";
 import './Tooltip.css';
-import React, { useRef, useMemo, useState, useEffect } from 'react';
+import React, { useRef, useMemo, useEffect, useState } from 'react';
 import { deprecate } from '@ozen-ui/logger';
+import { useBoolean } from '../../hooks/useBoolean';
 import { useControlled } from '../../hooks/useControlled';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { useMultiRef } from '../../hooks/useMultiRef';
@@ -13,14 +14,14 @@ import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DEL
 export var cnTooltip = cn('Tooltip');
 export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Tooltip' });
-    var _a = props.trigger, trigger = _a === void 0 ? TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? TOOLTIP_DEFAULT_INVERSE : _j, variant = props.variant, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, _k = props.as, as = _k === void 0 ? TOOLTIP_DEFAULT_TAG : _k, other = __rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
+    var _a = props.trigger, trigger = _a === void 0 ? TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? TOOLTIP_DEFAULT_INVERSE : _j, _k = props.as, as = _k === void 0 ? TOOLTIP_DEFAULT_TAG : _k, variant = props.variant, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, other = __rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "as", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose"]);
     if (process.env.NODE_ENV !== 'production' && variant) {
         deprecate('Свойство «variant» устарело. Для замены используйте «inverse».');
     }
-    var _l = __read(useState(), 2), delay = _l[0], setDelay = _l[1];
-    var _m = __read(useState(), 2), hasFocus = _m[0], setHasFocus = _m[1];
-    var _o = __read(useState(), 2), hasHover = _o[0], setHasHover = _o[1];
     var anchorRef = useRef(null);
+    var _l = __read(useState(), 2), delay = _l[0], setDelay = _l[1];
+    var _m = __read(useBoolean(), 2), focused = _m[0], setFocused = _m[1];
+    var _o = __read(useBoolean(), 2), hovered = _o[0], setHovered = _o[1];
     var modifiers = [
         {
             name: 'arrow',
@@ -35,22 +36,27 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
         name: 'Tooltip',
         state: 'open',
     }), 2), openState = _p[0], setOpenState = _p[1];
-    useEffect(function () {
-        setDelay(openState ? delayLeave : delayEnter);
-    }, [openState, delayEnter, delayLeave]);
-    var handleOpen = function (open) {
-        if (disabled) {
+    var setOpen = function (open) {
+        if (disabled && open)
             return;
-        }
-        if (open) {
+        if (open)
             onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-        }
-        else {
+        else
             onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
         setOpenState(open);
     };
-    var _q = __read(useDebounceCallback(handleOpen, delay), 1), debounceSetOpen = _q[0];
+    var _q = __read(useDebounceCallback(setOpen, delay), 2), setOpenWithDelay = _q[0], clearTimeout = _q[1];
+    var closeWithDelay = function () { return setOpenWithDelay(false); };
+    useEffect(function () {
+        setDelay(openState ? delayLeave : delayEnter);
+    }, [openState, delayEnter, delayLeave]);
+    useEffect(function () {
+        if (!disabled)
+            return;
+        clearTimeout();
+        if (openState)
+            setOpen(false);
+    }, [disabled, openState]);
     var resolveChildren = useMemo(function () {
         return typeof children !== 'object' || shouldWrapChildren ? (React.createElement("span", null, children)) : (children);
     }, [children, shouldWrapChildren]);
@@ -58,36 +64,34 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
     var childrenMultiRef = useMultiRef([anchorRef, childrenRef]);
     var handleMouseEnter = function () {
         if (trigger === 'hover' || trigger === 'hover&focus') {
-            setHasHover(true);
-            debounceSetOpen(true);
+            setHovered.on();
+            setOpenWithDelay(true);
         }
     };
     var handleMouseLeave = function () {
         if (trigger === 'hover' || trigger === 'hover&focus') {
-            setHasHover(false);
-            if (!hasFocus)
-                debounceSetOpen(false);
+            setHovered.off();
+            if (!focused)
+                setOpenWithDelay(false);
         }
     };
     var handleClick = function () {
-        if (trigger === 'click') {
-            debounceSetOpen(!openState);
-        }
+        if (trigger === 'click')
+            setOpenWithDelay(!openState);
     };
     var handleFocus = function () {
         if (trigger === 'focus' || trigger === 'hover&focus') {
-            setHasFocus(true);
-            debounceSetOpen(true);
+            setFocused.on();
+            setOpenWithDelay(true);
         }
     };
     var handleBlur = function () {
         if (trigger === 'focus' || trigger === 'hover&focus') {
-            setHasFocus(false);
-            if (!hasHover)
-                debounceSetOpen(false);
+            setFocused.off();
+            if (!hovered)
+                setOpenWithDelay(false);
         }
     };
-    var handleClose = function () { return debounceSetOpen(false); };
     var composeChildrenProps = useMemo(function () {
         var onClick = childrenProps.onClick, onFocus = childrenProps.onFocus, onBlur = childrenProps.onBlur, onMouseEnter = childrenProps.onMouseEnter, onMouseLeave = childrenProps.onMouseLeave;
         return {
@@ -114,6 +118,7 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
             },
         };
     }, [
+        trigger,
         childrenProps,
         childrenMultiRef,
         handleMouseEnter,
@@ -124,8 +129,9 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
     ]);
     return (React.createElement(React.Fragment, null,
         React.cloneElement(resolveChildren, composeChildrenProps),
-        React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
+        React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState, onClose: closeWithDelay, className: cnTooltip({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
-            }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
+            }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }),
+            React.createElement("div", { className: cnTooltip('Content', { size: size, variant: variant, inverse: inverse }) }, label))));
 });
 Tooltip.displayName = 'Tooltip';

package/__inner__/esm/components/Typography/Typography.css

@@ -29,6 +29,9 @@
 .Typography_align_initial {
       text-align: initial;
     }
+.Typography_align_inherit {
+      text-align: inherit;
+    }
 .Typography_color_primary {
       color: var(--color-content-primary);
     }
@@ -119,6 +122,9 @@
 .Typography_color_accentDisabled {
       color: var(--color-content-accent-disabled);
     }
+.Typography_color_inherit {
+      color: inherit;
+    }
 .Typography_variant_heading-4xl {
       font: var(--typography-heading-4xl-font);
       letter-spacing: var(--typography-heading-4xl-letter_spacing, 0);
@@ -327,6 +333,11 @@
 .Typography_variant_caption-3xs_1.Typography_defaultMargin {
         margin-block-end: var(--spacing-3xs);
       }
+.Typography_variant_inherit {
+      font: inherit;
+      letter-spacing: inherit;
+      text-transform: inherit;
+    }
 .Typography_link {
     color: var(--color-content-action);
   }

package/__inner__/esm/components/Typography/Typography.d.ts

@@ -1,13 +1,13 @@
 import './Typography.css';
 import type { ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
-export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1"];
+export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1", "inherit"];
 export type TypographyVariant = (typeof typographyVariant)[number];
 export declare const typographyDisplayVariant: readonly ["block", "inline", "inlineBlock"];
 export type TypographyDisplayVariant = (typeof typographyDisplayVariant)[number];
-export declare const typographyAlignVariant: readonly ["left", "center", "right"];
+export declare const typographyAlignVariant: readonly ["left", "center", "right", "initial", "inherit"];
 export type TypographyAlignVariant = (typeof typographyAlignVariant)[number];
-export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionPressed", "actionHover", "actionDark", "actionOn", "error", "errorHover", "errorPressed", "errorDark", "warning", "warningHover", "warningPressed", "warningDark", "success", "successHover", "successDark", "successPressed", "info", "infoHover", "infoPressed", "infoDark", "primaryInverse", "accentPrimary", "accentSecondary", "accentDisabled"];
+export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionPressed", "actionHover", "actionDark", "actionOn", "error", "errorHover", "errorPressed", "errorDark", "warning", "warningHover", "warningPressed", "warningDark", "success", "successHover", "successDark", "successPressed", "info", "infoHover", "infoPressed", "infoDark", "primaryInverse", "accentPrimary", "accentSecondary", "accentDisabled", "inherit"];
 export type TypographyColorVariant = (typeof typographyColorVariant)[number];
 export type TypographyBaseProps = {
     /** Вариант типографики */

package/__inner__/esm/components/Typography/Typography.js

@@ -33,13 +33,20 @@ export var typographyVariant = [
     'text-3xs_1',
     'caption-3xs',
     'caption-3xs_1',
+    'inherit',
 ];
 export var typographyDisplayVariant = [
     'block',
     'inline',
     'inlineBlock',
 ];
-export var typographyAlignVariant = ['left', 'center', 'right'];
+export var typographyAlignVariant = [
+    'left',
+    'center',
+    'right',
+    'initial',
+    'inherit',
+];
 export var typographyColorVariant = [
     'primary',
     'secondary',
@@ -71,6 +78,7 @@ export var typographyColorVariant = [
     'accentPrimary',
     'accentSecondary',
     'accentDisabled',
+    'inherit',
 ];
 export var cnTypography = cn('Typography');
 export var Typography = polymorphicComponentWithRef(function (inProps, ref) {

package/__inner__/esm/components/Typography/utils.js

@@ -25,4 +25,5 @@ export var matchVariantToTag = {
     'text-3xs_1': 'p',
     'caption-3xs': 'span',
     'caption-3xs_1': 'span',
+    inherit: 'p',
 };

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

@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from 'react';
 export type UseBooleanControllers = {
     /** Установить значение в {true} */
     on: () => void;
@@ -5,6 +6,8 @@ export type UseBooleanControllers = {
     off: () => void;
     /** Перевести значение в противоположное состояние */
     toggle: () => void;
+    /** Перевести значение в собственное состояние */
+    set: Dispatch<SetStateAction<boolean>>;
 };
 export type UseBooleanReturnValue = [boolean, UseBooleanControllers];
 export declare function useBoolean(

package/__inner__/esm/hooks/useBoolean/useBoolean.js

@@ -8,5 +8,5 @@ defaultValue) {
     var on = useCallback(function () { return setValue(true); }, []);
     var off = useCallback(function () { return setValue(false); }, []);
     var toggle = useCallback(function () { return setValue(function (value) { return !value; }); }, []);
-    return [value, { on: on, off: off, toggle: toggle }];
+    return [value, { on: on, off: off, toggle: toggle, set: setValue }];
 }

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

@@ -8,9 +8,5 @@ export interface UseControlledProps<T = unknown> {
     /** Имя свойства для предупреждения */
     state?: string;
 }
-/**
- * Управляет значением компонента
- * при контролируемом и неконтролируемом
- * поведении
- * */
+/** Управляет значением компонента при контролируемом и неконтролируемом поведении */
 export declare const useControlled: <T = unknown>({ value: valueProp, defaultValue: defaultProp, name, state, }: UseControlledProps<T>) => [T | undefined, (newValue: T) => void, boolean];

package/__inner__/esm/hooks/useControlled/useControlled.js

@@ -1,37 +1,31 @@
 import { __read } from "tslib";
 /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
 import { useState, useCallback, useEffect, useRef } from 'react';
-/**
- * Управляет значением компонента
- * при контролируемом и неконтролируемом
- * поведении
- * */
+import { logger } from '@ozen-ui/logger';
+/** Управляет значением компонента при контролируемом и неконтролируемом поведении */
 export var useControlled = function (_a) {
     var valueProp = _a.value, defaultProp = _a.defaultValue, name = _a.name, _b = _a.state, state = _b === void 0 ? 'value' : _b;
-    /**
-     * Определение контролируемого поведения
-     * при первом рендере
-     * (неизменяемое значение)
-     * */
+    /** Определение контролируемого поведения при первом рендере (неизменяемое значение) */
     var isControlled = useRef(valueProp !== undefined).current;
     var _c = __read(useState(defaultProp), 2), valueState = _c[0], setValue = _c[1];
     var value = isControlled ? valueProp : valueState;
     if (process.env.NODE_ENV !== 'production') {
         useEffect(function () {
             if (isControlled !== (valueProp !== undefined)) {
-                console.error([
-                    "\u00D6zen-UI: \u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 '".concat(state, "' \u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 ").concat(name, " \u043F\u043E\u043C\u0435\u043D\u044F\u043B\u043E\u0441\u044C \u0441 ").concat(isControlled ? '' : 'не', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u043D\u0430 ").concat(isControlled ? 'не' : '', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0435."),
-                    'Компоненты не должны переключаться с неконтролируемого поведения в контролируемое, или наоборот.',
-                    'Поведение определяется после первого рендера и является контролируемым, если значение не «undefined».',
+                logger.error([
+                    "\u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 \u00AB".concat(state, "\u00BB \u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 ").concat(name, " \u043F\u043E\u043C\u0435\u043D\u044F\u043B\u043E\u0441\u044C \u0441 ").concat(isControlled ? '' : 'не', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u043D\u0430 ").concat(isControlled ? 'не' : '', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0435."),
+                    "\n",
+                    'Компоненты не должны переключаться с неконтролируемого поведения в контролируемое, или наоборот. Поведение определяется после первого рендера и является контролируемым, если значение не «undefined».',
                 ].join('\n'));
             }
         }, [state, name, valueProp]);
         var defaultValue_1 = useRef(defaultProp).current;
         useEffect(function () {
             if (!isControlled && defaultValue_1 !== defaultProp) {
-                console.error([
-                    "\u00D6zen-UI: \u041D\u0435\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ".concat(name, " \u0441\u043C\u0435\u043D\u0438\u043B default ").concat(state, " \u043F\u043E\u0441\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0439 \u0438\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 ").concat(name, "."),
-                    "\u0415\u0441\u043B\u0438 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043C\u0435\u043D\u044F\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u043C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C.",
+                logger.error([
+                    "\u041D\u0435\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ".concat(name, " \u0441\u043C\u0435\u043D\u0438\u043B \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0434\u043B\u044F \u00AB").concat(state, "\u00BB \u043F\u043E\u0441\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0439 \u0438\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438."),
+                    "\n",
+                    "\u0415\u0441\u043B\u0438 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043C\u0435\u043D\u044F\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043B\u044F \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u043C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C.",
                 ].join('\n'));
             }
         }, [JSON.stringify(defaultProp)]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.50.2",
+  "version": "0.51.0",
   "description": "React component library",
   "files": [
     "*"
@@ -28,9 +28,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.2",
-    "@ozen-ui/icons": "0.50.2",
-    "@ozen-ui/fonts": "0.50.2",
-    "@ozen-ui/logger": "0.50.2"
+    "@ozen-ui/fonts": "0.51.0",
+    "@ozen-ui/icons": "0.51.0",
+    "@ozen-ui/logger": "0.51.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",