@ozen-ui/kit 0.54.0 → 0.56.0

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

@@ -1,12 +1,5 @@
 import React from 'react';
+import type { AccordionProps } from './types';
 import './Accordion.css';
 export declare const cnAccordion: import("@bem-react/classname").ClassNameFormatter;
-export declare const Accordion: React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    className?: string | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    variant?: "round" | "corner-primary" | "corner-secondary" | undefined;
-    defaultExpanded?: boolean | undefined;
-    compressed?: boolean | undefined;
-    onChange?: ((expanded: boolean, e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & Pick<import("../Collapse").CollapseProps, "expanded" | "unmountOnClosed"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Accordion/components/AccordionDetails/AccordionDetails.d.ts

@@ -1,14 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
-export type AccordionDetailsProps = {
-    /** Содержимое */
-    children?: React.ReactNode;
-    /** Дополнительные CSS-классы */
-    className?: string;
-} & HTMLAttributes<HTMLDivElement>;
+import React from 'react';
+import type { AccordionDetailsProps } from './index';
 export declare const cnAccordionDetails: import("@bem-react/classname").ClassNameFormatter;
-export declare const AccordionDetails: React.ForwardRefExoticComponent<{
-    /** Содержимое */
-    children?: React.ReactNode;
-    /** Дополнительные CSS-классы */
-    className?: string | undefined;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const AccordionDetails: React.ForwardRefExoticComponent<Omit<AccordionDetailsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Accordion/components/AccordionDetails/index.d.ts

@@ -1 +1,2 @@
 export * from './AccordionDetails';
+export * from './types';

package/__inner__/cjs/components/Accordion/components/AccordionDetails/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./AccordionDetails"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Accordion/components/AccordionDetails/types.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
+export type AccordionDetailsRef = ComponentRef<'div'>;
+export type AccordionDetailsProps = ExtendableComponentPropsWithRef<{
+    /** Содержимое */
+    children?: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+}, 'div'>;

package/__inner__/cjs/components/Accordion/components/AccordionDetails/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/Accordion/components/AccordionSummary/AccordionSummary.d.ts

@@ -1,20 +1,4 @@
 import React from 'react';
-import type { ReactNode, HTMLAttributes } from 'react';
-import type { AccordionExpandIconPositionVariant } from '../../types';
-export type AccordionSummaryProps = {
-    /** Содержимое */
-    children?: ReactNode;
-    /** Позиция иконки */
-    expandIconPosition?: AccordionExpandIconPositionVariant;
-    /** Дополнительные CSS-классы */
-    className?: string;
-} & HTMLAttributes<HTMLDivElement>;
+import type { AccordionSummaryProps } from './index';
 export declare const cnAccordionSummary: import("@bem-react/classname").ClassNameFormatter;
-export declare const AccordionSummary: React.ForwardRefExoticComponent<{
-    /** Содержимое */
-    children?: ReactNode;
-    /** Позиция иконки */
-    expandIconPosition?: "left" | "right" | undefined;
-    /** Дополнительные CSS-классы */
-    className?: string | undefined;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const AccordionSummary: React.ForwardRefExoticComponent<Omit<AccordionSummaryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Accordion/components/AccordionSummary/AccordionSummary.js

@@ -9,12 +9,7 @@ var classname_1 = require("../../../../utils/classname");
 var isKey_1 = require("../../../../utils/isKey");
 var AccordionContext_1 = require("../../AccordionContext");
 var constants_1 = require("../../constants");
-var iconSizeMapper = {
-    s: 's',
-    m: 's',
-    l: 'm',
-    xl: 'm',
-};
+var utils_1 = require("./utils");
 exports.cnAccordionSummary = (0, classname_1.cn)('AccordionSummary');
 exports.AccordionSummary = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'AccordionSummary' });
@@ -23,7 +18,7 @@ exports.AccordionSummary = (0, react_1.forwardRef)(function (inProps, ref) {
     var Icon = (0, react_1.useMemo)(function () { return (react_1.default.createElement("div", { className: (0, exports.cnAccordionSummary)('ExpandIconBox', {
             expandIconPosition: expandIconPosition,
         }) },
-        react_1.default.createElement(icons_1.ChevronDownIcon, { size: iconSizeMapper[size], className: (0, exports.cnAccordionSummary)('ExpandIcon', {
+        react_1.default.createElement(icons_1.ChevronDownIcon, { size: utils_1.iconSizeMapper[size], className: (0, exports.cnAccordionSummary)('ExpandIcon', {
                 expanded: expanded,
             }) }))); }, [size, expanded]);
     var handleKeyDown = (0, react_1.useCallback)(function (e) {

package/__inner__/cjs/components/Accordion/components/AccordionSummary/index.d.ts

@@ -1 +1,2 @@
 export * from './AccordionSummary';
+export * from './types';

package/__inner__/cjs/components/Accordion/components/AccordionSummary/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./AccordionSummary"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Accordion/components/AccordionSummary/types.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
+import type { AccordionExpandIconPositionVariant } from '../../index';
+export type AccordionSummaryRef = ComponentRef<'div'>;
+export type AccordionSummaryProps = ExtendableComponentPropsWithRef<{
+    /** Содержимое */
+    children?: ReactNode;
+    /** Позиция иконки */
+    expandIconPosition?: AccordionExpandIconPositionVariant;
+    /** Дополнительные CSS-классы */
+    className?: string;
+}, 'div'>;

package/__inner__/cjs/components/Accordion/components/AccordionSummary/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/Accordion/components/AccordionSummary/utils.d.ts

@@ -0,0 +1,5 @@
+import type { IconSize } from '@ozen-ui/icons';
+import type { AccordionSizeVariant } from '../../index';
+export declare const iconSizeMapper: {
+    [key in AccordionSizeVariant]: IconSize;
+};

package/__inner__/cjs/components/Accordion/components/AccordionSummary/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconSizeMapper = void 0;
+exports.iconSizeMapper = {
+    s: 's',
+    m: 's',
+    l: 'm',
+    xl: 'm',
+};

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

@@ -1,4 +1,5 @@
-import type { MouseEvent, KeyboardEvent, HTMLAttributes, ReactNode } from 'react';
+import type { MouseEvent, KeyboardEvent, ReactNode, ComponentRef } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 import type { CollapseProps } from '../Collapse';
 export declare const accordionExpandIconPositionVariant: readonly ["left", "right"];
 export declare const accordionSizeVariant: readonly ["s", "m", "l", "xl"];
@@ -15,29 +16,22 @@ export type AccordionContextValue = {
      */
     size: AccordionSizeVariant;
     /** Callback для смены состояния аккордеона открыт/закрыт */
-    toggle: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
+    toggle(e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void;
 };
-export type AccordionProps = {
+export type AccordionRef = ComponentRef<'div'>;
+export type AccordionProps = ExtendableComponentPropsWithRef<{
     /** Содержимое */
     children: ReactNode;
     /** Дополнительные CSS-классы */
     className?: string;
-    /**
-     * Размер
-     * влияет на типографику, отступы, иконки
-     * @default m
-     * */
+    /** Размер влияет на типографику, отступы, иконки */
     size?: AccordionSizeVariant;
-    /**
-     * Вариант визуального отображения аккордеона
-     *
-     * @default corner-primary
-     * */
+    /** Вариант визуального отображения аккордеона */
     variant?: AccordionVariant;
     /** Если {true} аккордеон по умолчанию раскрыт (неконтролируемое поведение) */
     defaultExpanded?: boolean;
     /** Если {true} уменьшает отступы для компактного отображения */
     compressed?: boolean;
     /** Обработчик события открытия и закрытия аккордеона */
-    onChange?: (expanded: boolean, e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & Pick<CollapseProps, 'expanded' | 'unmountOnClosed'>;
+    onChange?(expanded: boolean, e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void;
+} & Pick<CollapseProps, 'expanded' | 'unmountOnClosed'>, 'div'>;

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

@@ -1,17 +1,5 @@
 import './Alert.css';
 import React from 'react';
-import type { ButtonProps } from '../ButtonNext';
+import type { AlertProps } from './types';
 export declare const cnAlert: import("@bem-react/classname").ClassNameFormatter;
-export declare const Alert: React.ForwardRefExoticComponent<{
-    title: React.ReactNode;
-    status?: "error" | "info" | "success" | "warning" | undefined;
-    inverse?: boolean | undefined;
-    showIcon?: boolean | undefined;
-    onClose?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
-    children?: React.ReactNode;
-    action?: React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>> | (({ size, className, }: Pick<ButtonProps, "className" | "size">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
-    className?: string | undefined;
-    closeText?: string | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "color"> & {
-    color?: "dark" | "light" | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,5 @@
-import type { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { ComponentRef, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 import type { ButtonProps } from '../ButtonNext';
 export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
 export declare const alertColorVariant: readonly ["light", "dark"];
@@ -42,5 +43,6 @@ type AlertBaseProps = {
     /** Текст для кнопки закрытия компонента */
     closeText?: string;
 };
-export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> & AlertPropsDeprecated;
+export type AlertRef = ComponentRef<'div'>;
+export type AlertProps = ExtendableComponentPropsWithRef<AlertBaseProps & AlertPropsDeprecated, 'div'>;
 export {};

package/__inner__/cjs/components/Autocomplete/Autocomplete.js

@@ -68,13 +68,13 @@ function AutocompleteRender(inProps, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
         changeInputValue(null, inputValue);
     };
-    /** Эффект – фильтрация списка при изменении опций */
+    /** Эффект — фильтрация списка при изменении опций */
     (0, react_1.useEffect)(function () {
         if (!open)
             return;
         setFilteredOptions(search ? search(options) : tslib_1.__spreadArray([], tslib_1.__read(options), false));
     }, [search, options, open, searchFunctionProp]);
-    /** Эффект – синхронизируем значение текстового поля со значением в списке */
+    /** Эффект — синхронизируем значение текстового поля со значением в списке */
     (0, react_1.useEffect)(function () {
         var _a;
         if (allowCustomValue)
@@ -86,7 +86,7 @@ function AutocompleteRender(inProps, ref) {
             changeInputValue(null, lastInputValue.current);
         }
     }, [valueState, allowCustomValue]);
-    /** Эффект – автофокусировка в текстовом поле */
+    /** Эффект — автофокусировка в текстовом поле */
     (0, react_1.useEffect)(function () {
         var _a;
         if (autoFocus)

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

@@ -44,38 +44,8 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     fullWidth?: boolean | undefined;
     disableStroke?: boolean | undefined;
     hint?: string | null | undefined;
-    renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }, string | import("react").JSXElementConstructor<any>>) | undefined;
-    renderRight?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
     } & {
@@ -99,7 +69,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
 }) & (OPTION extends {
     disabled: boolean | undefined;
 } ? Record<string, unknown> : {
-    getOptionDisabled?: AutocompletePropGetOptionKey<OPTION> | undefined;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
 }) & {
     getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
     getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;
@@ -145,38 +115,8 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     fullWidth?: boolean | undefined;
     disableStroke?: boolean | undefined;
     hint?: string | null | undefined;
-    renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }, string | import("react").JSXElementConstructor<any>>) | undefined;
-    renderRight?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
-        color?: string | undefined;
-        ref?: import("react").Ref<SVGSVGElement> | undefined;
-    } & {
-        size?: import("@ozen-ui/icons").IconSize | undefined;
-    }, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
     } & {
@@ -200,7 +140,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
 }) & (OPTION extends {
     disabled: boolean | undefined;
 } ? Record<string, unknown> : {
-    getOptionDisabled?: AutocompletePropGetOptionKey<OPTION> | undefined;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
 }) & {
     getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
     getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;

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

@@ -99,7 +99,7 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
 }) & (OPTION extends {
     disabled: AutocompleteDefaultOption['disabled'];
 } ? Record<string, unknown> : {
-    getOptionDisabled?: AutocompletePropGetOptionKey<OPTION>;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
 });
 export type AutocompleteComponent = <OPTION = AutocompleteDefaultOption>(props: AutocompleteProps<OPTION>) => ReactElement | null;
 export {};

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

@@ -1,31 +1,5 @@
 import './Avatar.css';
 import React from 'react';
-import type { ComponentPropsWithRef, ComponentRef, ReactNode } from 'react';
-import type { IndicatorProps } from '../Indicator';
-export declare const avatarSizeVariant: readonly ["4xs", "3xs", "2xs", "xs", "s", "m", "l", "xl"];
-export declare const avatarHueVariant: number[];
-export type AvatarSizeVariant = (typeof avatarSizeVariant)[number];
-export type AvatarHueVariant = (typeof avatarHueVariant)[number];
-declare const avatarEl = "div";
-export type AvatarRef = ComponentRef<typeof avatarEl>;
-export type AvatarProps = {
-    /** Размер */
-    size?: AvatarSizeVariant;
-    /** Если {true} отобразит индикатор онлайна */
-    online?: boolean;
-    /** url изображения */
-    src?: string;
-    /** Имя пользователя */
-    name?: string;
-    /** Цветовой оттенок аватарки (при использовании без src) */
-    hue?: AvatarHueVariant;
-    /** Дополнительные СSS-классы */
-    className?: string;
-    /** Свойства компонента Indicator */
-    indicatorProps?: IndicatorProps;
-    /** Содержимое компонента – иконка */
-    children?: ReactNode;
-} & ComponentPropsWithRef<typeof avatarEl>;
+import type { AvatarProps } from './index';
 export declare const cnAvatar: import("@bem-react/classname").ClassNameFormatter;
 export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/__inner__/cjs/components/Avatar/Avatar.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.cnAvatar = exports.avatarHueVariant = exports.avatarSizeVariant = void 0;
+exports.Avatar = exports.cnAvatar = void 0;
 var tslib_1 = require("tslib");
 require("./Avatar.css");
 var react_1 = tslib_1.__importStar(require("react"));
@@ -10,18 +10,6 @@ var Indicator_1 = require("../Indicator");
 var constants_1 = require("./constants");
 var get_hash_number_1 = require("./get-hash-number");
 var utils_1 = require("./utils");
-exports.avatarSizeVariant = [
-    '4xs',
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-];
-exports.avatarHueVariant = [1, 2, 3];
-var avatarEl = 'div';
 exports.cnAvatar = (0, classname_1.cn)('Avatar');
 exports.Avatar = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Avatar' });

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

@@ -1,3 +1,4 @@
+export declare const AVATAR_DEFAULT_TAG = "div";
 export declare const AVATAR_DEFAULT_SIZE = "m";
 export declare const AVATAR_DEFAULT_ONLINE = false;
 export declare const AVATAR_DEFAULT_HUE = 1;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AVATAR_DEFAULT_HUE = exports.AVATAR_DEFAULT_ONLINE = exports.AVATAR_DEFAULT_SIZE = void 0;
+exports.AVATAR_DEFAULT_HUE = exports.AVATAR_DEFAULT_ONLINE = exports.AVATAR_DEFAULT_SIZE = exports.AVATAR_DEFAULT_TAG = void 0;
+exports.AVATAR_DEFAULT_TAG = 'div';
 exports.AVATAR_DEFAULT_SIZE = 'm';
 exports.AVATAR_DEFAULT_ONLINE = false;
 exports.AVATAR_DEFAULT_HUE = 1;

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

@@ -1 +1,2 @@
 export * from './Avatar';
+export * from './types';

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Avatar"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,27 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
+import type { IndicatorProps } from '../Indicator';
+import type { AVATAR_DEFAULT_TAG } from './constants';
+export declare const avatarSizeVariant: readonly ["4xs", "3xs", "2xs", "xs", "s", "m", "l", "xl"];
+export declare const avatarHueVariant: number[];
+export type AvatarSizeVariant = (typeof avatarSizeVariant)[number];
+export type AvatarHueVariant = (typeof avatarHueVariant)[number];
+export type AvatarRef = ComponentRef<typeof AVATAR_DEFAULT_TAG>;
+export type AvatarProps = ExtendableComponentPropsWithRef<{
+    /** Размер */
+    size?: AvatarSizeVariant;
+    /** Если {true} отобразит индикатор онлайна */
+    online?: boolean;
+    /** url изображения */
+    src?: string;
+    /** Имя пользователя */
+    name?: string;
+    /** Цветовой оттенок аватарки (при использовании без src) */
+    hue?: AvatarHueVariant;
+    /** Дополнительные СSS-классы */
+    className?: string;
+    /** Свойства компонента Indicator */
+    indicatorProps?: IndicatorProps;
+    /** Содержимое компонента — иконка */
+    children?: ReactNode;
+}, typeof AVATAR_DEFAULT_TAG>;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatarHueVariant = exports.avatarSizeVariant = void 0;
+exports.avatarSizeVariant = [
+    '4xs',
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+];
+exports.avatarHueVariant = [1, 2, 3];

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

@@ -1,27 +1,4 @@
 import './Backdrop.css';
-import type { CSSProperties, ElementType, ReactNode } from 'react';
-import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
-import { BACKDROP_DEFAULT_TAG } from './constants';
-export type BackdropBaseProps = {
-    /** Признак по которому компонент будет представлен */
-    open?: boolean;
-    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
-     *  закрытие (клик по подложке) */
-    onClose?: () => void;
-    /** Если {true} делает подложку невидимой */
-    isInvisible?: boolean;
-    /** Дополнительные CSS-классы */
-    className?: string;
-    /** Содержимое подложки */
-    children?: ReactNode;
-    /** Определяет положение позиционированного элемента по оси z */
-    zIndex?: CSSProperties['zIndex'];
-    /** Свойства по управлению анимацией перехода */
-    transitionProps?: Partial<CSSTransitionProps>;
-    /** Идентификатор компонента для тестов */
-    'data-testid'?: string;
-};
-export type BackdropProps<As extends ElementType = typeof BACKDROP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<BackdropBaseProps, As>;
+import type { BackdropBaseProps } from './index';
 export declare const cnBackdrop: import("@bem-react/classname").ClassNameFormatter;
 export declare const Backdrop: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BackdropBaseProps, "div">;

package/__inner__/cjs/components/Backdrop/Backdrop.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Backdrop = exports.cnBackdrop = void 0;
 var tslib_1 = require("tslib");
 require("./Backdrop.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
+var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
@@ -13,7 +14,9 @@ exports.cnBackdrop = (0, classname_1.cn)('Backdrop');
 exports.Backdrop = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Backdrop' });
     var _a = props.as, Tag = _a === void 0 ? constants_1.BACKDROP_DEFAULT_TAG : _a, open = props.open, onClose = props.onClose, isInvisible = props.isInvisible, className = props.className, children = props.children, zIndex = props.zIndex, transitionProps = props.transitionProps, styleProp = props.style, other = tslib_1.__rest(props, ["as", "open", "onClose", "isInvisible", "className", "children", "zIndex", "transitionProps", "style"]);
-    return (react_1.default.createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({}, transitionProps, { classNames: (0, exports.cnBackdrop)({ animation: true }), timeout: 300, in: open, unmountOnExit: true, appear: true }),
-        react_1.default.createElement(Tag, tslib_1.__assign({ "aria-hidden": true, className: (0, exports.cnBackdrop)({ isInvisible: isInvisible }, [className]), onClick: onClose, style: tslib_1.__assign({ '--backdrop-z-index': zIndex }, styleProp) }, other, { ref: ref }), children)));
+    var rootRef = (0, react_1.useRef)(null);
+    var style = tslib_1.__assign({ '--backdrop-z-index': zIndex }, styleProp);
+    return (react_1.default.createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ nodeRef: rootRef, classNames: (0, exports.cnBackdrop)({ animation: true }), timeout: 300 }, transitionProps, { in: open, unmountOnExit: true, appear: true }),
+        react_1.default.createElement(Tag, tslib_1.__assign({ "aria-hidden": true, className: (0, exports.cnBackdrop)({ isInvisible: isInvisible }, [className]), onClick: onClose, style: style }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, rootRef]) }), children)));
 });
 exports.Backdrop.displayName = 'Backdrop';

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

@@ -1 +1,2 @@
 export * from './Backdrop';
+export * from './types';

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Backdrop"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,24 @@
+import type { CSSProperties, ElementType, ReactNode } from 'react';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { BACKDROP_DEFAULT_TAG } from './constants';
+export type BackdropBaseProps = {
+    /** Признак по которому компонент будет представлен */
+    open?: boolean;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (клик по подложке) */
+    onClose?(): void;
+    /** Если {true} делает подложку невидимой */
+    isInvisible?: boolean;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Содержимое подложки */
+    children?: ReactNode;
+    /** Определяет положение позиционированного элемента по оси z */
+    zIndex?: CSSProperties['zIndex'];
+    /** Свойства по управлению анимацией перехода */
+    transitionProps?: Partial<CSSTransitionProps>;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type BackdropProps<As extends ElementType = typeof BACKDROP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<BackdropBaseProps, As>;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });