@ozen-ui/kit 0.9.1 → 0.10.0

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

@@ -1,32 +1,4 @@
 import './DataList.css';
-import React from 'react';
-import type { ReactNode } from 'react';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import { type ListProps } from '../List';
-import { type PopoverProps } from '../Popover';
+import type { DataListBaseProps } from './index';
 export declare const cnDataList: import("@bem-react/classname").ClassNameFormatter;
-export type DataListPayload = {
-    name?: string;
-    value: string;
-};
-export type DataListProps = Omit<PopoverProps, 'onSelect'> & {
-    /** Имя списка */
-    name?: string;
-    /** Признак по которому компонент будет представлен */
-    open?: boolean;
-    /** Содержимое компонента */
-    children: ReactNode;
-    /** Дополнительные CSS-классы */
-    className?: string;
-    /** Размер компонента */
-    size?: FormElementSizeVariant;
-    /** Выбранная опция */
-    selected?: string;
-    /** Выбранная опция по умолчанию */
-    defaultSelected?: string;
-    /** Функция обратного вызова для выбора значения */
-    onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
-    /** Свойства компонента List */
-    listProps?: ListProps;
-};
-export declare const DataList: React.ForwardRefExoticComponent<Omit<DataListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DataList: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DataListBaseProps, "div">;

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

@@ -10,13 +10,14 @@ var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var List_1 = require("../List");
 var Popover_1 = require("../Popover");
 var constants_1 = require("./constants");
 var DataListProvider_1 = require("./DataListProvider");
 var useDataListNavigation_1 = require("./useDataListNavigation");
 exports.cnDataList = (0, classname_1.cn)('DataList');
-exports.DataList = (0, react_1.forwardRef)(function (inProps, ref) {
+exports.DataList = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, onSelect = _a.onSelect, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, listProps = _a.listProps, other = tslib_1.__rest(_a, ["open", "size", "name", "children", "anchorRef", "onSelect", "selected", "defaultSelected", "listProps"]);
     var _d = tslib_1.__read((0, useControlled_1.useControlled)({
         name: 'DataList',
@@ -45,7 +46,7 @@ exports.DataList = (0, react_1.forwardRef)(function (inProps, ref) {
             }
         }
     });
-    return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({ open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
+    return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({ as: constants_1.DATA_LIST_DEFAULT_TAG, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
         react_1["default"].createElement(DataListProvider_1.DataListContext.Provider, { value: tslib_1.__assign({ selected: selected, size: size, onSelect: handleSelect, currentItem: currentItem }, listNavigation) },
             react_1["default"].createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: (0, exports.cnDataList)('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
 });

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

@@ -1,3 +1,4 @@
+export declare const DATA_LIST_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
 export declare const DATA_LIST_DEFAULT_SIZE = "m";
 export declare const DATA_LIST_DEFAULT_OPEN = false;
 export declare const DATA_LIST_OPTION_DEFAULT_DISABLED = false;

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

@@ -1,6 +1,8 @@
 "use strict";
 exports.__esModule = true;
-exports.DATA_LIST_OPTION_DEFAULT_DISABLED = exports.DATA_LIST_DEFAULT_OPEN = exports.DATA_LIST_DEFAULT_SIZE = void 0;
+exports.DATA_LIST_OPTION_DEFAULT_DISABLED = exports.DATA_LIST_DEFAULT_OPEN = exports.DATA_LIST_DEFAULT_SIZE = exports.DATA_LIST_DEFAULT_TAG = void 0;
+var Paper_1 = require("../Paper");
+exports.DATA_LIST_DEFAULT_TAG = Paper_1.Paper;
 exports.DATA_LIST_DEFAULT_SIZE = 'm';
 exports.DATA_LIST_DEFAULT_OPEN = false;
 exports.DATA_LIST_OPTION_DEFAULT_DISABLED = false;

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

@@ -1,2 +1,3 @@
 export * from './DataList';
 export * from './components';
+export * from './types';

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

@@ -3,3 +3,4 @@ exports.__esModule = true;
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./DataList"), exports);
 tslib_1.__exportStar(require("./components"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,33 @@
+import type { ReactNode, ComponentRef, ElementType } from 'react';
+import type React from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { ListProps } from '../List';
+import type { PopoverBaseProps } from '../Popover';
+import type { DATA_LIST_DEFAULT_TAG } from './constants';
+export type DataListPayload = {
+    name?: string;
+    value: string;
+};
+export type DataListBaseProps = Omit<PopoverBaseProps, 'onSelect'> & {
+    /** Имя списка */
+    name?: string;
+    /** Признак по которому компонент будет представлен */
+    open?: boolean;
+    /** Содержимое компонента */
+    children: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Размер компонента */
+    size?: FormElementSizeVariant;
+    /** Выбранная опция */
+    selected?: string;
+    /** Выбранная опция по умолчанию */
+    defaultSelected?: string;
+    /** Функция обратного вызова для выбора значения */
+    onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
+    /** Свойства компонента List */
+    listProps?: ListProps;
+};
+export type DataListRef = ComponentRef<typeof DATA_LIST_DEFAULT_TAG>;
+export type DataListProps<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<DataListBaseProps, As>;

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

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

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

@@ -1,12 +1,13 @@
 import './Menu.css';
 import React from 'react';
-import type { RefObject } from 'react';
-import { type PopoverProps } from '../Popover';
+import type { RefObject, ComponentPropsWithRef } from 'react';
+import { type PopoverBaseProps } from '../Popover';
+import type { PORTAL_DEFAULT_TAG } from '../Portal';
 import { type MenuListProps } from './components';
 export declare const cnMenu: import("@bem-react/classname").ClassNameFormatter;
 export type MenuProps = {
     /** Свойства компонента MenuList */
     menuListProps?: Omit<MenuListProps, 'children'>;
     menuListRef?: RefObject<HTMLDivElement>;
-} & Omit<PopoverProps, 'disableEnforceFocus'>;
+} & Omit<PopoverBaseProps, 'disableEnforceFocus'> & ComponentPropsWithRef<typeof PORTAL_DEFAULT_TAG>;
 export declare const Menu: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1,4 @@
 export * from './Skeleton';
+export { cnSkeletonCircular } from './SkeletonCircular';
+export { cnSkeleton } from './SkeletonRectangular';
+export { cnSkeletonTypography } from './SkeletonTypography';

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

@@ -1,4 +1,11 @@
 "use strict";
 exports.__esModule = true;
+exports.cnSkeletonTypography = exports.cnSkeleton = exports.cnSkeletonCircular = void 0;
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Skeleton"), exports);
+var SkeletonCircular_1 = require("./SkeletonCircular");
+tslib_1.__createBinding(exports, SkeletonCircular_1, "cnSkeletonCircular");
+var SkeletonRectangular_1 = require("./SkeletonRectangular");
+tslib_1.__createBinding(exports, SkeletonRectangular_1, "cnSkeleton");
+var SkeletonTypography_1 = require("./SkeletonTypography");
+tslib_1.__createBinding(exports, SkeletonTypography_1, "cnSkeletonTypography");

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

@@ -0,0 +1,150 @@
+.Theme_color_bBusinessDefault {
+  --color-content-primary: #080808;
+  --color-content-secondary: #707070;
+  --color-additional-h3: #e1e4e7;
+  --color-content-tertiary: #949494;
+  --color-content-disabled: #949494;
+  --color-content-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-content-action: #019f99;
+  --color-content-action-hover: #088695;
+  --color-content-action-pressed: #006081;
+  --color-content-action-dark: #003c51;
+  --color-content-action-on: #fff;
+  --color-content-error: #e32346;
+  --color-content-error-hover: #c61031;
+  --color-content-error-pressed: #ae0f2c;
+  --color-content-error-dark: #7c0218;
+  --color-content-warning: #ffb039;
+  --color-content-warning-hover: #ff9c09;
+  --color-content-warning-pressed: #e78b00;
+  --color-content-warning-dark: #5c3801;
+  --color-content-success: #68d3bf;
+  --color-content-success-hover: #35ccb0;
+  --color-content-success-pressed: #129e84;
+  --color-content-success-dark: #024d3e;
+  --color-content-info: #3b81ea;
+  --color-content-info-hover: #1161d9;
+  --color-content-info-pressed: #105ba4;
+  --color-content-info-dark: #022f5a;
+  --color-content-primary-inverse: #fff;
+  --color-content-accent-main: #a0a0a0;
+  --color-accent-main: #181818;
+  --color-content-accent-primary: #fff;
+  --color-accent-primary: #282828;
+  --color-content-accent-disabled: #606060;
+  --color-background-main: #fff;
+  --color-background-main-hover: #f5f5f5;
+  --color-background-main-pressed: #e8e8e8;
+  --color-background-primary: #f5f5f5;
+  --color-background-primary-hover: #e8e8e8;
+  --color-background-primary-pressed: #dcdcdc;
+  --color-background-secondary: #e8e8e8;
+  --color-background-secondary-hover: #dcdcdc;
+  --color-background-secondary-pressed: #c7c7c7;
+  --color-background-tertiary: #dcdcdc;
+  --color-background-tertiary-hover: #c7c7c7;
+  --color-background-tertiary-pressed: #b2b2b2;
+  --color-background-disabled: #e8e8e8;
+  --color-background-action: #019f99;
+  --color-background-action-hover: #088695;
+  --color-background-action-pressed: #006081;
+  --color-background-action-active-disabled: #a0f3df;
+  --color-background-action-light: #e2fef8;
+  --color-background-action-light-hover: #cdfaf1;
+  --color-background-action-light-pressed: #a0f3df;
+  --color-background-error: #e32346;
+  --color-background-error-hover: #c61031;
+  --color-background-error-pressed: #ae0f2c;
+  --color-background-error-light: #fff5f6;
+  --color-background-error-light-hover: #ffe2e6;
+  --color-background-error-light-pressed: #ffa9b3;
+  --color-background-warning: #ffb039;
+  --color-background-warning-hover: #ff9c09;
+  --color-background-warning-pressed: #e78b00;
+  --color-background-warning-light: #fffaf3;
+  --color-background-warning-light-hover: #fff5e7;
+  --color-background-warning-light-pressed: #ffd89e;
+  --color-background-success: #68d3bf;
+  --color-background-success-hover: #35ccb0;
+  --color-background-success-pressed: #129e84;
+  --color-background-success-light: #eafdf9;
+  --color-background-success-light-hover: #d3f8f0;
+  --color-background-success-light-pressed: #a8eee1;
+  --color-background-info: #3b81ea;
+  --color-background-info-hover: #1161d9;
+  --color-background-info-pressed: #105ba4;
+  --color-background-info-light: #f7fbff;
+  --color-background-info-light-hover: #ecf5ff;
+  --color-background-info-light-pressed: #a1c0ef;
+  --color-background-main-inverse: #202023;
+  --color-background-overlay: rgb(0 0 0 / 55%);
+  --color-background-ghost: rgb(255 255 255 / 12%);
+  --color-background-ghost-hover: rgb(255 255 255 / 24%);
+  --color-background-ghost-pressed: rgb(255 255 255 / 32%);
+  --color-background-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-background-accent-action-light-hover: #005573;
+  --color-background-accent-action-light-pressed: #003c51;
+  --color-background-accent-error-light-hover: #a30925;
+  --color-background-accent-error-light-pressed: #7c0118;
+  --color-background-accent-warning-light-hover: #995c00;
+  --color-background-accent-warning-light-pressed: #5c3800;
+  --color-background-accent-success-light-hover: #046d5a;
+  --color-background-accent-success-light-pressed: #014d3e;
+  --color-background-accent-info-light-hover: #064889;
+  --color-background-accent-info-light-pressed: #032f5a;
+  --color-border-main: #c7c7c7;
+  --color-border-main-hover: #b2b2b2;
+  --color-border-main-pressed: #949494;
+  --color-border-secondary: #e8e8e8;
+  --color-border-secondary-hover: #c7c7c7;
+  --color-border-secondary-pressed: #b2b2b2;
+  --color-border-disabled: #c7c7c7;
+  --color-border-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-border-focused: #a0f3df;
+  --color-border-action: #019f99;
+  --color-border-action-hover: #088695;
+  --color-border-action-pressed: #006081;
+  --color-border-error: #c61031;
+  --color-border-warning: #ff9c09;
+  --color-border-success: #35ccb0;
+  --color-border-info: #1161d9;
+  --color-border-main-on: #fff;
+  --color-border-accent-main: #a0a0a0;
+  --color-border-accent-disabled: #606060;
+  --color-border-accent-focused: #004258;
+  --color-accent-main-hover: #282828;
+  --color-accent-main-pressed: #383838;
+  --color-accent-primary-hover: #383838;
+  --color-accent-primary-pressed: #484848;
+  --color-accent-secondary: #383838;
+  --color-accent-secondary-hover: #484848;
+  --color-accent-secondary-pressed: #585858;
+  --color-accent-tertiary: #484848;
+  --color-accent-tertiary-hover: #585858;
+  --color-accent-tertiary-pressed: #686868;
+  --color-accent-disabled: #484848;
+  --color-accent-main-inverse: #fff;
+  --color-additional-a1: #0b6abe;
+  --color-additional-a2: #1899e9;
+  --color-additional-a3: #b3f1ff;
+  --color-additional-b1: #b5215f;
+  --color-additional-b2: #e62d73;
+  --color-additional-b3: #ffb5cd;
+  --color-additional-c1: #e64920;
+  --color-additional-c2: #f46c1b;
+  --color-additional-c3: #ffe2a8;
+  --color-additional-d1: #ff8e00;
+  --color-additional-d2: #ffc100;
+  --color-additional-d3: #fff9a2;
+  --color-additional-e1: #771db4;
+  --color-additional-e2: #a02be5;
+  --color-additional-e3: #e9b7fe;
+  --color-additional-f1: #107c60;
+  --color-additional-f2: #17ae87;
+  --color-additional-f3: #abeada;
+  --color-additional-g1: #b88f27;
+  --color-additional-g2: #e0b548;
+  --color-additional-g3: #f4d37d;
+  --color-additional-h1: #747e89;
+  --color-additional-h2: #bdc4cb;
+}

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

@@ -1,6 +1,7 @@
 export * from './ThemeProvider';
 export * from './themes/themeOzenDark';
 export * from './themes/themeOzenDefault';
+export * from './themes/themeBBusinessDefault';
 export * as themeHelper from './themes/helper';
 export { useTheme } from './ThemeProviderContext';
 export * from './localization/localization';

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

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ThemeProvider"), exports);
 tslib_1.__exportStar(require("./themes/themeOzenDark"), exports);
 tslib_1.__exportStar(require("./themes/themeOzenDefault"), exports);
+tslib_1.__exportStar(require("./themes/themeBBusinessDefault"), exports);
 exports.themeHelper = tslib_1.__importStar(require("./themes/helper"));
 var ThemeProviderContext_1 = require("./ThemeProviderContext");
 tslib_1.__createBinding(exports, ThemeProviderContext_1, "useTheme");

package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.d.ts

@@ -0,0 +1,12 @@
+import '@ozen-ui/fonts';
+import type { Theme } from '../index';
+import '../_color/Theme_color_bBusinessDefault.css';
+import '../_typography/Theme_typography_ozenDefault.css';
+import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
+import '../_space/Theme_space_ozenDefault.css';
+import '../_shadow/Theme_shadow_ozenDefault.css';
+import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
+import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
+import '../_zIndex/Theme_zIndex_ozenDefault.css';
+import '../_transition/Theme_transition_ozenDefault.css';
+export declare const themeBBusinessDefault: Theme;

package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.js

@@ -0,0 +1,27 @@
+"use strict";
+exports.__esModule = true;
+exports.themeBBusinessDefault = void 0;
+require("@ozen-ui/fonts");
+require("../_color/Theme_color_bBusinessDefault.css");
+require("../_typography/Theme_typography_ozenDefault.css");
+require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
+require("../_space/Theme_space_ozenDefault.css");
+require("../_shadow/Theme_shadow_ozenDefault.css");
+require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
+require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
+require("../_zIndex/Theme_zIndex_ozenDefault.css");
+require("../_transition/Theme_transition_ozenDefault.css");
+exports.themeBBusinessDefault = {
+    tokens: {
+        color: 'bBusinessDefault',
+        space: 'ozenDefault',
+        typography: 'ozenDefault',
+        borderRadius: 'ozenDefault',
+        borderWidth: 'ozenDefault',
+        shadow: 'ozenDefault',
+        breakpoint: 'ozenDefault',
+        zIndex: 'ozenDefault',
+        transition: 'ozenDefault'
+    },
+    defaultProps: {}
+};

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

@@ -1,5 +1,4 @@
 import './Tooltip.css';
-import React from 'react';
-import type { TooltipProps } from './types';
+import type { TooltipBaseProps } from './types';
 export declare const cnTooltip: import("@bem-react/classname").ClassNameFormatter;
-export declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Tooltip: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TooltipBaseProps, "div">;

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

@@ -9,10 +9,11 @@ var useDebounceCallback_1 = require("../../hooks/useDebounceCallback");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var Popover_1 = require("../Popover");
 var constants_1 = require("./constants");
 exports.cnTooltip = (0, classname_1.cn)('Tooltip');
-exports.Tooltip = (0, react_1.forwardRef)(function (inProps, ref) {
+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.variant, variant = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_VARIANT : _c, _d = props.offset, offset = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _d, _e = props.delayEnter, delayEnter = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _e, _f = props.delayLeave, delayLeave = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _f, _g = props.arrow, arrow = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _g, _h = props.shouldWrapChildren, shouldWrapChildren = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _h, _j = props.disabled, disabled = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _j, 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", "variant", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose"]);
     var _k = tslib_1.__read((0, react_1.useState)(), 2), delay = _k[0], setDelay = _k[1];

package/__inner__/cjs/components/Tooltip/types.d.ts

@@ -1,4 +1,5 @@
-import type { Ref, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
+import type { Ref, ReactNode, ReactElement, ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PopoverBaseProps } from '../Popover';
 import type { TOOLTIP_DEFAULT_TAG } from './constants';
 export declare const tooltipSizeVariant: readonly ["xs", "s"];
@@ -7,7 +8,7 @@ export declare const tooltipVariant: readonly ["light", "dark"];
 export type TooltipVariant = (typeof tooltipVariant)[number];
 export declare const tooltipTriggerVariant: readonly ["hover", "focus", "click", "hover&focus"];
 export type TooltipTriggerVariant = (typeof tooltipTriggerVariant)[number];
-export type TooltipProps = {
+export type TooltipBaseProps = {
     /** Признак по которому тултип будет представлен */
     open?: boolean;
     /** Элемент представляющий тултип, здесь может быть иконка, ссылка, кнопка и т.д. */
@@ -40,4 +41,6 @@ export type TooltipProps = {
     'data-testid'?: string;
     /** Дополнительные CSS-классы */
     className?: string;
-} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'> & ComponentPropsWithRef<typeof TOOLTIP_DEFAULT_TAG>;
+} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
+export type TooltipRef = ComponentRef<typeof TOOLTIP_DEFAULT_TAG>;
+export type TooltipProps<As extends ElementType = typeof TOOLTIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<TooltipBaseProps, As>;

package/__inner__/cjs/utils/polymorphicComponentWithRef.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ElementType, ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithRef, ElementType, ComponentPropsWithoutRef, ReactElement } from 'react';
 declare const defaultElement = "div";
 export type PolymorphicComponentPropsWithRef<Props, As extends ElementType> = Props & {
     as?: As;
@@ -7,10 +7,10 @@ export type PolymorphicComponentPropsWithoutRef<Props, As extends ElementType> =
     as?: As;
 } & Omit<ComponentPropsWithoutRef<As>, keyof Props>;
 export type PolymorphicComponentRef<As extends ElementType> = ComponentPropsWithRef<As>['ref'];
-type ComponentWithAs<Props, DefaultTag extends ElementType = typeof defaultElement> = <As extends ElementType = DefaultTag>(props: PolymorphicComponentPropsWithRef<Props, As>) => React.ReactElement | null;
+type ComponentWithAs<Props, DefaultTag extends ElementType = typeof defaultElement> = <As extends ElementType = DefaultTag>(props: PolymorphicComponentPropsWithRef<Props, As>) => ReactElement | null;
 export type PolymorphicComponentWithRef<Props, As extends ElementType> = ComponentWithAs<Props, As> & {
     displayName?: string | undefined;
 };
-type ForwardRefWithAs<Props> = <As extends ElementType>(props: PolymorphicComponentPropsWithRef<Props, As>, ref: PolymorphicComponentRef<As>) => React.ReactElement | null;
+type ForwardRefWithAs<Props> = <As extends ElementType>(props: PolymorphicComponentPropsWithRef<Props, As>, ref: PolymorphicComponentRef<As>) => ReactElement | null;
 export declare function polymorphicComponentWithRef<Props, As extends ElementType = typeof defaultElement>(baseComponent: ForwardRefWithAs<Props>): PolymorphicComponentWithRef<Props, As>;
 export {};

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

@@ -1,32 +1,4 @@
 import './DataList.css';
-import React from 'react';
-import type { ReactNode } from 'react';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import { type ListProps } from '../List';
-import { type PopoverProps } from '../Popover';
+import type { DataListBaseProps } from './index';
 export declare const cnDataList: import("@bem-react/classname").ClassNameFormatter;
-export type DataListPayload = {
-    name?: string;
-    value: string;
-};
-export type DataListProps = Omit<PopoverProps, 'onSelect'> & {
-    /** Имя списка */
-    name?: string;
-    /** Признак по которому компонент будет представлен */
-    open?: boolean;
-    /** Содержимое компонента */
-    children: ReactNode;
-    /** Дополнительные CSS-классы */
-    className?: string;
-    /** Размер компонента */
-    size?: FormElementSizeVariant;
-    /** Выбранная опция */
-    selected?: string;
-    /** Выбранная опция по умолчанию */
-    defaultSelected?: string;
-    /** Функция обратного вызова для выбора значения */
-    onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
-    /** Свойства компонента List */
-    listProps?: ListProps;
-};
-export declare const DataList: React.ForwardRefExoticComponent<Omit<DataListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DataList: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DataListBaseProps, "div">;

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

@@ -1,19 +1,20 @@
 import { __assign, __read, __rest } from "tslib";
 import './DataList.css';
-import React, { forwardRef, useRef } from 'react';
+import React, { useRef } from 'react';
 import { useControlled } from '../../hooks/useControlled';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { List } from '../List';
 import { Popover } from '../Popover';
-import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN } from './constants';
+import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN, DATA_LIST_DEFAULT_TAG, } from './constants';
 import { DataListContext } from './DataListProvider';
 import { useDataListNavigation } from './useDataListNavigation';
 export var cnDataList = cn('DataList');
-export var DataList = forwardRef(function (inProps, ref) {
+export var DataList = polymorphicComponentWithRef(function (inProps, ref) {
     var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, onSelect = _a.onSelect, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, listProps = _a.listProps, other = __rest(_a, ["open", "size", "name", "children", "anchorRef", "onSelect", "selected", "defaultSelected", "listProps"]);
     var _d = __read(useControlled({
         name: 'DataList',
@@ -42,7 +43,7 @@ export var DataList = forwardRef(function (inProps, ref) {
             }
         }
     });
-    return (React.createElement(Popover, __assign({ open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
+    return (React.createElement(Popover, __assign({ as: DATA_LIST_DEFAULT_TAG, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
         React.createElement(DataListContext.Provider, { value: __assign({ selected: selected, size: size, onSelect: handleSelect, currentItem: currentItem }, listNavigation) },
             React.createElement(List, __assign({ as: "ul", size: size }, listProps, { ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: cnDataList('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
 });

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

@@ -1,3 +1,4 @@
+export declare const DATA_LIST_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
 export declare const DATA_LIST_DEFAULT_SIZE = "m";
 export declare const DATA_LIST_DEFAULT_OPEN = false;
 export declare const DATA_LIST_OPTION_DEFAULT_DISABLED = false;

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

@@ -1,3 +1,5 @@
+import { Paper } from '../Paper';
+export var DATA_LIST_DEFAULT_TAG = Paper;
 export var DATA_LIST_DEFAULT_SIZE = 'm';
 export var DATA_LIST_DEFAULT_OPEN = false;
 export var DATA_LIST_OPTION_DEFAULT_DISABLED = false;

package/__inner__/esm/components/DataList/index.d.ts

@@ -1,2 +1,3 @@
 export * from './DataList';
 export * from './components';
+export * from './types';

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

@@ -1,2 +1,3 @@
 export * from './DataList';
 export * from './components';
+export * from './types';

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

@@ -0,0 +1,33 @@
+import type { ReactNode, ComponentRef, ElementType } from 'react';
+import type React from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { ListProps } from '../List';
+import type { PopoverBaseProps } from '../Popover';
+import type { DATA_LIST_DEFAULT_TAG } from './constants';
+export type DataListPayload = {
+    name?: string;
+    value: string;
+};
+export type DataListBaseProps = Omit<PopoverBaseProps, 'onSelect'> & {
+    /** Имя списка */
+    name?: string;
+    /** Признак по которому компонент будет представлен */
+    open?: boolean;
+    /** Содержимое компонента */
+    children: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Размер компонента */
+    size?: FormElementSizeVariant;
+    /** Выбранная опция */
+    selected?: string;
+    /** Выбранная опция по умолчанию */
+    defaultSelected?: string;
+    /** Функция обратного вызова для выбора значения */
+    onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
+    /** Свойства компонента List */
+    listProps?: ListProps;
+};
+export type DataListRef = ComponentRef<typeof DATA_LIST_DEFAULT_TAG>;
+export type DataListProps<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<DataListBaseProps, As>;

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,12 +1,13 @@
 import './Menu.css';
 import React from 'react';
-import type { RefObject } from 'react';
-import { type PopoverProps } from '../Popover';
+import type { RefObject, ComponentPropsWithRef } from 'react';
+import { type PopoverBaseProps } from '../Popover';
+import type { PORTAL_DEFAULT_TAG } from '../Portal';
 import { type MenuListProps } from './components';
 export declare const cnMenu: import("@bem-react/classname").ClassNameFormatter;
 export type MenuProps = {
     /** Свойства компонента MenuList */
     menuListProps?: Omit<MenuListProps, 'children'>;
     menuListRef?: RefObject<HTMLDivElement>;
-} & Omit<PopoverProps, 'disableEnforceFocus'>;
+} & Omit<PopoverBaseProps, 'disableEnforceFocus'> & ComponentPropsWithRef<typeof PORTAL_DEFAULT_TAG>;
 export declare const Menu: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Skeleton/index.d.ts

@@ -1 +1,4 @@
 export * from './Skeleton';
+export { cnSkeletonCircular } from './SkeletonCircular';
+export { cnSkeleton } from './SkeletonRectangular';
+export { cnSkeletonTypography } from './SkeletonTypography';

package/__inner__/esm/components/Skeleton/index.js

@@ -1 +1,4 @@
 export * from './Skeleton';
+export { cnSkeletonCircular } from './SkeletonCircular';
+export { cnSkeleton } from './SkeletonRectangular';
+export { cnSkeletonTypography } from './SkeletonTypography';

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

@@ -0,0 +1,150 @@
+.Theme_color_bBusinessDefault {
+  --color-content-primary: #080808;
+  --color-content-secondary: #707070;
+  --color-additional-h3: #e1e4e7;
+  --color-content-tertiary: #949494;
+  --color-content-disabled: #949494;
+  --color-content-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-content-action: #019f99;
+  --color-content-action-hover: #088695;
+  --color-content-action-pressed: #006081;
+  --color-content-action-dark: #003c51;
+  --color-content-action-on: #fff;
+  --color-content-error: #e32346;
+  --color-content-error-hover: #c61031;
+  --color-content-error-pressed: #ae0f2c;
+  --color-content-error-dark: #7c0218;
+  --color-content-warning: #ffb039;
+  --color-content-warning-hover: #ff9c09;
+  --color-content-warning-pressed: #e78b00;
+  --color-content-warning-dark: #5c3801;
+  --color-content-success: #68d3bf;
+  --color-content-success-hover: #35ccb0;
+  --color-content-success-pressed: #129e84;
+  --color-content-success-dark: #024d3e;
+  --color-content-info: #3b81ea;
+  --color-content-info-hover: #1161d9;
+  --color-content-info-pressed: #105ba4;
+  --color-content-info-dark: #022f5a;
+  --color-content-primary-inverse: #fff;
+  --color-content-accent-main: #a0a0a0;
+  --color-accent-main: #181818;
+  --color-content-accent-primary: #fff;
+  --color-accent-primary: #282828;
+  --color-content-accent-disabled: #606060;
+  --color-background-main: #fff;
+  --color-background-main-hover: #f5f5f5;
+  --color-background-main-pressed: #e8e8e8;
+  --color-background-primary: #f5f5f5;
+  --color-background-primary-hover: #e8e8e8;
+  --color-background-primary-pressed: #dcdcdc;
+  --color-background-secondary: #e8e8e8;
+  --color-background-secondary-hover: #dcdcdc;
+  --color-background-secondary-pressed: #c7c7c7;
+  --color-background-tertiary: #dcdcdc;
+  --color-background-tertiary-hover: #c7c7c7;
+  --color-background-tertiary-pressed: #b2b2b2;
+  --color-background-disabled: #e8e8e8;
+  --color-background-action: #019f99;
+  --color-background-action-hover: #088695;
+  --color-background-action-pressed: #006081;
+  --color-background-action-active-disabled: #a0f3df;
+  --color-background-action-light: #e2fef8;
+  --color-background-action-light-hover: #cdfaf1;
+  --color-background-action-light-pressed: #a0f3df;
+  --color-background-error: #e32346;
+  --color-background-error-hover: #c61031;
+  --color-background-error-pressed: #ae0f2c;
+  --color-background-error-light: #fff5f6;
+  --color-background-error-light-hover: #ffe2e6;
+  --color-background-error-light-pressed: #ffa9b3;
+  --color-background-warning: #ffb039;
+  --color-background-warning-hover: #ff9c09;
+  --color-background-warning-pressed: #e78b00;
+  --color-background-warning-light: #fffaf3;
+  --color-background-warning-light-hover: #fff5e7;
+  --color-background-warning-light-pressed: #ffd89e;
+  --color-background-success: #68d3bf;
+  --color-background-success-hover: #35ccb0;
+  --color-background-success-pressed: #129e84;
+  --color-background-success-light: #eafdf9;
+  --color-background-success-light-hover: #d3f8f0;
+  --color-background-success-light-pressed: #a8eee1;
+  --color-background-info: #3b81ea;
+  --color-background-info-hover: #1161d9;
+  --color-background-info-pressed: #105ba4;
+  --color-background-info-light: #f7fbff;
+  --color-background-info-light-hover: #ecf5ff;
+  --color-background-info-light-pressed: #a1c0ef;
+  --color-background-main-inverse: #202023;
+  --color-background-overlay: rgb(0 0 0 / 55%);
+  --color-background-ghost: rgb(255 255 255 / 12%);
+  --color-background-ghost-hover: rgb(255 255 255 / 24%);
+  --color-background-ghost-pressed: rgb(255 255 255 / 32%);
+  --color-background-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-background-accent-action-light-hover: #005573;
+  --color-background-accent-action-light-pressed: #003c51;
+  --color-background-accent-error-light-hover: #a30925;
+  --color-background-accent-error-light-pressed: #7c0118;
+  --color-background-accent-warning-light-hover: #995c00;
+  --color-background-accent-warning-light-pressed: #5c3800;
+  --color-background-accent-success-light-hover: #046d5a;
+  --color-background-accent-success-light-pressed: #014d3e;
+  --color-background-accent-info-light-hover: #064889;
+  --color-background-accent-info-light-pressed: #032f5a;
+  --color-border-main: #c7c7c7;
+  --color-border-main-hover: #b2b2b2;
+  --color-border-main-pressed: #949494;
+  --color-border-secondary: #e8e8e8;
+  --color-border-secondary-hover: #c7c7c7;
+  --color-border-secondary-pressed: #b2b2b2;
+  --color-border-disabled: #c7c7c7;
+  --color-border-ghost-disabled: rgb(255 255 255 / 47%);
+  --color-border-focused: #a0f3df;
+  --color-border-action: #019f99;
+  --color-border-action-hover: #088695;
+  --color-border-action-pressed: #006081;
+  --color-border-error: #c61031;
+  --color-border-warning: #ff9c09;
+  --color-border-success: #35ccb0;
+  --color-border-info: #1161d9;
+  --color-border-main-on: #fff;
+  --color-border-accent-main: #a0a0a0;
+  --color-border-accent-disabled: #606060;
+  --color-border-accent-focused: #004258;
+  --color-accent-main-hover: #282828;
+  --color-accent-main-pressed: #383838;
+  --color-accent-primary-hover: #383838;
+  --color-accent-primary-pressed: #484848;
+  --color-accent-secondary: #383838;
+  --color-accent-secondary-hover: #484848;
+  --color-accent-secondary-pressed: #585858;
+  --color-accent-tertiary: #484848;
+  --color-accent-tertiary-hover: #585858;
+  --color-accent-tertiary-pressed: #686868;
+  --color-accent-disabled: #484848;
+  --color-accent-main-inverse: #fff;
+  --color-additional-a1: #0b6abe;
+  --color-additional-a2: #1899e9;
+  --color-additional-a3: #b3f1ff;
+  --color-additional-b1: #b5215f;
+  --color-additional-b2: #e62d73;
+  --color-additional-b3: #ffb5cd;
+  --color-additional-c1: #e64920;
+  --color-additional-c2: #f46c1b;
+  --color-additional-c3: #ffe2a8;
+  --color-additional-d1: #ff8e00;
+  --color-additional-d2: #ffc100;
+  --color-additional-d3: #fff9a2;
+  --color-additional-e1: #771db4;
+  --color-additional-e2: #a02be5;
+  --color-additional-e3: #e9b7fe;
+  --color-additional-f1: #107c60;
+  --color-additional-f2: #17ae87;
+  --color-additional-f3: #abeada;
+  --color-additional-g1: #b88f27;
+  --color-additional-g2: #e0b548;
+  --color-additional-g3: #f4d37d;
+  --color-additional-h1: #747e89;
+  --color-additional-h2: #bdc4cb;
+}

package/__inner__/esm/components/ThemeProvider/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ThemeProvider';
 export * from './themes/themeOzenDark';
 export * from './themes/themeOzenDefault';
+export * from './themes/themeBBusinessDefault';
 export * as themeHelper from './themes/helper';
 export { useTheme } from './ThemeProviderContext';
 export * from './localization/localization';

package/__inner__/esm/components/ThemeProvider/index.js

@@ -1,6 +1,7 @@
 export * from './ThemeProvider';
 export * from './themes/themeOzenDark';
 export * from './themes/themeOzenDefault';
+export * from './themes/themeBBusinessDefault';
 import * as themeHelper_1 from './themes/helper';
 export { themeHelper_1 as themeHelper };
 export { useTheme } from './ThemeProviderContext';

package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.d.ts

@@ -0,0 +1,12 @@
+import '@ozen-ui/fonts';
+import type { Theme } from '../index';
+import '../_color/Theme_color_bBusinessDefault.css';
+import '../_typography/Theme_typography_ozenDefault.css';
+import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
+import '../_space/Theme_space_ozenDefault.css';
+import '../_shadow/Theme_shadow_ozenDefault.css';
+import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
+import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
+import '../_zIndex/Theme_zIndex_ozenDefault.css';
+import '../_transition/Theme_transition_ozenDefault.css';
+export declare const themeBBusinessDefault: Theme;

package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.js

@@ -0,0 +1,24 @@
+import '@ozen-ui/fonts';
+import '../_color/Theme_color_bBusinessDefault.css';
+import '../_typography/Theme_typography_ozenDefault.css';
+import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
+import '../_space/Theme_space_ozenDefault.css';
+import '../_shadow/Theme_shadow_ozenDefault.css';
+import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
+import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
+import '../_zIndex/Theme_zIndex_ozenDefault.css';
+import '../_transition/Theme_transition_ozenDefault.css';
+export var themeBBusinessDefault = {
+    tokens: {
+        color: 'bBusinessDefault',
+        space: 'ozenDefault',
+        typography: 'ozenDefault',
+        borderRadius: 'ozenDefault',
+        borderWidth: 'ozenDefault',
+        shadow: 'ozenDefault',
+        breakpoint: 'ozenDefault',
+        zIndex: 'ozenDefault',
+        transition: 'ozenDefault'
+    },
+    defaultProps: {}
+};

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

@@ -1,5 +1,4 @@
 import './Tooltip.css';
-import React from 'react';
-import type { TooltipProps } from './types';
+import type { TooltipBaseProps } from './types';
 export declare const cnTooltip: import("@bem-react/classname").ClassNameFormatter;
-export declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Tooltip: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TooltipBaseProps, "div">;

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

@@ -1,15 +1,16 @@
 import { __assign, __read, __rest } from "tslib";
 import './Tooltip.css';
-import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
+import React, { useRef, useMemo, useState, useEffect } from 'react';
 import { useControlled } from '../../hooks/useControlled';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { Popover } from '../Popover';
 import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TAG, TOOLTIP_DEFAULT_TRIGGER, TOOLTIP_DEFAULT_VARIANT, } from './constants';
 export var cnTooltip = cn('Tooltip');
-export var Tooltip = forwardRef(function (inProps, ref) {
+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.variant, variant = _c === void 0 ? TOOLTIP_DEFAULT_VARIANT : _c, _d = props.offset, offset = _d === void 0 ? TOOLTIP_DEFAULT_OFFSET : _d, _e = props.delayEnter, delayEnter = _e === void 0 ? TOOLTIP_DEFAULT_DELAY_ENTER : _e, _f = props.delayLeave, delayLeave = _f === void 0 ? TOOLTIP_DEFAULT_DELAY_LEAVE : _f, _g = props.arrow, arrow = _g === void 0 ? TOOLTIP_DEFAULT_ARROW : _g, _h = props.shouldWrapChildren, shouldWrapChildren = _h === void 0 ? TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _h, _j = props.disabled, disabled = _j === void 0 ? TOOLTIP_DEFAULT_DISABLED : _j, 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", "variant", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose"]);
     var _k = __read(useState(), 2), delay = _k[0], setDelay = _k[1];

package/__inner__/esm/components/Tooltip/types.d.ts

@@ -1,4 +1,5 @@
-import type { Ref, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
+import type { Ref, ReactNode, ReactElement, ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PopoverBaseProps } from '../Popover';
 import type { TOOLTIP_DEFAULT_TAG } from './constants';
 export declare const tooltipSizeVariant: readonly ["xs", "s"];
@@ -7,7 +8,7 @@ export declare const tooltipVariant: readonly ["light", "dark"];
 export type TooltipVariant = (typeof tooltipVariant)[number];
 export declare const tooltipTriggerVariant: readonly ["hover", "focus", "click", "hover&focus"];
 export type TooltipTriggerVariant = (typeof tooltipTriggerVariant)[number];
-export type TooltipProps = {
+export type TooltipBaseProps = {
     /** Признак по которому тултип будет представлен */
     open?: boolean;
     /** Элемент представляющий тултип, здесь может быть иконка, ссылка, кнопка и т.д. */
@@ -40,4 +41,6 @@ export type TooltipProps = {
     'data-testid'?: string;
     /** Дополнительные CSS-классы */
     className?: string;
-} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'> & ComponentPropsWithRef<typeof TOOLTIP_DEFAULT_TAG>;
+} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
+export type TooltipRef = ComponentRef<typeof TOOLTIP_DEFAULT_TAG>;
+export type TooltipProps<As extends ElementType = typeof TOOLTIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<TooltipBaseProps, As>;

package/__inner__/esm/utils/polymorphicComponentWithRef.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ElementType, ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithRef, ElementType, ComponentPropsWithoutRef, ReactElement } from 'react';
 declare const defaultElement = "div";
 export type PolymorphicComponentPropsWithRef<Props, As extends ElementType> = Props & {
     as?: As;
@@ -7,10 +7,10 @@ export type PolymorphicComponentPropsWithoutRef<Props, As extends ElementType> =
     as?: As;
 } & Omit<ComponentPropsWithoutRef<As>, keyof Props>;
 export type PolymorphicComponentRef<As extends ElementType> = ComponentPropsWithRef<As>['ref'];
-type ComponentWithAs<Props, DefaultTag extends ElementType = typeof defaultElement> = <As extends ElementType = DefaultTag>(props: PolymorphicComponentPropsWithRef<Props, As>) => React.ReactElement | null;
+type ComponentWithAs<Props, DefaultTag extends ElementType = typeof defaultElement> = <As extends ElementType = DefaultTag>(props: PolymorphicComponentPropsWithRef<Props, As>) => ReactElement | null;
 export type PolymorphicComponentWithRef<Props, As extends ElementType> = ComponentWithAs<Props, As> & {
     displayName?: string | undefined;
 };
-type ForwardRefWithAs<Props> = <As extends ElementType>(props: PolymorphicComponentPropsWithRef<Props, As>, ref: PolymorphicComponentRef<As>) => React.ReactElement | null;
+type ForwardRefWithAs<Props> = <As extends ElementType>(props: PolymorphicComponentPropsWithRef<Props, As>, ref: PolymorphicComponentRef<As>) => ReactElement | null;
 export declare function polymorphicComponentWithRef<Props, As extends ElementType = typeof defaultElement>(baseComponent: ForwardRefWithAs<Props>): PolymorphicComponentWithRef<Props, As>;
 export {};

package/package.json

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