@via-profit/ui-kit 0.4.0 → 0.6.0

package/Button/ButtonStyled.js

@@ -15,169 +15,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
 const ButtonBase_1 = __importDefault(require("./ButtonBase"));
 const ButtonGroupContext_1 = __importDefault(require("../ButtonGroup/ButtonGroupContext"));
-const parseColor = (color, fallback) => {
-    try {
-        return Color_1.default.fromString(color);
-    }
-    catch (err) {
-        console.error(`invalid color value «${color}»`);
-        return fallback;
-    }
-};
-/**
- * Text and background colors of the standard variant
- */
-const getStandardColors = (color, theme) => {
-    switch (true) {
-        case color === 'primary':
-            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
-        case color === 'secondary':
-            return {
-                $color: theme.color.accentSecondaryContrast,
-                $background: theme.color.accentSecondary,
-            };
-        case typeof color === 'undefined':
-        case color === 'default':
-            return { $background: theme.color.surface, $color: theme.color.textPrimary };
-        default: {
-            const $background = parseColor(String(color), theme.color.surface);
-            return {
-                $background,
-                $color: $background.getContrast(theme.color.textPrimary) > 5
-                    ? theme.color.textPrimary
-                    : theme.color.surface,
-            };
-        }
-    }
-};
 /**
- * The main color of the outlined and plain variants (text and border)
- */
-const getAccentColor = (color, theme) => {
-    switch (true) {
-        case color === 'primary':
-            return theme.color.accentPrimary;
-        case color === 'secondary':
-            return theme.color.accentSecondary;
-        case typeof color === 'undefined':
-        case color === 'default':
-            return theme.color.textPrimary;
-        default:
-            return parseColor(String(color), theme.color.textPrimary);
-    }
-};
-const focusOutlineColor = (color, theme) => color.rgbString() === theme.color.accentPrimary.rgbString()
-    ? theme.color.textPrimary.toString()
-    : theme.color.accentPrimary.toString();
-const standardStyles = ({ $color, $background, disabled, theme }) => (0, react_2.css) `
-  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
-  background-color: ${disabled
-    ? $background.darken(40).toString()
-    : $background.darken(10).toString()};
-
-  ${!disabled &&
-    (0, react_2.css) `
-    &:hover {
-      background-color: ${$background.darken(30).toString()};
-    }
-    &:active {
-      background-color: ${$background.darken(80).toString()};
-    }
-    &:focus-visible {
-      outline-style: solid;
-      outline-width: 0.14em;
-      outline-color: ${focusOutlineColor($background, theme)};
-    }
-  `}
-`;
-const outlinedStyles = ({ $color, disabled, theme }) => (0, react_2.css) `
-  color: ${disabled ? theme.color.textPrimary.alpha(0.4).toString() : $color.darken(30).toString()};
-  border-color: ${disabled
-    ? theme.color.surface.darken(80).alpha(0.4).toString()
-    : $color.toString()};
-  background-color: transparent;
-  border-style: solid;
-  border-width: 0.14em;
-
-  ${!disabled &&
-    (0, react_2.css) `
-    &:hover {
-      background-color: ${$color.darken(20).alpha(0.1).toString()};
-    }
-    &:active {
-      background-color: ${$color.darken(50).alpha(0.3).toString()};
-    }
-    &:focus-visible {
-      outline-color: ${focusOutlineColor($color, theme)};
-    }
-  `}
-`;
-const plainStyles = ({ $color, disabled, theme }) => (0, react_2.css) `
-  box-shadow: none;
-  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
-  background: none;
-
-  ${!disabled &&
-    (0, react_2.css) `
-    &:hover {
-      color: ${$color.darken(30).toString()};
-      background-color: ${$color.alpha(0.1).toString()};
-    }
-    &:active {
-      color: ${$color.darken(80).toString()};
-      background-color: ${$color.alpha(0.3).toString()};
-    }
-    &:focus-visible {
-      outline-style: solid;
-      outline-width: 0.14em;
-      outline-color: ${focusOutlineColor($color, theme)};
-    }
-  `}
-`;
-/**
- * Inside the ButtonGroup all the variants have the same border width, so the buttons have the same size
- * and the selected (standard) button does not shrink. Two adjacent standard buttons are separated by a thin line
- */
-const groupStyles = ({ $group, $variant, $color }) => $group &&
-    (0, react_2.css) `
-    border-style: solid;
-    border-width: 0.14em;
-    ${$variant !== 'outlined' &&
-        (0, react_2.css) `
-      border-color: transparent;
-    `}
-    ${$variant === 'standard' &&
-        (0, react_2.css) `
-      [data-group-variant='standard'] + & {
-        ${$group === 'vertical' ? 'border-top-color' : 'border-left-color'}: ${$color
-            .alpha(0.25)
-            .toString()};
-      }
-    `}
-  `;
-/**
- * All the variants are one styled component: switching the variant (e.g. a toggle button)
+ * Resolves the variant and the color inside the ButtonGroup. The styles of the variant are in the Container part.
+ * All the variants are one component: switching the variant (e.g. a toggle button)
  * must not remount the element, otherwise the focused button loses the focus
  */
-const StyledButton = (0, styled_1.default)(ButtonBase_1.default) `
-  ${props => {
-    switch (props.$variant) {
-        case 'outlined':
-            return outlinedStyles(props);
-        case 'plain':
-            return plainStyles(props);
-        case 'standard':
-        default:
-            return standardStyles(props);
-    }
-}}
-  ${groupStyles}
-`;
 const ButtonStyled = (props, ref) => {
     const group = react_1.default.useContext(ButtonGroupContext_1.default);
     const { children, onClick } = props, buttonProps = __rest(props, ["children", "onClick"]);
@@ -186,20 +30,12 @@ const ButtonStyled = (props, ref) => {
     const isSelected = isSelectable && Boolean(group === null || group === void 0 ? void 0 : group.isSelected(String(buttonValue)));
     // Inside the ButtonGroup the own props of the button win over the props of the group
     const { disabled = group === null || group === void 0 ? void 0 : group.disabled, color = isSelected ? group === null || group === void 0 ? void 0 : group.selectedColor : group === null || group === void 0 ? void 0 : group.color, variant = group ? (isSelected ? 'standard' : group.variant) : 'standard' } = buttonProps, restProps = __rest(buttonProps, ["disabled", "color", "variant"]);
-    const theme = (0, react_2.useTheme)();
     const handleClick = event => {
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (isSelectable && !event.defaultPrevented && group) {
             group.toggle(String(buttonValue));
         }
     };
-    const { $color, $background } = react_1.default.useMemo(() => {
-        if (variant === 'standard') {
-            return getStandardColors(color, theme);
-        }
-        const accent = getAccentColor(color, theme);
-        return { $color: accent, $background: accent };
-    }, [color, variant, theme]);
-    return (react_1.default.createElement(StyledButton, Object.assign({ "$variant": variant, "$color": $color, "$background": $background, "$group": group === null || group === void 0 ? void 0 : group.orientation, "data-group-variant": group ? variant : undefined, disabled: disabled, "aria-pressed": isSelectable ? isSelected : undefined }, restProps, { onClick: handleClick, ref: ref }), children));
+    return (react_1.default.createElement(ButtonBase_1.default, Object.assign({ variant: variant, color: color, groupOrientation: group === null || group === void 0 ? void 0 : group.orientation, "data-group-variant": group ? variant : undefined, disabled: disabled, "aria-pressed": isSelectable ? isSelected : undefined }, restProps, { onClick: handleClick, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ButtonStyled);

package/Button/ButtonTextWrapper.d.ts

@@ -24,6 +24,6 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * ```
      `
      */
-    readonly iconOnly?: boolean | undefined;
+    readonly iconOnly?: ButtonContainerProps["iconOnly"];
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Button/buttonVariants.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@emotion/react';
+import type { ButtonGroupOrientation } from '../ButtonGroup/ButtonGroupContext';
+export type ButtonVariant = 'standard' | 'outlined' | 'plain';
+type ButtonColor = 'default' | 'primary' | 'secondary' | string | undefined;
+/**
+ * The styles of the variant. They are applied inside the Container part,
+ * so the theme styles and the `styled(ButtonContainer)` of the user go after them and win
+ */
+export declare const buttonVariantStyles: (params: {
+    readonly variant: ButtonVariant;
+    readonly color: ButtonColor;
+    readonly disabled?: boolean;
+    readonly group?: ButtonGroupOrientation;
+    readonly theme: Theme;
+}) => import("@emotion/react").SerializedStyles;
+export {};

package/Button/buttonVariants.js

@@ -0,0 +1,169 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariantStyles = void 0;
+const react_1 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const parseColor = (color, fallback) => {
+    try {
+        return Color_1.default.fromString(color);
+    }
+    catch (err) {
+        console.error(`invalid color value «${color}»`);
+        return fallback;
+    }
+};
+/**
+ * Text and background colors of the standard variant
+ */
+const getStandardColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return {
+                $color: theme.color.accentSecondaryContrast,
+                $background: theme.color.accentSecondary,
+            };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return { $background: theme.color.surface, $color: theme.color.textPrimary };
+        default: {
+            const $background = parseColor(String(color), theme.color.surface);
+            return {
+                $background,
+                $color: $background.getContrast(theme.color.textPrimary) > 5
+                    ? theme.color.textPrimary
+                    : theme.color.surface,
+            };
+        }
+    }
+};
+/**
+ * The main color of the outlined and plain variants (text and border)
+ */
+const getAccentColor = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return theme.color.accentPrimary;
+        case color === 'secondary':
+            return theme.color.accentSecondary;
+        case typeof color === 'undefined':
+        case color === 'default':
+            return theme.color.textPrimary;
+        default:
+            return parseColor(String(color), theme.color.textPrimary);
+    }
+};
+const focusOutlineColor = (color, theme) => color.rgbString() === theme.color.accentPrimary.rgbString()
+    ? theme.color.textPrimary.toString()
+    : theme.color.accentPrimary.toString();
+const standardStyles = ({ $color, $background, disabled, theme }) => (0, react_1.css) `
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
+  background-color: ${disabled
+    ? $background.darken(40).toString()
+    : $background.darken(10).toString()};
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      background-color: ${$background.darken(30).toString()};
+    }
+    &:active {
+      background-color: ${$background.darken(80).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($background, theme)};
+    }
+  `}
+`;
+const outlinedStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
+  color: ${disabled ? theme.color.textPrimary.alpha(0.4).toString() : $color.darken(30).toString()};
+  border-color: ${disabled
+    ? theme.color.surface.darken(80).alpha(0.4).toString()
+    : $color.toString()};
+  background-color: transparent;
+  border-style: solid;
+  border-width: ${tokens_1.CONTROL_BORDER};
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      background-color: ${$color.darken(20).alpha(0.1).toString()};
+    }
+    &:active {
+      background-color: ${$color.darken(50).alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
+const plainStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
+  box-shadow: none;
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
+  background: none;
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      color: ${$color.darken(30).toString()};
+      background-color: ${$color.alpha(0.1).toString()};
+    }
+    &:active {
+      color: ${$color.darken(80).toString()};
+      background-color: ${$color.alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
+/**
+ * Inside the ButtonGroup all the variants have the same border width, so the buttons have the same size
+ * and the selected (standard) button does not shrink. Two adjacent standard buttons are separated by a thin line
+ */
+const groupStyles = ({ $group, $variant, $color }) => $group &&
+    (0, react_1.css) `
+    border-style: solid;
+    border-width: ${tokens_1.CONTROL_BORDER};
+    ${$variant !== 'outlined' &&
+        (0, react_1.css) `
+      border-color: transparent;
+    `}
+    ${$variant === 'standard' &&
+        (0, react_1.css) `
+      [data-group-variant='standard'] + & {
+        ${$group === 'vertical' ? 'border-top-color' : 'border-left-color'}: ${$color
+            .alpha(0.25)
+            .toString()};
+      }
+    `}
+  `;
+/**
+ * The styles of the variant. They are applied inside the Container part,
+ * so the theme styles and the `styled(ButtonContainer)` of the user go after them and win
+ */
+const buttonVariantStyles = (params) => {
+    const { variant, color, disabled, group, theme } = params;
+    const colors = variant === 'standard'
+        ? getStandardColors(color, theme)
+        : { $color: getAccentColor(color, theme), $background: getAccentColor(color, theme) };
+    const props = Object.assign(Object.assign({}, colors), { $variant: variant, $group: group, disabled, theme });
+    return (0, react_1.css) `
+    ${variant === 'outlined'
+        ? outlinedStyles(props)
+        : variant === 'plain'
+            ? plainStyles(props)
+            : standardStyles(props)}
+    ${groupStyles(props)}
+  `;
+};
+exports.buttonVariantStyles = buttonVariantStyles;

package/Button/index.d.ts

@@ -18,6 +18,6 @@ declare const _default: React.ForwardRefExoticComponent<import("./ButtonBase").B
      * \
      * **Default**: `standard`
      */
-    readonly variant?: "standard" | "outlined" | "plain" | undefined;
+    readonly variant?: "standard" | "outlined" | "plain";
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/ButtonGroup/index.js

@@ -18,8 +18,9 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const ButtonGroupContext_1 = __importDefault(require("./ButtonGroupContext"));
+const tokens_1 = require("../ThemeProvider/tokens");
 /**
- * The buttons are glued: the inner corners are square and the borders overlap.
+ * The buttons are glued: the inner corners are square and the borders overlap by the width of the border.
  * `:not(...)` raises the specificity above the own styles of the button.
  * `-of-type`, not `-child`: with SSR emotion inserts <style> elements between the children
  */
@@ -44,7 +45,7 @@ const StyledGroup = styled_1.default.div `
   ${({ $orientation }) => $orientation === 'vertical'
     ? (0, react_2.css) `
           & > *:not(:first-of-type) {
-            margin-top: -0.14em;
+            margin-top: calc(-1 * ${tokens_1.CONTROL_BORDER});
             border-top-left-radius: 0;
             border-top-right-radius: 0;
           }
@@ -55,7 +56,7 @@ const StyledGroup = styled_1.default.div `
         `
     : (0, react_2.css) `
           & > *:not(:first-of-type) {
-            margin-left: -0.14em;
+            margin-left: calc(-1 * ${tokens_1.CONTROL_BORDER});
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
           }

package/CHANGELOG.md

@@ -2,7 +2,76 @@
 
 Все заметные изменения пакета `@via-profit/ui-kit`. Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/), версии следуют [семантическому версионированию](https://semver.org/lang/ru/).
 
-## Не выпущено
+## 0.6.0 — 2026-10-07
+
+Поддержка React 19. Тема снова задаёт только токены. Оформление компонентов в теме убрано: оно делало внутренние части компонентов публичным контрактом и добавляло работы при каждой отрисовке.
+
+Версия содержит несовместимые изменения. Как обновиться с 0.5:
+
+- `ThemeProvider`: уберите `components` из `createTheme`. Части отдельного компонента по-прежнему заменяются его свойством `overrides`, а свойства по умолчанию передайте сами — например, через свою обёртку над компонентом.
+- размеры: кнопки и поля теперь одной высоты, у вкладок, пунктов меню и ячеек таблицы одинаковые отступы. Если ваша вёрстка рассчитана на прежнюю высоту, задайте `padding` в теме.
+
+### Добавлено
+
+- **Stack**, **Grid**: свойство `as` — элемент контейнера, например `<Stack as="ul">` или `<Grid as="dl">`. У списков убираются отступы и маркеры браузера;
+- **Pagination**: новый компонент — переключение страниц с пропусками `…`, контролируемый и неконтролируемый режимы, кнопки «назад/вперёд» и «в начало/в конец», настройка видимых страниц (`siblings`, `boundaries`), подписи для программ чтения с экрана (`getItemLabel`) и замена частей через `overrides` — например, ссылки вместо кнопок. Хук `usePagination` — вся логика без разметки для своей пагинации, функция `getPaginationItems` — номера страниц с пропусками;
+- **ThemeProvider**: токены `padding` — внутренние отступы по классам элементов: `control` (контролы), `item` (строки списков) и `container` (панели). Они меняют плотность интерфейса без изменения шрифта. Хелперы `themePadding`, `controlHeight` и `fieldPadding` в `ThemeProvider/tokens`.
+
+### Изменено
+
+- Обводки тоньше и одной толщины: `0.0625em` — `1px` при шрифте `16px`. Раньше у кнопок `outlined`, бейджей и кнопок в группе было `0.14em` (около `2px`), у чекбоксов, радиокнопок и линий таблицы — `0.1em`, у полей ввода — `1px`. Контролы стали ниже примерно на `2px`. Толщина доступна как `BORDER_WIDTH` в `ThemeProvider/tokens`; рамка фокуса не изменилась;
+- **ThemeProvider**: тени унифицированы. У всех компонентов одного уровня `elevation` одна тень по умолчанию: `popup` — меню, календарь, уведомления, подсказки, модальные окна; `surface` — `Surface`, `Accordion`, `Table`; новый уровень `control` — ручка `Switch`. Раньше у `Accordion`, `Calendar`, `Toast` и `Switch` были свои тени, а у модальных окон и подсказок теней не было. Хелпер `elevation(theme, level)` принимает собственную тень третьим аргументом необязательно, тени по умолчанию — `defaultElevation(theme)`;
+- **Button**, **TextField**, **TextArea**, **Selectbox**, **DatePicker**, **Autocomplete**: одна высота у всех контролов и у всех вариантов кнопки (раньше `standard` была на 4px ниже `outlined`, а поля — выше кнопок). Кнопка-иконка — квадрат высоты контрола;
+- **Menu**, **Table**, **Tabs**: одинаковые отступы строк из `padding.item` — пункты меню стали чуть выше, ячейки таблицы чуть ниже, вкладки уже;
+- **Surface**, **Accordion**, модальные окна, **Drawer**, **Toast**: отступы из `padding.container`. Заголовок аккордеона выровнен по содержимому. Заголовок и подзаголовок `Surface` и их отступы заданы в `em` вместо `rem` и масштабируются вместе с компонентом.
+
+### Удалено
+
+- **ThemeProvider**: `components` в теме (`defaultProps` и `overrides` по имени компонента), хук `useThemeProps` и типы `UIThemeComponents`, `ThemeComponentConfig`, `ThemeComponentName`. Токены `typography`, `focusRing` и `elevation` остаются.
+
+### Исправлено
+
+- Совместимость с React 19. Типы компонентов используют `React.JSX` вместо глобального пространства `JSX`, которого нет в `@types/react` 19, — проект на React 19 собирается без ошибок типов. **ClickOutside** и **Tooltip** больше не выводят в консоль предупреждение «Accessing element.ref was removed in React 19»: в React 19 ref дочернего элемента берётся из его свойств. React 18 по-прежнему поддерживается;
+- **Button**: при смене варианта (например, у выбранной кнопки в группе) кнопка на мгновение увеличивалась и сдвигала соседние элементы: анимировались рамка и отступы. Теперь анимируются только цвета, тень и обводка;
+- **Modal**: при открытии окна страница больше не сдвигается по горизонтали. Ширина полосы прокрутки, которая заменяется отступом, считалась по `<body>`, а не по окну, и почти всегда получалась `0`; к тому же она пересчитывалась при каждой отрисовке, уже без полосы. Теперь она измеряется один раз — до того как полоса скрывается — и доступна в CSS-переменной `--modal-scroll-width` на `<html>`.
+
+## 0.5.0 — 2026-10-02
+
+Новые компоненты: `Slider`, `Tabs`, `Tooltip` и `Toast` (замена react-toastify с тем же API). Оформление компонентов в теме — `defaultProps` и `overrides` для всего приложения, токены рамки фокуса, теней и шрифта. Пакет собирается и в ES-модули: сборщики выбрасывают неиспользуемый код. Календарь и дейтпикер больше не требуют `react-intl`.
+
+Версия содержит несовместимые изменения. Как обновиться с 0.4:
+
+- `CountryFlags`: модуль удалён. Если вы импортировали флаги из `@via-profit/ui-kit/CountryFlags`, перенесите нужные SVG в свой проект. `PhoneField` по-прежнему показывает флаги стран из набора шаблонов по умолчанию;
+- `Menu`: удалены неиспользуемые `Menu/VirtualizedList`, `Menu/VirtualizedListComponent`, `Menu/VirtualizedItem`, `Menu/MeasuredItem` и `Menu/AutoHeightWrapper` — уберите их импорты;
+- импорт: работают только пути модулей из карты `exports` — `@via-profit/ui-kit/Button`, `@via-profit/ui-kit/Button/ButtonContainer` и т. п. Пути с расширением `.js` или с `dist` уберите;
+- `ErrorBoundary`: в production сообщение об ошибке по умолчанию на английском; свои тексты передайте в `title` и `description`.
+
+Подробности — в разделах ниже.
+
+### Добавлено
+
+- **ThemeProvider**: оформление компонентов в теме — `components` с `defaultProps` и `overrides` по имени компонента. Свойства и `overrides`, переданные компоненту в коде, важнее темы. Токены темы: `typography.fontFamily`, `focusRing` (одинаковая рамка фокуса во всех компонентах) и `elevation` (тени всплывающих элементов и карточек); без них компоненты выглядят как раньше.
+- **Button**: `ButtonBase` и часть `Container` принимают `variant` и `groupOrientation`; стили вариантов перенесены внутрь `Container`, поэтому `styled(ButtonContainer)` в `overrides` теперь перекрывает стили варианта. Внешний вид кнопок не изменился.
+- **Toast**: новый компонент `@via-profit/ui-kit/Toast` — уведомления с API react-toastify (`toast`, `toast.info/success/warning/error/loading`, `toast.update`, `toast.dismiss`, `ToastContainer` с `position`, `autoClose`, `limit`), а также `description` и кнопки `actions`; клик по интерактивным элементам внутри не закрывает уведомление, таймер стоит под курсором, при фокусе внутри и в неактивном окне; F8 переводит фокус к уведомлениям, Escape закрывает, ошибки читаются сразу (`role="alert"`); несколько контейнеров через `containerId` и `overrides`.
+- **Tooltip**: новый компонент `@via-profit/ui-kit/Tooltip` — подсказка при наведении и фокусе с клавиатуры: расположение и автоматический переворот, стрелка, задержки появления и скрытия, подсказку можно навести указателем, соседняя подсказка появляется без задержки, Escape скрывает; строковый `title` становится `aria-label` элемента, а с `describeChild` подсказка связывается через `aria-describedby`; контролируемый режим (`isOpen`, `onOpenChange`) и `overrides`.
+- **Tabs**: новый компонент `@via-profit/ui-kit/Tabs` — вкладки `Tabs`, `TabList`, `Tab`, `TabPanel`: контролируемый и неконтролируемый режимы, вертикальное расположение, `fullWidth`, цвет, прокрутка ряда с выбранной вкладкой в видимой части, `keepMounted` у панели; роли `tablist`/`tab`/`tabpanel` связываются автоматически, стрелки, Home/End, автоматический и ручной (`activation="manual"`) выбор.
+- **Slider**: новый компонент `@via-profit/ui-kit/Slider` — выбор числа или диапазона ползунком: контролируемый и неконтролируемый режимы, шаг, метки с подписями, вертикальное расположение, цвет, `onChangeCommitted` по окончании перетаскивания, значение в форме через `name` и `overrides`; ползунки — элементы с ролью `slider`, управляются стрелками, PageUp/PageDown и Home/End.
+
+### Изменено
+
+- **Пакет**: кроме CommonJS, собираются ES-модули (`esm/`); в `package.json` добавлены `module`, `sideEffects: false` и карта `exports` со всеми модулями. Сборщики (webpack, Vite) берут ES-модули и выбрасывают неиспользуемый код: импорт одного `H1` из `@via-profit/ui-kit/Typography` занимает около 1 КБ вместо 15. Пути импорта не изменились (`@via-profit/ui-kit/Button`, `@via-profit/ui-kit/Button/ButtonContainer`), но пути, которых нет в `exports`, больше не работают: например, с расширением `.js` или с `dist` в пути — уберите их.
+
+### Удалено
+
+- **CountryFlags**: модуль `@via-profit/ui-kit/CountryFlags` удалён — флаги стран не относятся к UI-киту. `PhoneField` по-прежнему показывает флаги стран из набора шаблонов по умолчанию; в своих шаблонах передайте как флаг любой элемент — свою иконку или флаг из шаблонов по умолчанию: `defaultTemplates.find(([code]) => code === 'RU')?.[1]`. Если вы импортировали флаги из `CountryFlags`, перенесите нужные SVG в свой проект.
+- **Menu**: неиспользуемые файлы виртуализированного списка — `Menu/VirtualizedList`, `Menu/VirtualizedListComponent`, `Menu/VirtualizedItem`, `Menu/MeasuredItem`, `Menu/AutoHeightWrapper`. Меню их не использовало.
+- **ErrorBoundary**: неиспользуемый `ErrorBoundary/Fallback`.
+
+### Исправлено
+
+- **Calendar**, **DatePicker**: больше не требуют `react-intl`. Календарь оборачивает себя в `ErrorBoundary`, а тот импортировал `react-intl`, которого нет в зависимостях пакета: без него календарь не собирался.
+- **ErrorBoundary**: свойство `fallback` теперь работает; тексты сообщения об ошибке задаются свойствами `title` и `description` (по умолчанию `Something went wrong` и `Please let the developers know`) вместо русских строк через `react-intl`.
+- **Selectbox**: значение выводится шрифтом поля ввода — селектбокс той же высоты, что `TextField`, `Autocomplete` и `DatePicker` (раньше был ниже на 2px, а текст значения мельче).
 
 ## 0.4.0 — 2026-10-01
 

package/Calendar/CalendarComponent.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };

package/Calendar/CalendarControlButton.d.ts

@@ -4,8 +4,8 @@ export type CalendarControlButtonProps = ButtonProps & {
     readonly isActive?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<import("../Button/ButtonBase").ButtonBaseProps & {
-    readonly variant?: "standard" | "outlined" | "plain" | undefined;
+    readonly variant?: "standard" | "outlined" | "plain";
 } & {
-    readonly isActive?: boolean | undefined;
+    readonly isActive?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Calendar/CalendarPaper.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledCalendarPaper = styled_1.default.div `
   width: 18em;
   position: relative;
@@ -24,7 +25,7 @@ const StyledCalendarPaper = styled_1.default.div `
   justify-content: stretch;
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
-  box-shadow: 0 4px 24px ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
 `;
 const CalendarPaper = (props, ref) => {
     const { children } = props, restProps = __rest(props, ["children"]);

package/Calendar/CalendarWeekDayLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const _default: React.NamedExoticComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
 export default _default;

package/Calendar/CalendarWeekRowButton.d.ts

@@ -6,7 +6,7 @@ export type CalendarWeekRowButtonProps = React.HTMLAttributes<HTMLButtonElement>
     readonly week: Week;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
-    readonly isSelected?: boolean | undefined;
+    readonly isSelected?: boolean;
     readonly accentColor: string;
     readonly week: Week;
 } & React.RefAttributes<HTMLButtonElement>>;

package/Calendar/IconChevronDown.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_1 = require("react");

package/Calendar/index.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { CalendarProps, CalendarRef } from './CalendarComponent';
 export * from './CalendarComponent';
 declare const _default: <IsRangeValue extends boolean | undefined = undefined>(props: CalendarProps<IsRangeValue> & {
-    ref?: React.Ref<CalendarRef<IsRangeValue>> | undefined;
+    ref?: React.Ref<CalendarRef<IsRangeValue>>;
 }) => React.ReactElement;
 export default _default;