@ozen-ui/kit 0.48.0 → 0.49.1

package/__inner__/esm/components/Alert/Alert.css

@@ -2,6 +2,10 @@
 .Alert {
   --alert-status-line-width: 8px;
   --alert-status-line-gutter: var(--control-padding-xs);
+  --alert-title-text-color: var(--color-content-primary);
+  --alert-body-text-color: var(--color-content-secondary);
+  --alert-icon-color: var(--color-content-primary);
+  --alert-close-button-color: var(--color-content-primary);
   display: flex;
   overflow: auto;
   inline-size: 100%;
@@ -22,18 +26,13 @@
 
   text-transform: var(--typography-text-xs-text_transform, none);
 }
-.Alert_color_light {
-      --alert-title-text-color: var(--color-content-primary);
-      --alert-body-text-color: var(--color-content-secondary);
-      --alert-icon-color: var(--color-content-primary);
-      --alert-close-button-color: var(--color-content-primary);
-    }
-.Alert_color_dark {
-      --alert-title-text-color: var(--color-content-primary-inverse);
-      --alert-body-text-color: var(--color-content-primary-inverse);
-      --alert-icon-color: var(--color-content-primary-inverse);
-      --alert-close-button-color: var(--color-content-primary-inverse);
-    }
+.Alert_color_dark,
+  .Alert_inverse {
+    --alert-title-text-color: var(--color-content-primary-inverse);
+    --alert-body-text-color: var(--color-content-primary-inverse);
+    --alert-icon-color: var(--color-content-primary-inverse);
+    --alert-close-button-color: var(--color-content-primary-inverse);
+  }
 .Alert_status_info {
       --alert-icon-color: var(--color-content-info);
       --alert-status-line-color: var(--color-background-info);

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

@@ -1,43 +1,17 @@
 import './Alert.css';
 import React from 'react';
-import type { HTMLAttributes, ReactElement, ReactNode, MouseEvent } from 'react';
 import type { ButtonProps } from '../ButtonNext';
 export declare const cnAlert: import("@bem-react/classname").ClassNameFormatter;
-export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
-export declare const alertColorVariant: readonly ["light", "dark"];
-export type AlertStatusVariant = (typeof alertStatusVariant)[number];
-export type AlertColorVariant = (typeof alertColorVariant)[number];
-type AlertBaseProps = {
-    /** Заголовок сообщения */
-    title: ReactNode;
-    /**
-     * Статус сообщения
-     * @default info
-     */
-    status?: AlertStatusVariant;
-    /** Цветовая палитра сообщения */
-    color?: AlertColorVariant;
-    /**
-     * Если {true} отображает иконку со статусом
-     * @default true
-     */
-    showIcon?: boolean;
-    /**
-     * Функция обратного вызова при нажатии на кнопку закрытия
-     */
-    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Основное содержимое элемента
-     * @default null
-     * */
-    children?: ReactNode;
-    /** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
-    action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
-    /** Дополнительные CSS-классы */
-    className?: string;
-    /** Текст для кнопки закрытия компонента */
-    closeText?: string;
-};
-export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
-export declare const Alert: React.ForwardRefExoticComponent<AlertBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Alert: React.ForwardRefExoticComponent<{
+    title: React.ReactNode;
+    status?: "error" | "info" | "success" | "warning" | undefined;
+    inverse?: boolean | undefined;
+    showIcon?: boolean | undefined;
+    onClose?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+    children?: React.ReactNode;
+    action?: React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>> | (({ size, className, }: Pick<ButtonProps, "className" | "size">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
+    className?: string | undefined;
+    closeText?: string | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "color"> & {
+    color?: "dark" | "light" | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Alert/Alert.js

@@ -2,32 +2,29 @@ import { __assign, __rest } from "tslib";
 import './Alert.css';
 import React, { forwardRef, useMemo } from 'react';
 import { CrossIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, WarningTriangleFilledIcon, WarningCircleFilledIcon, } from '@ozen-ui/icons';
+import { deprecate } from '@ozen-ui/logger';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { IconButton } from '../IconButtonNext';
 import { Paper } from '../Paper';
-import { ALERT_DEFAULT_STATUS, ALERT_DEFAULT_SHOW_ICON, ALERT_DEFAULT_COLOR, } from './constants';
+import { ALERT_DEFAULT_STATUS, ALERT_DEFAULT_SHOW_ICON, ALERT_DEFAULT_INVERSE, } from './constants';
 export var cnAlert = cn('Alert');
-export var alertStatusVariant = [
-    'success',
-    'error',
-    'warning',
-    'info',
-];
-export var alertColorVariant = ['light', 'dark'];
 var matchStatusToIcon = {
-    neutral: React.createElement(InfoCircleFilledIcon, { size: "s" }),
     info: React.createElement(InfoCircleFilledIcon, { size: "s" }),
-    warning: React.createElement(WarningTriangleFilledIcon, { size: "s" }),
+    neutral: React.createElement(InfoCircleFilledIcon, { size: "s" }),
     success: React.createElement(CheckCircleFilledIcon, { size: "s" }),
     error: React.createElement(WarningCircleFilledIcon, { size: "s" }),
+    warning: React.createElement(WarningTriangleFilledIcon, { size: "s" }),
 };
 export var Alert = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Alert',
     });
-    var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.color, color = _c === void 0 ? ALERT_DEFAULT_COLOR : _c, closeText = props.closeText, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, other = __rest(props, ["status", "showIcon", "color", "closeText", "children", "action", "onClose", "title", "className"]);
+    var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.inverse, inverse = _c === void 0 ? ALERT_DEFAULT_INVERSE : _c, color = props.color, closeText = props.closeText, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, other = __rest(props, ["status", "showIcon", "inverse", "color", "closeText", "children", "action", "onClose", "title", "className"]);
+    if (process.env.NODE_ENV !== 'production' && color) {
+        deprecate('Свойство «color» устарело. Для замены используйте «inverse».');
+    }
     var action = useMemo(function () {
         var actionProps = {
             size: '2xs',
@@ -41,9 +38,12 @@ export var Alert = forwardRef(function (inProps, ref) {
         }
         return React.cloneElement(actionProp, actionProps);
     }, [actionProp]);
-    return (React.createElement(Paper, __assign({ radius: "l", shadow: "m", role: "alert", background: color === 'light' ? 'main' : 'main-inverse' }, other, { className: cnAlert({ status: status, hasCloseButton: !!onClose, color: color }, [
-            className,
-        ]), ref: ref }),
+    return (React.createElement(Paper, __assign({ radius: "l", shadow: "m", role: "alert", background: "main" }, (color === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), other, { className: cnAlert({
+            color: color,
+            status: status,
+            inverse: inverse,
+            hasCloseButton: !!onClose,
+        }, [className]), ref: ref }),
         showIcon && (React.createElement("div", { className: cnAlert('Icon') }, matchStatusToIcon[status])),
         React.createElement("div", { className: cnAlert('Content') },
             React.createElement("div", { className: cnAlert('Title') }, title),

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

@@ -1,3 +1,3 @@
 export declare const ALERT_DEFAULT_STATUS = "info";
 export declare const ALERT_DEFAULT_SHOW_ICON = true;
-export declare const ALERT_DEFAULT_COLOR = "light";
+export declare const ALERT_DEFAULT_INVERSE = false;

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

@@ -1,3 +1,3 @@
 export var ALERT_DEFAULT_STATUS = 'info';
 export var ALERT_DEFAULT_SHOW_ICON = true;
-export var ALERT_DEFAULT_COLOR = 'light';
+export var ALERT_DEFAULT_INVERSE = false;

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

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

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

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

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

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { ButtonProps } from '../ButtonNext';
+export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
+export declare const alertColorVariant: readonly ["light", "dark"];
+export type AlertStatusVariant = (typeof alertStatusVariant)[number];
+export type AlertColorVariant = (typeof alertColorVariant)[number];
+type AlertPropsDeprecated = {
+    /**
+     * Цветовая палитра сообщения
+     * @deprecated Используйте на замену свойство «inverse»
+     * */
+    color?: AlertColorVariant;
+};
+type AlertBaseProps = {
+    /** Заголовок сообщения */
+    title: ReactNode;
+    /**
+     * Статус сообщения
+     * @default info
+     */
+    status?: AlertStatusVariant;
+    /** Если {true} инвертирует основные цвета компонента */
+    inverse?: boolean;
+    /**
+     * Если {true} отображает иконку со статусом
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Функция обратного вызова при нажатии на кнопку закрытия
+     */
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Основное содержимое элемента
+     * @default null
+     * */
+    children?: ReactNode;
+    /** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
+    action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Текст для кнопки закрытия компонента */
+    closeText?: string;
+};
+export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> & AlertPropsDeprecated;
+export {};

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

@@ -0,0 +1,7 @@
+export var alertStatusVariant = [
+    'success',
+    'error',
+    'warning',
+    'info',
+];
+export var alertColorVariant = ['light', 'dark'];

package/__inner__/esm/components/InputNumber/utils.d.ts

@@ -3,7 +3,7 @@ import type { InputNumberValue, InputNumberCountDirection } from './types';
 export declare const isValidValue: (value?: InputNumberValue) => boolean;
 export declare const isInputInvalid: (event: KeyboardEvent<HTMLInputElement>) => boolean;
 export declare const getValue: ({ value, step, min, max, countDirection, }: {
-    value?: InputNumberValue | undefined;
+    value?: InputNumberValue;
     countDirection: InputNumberCountDirection;
     min: number;
     max: number;

package/__inner__/esm/components/List/components/ListItemText/ListItemText.d.ts

@@ -1,26 +1,26 @@
 import './ListItemText.css';
 import React from 'react';
 import type { HTMLAttributes } from 'react';
-import type { TypographyProps } from '../../../Typography';
+import type { TypographyProps, TypographyBaseProps } from '../../../Typography';
 export type ListItemTextProps = {
     children?: never;
     /** Основной текст */
-    primary: string | number;
+    primary: TypographyBaseProps['children'];
     /** Свойства компонента Typography для текста primary */
     primaryTypographyProps?: TypographyProps<'span'>;
     /** Второстепенный текст */
-    secondary?: string | number;
+    secondary?: TypographyBaseProps['children'];
     /** Свойства компонента Typography для текста secondary */
     secondaryTypographyProps?: TypographyProps<'span'>;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const ListItemText: React.ForwardRefExoticComponent<{
     children?: undefined;
     /** Основной текст */
-    primary: string | number;
+    primary: TypographyBaseProps['children'];
     /** Свойства компонента Typography для текста primary */
     primaryTypographyProps?: TypographyProps<"span"> | undefined;
     /** Второстепенный текст */
-    secondary?: string | number | undefined;
+    secondary?: TypographyBaseProps['children'];
     /** Свойства компонента Typography для текста secondary */
     secondaryTypographyProps?: TypographyProps<"span"> | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Popover/Popover.css

@@ -1,70 +1,46 @@
 .Popover {
-  z-index: var(--z-index-popover);
+  outline: none;
   inline-size: auto;
   box-sizing: border-box;
-  outline: none;
+  z-index: var(--z-index-popover);
 }
 
   .Popover-Arrow {
+    --popover-arrow-inset: calc(-1 * (var(--popover-arrow-size) / 2));
     display: flex;
+    align-items: start;
+    flex-direction: column;
+    inline-size: var(--popover-arrow-size);
+    block-size: var(--popover-arrow-size);
     color: var(--paper-background-color);
   }
 
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs {
-        inset-block-end: -9px;
-      }
-
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs svg {
-          transform: rotate(270deg);
-        }
-
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s {
-        inset-block-end: -12px;
-      }
-
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s svg {
-          transform: rotate(270deg);
-        }
-
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs {
-        inset-block-start: -9px;
-      }
-
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs svg {
-          transform: rotate(90deg);
-        }
-
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s {
-        inset-block-start: -12px;
+  .Popover-Arrow_size_xs {
+        --popover-arrow-size: 12px;
       }
 
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s svg {
-          transform: rotate(90deg);
-        }
-
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs {
-        inset-inline-end: -6px;
+  .Popover-Arrow_size_s {
+        --popover-arrow-size: 16px;
       }
 
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs svg {
-          transform: rotate(180deg);
-        }
-
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s {
-        inset-inline-end: -8px;
-      }
+  .Popover[data-popper-placement^='top'] > .Popover-Arrow {
+    transform: rotate(270deg);
+    inset-block-end: var(--popover-arrow-inset);
+  }
 
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s svg {
-          transform: rotate(180deg);
-        }
+  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow {
+    transform: rotate(90deg);
+    inset-block-start: var(--popover-arrow-inset);
+  }
 
-  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_xs {
-        inset-inline-start: -6px;
-      }
+  .Popover[data-popper-placement^='left'] > .Popover-Arrow {
+    transform: rotate(180deg);
+    inset-inline-end: var(--popover-arrow-inset);
+  }
 
-  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_s {
-        inset-inline-start: -8px;
-      }
+  .Popover[data-popper-placement^='right'] > .Popover-Arrow {
+    inset-inline-start: var(--popover-arrow-inset);
+  }
 
   .Popover_disableInteractive {
     pointer-events: none;

package/__inner__/esm/components/Popover/Popover.js

@@ -19,7 +19,7 @@ import { PopoverContext } from './PopoverContext';
 export var cnPopover = cn('Popover');
 export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Popover' });
-    var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _k = props.as, as = _k === void 0 ? POPOVER_DEFAULT_TAG : _k, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
+    var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, modifiersProps = props.modifiers, _k = props.as, as = _k === void 0 ? POPOVER_DEFAULT_TAG : _k, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "modifiers", "as"]);
     var _l = __read(useState(false), 2), openState = _l[0], setOpenState = _l[1];
     var focusedElement = useRef(null);
     var popoverRef = useRef(null);
@@ -59,7 +59,7 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
         }
         onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
     }, [onExitedProp]);
-    var modifiers = useMemo(function () { return [
+    var modifiers = useMemo(function () { return __spreadArray([
         // Вычисление стилей позиционирования
         {
             name: 'computeStyles',
@@ -90,14 +90,20 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
             phase: 'beforeWrite',
             requires: ['computeStyles'],
         },
+        {
+            name: 'arrow',
+            options: {
+                padding: 12,
+            },
+        },
         // Отступы от якорного элемента
         {
             name: 'offset',
             options: {
                 offset: offset,
             },
-        },
-    ]; }, [offset, equalAnchorWidth]);
+        }
+    ], __read((modifiersProps || [])), false); }, [offset, equalAnchorWidth, modifiersProps]);
     // Якорный элемент или координаты
     var resolveReferenceElement = useMemo(function () {
         if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)

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

@@ -1,5 +1,6 @@
 import type { RefObject, ComponentRef, ElementType, ReactNode } from 'react';
 import type PopperJS from '@popperjs/core';
+import type { PopperProps } from 'react-popper';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PortalProps } from '../Portal';
@@ -76,6 +77,11 @@ export type PopoverBaseProps = {
     strategy?: PopoverStrategyVariant;
     /** Если {true} позволяет смещаться по границе якорного элемента компонента  */
     disablePreventOverflow?: boolean;
+    /**
+     * Модификаторы для popper.js
+     * https://popper.js.org/docs/v2/modifiers/#custom-modifiers
+     * */
+    modifiers?: PopperProps<unknown>['modifiers'];
 };
 export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
 export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

package/__inner__/esm/components/Slider/utils/getPositionOnRail.d.ts

@@ -1,5 +1,5 @@
 export declare const getPositionOnRail: ({ value, min, max, }: {
-    value?: number | undefined;
+    value?: number;
     min: number;
     max: number;
 }) => number;

package/__inner__/esm/components/Snackbar/components/SnackbarItem/SnackbarItem.js

@@ -86,6 +86,6 @@ export var SnackbarItem = forwardRef(function (_a, ref) {
                 }, className: cnSnackbarItem({
                     anchorHorizontal: horizontal,
                     anchorVertical: vertical,
-                }) }, renderContent() || (React.createElement(Alert, { color: "dark", title: title, status: status, onClose: handleClose }, description))))));
+                }) }, renderContent() || (React.createElement(Alert, { title: title, status: status, onClose: handleClose, inverse: true }, description))))));
 });
 SnackbarItem.displayName = 'SnackbarItem';

package/__inner__/esm/components/Tooltip/Tooltip.css

@@ -1,8 +1,11 @@
 /* stylelint-disable */
 .Tooltip {
   max-inline-size: 300px;
+  color: var(--color-content-primary);
 }
 .Tooltip_size_xs {
+      min-inline-size: 28px;
+      min-block-size: 28px;
       padding: var(--spacing-2xs) var(--spacing-xs);
 
       font: var(--typography-text-xs-font);
@@ -12,6 +15,8 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Tooltip_size_s {
+      min-inline-size: 40px;
+      min-block-size: 40px;
       padding: var(--spacing-xs) var(--spacing-s);
 
       font: var(--typography-text-s-font);
@@ -20,9 +25,7 @@
 
       text-transform: var(--typography-text-s-text_transform, none);
     }
-.Tooltip_variant_light {
-      color: var(--color-content-primary);
-    }
-.Tooltip_variant_dark {
-      color: var(--color-content-primary-inverse);
-    }
+.Tooltip_variant_dark,
+  .Tooltip_inverse {
+    color: var(--color-content-primary-inverse);
+  }

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

@@ -1,6 +1,7 @@
 import { __assign, __read, __rest } from "tslib";
 import './Tooltip.css';
 import React, { useRef, useMemo, useState, useEffect } from 'react';
+import { deprecate } from '@ozen-ui/logger';
 import { useControlled } from '../../hooks/useControlled';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { useMultiRef } from '../../hooks/useMultiRef';
@@ -8,15 +9,26 @@ import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { Popover } from '../Popover';
-import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TAG, TOOLTIP_DEFAULT_TRIGGER, TOOLTIP_DEFAULT_VARIANT, } from './constants';
+import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_INVERSE, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TAG, TOOLTIP_DEFAULT_TRIGGER, } from './constants';
 export var cnTooltip = cn('Tooltip');
 export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Tooltip' });
-    var _a = props.trigger, trigger = _a === void 0 ? TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? TOOLTIP_DEFAULT_SIZE : _b, _c = props.variant, variant = _c === void 0 ? TOOLTIP_DEFAULT_VARIANT : _c, _d = props.offset, offset = _d === void 0 ? TOOLTIP_DEFAULT_OFFSET : _d, _e = props.delayEnter, delayEnter = _e === void 0 ? TOOLTIP_DEFAULT_DELAY_ENTER : _e, _f = props.delayLeave, delayLeave = _f === void 0 ? TOOLTIP_DEFAULT_DELAY_LEAVE : _f, _g = props.arrow, arrow = _g === void 0 ? TOOLTIP_DEFAULT_ARROW : _g, _h = props.shouldWrapChildren, shouldWrapChildren = _h === void 0 ? TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _h, _j = props.disabled, disabled = _j === void 0 ? TOOLTIP_DEFAULT_DISABLED : _j, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, _k = props.as, as = _k === void 0 ? TOOLTIP_DEFAULT_TAG : _k, other = __rest(props, ["trigger", "size", "variant", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
+    var _a = props.trigger, trigger = _a === void 0 ? TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? TOOLTIP_DEFAULT_INVERSE : _j, variant = props.variant, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, _k = props.as, as = _k === void 0 ? TOOLTIP_DEFAULT_TAG : _k, other = __rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
+    if (process.env.NODE_ENV !== 'production' && variant) {
+        deprecate('Свойство «variant» устарело. Для замены используйте «inverse».');
+    }
     var _l = __read(useState(), 2), delay = _l[0], setDelay = _l[1];
     var _m = __read(useState(), 2), hasFocus = _m[0], setHasFocus = _m[1];
     var _o = __read(useState(), 2), hasHover = _o[0], setHasHover = _o[1];
     var anchorRef = useRef(null);
+    var modifiers = [
+        {
+            name: 'arrow',
+            options: {
+                padding: size === 'xs' ? 8 : 12,
+            },
+        },
+    ];
     var _p = __read(useControlled({
         value: openProp,
         defaultValue: false,
@@ -112,8 +124,8 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
     ]);
     return (React.createElement(React.Fragment, null,
         React.cloneElement(resolveChildren, composeChildrenProps),
-        React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
+        React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
-            }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
+            }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });
 Tooltip.displayName = 'Tooltip';

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

@@ -1,7 +1,7 @@
 export declare const TOOLTIP_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
 export declare const TOOLTIP_DEFAULT_TRIGGER = "hover";
 export declare const TOOLTIP_DEFAULT_SIZE = "s";
-export declare const TOOLTIP_DEFAULT_VARIANT = "dark";
+export declare const TOOLTIP_DEFAULT_INVERSE = true;
 export declare const TOOLTIP_DEFAULT_OFFSET: number[];
 export declare const TOOLTIP_DEFAULT_DELAY_ENTER = 100;
 export declare const TOOLTIP_DEFAULT_DELAY_LEAVE = 100;

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

@@ -2,7 +2,7 @@ import { Paper } from '../Paper';
 export var TOOLTIP_DEFAULT_TAG = Paper;
 export var TOOLTIP_DEFAULT_TRIGGER = 'hover';
 export var TOOLTIP_DEFAULT_SIZE = 's';
-export var TOOLTIP_DEFAULT_VARIANT = 'dark';
+export var TOOLTIP_DEFAULT_INVERSE = true;
 export var TOOLTIP_DEFAULT_OFFSET = [0, 8];
 export var TOOLTIP_DEFAULT_DELAY_ENTER = 100;
 export var TOOLTIP_DEFAULT_DELAY_LEAVE = 100;

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

@@ -8,6 +8,13 @@ export declare const tooltipVariant: readonly ["light", "dark"];
 export type TooltipVariant = (typeof tooltipVariant)[number];
 export declare const tooltipTriggerVariant: readonly ["hover", "focus", "click", "hover&focus"];
 export type TooltipTriggerVariant = (typeof tooltipTriggerVariant)[number];
+type TooltipPropsDeprecated = {
+    /**
+     * Вариант представления
+     * @deprecated Используйте на замену свойство «inverse»
+     * */
+    variant?: TooltipVariant;
+};
 export type TooltipBaseProps = {
     /** Признак по которому тултип будет представлен */
     open?: boolean;
@@ -19,8 +26,8 @@ export type TooltipBaseProps = {
     label?: ReactNode;
     /** Размер тултипа */
     size?: TooltipSizeVariant;
-    /** Вариант представления */
-    variant?: TooltipVariant;
+    /** Если {true} инвертирует основные цвета компонента */
+    inverse?: boolean;
     /** Если {true} отключает отображение тултипа */
     disabled?: boolean;
     /** События вызова тултипа */
@@ -41,6 +48,7 @@ export type TooltipBaseProps = {
     'data-testid'?: string;
     /** Дополнительные CSS-классы */
     className?: string;
-} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
+} & TooltipPropsDeprecated & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
 export type TooltipRef = ComponentRef<typeof TOOLTIP_DEFAULT_TAG>;
 export type TooltipProps<As extends ElementType = typeof TOOLTIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<TooltipBaseProps, As>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.48.0",
+  "version": "0.49.1",
   "description": "React component library",
   "files": [
     "*"
@@ -28,9 +28,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.2",
-    "@ozen-ui/fonts": "0.48.0",
-    "@ozen-ui/icons": "0.48.0",
-    "@ozen-ui/logger": "0.48.0"
+    "@ozen-ui/logger": "0.49.1",
+    "@ozen-ui/fonts": "0.49.1",
+    "@ozen-ui/icons": "0.49.1"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",