@ozen-ui/kit 0.54.0 → 0.56.0

package/__inner__/esm/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__/esm/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__/esm/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__/esm/components/Avatar/Avatar.js

@@ -7,18 +7,6 @@ import { Indicator } from '../Indicator';
 import { AVATAR_DEFAULT_HUE, AVATAR_DEFAULT_ONLINE, AVATAR_DEFAULT_SIZE, } from './constants';
 import { getHashNumber } from './get-hash-number';
 import { matchSizeIndicatorToAvatar, getInitials } from './utils';
-export var avatarSizeVariant = [
-    '4xs',
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-];
-export var avatarHueVariant = [1, 2, 3];
-var avatarEl = 'div';
 export var cnAvatar = cn('Avatar');
 export var Avatar = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Avatar' });

package/__inner__/esm/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__/esm/components/Avatar/constants.js

@@ -1,3 +1,4 @@
+export var AVATAR_DEFAULT_TAG = 'div';
 export var AVATAR_DEFAULT_SIZE = 'm';
 export var AVATAR_DEFAULT_ONLINE = false;
 export var AVATAR_DEFAULT_HUE = 1;

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

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

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

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

package/__inner__/esm/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__/esm/components/Avatar/types.js

@@ -0,0 +1,11 @@
+export var avatarSizeVariant = [
+    '4xs',
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+];
+export var avatarHueVariant = [1, 2, 3];

package/__inner__/esm/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__/esm/components/Backdrop/Backdrop.js

@@ -1,7 +1,8 @@
 import { __assign, __rest } from "tslib";
 import './Backdrop.css';
-import React from 'react';
+import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
+import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
@@ -10,7 +11,9 @@ export var cnBackdrop = cn('Backdrop');
 export var Backdrop = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Backdrop' });
     var _a = props.as, Tag = _a === void 0 ? 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 = __rest(props, ["as", "open", "onClose", "isInvisible", "className", "children", "zIndex", "transitionProps", "style"]);
-    return (React.createElement(CSSTransition, __assign({}, transitionProps, { classNames: cnBackdrop({ animation: true }), timeout: 300, in: open, unmountOnExit: true, appear: true }),
-        React.createElement(Tag, __assign({ "aria-hidden": true, className: cnBackdrop({ isInvisible: isInvisible }, [className]), onClick: onClose, style: __assign({ '--backdrop-z-index': zIndex }, styleProp) }, other, { ref: ref }), children)));
+    var rootRef = useRef(null);
+    var style = __assign({ '--backdrop-z-index': zIndex }, styleProp);
+    return (React.createElement(CSSTransition, __assign({ nodeRef: rootRef, classNames: cnBackdrop({ animation: true }), timeout: 300 }, transitionProps, { in: open, unmountOnExit: true, appear: true }),
+        React.createElement(Tag, __assign({ "aria-hidden": true, className: cnBackdrop({ isInvisible: isInvisible }, [className]), onClick: onClose, style: style }, other, { ref: useMultiRef([ref, rootRef]) }), children)));
 });
 Backdrop.displayName = 'Backdrop';

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

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

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

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

package/__inner__/esm/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__/esm/components/Backdrop/types.js

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

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

@@ -1,38 +1,4 @@
 import './Badge.css';
-import React, { type HTMLAttributes } from 'react';
-export declare const badgeColorVariant: readonly ["neutralDark", "neutralLight", "actionDark", "actionLight", "errorDark", "errorLight", "disabled"];
-export declare const badgeVariant: readonly ["dot", "standard"];
-export declare const badgeSizeVariant: readonly ["xs", "s"];
-export declare const badgeAsVariant: readonly ["div", "span"];
-export declare const badgeHorizontalOriginVariant: readonly ["left", "right"];
-export declare const badgeVerticalOriginVariant: readonly ["top", "bottom"];
-export type BadgeColorVariant = (typeof badgeColorVariant)[number];
-export type BadgeVariant = (typeof badgeVariant)[number];
-export type BadgeSizeVariant = (typeof badgeSizeVariant)[number];
-export type BadgeAsVariant = (typeof badgeAsVariant)[number];
-export type BadgeHorizontalOriginVariant = (typeof badgeHorizontalOriginVariant)[number];
-export type BadgeVerticalOriginVariant = (typeof badgeVerticalOriginVariant)[number];
+import type { BadgeBaseProps } from './index';
 export declare const cnBadge: import("@bem-react/classname").ClassNameFormatter;
-export type BadgeProps = {
-    /** Размер */
-    size?: BadgeSizeVariant;
-    /** Вариант представления */
-    variant?: BadgeVariant;
-    /** Цвет */
-    color?: BadgeColorVariant;
-    /** Отображаемое значение */
-    content?: React.ReactChild | null;
-    /** HTML-атрибуты элемента отображающего content баджа */
-    contentProps?: HTMLAttributes<HTMLSpanElement>;
-    /** Максимальное число для отображаемого значения */
-    max?: number;
-    /** Расположение по горизонтали */
-    horizontalOrigin?: BadgeHorizontalOriginVariant;
-    /** Расположение по вертикали */
-    verticalOrigin?: BadgeVerticalOriginVariant;
-    /** Если {true} отображает нулевое значение */
-    showZero?: boolean;
-    /** Если {true} компонент будет скрыт */
-    invisible?: boolean;
-};
-export declare const Badge: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BadgeProps, "div">;
+export declare const Badge: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BadgeBaseProps, "div">;

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

@@ -6,20 +6,6 @@ import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { BADGE_DEFAULT_SIZE, BADGE_DEFAULT_TAG, BADGE_DEFAULT_VARIANT, BADGE_DEFAULT_COLOR, BADGE_DEFAULT_HORIZONTAL_ORIGIN, BADGE_DEFAULT_VERTICAL_ORIGIN, } from './constants';
-export var badgeColorVariant = [
-    'neutralDark',
-    'neutralLight',
-    'actionDark',
-    'actionLight',
-    'errorDark',
-    'errorLight',
-    'disabled',
-];
-export var badgeVariant = ['dot', 'standard'];
-export var badgeSizeVariant = ['xs', 's'];
-export var badgeAsVariant = ['div', 'span'];
-export var badgeHorizontalOriginVariant = ['left', 'right'];
-export var badgeVerticalOriginVariant = ['top', 'bottom'];
 export var cnBadge = cn('Badge');
 export var Badge = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Badge' });

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

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

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

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

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

@@ -0,0 +1,37 @@
+import type { ElementType, HTMLAttributes, ReactElement } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+export declare const badgeColorVariant: readonly ["neutralDark", "neutralLight", "actionDark", "actionLight", "errorDark", "errorLight", "disabled"];
+export declare const badgeVariant: readonly ["dot", "standard"];
+export declare const badgeSizeVariant: readonly ["xs", "s"];
+export declare const badgeAsVariant: readonly ["div", "span"];
+export declare const badgeHorizontalOriginVariant: readonly ["left", "right"];
+export declare const badgeVerticalOriginVariant: readonly ["top", "bottom"];
+export type BadgeColorVariant = (typeof badgeColorVariant)[number];
+export type BadgeVariant = (typeof badgeVariant)[number];
+export type BadgeSizeVariant = (typeof badgeSizeVariant)[number];
+export type BadgeAsVariant = (typeof badgeAsVariant)[number];
+export type BadgeHorizontalOriginVariant = (typeof badgeHorizontalOriginVariant)[number];
+export type BadgeVerticalOriginVariant = (typeof badgeVerticalOriginVariant)[number];
+export type BadgeBaseProps = {
+    /** Размер */
+    size?: BadgeSizeVariant;
+    /** Вариант представления */
+    variant?: BadgeVariant;
+    /** Цвет */
+    color?: BadgeColorVariant;
+    /** Отображаемое значение */
+    content?: ReactElement | string | number | null;
+    /** HTML-атрибуты элемента отображающего content баджа */
+    contentProps?: HTMLAttributes<HTMLSpanElement>;
+    /** Максимальное число для отображаемого значения */
+    max?: number;
+    /** Расположение по горизонтали */
+    horizontalOrigin?: BadgeHorizontalOriginVariant;
+    /** Расположение по вертикали */
+    verticalOrigin?: BadgeVerticalOriginVariant;
+    /** Если {true} отображает нулевое значение */
+    showZero?: boolean;
+    /** Если {true} компонент будет скрыт */
+    invisible?: boolean;
+};
+export type BadgeProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<BadgeBaseProps, As>;

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

@@ -0,0 +1,14 @@
+export var badgeColorVariant = [
+    'neutralDark',
+    'neutralLight',
+    'actionDark',
+    'actionLight',
+    'errorDark',
+    'errorLight',
+    'disabled',
+];
+export var badgeVariant = ['dot', 'standard'];
+export var badgeSizeVariant = ['xs', 's'];
+export var badgeAsVariant = ['div', 'span'];
+export var badgeHorizontalOriginVariant = ['left', 'right'];
+export var badgeVerticalOriginVariant = ['top', 'bottom'];

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

@@ -1,7 +1,5 @@
 import './Breadcrumbs.css';
 import React from 'react';
+import type { BreadcrumbsProps } from './index';
 export declare const cnBreadcrumbs: import("@bem-react/classname").ClassNameFormatter;
-export declare const Breadcrumbs: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "onClick"> & {
-    separator?: import("./types").BreadcrumbsSeparatorComponent | undefined;
-    size?: "s" | "xs" | undefined;
-} & React.RefAttributes<HTMLElement>>;
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<Omit<BreadcrumbsProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/__inner__/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -3,12 +3,14 @@ import './Breadcrumbs.css';
 import React, { Fragment, isValidElement, Children, forwardRef } from 'react';
 import { ChevronRightSmallIcon } from '@ozen-ui/icons';
 import { isFragment } from 'react-is';
+import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { BreadcrumbsContext } from './BreadcrumbsContext';
 import { BREADCRUMBS_DEFAULT_SIZE } from './constants';
 export var cnBreadcrumbs = cn('Breadcrumbs');
-export var Breadcrumbs = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? BREADCRUMBS_DEFAULT_SIZE : _b, _c = _a.separator, Separator = _c === void 0 ? ChevronRightSmallIcon : _c, children = _a.children, className = _a.className, other = __rest(_a, ["size", "separator", "children", "className"]);
+export var Breadcrumbs = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'Breadcrumbs' });
+    var _a = props.size, size = _a === void 0 ? BREADCRUMBS_DEFAULT_SIZE : _a, _b = props.separator, Separator = _b === void 0 ? ChevronRightSmallIcon : _b, children = props.children, className = props.className, other = __rest(props, ["size", "separator", "children", "className"]);
     var resolvedChildren = isFragment(children)
         ? children.props.children
         : children;
@@ -17,7 +19,7 @@ export var Breadcrumbs = forwardRef(function (_a, ref) {
     React.createElement(BreadcrumbsContext.Provider, { value: { size: size } },
         React.createElement("nav", __assign({ className: cnBreadcrumbs({
                 size: size,
-            }, [className]), "aria-label": "\u041D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F" }, other, { ref: ref }),
+            }, [className]) }, other, { ref: ref }),
             React.createElement("ol", { className: cnBreadcrumbs('List') }, Children.toArray(resolvedChildren).map(function (child, index, arr) {
                 if (!isValidElement(child))
                     return null;

package/__inner__/esm/components/Breadcrumbs/components/BreadcrumbItem.d.ts

@@ -1,9 +1,3 @@
-import type { ElementType } from 'react';
-import type { PolymorphicComponentPropsWithoutRef } from '../../../utils/polymorphicComponentWithRef';
-import type { ButtonProps } from '../../ButtonNext';
-import { BREADCRUMB_ITEM_DEFAULT_TAG } from '../constants';
+import type { BreadcrumbItemBaseProps } from './index';
 export declare const cnBreadcrumbItem: import("@bem-react/classname").ClassNameFormatter;
-type BreadcrumbItemBaseProps = Pick<ButtonProps, 'disabled' | 'iconLeft' | 'iconRight'>;
-export type BreadcrumbItemProps<As extends ElementType = typeof BREADCRUMB_ITEM_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<BreadcrumbItemBaseProps, As>;
 export declare const BreadcrumbItem: import("../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BreadcrumbItemBaseProps, "a">;
-export {};

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

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

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

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

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

@@ -0,0 +1,6 @@
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../utils/polymorphicComponentWithRef';
+import type { ButtonProps } from '../../ButtonNext';
+import type { BREADCRUMB_ITEM_DEFAULT_TAG } from '../constants';
+export type BreadcrumbItemBaseProps = Pick<ButtonProps, 'disabled' | 'iconLeft' | 'iconRight'>;
+export type BreadcrumbItemProps<As extends ElementType = typeof BREADCRUMB_ITEM_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<BreadcrumbItemBaseProps, As>;

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

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

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

@@ -1,5 +1,6 @@
-import type { HTMLAttributes, FC } from 'react';
+import type { ComponentRef, FC } from 'react';
 import type { IconProps } from '@ozen-ui/icons';
+import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 export declare const breadcrumbsSizeVariant: readonly ["xs", "s"];
 export type BreadcrumbsSizeVariant = (typeof breadcrumbsSizeVariant)[number];
 export type BreadcrumbsSeparatorComponent = FC<IconProps>;
@@ -7,9 +8,10 @@ export type BreadcrumbsContextValue = {
     /** Размер */
     size: BreadcrumbsSizeVariant;
 };
-export type BreadcrumbsProps = Omit<HTMLAttributes<HTMLElement>, 'onClick'> & {
+export type BreadcrumbsRef = ComponentRef<'nav'>;
+export type BreadcrumbsProps = ExtendableComponentPropsWithRef<{
     /** Разделитель */
     separator?: BreadcrumbsSeparatorComponent;
     /** Размер */
     size?: BreadcrumbsSizeVariant;
-};
+}, 'nav'>;

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

@@ -1,6 +1,6 @@
 import './Button.css';
 import type { ReactNode, ElementType, ComponentPropsWithRef } from 'react';
-import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { IconProps } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { RenderContentType } from '../../utils/renderContent';
@@ -9,9 +9,7 @@ export declare const buttonVariant: readonly ["contained", "outlined", "ghost",
 export declare const buttonColorVariant: readonly ["primary", "secondary", "warning", "error"];
 export type ButtonVariant = (typeof buttonVariant)[number];
 export type ButtonColorVariant = (typeof buttonColorVariant)[number];
-export type ButtonIcon = RenderContentType<IconProps & {
-    size?: IconSize;
-}>['content'];
+export type ButtonIcon = RenderContentType<IconProps>['content'];
 type ButtonBaseProps = {
     /**
      * Вариант отображения кнопки

package/__inner__/esm/components/Button/Button.js

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import './Button.css';
-import React from 'react';
+import React, { useRef } from 'react';
 import { deprecate } from '@ozen-ui/logger';
 import { CSSTransition } from 'react-transition-group';
 import { useThemeProps } from '../../hooks/useThemeProps';
@@ -31,6 +31,7 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'Button',
     });
+    var loaderRef = useRef(null);
     if (process.env.NODE_ENV !== 'production') {
         deprecate('Компонент «Button» устарел. Для замены используйте компонент «ButtonNext».');
     }
@@ -55,8 +56,8 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
             renderIcon(iconLeft),
             React.createElement("span", __assign({}, labelProps, { className: cnButton('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
             renderIcon(iconRight)),
-        React.createElement(CSSTransition, { in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
-            React.createElement(Loader, { size: iconSize, className: cnButton('Loader') }))));
+        React.createElement(CSSTransition, { nodeRef: loaderRef, in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
+            React.createElement(Loader, { size: iconSize, className: cnButton('Loader'), ref: loaderRef }))));
     return (React.createElement(Tag, __assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: cnButton({
             variant: variant,
             size: size,

package/__inner__/esm/components/ButtonBase/ButtonBase.js

@@ -11,17 +11,22 @@ export var ButtonBase = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'Button',
     });
-    var _a = props.as, Tag = _a === void 0 ? BUTTON_BASE_DEFAULT_TAG : _a, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, unstyled = props.unstyled, other = __rest(props, ["as", "loading", "children", "disabled", "className", "onClick", "unstyled"]);
-    var handleClick = function (event) {
-        if (onClick && !disabled && !loading) {
-            onClick(event);
-        }
+    var _a = props.as, Tag = _a === void 0 ? BUTTON_BASE_DEFAULT_TAG : _a, loadingProp = props.loading, disabledProp = props.disabled, children = props.children, className = props.className, onClick = props.onClick, unstyled = props.unstyled, other = __rest(props, ["as", "loading", "disabled", "children", "className", "onClick", "unstyled"]);
+    var loading = Boolean(loadingProp);
+    var disabled = Boolean(disabledProp || loadingProp);
+    // TODO: подумать на тем, чтобы не блокировать кнопку в «заблокированном состоянии»,
+    //  чтобы не терять установленный на неё фокус
+    var onDisabledClick = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
     };
-    var isInteractionPrevented = disabled || loading;
-    return (React.createElement(Tag, __assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: cnButtonBase({
+    return (React.createElement(Tag, __assign({ disabled: disabled, onClick: disabled ? onDisabledClick : onClick }, (disabled && {
+        'aria-disabled': true,
+    }), { type: "button", className: cnButtonBase({
             disabled: disabled,
             loading: loading,
             unstyled: unstyled,
-        }, [className]) }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), children));
+        }, [className]) }, (disabled && { tabIndex: -1 }), other, { ref: ref }), children));
 });
 ButtonBase.displayName = 'ButtonBase';