@ozen-ui/kit 0.54.0 → 0.55.0

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/ButtonNext/Button.d.ts

@@ -1,51 +1,4 @@
 import './Button.css';
-import type { ReactNode, ElementType, ComponentPropsWithRef } from 'react';
-import type { IconProps, IconSize } from '@ozen-ui/icons';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
-import type { RenderContentType } from '../../utils/renderContent';
-import { BUTTON_DEFAULT_TAG } from './constants';
-export declare const buttonVariant: readonly ["contained", "contained-additional", "ghost", "function"];
-export declare const buttonColorVariant: readonly ["primary", "secondary", "tertiary", "error"];
-export type ButtonVariant = (typeof buttonVariant)[number];
-export type ButtonColorVariant = (typeof buttonColorVariant)[number];
-export type ButtonIcon = RenderContentType<IconProps & {
-    size?: IconSize;
-}>['content'];
-type ButtonBaseProps = {
-    /**
-     * Вариант отображения кнопки
-     * @default contained
-     * */
-    variant?: ButtonVariant;
-    /**
-     * Размер
-     * @default m
-     * */
-    size?: FormElementSizeVariant;
-    /**
-     * Цвет
-     * @default primary
-     * */
-    color?: ButtonColorVariant;
-    /** Содержимое кнопки */
-    children?: ReactNode;
-    /** Если {true} делает кнопку заблокированной */
-    disabled?: boolean;
-    /** Если {true} переводит кнопку в состояние загрузки  */
-    loading?: boolean;
-    /** Дополнительные CSS-классы */
-    className?: string;
-    /** Иконка слева */
-    iconLeft?: ButtonIcon;
-    /** Иконка справа */
-    iconRight?: ButtonIcon;
-    /** Если {true} растягивает кнопку на всю ширину родительского контейнера */
-    fullWidth?: boolean;
-    /** Свойства лейбла кнопки */
-    labelProps?: ComponentPropsWithRef<'span'>;
-};
-export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;
+import type { ButtonBaseProps } from './index';
 export declare const cnButton: import("@bem-react/classname").ClassNameFormatter;
 export declare const Button: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseProps, "button">;
-export {};

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

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import './Button.css';
-import React from 'react';
+import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
@@ -10,24 +10,13 @@ import { renderContent } from '../../utils/renderContent';
 import { ButtonBase } from '../ButtonBase';
 import { Loader } from '../Loader';
 import { BUTTON_DEFAULT_SIZE, BUTTON_DEFAULT_VARIANT, BUTTON_DEFAULT_COLOR, BUTTON_DEFAULT_TAG, } from './constants';
-export var buttonVariant = [
-    'contained',
-    'contained-additional',
-    'ghost',
-    'function',
-];
-export var buttonColorVariant = [
-    'primary',
-    'secondary',
-    'tertiary',
-    'error',
-];
 export var cnButton = cn('ButtonNext');
 export var Button = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'ButtonNext',
     });
+    var loaderRef = useRef(null);
     var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, labelProps = props.labelProps, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
     var iconSize = getIconSizeToFormElement(size);
     var renderIcon = function (content) {
@@ -43,8 +32,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(ButtonBase, __assign({ as: Tag, disabled: disabled, loading: loading, onClick: onClick, className: cnButton({
             variant: variant,
             size: size,

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

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

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

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

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

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+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';
+import type { BUTTON_DEFAULT_TAG } from './constants';
+export declare const buttonVariant: readonly ["contained", "contained-additional", "ghost", "function"];
+export declare const buttonColorVariant: readonly ["primary", "secondary", "tertiary", "error"];
+export type ButtonVariant = (typeof buttonVariant)[number];
+export type ButtonColorVariant = (typeof buttonColorVariant)[number];
+export type ButtonIcon = RenderContentType<IconProps>['content'];
+export type ButtonBaseProps = {
+    /**
+     * Вариант отображения кнопки
+     * @default contained
+     * */
+    variant?: ButtonVariant;
+    /**
+     * Размер
+     * @default m
+     * */
+    size?: FormElementSizeVariant;
+    /**
+     * Цвет
+     * @default primary
+     * */
+    color?: ButtonColorVariant;
+    /** Содержимое кнопки */
+    children?: ReactNode;
+    /** Если {true} делает кнопку заблокированной */
+    disabled?: boolean;
+    /** Если {true} переводит кнопку в состояние загрузки  */
+    loading?: boolean;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Иконка слева */
+    iconLeft?: ButtonIcon;
+    /** Иконка справа */
+    iconRight?: ButtonIcon;
+    /** Если {true} растягивает кнопку на всю ширину родительского контейнера */
+    fullWidth?: boolean;
+    /** Свойства лейбла кнопки */
+    labelProps?: ComponentPropsWithRef<'span'>;
+};
+export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;

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

@@ -0,0 +1,12 @@
+export var buttonVariant = [
+    'contained',
+    'contained-additional',
+    'ghost',
+    'function',
+];
+export var buttonColorVariant = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'error',
+];

package/__inner__/esm/components/Calendar/components/CalendarGrid/CalendarGrid.d.ts

@@ -1,11 +1,9 @@
 import './CalendarGrid.css';
-import type { ComponentPropsWithRef } from 'react';
 import React from 'react';
 export declare const cnCalendarGrid: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnCalendarDays: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnCalendarMoths: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnCalendarYears: import("@bem-react/classname").ClassNameFormatter;
-export type CalendarGridProps = ComponentPropsWithRef<'div'>;
 export declare const CalendarGrid: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & React.RefAttributes<HTMLElement>>;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Calendar/components/CalendarGrid/index.d.ts

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

package/__inner__/esm/components/Calendar/components/CalendarGrid/index.js

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

package/__inner__/esm/components/Calendar/components/CalendarGrid/types.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithRef, ComponentRef } from 'react';
+export type CalendarGridRef = ComponentRef<'div'>;
+export type CalendarGridProps = ComponentPropsWithRef<'div'>;

package/__inner__/esm/components/Calendar/components/CalendarGrid/types.js

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

package/__inner__/esm/components/Calendar/components/CalendarGridItem/CalendarGridItem.d.ts

@@ -1,15 +1,5 @@
 import './CalendarGridItem.css';
-import type { ComponentPropsWithRef } from 'react';
 import React from 'react';
-import type { DPDayRange } from '@rehookify/datepicker/dist/types/day';
-import type { CALENDAR_ITEM_DEFAULT_TAG } from '../../constants';
-import type { CalendarSizeVariant } from '../../index';
+import type { CalendarGridItemProps } from './index';
 export declare const cnCalendarGridItem: import("@bem-react/classname").ClassNameFormatter;
-export type CalendarItemProps = Omit<ComponentPropsWithRef<typeof CALENDAR_ITEM_DEFAULT_TAG>, 'size'> & {
-    current?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-    range?: DPDayRange;
-    size?: CalendarSizeVariant;
-};
-export declare const CalendarGridItem: React.ForwardRefExoticComponent<Omit<CalendarItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CalendarGridItem: React.ForwardRefExoticComponent<Omit<CalendarGridItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/__inner__/esm/components/Calendar/components/CalendarGridItem/index.d.ts

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

package/__inner__/esm/components/Calendar/components/CalendarGridItem/index.js

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