@ozen-ui/kit 0.50.3 → 0.52.0

package/__inner__/cjs/components/Modal/Modal.js

@@ -30,10 +30,8 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
         refs: tslib_1.__spreadArray(tslib_1.__spreadArray([
             modalInnerRef
         ], tslib_1.__read(refsClickOutside), false), tslib_1.__read((ignoreClickOutsideRefs || [])), false),
-        handler: function () {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        },
-        active: !disableClickOutside,
+        handler: onClose,
+        active: open && !disableClickOutside,
     });
     // Блокирует прокрутку основного окна приложения
     (0, useLockBodyScroll_1.useLockBodyScroll)(opened && !disableScrollLock);

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

@@ -134,6 +134,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
         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, 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__/esm/components/Modal/Modal.js

@@ -27,10 +27,8 @@ export var Modal = forwardRef(function (_a, ref) {
         refs: __spreadArray(__spreadArray([
             modalInnerRef
         ], __read(refsClickOutside), false), __read((ignoreClickOutsideRefs || [])), false),
-        handler: function () {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        },
-        active: !disableClickOutside,
+        handler: onClose,
+        active: open && !disableClickOutside,
     });
     // Блокирует прокрутку основного окна приложения
     useLockBodyScroll(opened && !disableScrollLock);

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

@@ -131,6 +131,7 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
         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, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.50.3",
+  "version": "0.52.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/fonts": "0.50.3",
-    "@ozen-ui/icons": "0.50.3",
-    "@ozen-ui/logger": "0.50.3"
+    "@ozen-ui/fonts": "0.52.0",
+    "@ozen-ui/logger": "0.52.0",
+    "@ozen-ui/icons": "0.52.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",

package/CalendarRange/package.json

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