@foxford/ui 2.70.0 → 2.71.0-beta-d470e06-20250327

package/dts/index.d.ts

@@ -884,15 +884,15 @@ declare type CSSColor = RGB | RGBA | HEX | CSSGlobalValue | 'currentcolor' | 'tr
 declare type CSSBorderStyle = CSSGlobalValue | 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
 declare type CSSVerticalAlign = CSSGlobalValue | 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom';
 declare type CSSFontWeight = CSSGlobalValue | 'normal' | 'bold' | 'lighter' | 'bolder' | number;
-declare type Size = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
-declare type SizeValue = Size | CSSGlobalValue | number;
+declare type Size$2 = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
+declare type SizeValue = Size$2 | CSSGlobalValue | number;
 declare type Breakpoint = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
 declare type Color = keyof typeof ColorNames | CSSColor;
 declare type ColorPaletteKey = 'color' | `color${string}` | `${string}Color` | `${string}Color${string}`;
 declare type ThemePreset = 'default' | 'brand';
 declare type ThemeMode = 'light' | 'dark';
 declare type ThemeName = 'mother' | 'baby' | 'teen' | 'adult';
-declare type ResponsivePropKey = 'size' | keyof CSSProperties;
+declare type ResponsivePropKey = 'size' | 'layout' | keyof CSSProperties;
 declare type KeysOfUnion<T> = T extends T ? keyof T : never;
 declare type WithThemePreset<T> = T & {
     preset: ThemePreset;
@@ -929,6 +929,10 @@ declare type ResponsiveSizeProps<S extends string, V = S> = ResponsiveProps<'siz
 declare type ResponsivePositionProps<T extends string> = ResponsiveProps<'position', T> & {
     positions?: Partial<Record<T, CSSProperties>>;
 };
+declare type ResponsiveLayoutProps<T extends string> = ResponsiveProps<'layout', T>;
+declare type ResponsiveLayoutInterpolationProps<T extends string = string> = ResponsiveLayoutProps<T> & {
+    layouts: Record<T, CSSProperties>;
+};
 declare type ResponsiveSizeInterpolationProps<S extends string, V, P extends ResponsiveSizeProps<S, V>> = Omit<P, 'size' | 'sizes'> & {
     size: NonNullable<P['size']>;
     sizes: Record<KeysOfUnion<P['sizes']>, CSSProperties>;
@@ -981,7 +985,7 @@ declare const adultDarkTheme: DefaultTheme;
 /**
  * Value for breakpoint
  */
-declare type PossibleValues = number | Size | 'auto' | 'initial' | 'inherit' | boolean;
+declare type PossibleValues = number | Size$2 | 'auto' | 'initial' | 'inherit' | boolean;
 declare type PropsProperties = 'size' | 'fontSize' | 'height' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'fluid';
 declare type CalcProperty = (_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null;
 declare type CssProperty = string | CalcProperty;
@@ -989,15 +993,15 @@ declare type ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
 declare type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {
     [key in `${T}${ResponsiveKeys}`]?: V;
 };
-declare type ResponsiveProperty<V = number | Size> = V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
-declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: null | string, sizes?: Record<Size, number>) => () => () => FlattenSimpleInterpolation | null;
+declare type ResponsiveProperty<V = number | Size$2> = V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
+declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: null | string, sizes?: Record<Size$2, number>) => () => () => FlattenSimpleInterpolation | null;
 interface ResponsiveNamedPropertyPayload<T extends PropsProperties> {
     sizes: ResponsiveNamedProperty<T>;
     cssProperty: CssProperty;
     sizing?: null | string;
     customSizeHandler?: (_value: PossibleValues) => PossibleValues;
     sort?: (_a: string, _b: string) => number;
-    predefinedSizes?: Record<Size, number>;
+    predefinedSizes?: Record<Size$2, number>;
 }
 /**
  * Миксин для генерации media запросов
@@ -1107,7 +1111,7 @@ interface ExpandButtonProps extends React.ComponentPropsWithoutRef<'button'> {
     /** Кастомные цвета */
     palette?: Partial<Record<keyof ExpandButtonPalette, Color>>;
 }
-interface TextProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, 
+interface TextProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated */
 DisplayProperty, ColorProperty, Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<React.BlockquoteHTMLAttributes<HTMLElement>, 'color'>, Omit<React.LabelHTMLAttributes<HTMLElement>, 'color'> {
     /** Применение присета стилей и размеров */
@@ -1184,7 +1188,7 @@ declare const Text: React.ForwardRefExoticComponent<TextProps> & {
 declare type IconPackIconName = Uncapitalize<keyof typeof IconPack>;
 declare type IconNameDefault = 'book' | 'blackBoard' | 'burger' | 'eye' | 'email' | 'sort' | 'unsort' | 'person' | 'diamond' | 'diamondFilled' | 'diamondSolid' | 'infoInverse' | 'list' | 'login' | 'logout' | 'fire' | 'camps' | 'cart' | 'clock' | 'clockFilled' | 'courses' | 'discount' | 'externat' | 'headphones' | 'page' | 'priceTag' | 'phone' | 'prof' | 'star' | 'settings' | 'student' | 'target' | 'textbook' | 'trophy' | 'message' | 'wallet' | 'edit' | 'copy' | 'print' | 'objective' | 'present' | 'coins' | 'calendar' | 'calendar_simple' | 'chevronDown' | 'chevronUp' | 'chevronRight' | 'chevronLeft' | 'cross' | 'dialog' | 'dropDownArrow' | 'externalLink' | 'file' | 'fileBordered' | 'lessons' | 'pencil' | 'phoneNoFill' | 'radioChecked' | 'radioNotChecked' | 'search' | 'tasks' | 'tinyCross' | 'sharpCross' | 'plus' | 'plusThin' | 'play' | 'reload' | 'checkCircle' | 'info' | 'check' | 'home' | 'questionFilled' | 'document' | 'cancel' | 'playPause' | 'video';
 declare type IconName = IconPackIconName | IconNameDefault;
-interface IconProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
+interface IconProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
     /** UI: brand (v3), or default (v2) */
     preset?: ThemePreset;
     /** Icon color */
@@ -1288,7 +1292,7 @@ declare type AnchorPalette = {
     colorHover: CSSColor;
     colorDisabled: CSSColor;
 };
-interface AnchorProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
+interface AnchorProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use children as function */
@@ -1362,7 +1366,7 @@ declare type ButtonPalette = {
     borderColorDisabled: CSSColor;
     shadowColor: CSSColor;
 };
-interface ButtonProps extends ResponsiveSizeProps<Size, SizeValue>, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, Omit<React.ComponentPropsWithRef<'button'>, 'color' | 'children'>, 
+interface ButtonProps extends ResponsiveSizeProps<Size$2, SizeValue>, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, Omit<React.ComponentPropsWithRef<'button'>, 'color' | 'children'>, 
 /** @deprecated Use children as function or inline prop */
 DisplayProperty, 
 /** @deprecated */
@@ -1577,7 +1581,7 @@ declare type ArrowPalette = {
     borderColorDisabled: CSSColor;
     shadowColor: CSSColor;
 };
-interface ArrowProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface ArrowProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
     /**
      * UI: v3 (brand), or v2 (default)
      * @default "default" */
@@ -1867,7 +1871,7 @@ declare type ArrowBadgePalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
 };
-interface ArrowBadgeProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, 
+interface ArrowBadgeProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use palette */
@@ -1920,7 +1924,7 @@ declare type TabPalette = {
     backgroundColorDisabled: CSSColor;
     borderColorDisabled: CSSColor;
 };
-interface TabProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, 
+interface TabProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use palette */
@@ -1978,7 +1982,7 @@ declare type BadgePalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
 };
-interface BadgeProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, 
+interface BadgeProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty, 
 /** @deprecated Use children as function */
@@ -2031,52 +2035,6 @@ DisplayProperty, Omit<React.ComponentPropsWithRef<'div'>, 'color' | 'children'>
  */
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps>;
 
-declare type SkeletonPalette = {
-    color: CSSColor;
-    gradientColor: CSSColor;
-    gradientHighlightColor: CSSColor;
-};
-interface SkeletonProps extends ResponsiveMarginProps, React.ComponentPropsWithRef<'div'> {
-    /** Element to infer sizing */
-    children?: React.ReactNode;
-    /** Custom colors */
-    palette?: Partial<Record<keyof SkeletonPalette, Color>>;
-    /** Display 'inline-block' */
-    inline?: boolean;
-    /** Root border-radius: 50% */
-    round?: boolean;
-    /** Root border-radius */
-    borderRadius?: string | number;
-    /** Root width */
-    width?: string | number;
-    /** Root height */
-    height?: string | number;
-    /** Value (ms) to control animation speed */
-    animationDuration?: number;
-    /** Delay to animation start (ms) to avoid flicker at fast connection */
-    animationDelay?: number;
-    /** Appearance variant */
-    primary?: boolean;
-    /** Appearance variant */
-    secondary?: boolean;
-    /** Appearance variant */
-    onColored?: boolean;
-    /** Root node type */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
-}
-
-/**
- *
- * Component accepts all \<div\> attributes.
- *
- * Responsive "margin" props are supported.
- *
- * Exposed "ref" attached to root node.
- *
- * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)
- */
-declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
-
 declare type IconButtonSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
 declare type IconButtonPalette = {
     color: CSSColor;
@@ -2360,289 +2318,431 @@ declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps> & {
     Component: typeof TooltipComponent;
 };
 
-declare type PopoverComponentSize = 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type Size$1 = 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type Layout$1 = 'vertical' | 'horizontal';
 declare type PopoverComponentPalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
-    mediaPlaceholderColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface PopoverComponentProps extends ResponsiveSizeProps<PopoverComponentSize>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
+interface PopoverComponentBaseProps extends ResponsiveSizeProps<Size$1>, ResponsiveLayoutProps<Layout$1> {
     /**
      * Кастомные цвета.
+     *
      * @default undefined */
     palette?: Partial<Record<keyof PopoverComponentPalette, Color>>;
-    /**
-     * Ориентация контента.
-     * @default 'portrait' */
-    orientation?: 'portrait' | 'landscape';
     /**
      * Использование скелетонов вместо реального контента.
+     *
      * @default false */
     loading?: boolean;
     /**
-     * Пропсы для бейджа в верхнем сегменте.
-     * @default {} */
-    badge?: {
-        text?: React.ReactNode;
-        badgeProps?: Partial<BadgeProps>;
-    };
-    /**
-     * Tекст над заголовком.
+     * Бейдж в хедере.
+     *
+     * Если передана строка или число используется встроенный бейдж.
+     *
      * @default undefined */
-    caption?: React.ReactNode;
+    badge?: React.ReactNode | ((badgeProps: Partial<BadgeProps>) => React.ReactNode);
     /**
-     * Пропсы типографики для текста над заголовком.
-     * @default {} */
-    captionProps?: Partial<TextProps>;
+     * Tекст в хедере.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @default undefined */
+    caption?: React.ReactNode | ((captionProps: Partial<TextProps>) => React.ReactNode);
     /**
-     * Tекст заголовка.
+     * Кастомный хедер.
+     *
      * @default undefined */
-    title?: React.ReactNode;
+    header?: React.ReactNode;
     /**
-     * Пропсы типографики для текста заголовка.
-     * @default {} */
-    titleProps?: Partial<TextProps>;
+     * Заголовок.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     * @default undefined */
+    title?: React.ReactNode | ((titleProps: Partial<TextProps>) => React.ReactNode);
     /**
      * Основной текст.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
      * @default undefined */
-    content?: React.ReactNode;
+    content?: React.ReactNode | ((contentProps: Partial<TextProps>) => React.ReactNode);
     /**
-     * Пропсы типографики для основного текста.
-     * @default {} */
-    contentProps?: Partial<TextProps>;
+     * Кастомный блок с основным контентом.
+     *
+     * @default undefined */
+    body?: React.ReactNode;
     /**
-     * Рендер кнопки закрытия.
-     * @default false */
-    showCloseButton?: boolean;
+     * Кастомный футер.
+     *
+     * @default undefined */
+    footer?: React.ReactNode;
     /**
-     * Пропсы для кнопки закрытия.
-     * @default {} */
-    closeButtonProps?: Partial<IconButtonProps>;
+     * Кнопка закрытия.
+     *
+     * @default undefined */
+    closeButton?: React.ReactNode | ((iconButtonProps: Partial<IconButtonProps>) => React.ReactNode);
     /**
-     * Пропсы для медиа элементов.
-     * @default {} */
-    media?: {
-        imgProps?: React.ComponentPropsWithoutRef<'img'>;
-        videoProps?: React.ComponentPropsWithoutRef<'video'>;
-    };
+     * Кастомный блок с медиа.
+     *
+     * @default undefined */
+    media?: React.ReactNode;
     /**
-     * Функция для рендера нижнего сегмента поповера, аргументом получает пропсы размеров.
+     * Картинка для вертикального шаблона лейаута.
+     *
+     * Ожидаемое соотношение сторон 16:9.
+     *
      * @default undefined */
-    footer?: (sizeProps: Pick<PopoverComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
+    imgSrcVertical?: string;
     /**
-     * Внешний вид с тенью.
+     * Картинка для горизонтального шаблона лейаута.
+     *
+     * Ожидаемое соотношение сторон 1:1.
+     *
+     * @default undefined */
+    imgSrcHorizontal?: string;
+    /**
+     * Использовать тень для рутового элемента.
+     *
      * @default false */
     elevated?: boolean;
-    /** @ignore */
+    /**
+     * Кастомный рутовый блок.
+     *
+     * Использование компонента только как контейнера.
+     *
+     * @default undefined */
+    root?: React.ReactNode | ((rootProps: {
+        badgeProps: Partial<BadgeProps>;
+        captionProps: Partial<TextProps>;
+        titleProps: Partial<TextProps>;
+        contentProps: Partial<TextProps>;
+        closeButtonProps: Partial<IconButtonProps>;
+    }) => React.ReactNode);
+    /**
+     * Внутренний колбек react-floater.
+     *
+     * @ignore */
     closeFn?: () => void;
-    /** @ignore @deprecated */
-    controlsDirection?: 'row' | 'column';
-    /** @ignore @deprecated */
-    controls?: {
-        secondary?: {
-            text?: React.ReactNode;
-            buttonProps?: Partial<ButtonProps>;
-        };
-        primary?: {
-            text?: React.ReactNode;
-            buttonProps?: Partial<ButtonProps>;
-        };
-    };
 }
+declare type PopoverComponentProps = PopoverComponentBaseProps & Omit<React.ComponentPropsWithRef<'div'>, keyof PopoverComponentBaseProps>;
 
-/**
- *
- * Компонент поддерживает все атрибуты \<div\> элемента.
- *
- * Можно передать "ref", который будет ассоциирован с рутовым элементом.
- *
- * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
- *
- * Полный интерфейс `PopoverComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/PopoverComponent/types.ts).
- */
 declare const PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps>;
 
-interface PopoverProps extends ResponsiveSizeProps<PopoverComponentSize>, React.RefAttributes<HTMLDivElement> {
+declare type Size = 's' | 'xl' | 'l' | 'm' | 'xs';
+declare type Layout = 'vertical' | 'horizontal';
+interface PopoverBaseProps extends ResponsiveSizeProps<Size>, ResponsiveLayoutProps<Layout> {
     /**
      * Кастомные цвета.
+     *
+     * @general
      * @default undefined */
-    palette?: Partial<Record<keyof PopoverComponentPalette, Color>>;
+    palette?: {
+        color?: Color;
+        backgroundColor?: Color;
+        shadowColor?: Color;
+    };
     /**
      * Открывать автоматически.
+     *
+     * @floating
      * @default false */
-    autoOpen?: boolean;
+    autoOpen?: Props['autoOpen'];
     /**
      * Колбек, который будет вызван при открытии или закрытии.
+     *
+     * @floating
      * @default undefined */
-    callback?: (action: 'open' | 'close', props: Props) => void;
+    callback?: Props['callback'];
     /**
      * Закрывать поповер при клике за пределами рутового элемента.
      *
-     * Работает только если не используется проп `open`.
+     * Работает только если не используется open.
+     *
+     * @floating
      * @default false */
     closeOnClickOutside?: boolean;
     /**
-     * Закрывать поповер при скролле `document`.
+     * Закрывать поповер при скролле document.
      *
-     * Работает только если не используется проп `open`.
+     * Работает только если не используется open.
+     *
+     * @floating
      * @default false */
     closeOnScroll?: boolean;
     /**
-     * Триггер открытия, а также якорь поповера (если не используется проп `target`).
+     * Триггер открытия, а также якорь поповера (если не используется target).
+     *
+     * @floating
      * @default undefined */
-    children?: React.ReactNode;
+    trigger?: Props['children'];
     /**
      * Отключить авто изменение положения поповера при скролле или ресайзе.
+     *
+     * @floating
      * @default false */
-    disableFlip?: boolean;
+    disableFlip?: Props['disableFlip'];
     /**
-     * Отключить использование `event='click'` вместо `event='hover'` для мобильных браузеров.
+     * Отключить использование event='click' вместо event='hover' для мобильных браузеров.
      *
-     * Работает только если не используется проп `open`.
+     * Работает только если не используется проп open.
+     *
+     * @floating
      * @default false */
-    disableHoverToClick?: boolean;
+    disableHoverToClick?: Props['disableHoverToClick'];
     /**
      * Событие для открытия поповера.
      *
-     * Работает только если не используется проп `open`.
+     * Работает только если не используется проп open.
+     *
+     * @floating
      * @default 'click' */
-    event?: 'click' | 'hover';
+    event?: Props['event'];
     /**
-     * Отложенное закрытие если используется `event='hover'` (сек).
+     * Отложенное закрытие если используется event='hover' (сек).
      *
-     * Работает только если не используется проп `open`.
+     * Работает только если не используется проп open.
+     *
+     * @floating
      * @default 0.4 */
-    eventDelay?: number;
+    eventDelay?: Props['eventDelay'];
     /**
      * Не использовать стрелку.
+     *
+     * @floating
      * @default false */
-    hideArrow?: boolean;
+    hideArrow?: Props['hideArrow'];
     /**
      * Отступ между поповером и якорем (px).
+     *
+     * @floating
      * @default 8 */
-    offset?: number;
+    offset?: Props['offset'];
     /**
      * Поповер открыт или закрыт.
      *
-     * Использование включает controlled режим.
+     * Использование включает контролируемый режим, в котором отдельные пропсы не имеют эффекта.
+     *
+     * @floating
      * @default undefined */
-    open?: boolean;
+    open?: Props['open'];
     /**
-     * Положение поповера.
+     * Позиция поповера.
+     *
+     * @floating
      * @default 'bottom' */
-    placement?: Placement;
+    position?: Props['placement'];
     /**
-     * Элемент или CSS селектор элемента для использования в качестве портала.
+     * Элемент или CSS селектор элемента для портала.
+     *
+     * @floating
      * @default undefined */
     portalElement?: Props['portalElement'];
     /**
-     * Рендер кнопки закрытия.
-     * @default false */
-    showCloseButton?: boolean;
-    /**
-     * Пропсы для кнопки закрытия.
-     * @default {} */
-    closeButtonProps?: Partial<IconButtonProps>;
-    /**
-     * Элемент или CSS селектор элемента для использования в качестве якоря.
+     * Элемент или CSS селектор элемента для якоря.
+     *
+     * @floating
      * @default undefined */
     target?: Props['target'];
-    /**
-     * Ориентация контента.
-     * @default 'portrait' */
-    orientation?: 'portrait' | 'landscape';
     /**
      * Использование скелетонов вместо реального контента.
+     *
+     * @general
      * @default false */
     loading?: boolean;
     /**
-     * Пропсы для бейджа в верхнем сегменте.
-     * @default {} */
-    badge?: {
-        text?: React.ReactNode;
-        badgeProps?: Partial<BadgeProps>;
-    };
-    /**
-     * Tекст над заголовком.
+     * Бейдж в хедере.
+     *
+     * Если передана строка или число используется встроенный бейдж.
+     *
+     * @slot
      * @default undefined */
-    caption?: React.ReactNode;
+    badge?: React.ReactNode | ((badgeProps: Partial<BadgeProps>) => React.ReactNode);
     /**
-     * Пропсы типографики для текста над заголовком.
-     * @default {} */
-    captionProps?: Partial<TextProps>;
+     * Tекст в хедере.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @slot
+     * @default undefined */
+    caption?: React.ReactNode | ((captionProps: Partial<TextProps>) => React.ReactNode);
     /**
-     * Tекст заголовка.
+     * Кастомный хедер.
+     *
+     * @slot
      * @default undefined */
-    title?: React.ReactNode;
+    header?: React.ReactNode;
     /**
-     * Пропсы типографики для текста заголовка.
-     * @default {} */
-    titleProps?: Partial<TextProps>;
+     * Заголовок.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @slot
+     * @default undefined */
+    title?: React.ReactNode | ((titleProps: Partial<TextProps>) => React.ReactNode);
     /**
      * Основной текст.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @slot
      * @default undefined */
-    content?: React.ReactNode;
+    content?: React.ReactNode | ((contentProps: Partial<TextProps>) => React.ReactNode);
     /**
-     * Пропсы типографики для основного текста.
-     * @default {} */
-    contentProps?: Partial<TextProps>;
+     * Кастомный блок с основным контентом.
+     *
+     * @slot
+     * @default undefined */
+    body?: React.ReactNode;
     /**
-     * Пропсы для медиа элементов.
-     * @default {} */
-    media?: {
-        imgProps?: React.ComponentPropsWithoutRef<'img'>;
-        videoProps?: React.ComponentPropsWithoutRef<'video'>;
-    };
+     * Кастомный футер.
+     *
+     * @slot
+     * @default undefined */
+    footer?: React.ReactNode;
+    /**
+     * Кнопка закрытия.
+     *
+     * @slot
+     * @default undefined */
+    closeButton?: React.ReactNode | ((iconButtonProps: Partial<IconButtonProps>) => React.ReactNode);
+    /**
+     * Кастомный блок с медиа.
+     *
+     * @slot
+     * @default undefined */
+    media?: React.ReactNode;
     /**
-     * Функция для рендера нижнего сегмента поповера, аргументом получает пропсы размеров.
+     * Картинка для вертикального шаблона лейаута.
+     *
+     * Ожидаемое соотношение сторон 16:9.
+     *
+     * @general
      * @default undefined */
-    footer?: (sizeProps: Pick<PopoverProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
+    imgSrcVertical?: string;
+    /**
+     * Картинка для горизонтального шаблона лейаута.
+     *
+     * Ожидаемое соотношение сторон 1:1.
+     *
+     * @general
+     * @default undefined */
+    imgSrcHorizontal?: string;
     /**
      * z-index поповера.
+     *
+     * @floating
      * @default 100 */
     zIndex?: number;
-    /** @ignore */
-    debug?: boolean;
-    /** @ignore */
-    getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
-    /** @ignore */
-    wrapperOptions?: {
-        offset?: number;
-        placement?: Omit<Placement, 'center'>;
-        position?: boolean;
-    };
-    /** @ignore */
+    /**
+     * Размер.
+     *
+     * Использование кортежей включает применение размеров в зависимости от ширины вьюпорта.
+     *
+     * @general
+     * @default 's' */
+    size?: Size | [DESKTOP: Size, TABLET: Size, MOBILE: Size] | [XL: Size, L: Size, M: Size, S: Size, XS: Size, XXS: Size];
+    /**
+     * Размер для XXS брейкпоинта.
+     *
+     * @default undefined */
+    sizeXXS?: Size;
+    /**
+     * Размер для XS брейкпоинта.
+     *
+     * @default undefined */
+    sizeXS?: Size;
+    /**
+     * Размер для S брейкпоинта.
+     *
+     * @default undefined */
+    sizeS?: Size;
+    /**
+     * Размер для M брейкпоинта.
+     *
+     * @default undefined */
+    sizeM?: Size;
+    /**
+     * Размер для L брейкпоинта.
+     *
+     * @default undefined */
+    sizeL?: Size;
+    /**
+     * Размер для XL брейкпоинта.
+     *
+     * @default undefined */
+    sizeXL?: Size;
+    /**
+     * Модификация размеров.
+     *
+     * @general
+     * @default undefined */
+    sizes?: Partial<Record<Size, React.CSSProperties>>;
+    /**
+     * Вариант шаблона лейаута.
+     *
+     * Использование кортежей включает применение шаблонов в зависимости от ширины вьюпорта.
+     *
+     * @general
+     * @default 'vertical' */
+    layout?: Layout | [DESKTOP: Layout, TABLET: Layout, MOBILE: Layout] | [XL: Layout, L: Layout, M: Layout, S: Layout, XS: Layout, XXS: Layout];
+    /**
+     * Лейаут для XXS брейкпоинта.
+     *
+     * @default undefined */
+    layoutXXS?: Layout;
+    /**
+     * Лейаут для XS брейкпоинта.
+     *
+     * @default undefined */
+    layoutXS?: Layout;
+    /**
+     * Лейаут для S брейкпоинта.
+     *
+     * @default undefined */
+    layoutS?: Layout;
+    /**
+     * Лейаут для M брейкпоинта.
+     *
+     * @default undefined */
+    layoutM?: Layout;
+    /**
+     * Лейаут для L брейкпоинта.
+     *
+     * @default undefined */
+    layoutL?: Layout;
+    /**
+     * Лейаут для XL брейкпоинта.
+     *
+     * @default undefined */
+    layoutXL?: Layout;
+    /**
+     * Кастомный рутовый блок.
+     *
+     * Использование компонента только как контейнера.
+     *
+     * @slot
+     * @default undefined */
+    root?: React.ReactNode | ((rootProps: {
+        badgeProps: Partial<BadgeProps>;
+        captionProps: Partial<TextProps>;
+        titleProps: Partial<TextProps>;
+        contentProps: Partial<TextProps>;
+        closeButtonProps: Partial<IconButtonProps>;
+    }) => React.ReactNode);
+    /**
+     *
+     * @ignore */
     styles?: Partial<Styles>;
-    /** @ignore @deprecated */
-    controlsDirection?: 'row' | 'column';
-    /** @ignore @deprecated */
-    controls?: {
-        secondary?: {
-            text?: React.ReactNode;
-            buttonProps?: Partial<ButtonProps>;
-        };
-        primary?: {
-            text?: React.ReactNode;
-            buttonProps?: Partial<ButtonProps>;
-        };
-    };
 }
+declare type PopoverProps = PopoverBaseProps & Omit<React.ComponentPropsWithRef<'div'>, keyof PopoverBaseProps>;
 
 /**
  *
- * Компонент поддерживает все атрибуты \<div\> элемента.
- *
- * Можно передать "ref", который будет ассоциирован с рутовым элементом.
- *
- * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
- *
- * Компонент основан на ["react-floater"](https://www.npmjs.com/package/react-floater).
- *
- * Получить доступ к компоненту, не подключенному к библиотеке, можно через `Popover.Component`.
- *
- * Полный интерфейс `Popover` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Popover/types.ts), интерфейс `Popover.Component` [тут](https://github.com/foxford/ui/blob/master/src/components/PopoverComponent/types.ts).
+ * Компонент для отображения контента поверх основного интерфейса.
  *
+ * Поддерживается "ref" и все нативные атрибуты \<div\> элемента.
  */
 declare const Popover: React.ForwardRefExoticComponent<PopoverProps> & {
     Component: typeof PopoverComponent;
@@ -2704,7 +2804,7 @@ declare type ListItemPalette = {
     backgroundColorHover: CSSColor;
     mediaPlaceholderColor: CSSColor;
 };
-interface ListItemProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type'>, Omit<React.AnchorHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type' | 'media'> {
+interface ListItemProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type'>, Omit<React.AnchorHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type' | 'media'> {
     /** Root node type */
     as?: React.ElementType;
     /** Main text content or render function */
@@ -2782,7 +2882,7 @@ declare type IndicatorPalette = {
     backgroundColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface IndicatorProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, React.ComponentPropsWithRef<'span'> {
+interface IndicatorProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, React.ComponentPropsWithRef<'span'> {
     /** Custom colors */
     palette?: Partial<Record<keyof IndicatorPalette, Color>>;
     /** Text content */
@@ -2827,7 +2927,7 @@ declare type AvatarPalette = {
     shadowColor: CSSColor;
 };
 declare type AvatarSize = SizeValue | 'sm';
-interface AvatarProps extends ResponsiveSizeProps<Size, AvatarSize>, ResponsiveMarginProps, 
+interface AvatarProps extends ResponsiveSizeProps<Size$2, AvatarSize>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
     /** UI: brand (v3), or default (v2) */
@@ -3138,6 +3238,52 @@ declare const Menu: React.ForwardRefExoticComponent<MenuProps> & {
     Divider: typeof MenuDivider;
 };
 
+declare type SkeletonPalette = {
+    color: CSSColor;
+    gradientColor: CSSColor;
+    gradientHighlightColor: CSSColor;
+};
+interface SkeletonProps extends ResponsiveMarginProps, React.ComponentPropsWithRef<'div'> {
+    /** Element to infer sizing */
+    children?: React.ReactNode;
+    /** Custom colors */
+    palette?: Partial<Record<keyof SkeletonPalette, Color>>;
+    /** Display 'inline-block' */
+    inline?: boolean;
+    /** Root border-radius: 50% */
+    round?: boolean;
+    /** Root border-radius */
+    borderRadius?: string | number;
+    /** Root width */
+    width?: string | number;
+    /** Root height */
+    height?: string | number;
+    /** Value (ms) to control animation speed */
+    animationDuration?: number;
+    /** Delay to animation start (ms) to avoid flicker at fast connection */
+    animationDelay?: number;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    onColored?: boolean;
+    /** Root node type */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+}
+
+/**
+ *
+ * Component accepts all \<div\> attributes.
+ *
+ * Responsive "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
+
 declare type DialogComponentCommonSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
 declare type DialogComponentSize = DialogComponentCommonSize | 'xxl-landscape' | 'xl-landscape' | 'l-landscape';
 declare type DialogComponentPalette = {
@@ -3671,7 +3817,6 @@ interface Theme {
         Popover?: Partial<PopoverProps>;
         PopoverComponent?: Partial<PopoverComponentProps>;
         ProgressLine?: Partial<ProgressLineProps>;
-        Skeleton?: Partial<SkeletonProps>;
         Switcher?: Partial<SwitcherProps>;
         Tab?: Partial<TabProps>;
         Text?: Partial<TextProps>;
@@ -3776,7 +3921,7 @@ declare const useScrollMonitor: ({ target, scrollThrottleMS, scrollEndDebounceMS
 
 declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
 
-declare function buildMediaQuery(value: number | Size | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string, sizes?: Record<Size, number>): ReturnType<typeof css>;
+declare function buildMediaQuery(value: number | Size$2 | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string, sizes?: Record<Size$2, number>): ReturnType<typeof css>;
 declare const desktopFirst: (a: string, b: string) => number;
 declare const mobileFirst: (a: string, b: string) => number;
 
@@ -5864,4 +6009,39 @@ interface ProgressCircleProps extends ResponsiveSizeProps<ProgressCircleSize>, R
  */
 declare const ProgressCircle: React.ForwardRefExoticComponent<ProgressCircleProps>;
 
-export { Accordion, type AccordionProps, ActionBtn, type ActionBtnProps, Alert, type AlertProps, Amount, type AmountProps, Anchor, Arrow, ArrowBadge, type ArrowBadgeProps, type ArrowProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BaseProps, type Breakpoint, Button, type ButtonProps, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, type CheckboxProps, Chip, type ChipProps, type Color, ColorNames, type ColorPaletteKey, Container, type ContainerProps, ContextMenu, type ContextMenuMultiLevelProps, type ContextMenuProps, CurrencyCodes, DEFAULT_MASK, Dialog, type DialogComponentProps, type DialogProps, Dropdown, type DropdownProps, FormLabel, type FormLabelProps, type HEX, INITIAL_MASK, Icon, IconButton, type IconButtonProps, type IconName, type IconProps, Indicator, type IndicatorProps, Input, type InputCheckboxProps, type InputMaskOptions, type InputMaskState, type InputPhoneProps, type InputProps, type InputRadioProps, type KeysOfUnion, ListItem, type ListItemProps, Menu, type MenuComponentProps, type MenuContainerProps, type MenuDividerProps, type MenuListProps, type MenuProps, Modal, type ModalProps, Notification, type NotificationProps, type Nullable, Paper, type PaperProps, type PlaygroundPropControl, type PlaygroundToolbar, Popover, type PopoverComponentProps, type PopoverProps, Progress, ProgressCircle, type ProgressCircleProps, ProgressLine, type ProgressLineProps, type ProgressProps, type ProgressSegmentedProps, type RGB, type RGBA, Radio, type RadioProps, type ResponsivePositionProps, type ResponsivePropKey, type ResponsiveProps, type ResponsiveSizeInterpolationProps, type ResponsiveSizeProps, withThemeScrollable as Scrollable, type ScrollableProps, Section, type SectionProps, Select, type SelectProps, Separator, type SeparatorProps, type Size, type SizeValue, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextEllipseProps, type TextHeadingProps, type TextProps, Textarea, type TextareaProps, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, type TooltipComponentProps, type TooltipProps, type WithThemePreset, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, useClickOutside, useScrollMonitor, vAlign };
+interface AspectRatioBaseProps {
+    /**
+     * Целевой элемент.
+     */
+    children: React.ReactNode;
+    /**
+     * Соотношение сторон.
+     *
+     * @default 1:1 */
+    ratio?: `${number}:${number}`;
+    /**
+     * Ширина контейнера (высота будет рассчитана согласно ratio).
+     *
+     * Для корретной работы нужно передать ширину или высоту.
+     *
+     * @default min-content */
+    width?: React.CSSProperties['width'];
+    /**
+     * Высота контейнера (ширина будет рассчитана согласно ratio).
+     *
+     * Для корретной работы нужно передать ширину или высоту.
+     *
+     * @default min-content */
+    height?: React.CSSProperties['height'];
+}
+declare type AspectRatioProps = AspectRatioBaseProps & Omit<React.ComponentPropsWithRef<'div'>, keyof AspectRatioBaseProps>;
+
+/**
+ *
+ * Компонент для создания плейсхолдеров с определенным соотношением сторон.
+ *
+ * Поддерживается "ref" и все нативные атрибуты \<div\> элемента.
+ */
+declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps>;
+
+export { Accordion, type AccordionProps, ActionBtn, type ActionBtnProps, Alert, type AlertProps, Amount, type AmountProps, Anchor, Arrow, ArrowBadge, type ArrowBadgeProps, type ArrowProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BaseProps, type Breakpoint, Button, type ButtonProps, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, type CheckboxProps, Chip, type ChipProps, type Color, ColorNames, type ColorPaletteKey, Container, type ContainerProps, ContextMenu, type ContextMenuMultiLevelProps, type ContextMenuProps, CurrencyCodes, DEFAULT_MASK, Dialog, type DialogComponentProps, type DialogProps, Dropdown, type DropdownProps, FormLabel, type FormLabelProps, type HEX, INITIAL_MASK, Icon, IconButton, type IconButtonProps, type IconName, type IconProps, Indicator, type IndicatorProps, Input, type InputCheckboxProps, type InputMaskOptions, type InputMaskState, type InputPhoneProps, type InputProps, type InputRadioProps, type KeysOfUnion, ListItem, type ListItemProps, Menu, type MenuComponentProps, type MenuContainerProps, type MenuDividerProps, type MenuListProps, type MenuProps, Modal, type ModalProps, Notification, type NotificationProps, type Nullable, Paper, type PaperProps, type PlaygroundPropControl, type PlaygroundToolbar, Popover, type PopoverComponentProps, type PopoverProps, Progress, ProgressCircle, type ProgressCircleProps, ProgressLine, type ProgressLineProps, type ProgressProps, type ProgressSegmentedProps, type RGB, type RGBA, Radio, type RadioProps, type ResponsiveLayoutInterpolationProps, type ResponsiveLayoutProps, type ResponsivePositionProps, type ResponsivePropKey, type ResponsiveProps, type ResponsiveSizeInterpolationProps, type ResponsiveSizeProps, withThemeScrollable as Scrollable, type ScrollableProps, Section, type SectionProps, Select, type SelectProps, Separator, type SeparatorProps, type Size$2 as Size, type SizeValue, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextEllipseProps, type TextHeadingProps, type TextProps, Textarea, type TextareaProps, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, type TooltipComponentProps, type TooltipProps, type WithThemePreset, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, useClickOutside, useScrollMonitor, vAlign };