@ozen-ui/kit 0.20.0 → 0.21.0

package/__inner__/cjs/components/Card/Card.js

@@ -28,7 +28,7 @@ exports.Card = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(fu
     var _a = props.size, size = _a === void 0 ? 'm' : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.interactive, interactive = _c === void 0 ? false : _c, _d = props.borderWidth, borderWidth = _d === void 0 ? 's' : _d, _e = props.borderVariant, borderVariant = _e === void 0 ? 'solid' : _e, _f = props.borderColor, borderColor = _f === void 0 ? 'standard' : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? 'standard' : _g, _h = props.as, Tag = _h === void 0 ? 'div' : _h, className = props.className, children = props.children, other = tslib_1.__rest(props, ["size", "disabled", "interactive", "borderWidth", "borderVariant", "borderColor", "backgroundColor", "as", "className", "children"]);
     var shouldBeInteractive = !disabled && interactive;
     var shouldShowBorder = borderWidth !== 'none';
-    return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: (0, exports.cnCard)(tslib_1.__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
+    return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, (shouldBeInteractive && { tabIndex: 0 }), { "aria-disabled": disabled }, other, { ref: ref, className: (0, exports.cnCard)(tslib_1.__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
             borderVariant: borderVariant,
             borderColor: borderColor,
         })), [className]) }), children));

package/__inner__/cjs/components/IconButton/IconButton.d.ts

@@ -1,20 +1,20 @@
 import './IconButton.css';
-import React from 'react';
 import type { ElementType } from 'react';
 import type { IconSize, IconProps } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
 import { ICON_BUTTON_DEFAULT_TAG } from './constants';
 export declare const iconButtonColorVariant: readonly ["primary", "secondary"];
 export declare const iconButtonVariant: readonly ["contained", "outlined", "ghost", "function", "floating"];
 export type IconButtonVariant = (typeof iconButtonVariant)[number];
 export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
-export type IconButtonIconProps = {
+export type IconButtonIcon = RenderContentType<IconProps & {
     size?: IconSize;
-};
+}>['content'];
 type IconButtonBaseProps = {
     /** Иконка */
-    icon: React.FC<IconProps & IconButtonIconProps>;
+    icon: IconButtonIcon;
     /** Вариант представления компонента */
     variant?: IconButtonVariant;
     /** Размер */
@@ -31,9 +31,9 @@ type IconButtonBaseProps = {
     loading?: boolean;
     /** Дополнительные CSS-классы */
     className?: string;
-    children?: never;
     /** Если {true} делает компонент круглым  */
     rounded?: boolean;
+    children?: never;
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/IconButton/IconButton.js

@@ -4,11 +4,11 @@ exports.IconButton = exports.cnIconButton = exports.iconButtonVariant = exports.
 var tslib_1 = require("tslib");
 require("./IconButton.css");
 var react_1 = tslib_1.__importStar(require("react"));
-var react_is_1 = require("react-is");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var renderContent_1 = require("../../utils/renderContent");
 var Loader_1 = require("../Loader");
 var constants_1 = require("./constants");
 exports.iconButtonColorVariant = ['primary', 'secondary'];
@@ -32,23 +32,31 @@ exports.IconButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithR
         props: inProps,
         name: 'IconButton',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? constants_1.ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = tslib_1.__rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
-    var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
+    var _a = props.size, size = _a === void 0 ? constants_1.ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? constants_1.ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = tslib_1.__rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var isInteractionPrevented = disabled || loading;
     var handleClick = function (event) {
         if (onClick && !disabled && !loading) {
             onClick(event);
         }
     };
+    var renderIcon = function (content) {
+        return (0, renderContent_1.renderContent)({
+            content: content,
+            props: {
+                size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
+                color: iconColor,
+            },
+        });
+    };
     var resolvedChildren = (0, react_1.useMemo)(function () {
         if (loading) {
             return (react_1.default.createElement(Loader_1.Loader, { className: (0, exports.cnIconButton)('Loader'), color: "var(--color-content-disabled)", size: loaderSizeMapper[size] }));
         }
-        if ((0, react_is_1.isValidElementType)(Icon)) {
-            return react_1.default.createElement(Icon, { size: iconSize, color: iconColor });
+        if (icon) {
+            return renderIcon(icon);
         }
         return null;
-    }, [loading, size, iconColor, iconSize, Icon]);
+    }, [loading, size, iconColor, icon, renderIcon]);
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnIconButton)({
             variant: variant,
             size: size,

package/__inner__/cjs/components/Indicator/Indicator.css

@@ -3,6 +3,7 @@
   inline-size: var(--indicator-size);
   block-size: var(--indicator-size);
   border-radius: calc(var(--indicator-size) / 2);
+  flex-shrink: 0;
 }
 
   .Indicator_variant_neutral {

package/__inner__/cjs/components/List/List.css

@@ -1,6 +1,11 @@
 .List {
+  --list-item-color: var(--color-content-primary);
   --list-item-border-radius: var(--border-radius-xs);
-  --list-pipka-background-color: var(--color-content-action);
+  --list-item-bg-color: transparent;
+  --list-item-bg-color-hover: var(--color-background-main-hover);
+  --list-item-bg-color-active: var(--color-background-main-pressed);
+  --list-item-bg-color-disabled: var(--color-content-tertiary);
+  --list-pipka-bg-color: var(--color-content-action);
   --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
     0;
   display: flex;

package/__inner__/cjs/components/List/components/ListItem/ListItem.css

@@ -4,7 +4,7 @@
   min-block-size: var(--list-item-min-height);
   padding: var(--list-item-padding);
   border-radius: var(--list-item-border-radius);
-  color: var(--color-content-primary);
+  color: var(--list-item-color);
   box-sizing: border-box;
   flex-shrink: 0;
   margin: 0 var(--list-gutter);

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.css

@@ -1,31 +1,31 @@
 .ListItemButton {
   inline-size: calc(100% - 2 * var(--list-gutter));
+  min-block-size: var(--list-item-min-height);
+  padding: var(--list-item-padding);
+  color: var(--list-item-color);
+  border-radius: var(--list-item-border-radius);
+  background-color: var(--list-item-bg-color);
+  margin: 0 var(--list-gutter);
+  transition: background-color var(--transition-default);
   display: flex;
   flex-shrink: 0;
   align-items: center;
   box-sizing: border-box;
-  min-block-size: var(--list-item-min-height);
-  padding: var(--list-item-padding);
-  color: var(--color-content-primary);
   outline: none;
   text-decoration: none;
-  border-radius: var(--list-item-border-radius);
-  transition: background-color var(--transition-default);
   text-align: start;
-  background-color: transparent;
   cursor: pointer;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
-  margin: 0 var(--list-gutter);
   border: none;
 }
 
   .ListItemButton:hover {
-    background-color: var(--color-background-main-hover);
+    background-color: var(--list-item-bg-color-hover);
   }
 
   .ListItemButton:active {
-    background-color: var(--color-background-main-pressed);
+    background-color: var(--list-item-bg-color-active);
   }
 
   .ListItemButton:focus {
@@ -38,7 +38,7 @@
 
   .ListItemButton_disabled {
     pointer-events: none;
-    color: var(--color-content-tertiary);
+    color: var(--list-item-bg-color-disabled);
   }
 
   .ListItemButton_disabled .ListItemText-TextPrimary,
@@ -50,7 +50,7 @@
     content: '';
     inline-size: var(--list-pipka-width);
     block-size: var(--list-pipka-height);
-    background-color: var(--list-pipka-background-color);
+    background-color: var(--list-pipka-bg-color);
     border-radius: var(--list-pipka-border-radius);
     position: absolute;
     inset-inline-start: 0;

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.d.ts

@@ -8,6 +8,9 @@ export type ListItemButtonBaseProps = {
     children?: ReactNode;
     /** Если {true} делает элемент неактивным */
     disabled?: boolean;
+    /** Если {true} отображает элемент списка как выбранный */
+    selected?: boolean;
+    /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };
 export type ListItemButtonProps<As extends ElementType = typeof LIST_ITEM_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemButtonBaseProps, As>;

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.js

@@ -12,7 +12,7 @@ var constants_1 = require("../../constants");
 exports.cnListItemButton = (0, classname_1.cn)('ListItemButton');
 exports.ListItemButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'ListItemButton' });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, other = tslib_1.__rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, selected = props.selected, other = tslib_1.__rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown", "selected"]);
     var tabIndex = (0, react_1.useMemo)(function () { return (!disabled ? 0 : -1); }, [disabled]);
     var handleClick = function (event) {
         if (!disabled)
@@ -44,6 +44,7 @@ exports.ListItemButton = (0, polymorphicComponentWithRef_1.polymorphicComponentW
     }, [Tag, handleKeyDown]);
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnListItemButton)({
             disabled: disabled,
+            selected: selected,
         }, [className]), onClick: handleClick, tabIndex: tabIndexProp || tabIndex }, additionalTagProps, other, { ref: ref }), children));
 });
 exports.ListItemButton.displayName = 'ListItemButton';

package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -4,8 +4,6 @@ import { type ListItemButtonBaseProps } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export declare const cnMenuItem: import("@bem-react/classname").ClassNameFormatter;
 export type MenuItemBaseProps = ListItemButtonBaseProps & {
-    /** Если {true} отображает элемент меню как выбранный */
-    selected?: boolean;
     /** Используется для вычисления лейбла выбранного элемента меню в выпадающих списках */
     label?: string;
     /** Используется для вычисления значения выбранного элемента меню в выпадающих списках */

package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.js

@@ -20,6 +20,6 @@ exports.MenuItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [autoFocus, disabled]);
-    return (react_1.default.createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem", as: Tag, disabled: disabled }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, List_1.cnListItemButton)({ selected: selected }, [className, (0, exports.cnMenuItem)()]), "data-value": value, "data-label": label }), children));
+    return (react_1.default.createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem", as: Tag, disabled: disabled, selected: selected }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, exports.cnMenuItem)('', [className]), "data-value": value, "data-label": label }), children));
 });
 exports.MenuItem.displayName = 'MenuItem';

package/__inner__/cjs/hooks/useBoolean/useBoolean.d.ts

@@ -1,4 +1,4 @@
-type UseBooleanControllers = {
+export type UseBooleanControllers = {
     /** Установить значение в {true} */
     on: () => void;
     /** Установить значение в {false} */
@@ -6,8 +6,7 @@ type UseBooleanControllers = {
     /** Перевести значение в противоположное состояние */
     toggle: () => void;
 };
-type UseBooleanReturnValue = [boolean, UseBooleanControllers];
+export type UseBooleanReturnValue = [boolean, UseBooleanControllers];
 export declare function useBoolean(
 /** Значение по умолчанию */
 defaultValue?: boolean): UseBooleanReturnValue;
-export {};

package/__inner__/esm/components/Card/Card.js

@@ -25,7 +25,7 @@ export var Card = polymorphicComponentWithRef(function (inProps, ref) {
     var _a = props.size, size = _a === void 0 ? 'm' : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.interactive, interactive = _c === void 0 ? false : _c, _d = props.borderWidth, borderWidth = _d === void 0 ? 's' : _d, _e = props.borderVariant, borderVariant = _e === void 0 ? 'solid' : _e, _f = props.borderColor, borderColor = _f === void 0 ? 'standard' : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? 'standard' : _g, _h = props.as, Tag = _h === void 0 ? 'div' : _h, className = props.className, children = props.children, other = __rest(props, ["size", "disabled", "interactive", "borderWidth", "borderVariant", "borderColor", "backgroundColor", "as", "className", "children"]);
     var shouldBeInteractive = !disabled && interactive;
     var shouldShowBorder = borderWidth !== 'none';
-    return (React.createElement(Paper, __assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
+    return (React.createElement(Paper, __assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, (shouldBeInteractive && { tabIndex: 0 }), { "aria-disabled": disabled }, other, { ref: ref, className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
             borderVariant: borderVariant,
             borderColor: borderColor,
         })), [className]) }), children));

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

@@ -1,20 +1,20 @@
 import './IconButton.css';
-import React from 'react';
 import type { ElementType } from 'react';
 import type { IconSize, IconProps } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
 import { ICON_BUTTON_DEFAULT_TAG } from './constants';
 export declare const iconButtonColorVariant: readonly ["primary", "secondary"];
 export declare const iconButtonVariant: readonly ["contained", "outlined", "ghost", "function", "floating"];
 export type IconButtonVariant = (typeof iconButtonVariant)[number];
 export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
-export type IconButtonIconProps = {
+export type IconButtonIcon = RenderContentType<IconProps & {
     size?: IconSize;
-};
+}>['content'];
 type IconButtonBaseProps = {
     /** Иконка */
-    icon: React.FC<IconProps & IconButtonIconProps>;
+    icon: IconButtonIcon;
     /** Вариант представления компонента */
     variant?: IconButtonVariant;
     /** Размер */
@@ -31,9 +31,9 @@ type IconButtonBaseProps = {
     loading?: boolean;
     /** Дополнительные CSS-классы */
     className?: string;
-    children?: never;
     /** Если {true} делает компонент круглым  */
     rounded?: boolean;
+    children?: never;
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/IconButton/IconButton.js

@@ -1,11 +1,11 @@
 import { __assign, __rest } from "tslib";
 import './IconButton.css';
 import React, { useMemo } from 'react';
-import { isValidElementType } from 'react-is';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { renderContent } from '../../utils/renderContent';
 import { Loader } from '../Loader';
 import { ICON_BUTTON_DEFAULT_SIZE, ICON_BUTTON_DEFAULT_VARIANT, ICON_BUTTON_DEFAULT_COLOR, ICON_BUTTON_DEFAULT_TAG, } from './constants';
 export var iconButtonColorVariant = ['primary', 'secondary'];
@@ -29,23 +29,31 @@ export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'IconButton',
     });
-    var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
-    var iconSize = getIconSizeToFormElement(size);
+    var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var isInteractionPrevented = disabled || loading;
     var handleClick = function (event) {
         if (onClick && !disabled && !loading) {
             onClick(event);
         }
     };
+    var renderIcon = function (content) {
+        return renderContent({
+            content: content,
+            props: {
+                size: getIconSizeToFormElement(size),
+                color: iconColor,
+            },
+        });
+    };
     var resolvedChildren = useMemo(function () {
         if (loading) {
             return (React.createElement(Loader, { className: cnIconButton('Loader'), color: "var(--color-content-disabled)", size: loaderSizeMapper[size] }));
         }
-        if (isValidElementType(Icon)) {
-            return React.createElement(Icon, { size: iconSize, color: iconColor });
+        if (icon) {
+            return renderIcon(icon);
         }
         return null;
-    }, [loading, size, iconColor, iconSize, Icon]);
+    }, [loading, size, iconColor, icon, renderIcon]);
     return (React.createElement(Tag, __assign({ className: cnIconButton({
             variant: variant,
             size: size,

package/__inner__/esm/components/Indicator/Indicator.css

@@ -3,6 +3,7 @@
   inline-size: var(--indicator-size);
   block-size: var(--indicator-size);
   border-radius: calc(var(--indicator-size) / 2);
+  flex-shrink: 0;
 }
 
   .Indicator_variant_neutral {

package/__inner__/esm/components/List/List.css

@@ -1,6 +1,11 @@
 .List {
+  --list-item-color: var(--color-content-primary);
   --list-item-border-radius: var(--border-radius-xs);
-  --list-pipka-background-color: var(--color-content-action);
+  --list-item-bg-color: transparent;
+  --list-item-bg-color-hover: var(--color-background-main-hover);
+  --list-item-bg-color-active: var(--color-background-main-pressed);
+  --list-item-bg-color-disabled: var(--color-content-tertiary);
+  --list-pipka-bg-color: var(--color-content-action);
   --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
     0;
   display: flex;

package/__inner__/esm/components/List/components/ListItem/ListItem.css

@@ -4,7 +4,7 @@
   min-block-size: var(--list-item-min-height);
   padding: var(--list-item-padding);
   border-radius: var(--list-item-border-radius);
-  color: var(--color-content-primary);
+  color: var(--list-item-color);
   box-sizing: border-box;
   flex-shrink: 0;
   margin: 0 var(--list-gutter);

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.css

@@ -1,31 +1,31 @@
 .ListItemButton {
   inline-size: calc(100% - 2 * var(--list-gutter));
+  min-block-size: var(--list-item-min-height);
+  padding: var(--list-item-padding);
+  color: var(--list-item-color);
+  border-radius: var(--list-item-border-radius);
+  background-color: var(--list-item-bg-color);
+  margin: 0 var(--list-gutter);
+  transition: background-color var(--transition-default);
   display: flex;
   flex-shrink: 0;
   align-items: center;
   box-sizing: border-box;
-  min-block-size: var(--list-item-min-height);
-  padding: var(--list-item-padding);
-  color: var(--color-content-primary);
   outline: none;
   text-decoration: none;
-  border-radius: var(--list-item-border-radius);
-  transition: background-color var(--transition-default);
   text-align: start;
-  background-color: transparent;
   cursor: pointer;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
-  margin: 0 var(--list-gutter);
   border: none;
 }
 
   .ListItemButton:hover {
-    background-color: var(--color-background-main-hover);
+    background-color: var(--list-item-bg-color-hover);
   }
 
   .ListItemButton:active {
-    background-color: var(--color-background-main-pressed);
+    background-color: var(--list-item-bg-color-active);
   }
 
   .ListItemButton:focus {
@@ -38,7 +38,7 @@
 
   .ListItemButton_disabled {
     pointer-events: none;
-    color: var(--color-content-tertiary);
+    color: var(--list-item-bg-color-disabled);
   }
 
   .ListItemButton_disabled .ListItemText-TextPrimary,
@@ -50,7 +50,7 @@
     content: '';
     inline-size: var(--list-pipka-width);
     block-size: var(--list-pipka-height);
-    background-color: var(--list-pipka-background-color);
+    background-color: var(--list-pipka-bg-color);
     border-radius: var(--list-pipka-border-radius);
     position: absolute;
     inset-inline-start: 0;

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

@@ -8,6 +8,9 @@ export type ListItemButtonBaseProps = {
     children?: ReactNode;
     /** Если {true} делает элемент неактивным */
     disabled?: boolean;
+    /** Если {true} отображает элемент списка как выбранный */
+    selected?: boolean;
+    /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };
 export type ListItemButtonProps<As extends ElementType = typeof LIST_ITEM_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemButtonBaseProps, As>;

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.js

@@ -9,7 +9,7 @@ import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
 export var cnListItemButton = cn('ListItemButton');
 export var ListItemButton = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'ListItemButton' });
-    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, other = __rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown"]);
+    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, selected = props.selected, other = __rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown", "selected"]);
     var tabIndex = useMemo(function () { return (!disabled ? 0 : -1); }, [disabled]);
     var handleClick = function (event) {
         if (!disabled)
@@ -41,6 +41,7 @@ export var ListItemButton = polymorphicComponentWithRef(function (inProps, ref)
     }, [Tag, handleKeyDown]);
     return (React.createElement(Tag, __assign({ className: cnListItemButton({
             disabled: disabled,
+            selected: selected,
         }, [className]), onClick: handleClick, tabIndex: tabIndexProp || tabIndex }, additionalTagProps, other, { ref: ref }), children));
 });
 ListItemButton.displayName = 'ListItemButton';

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -4,8 +4,6 @@ import { type ListItemButtonBaseProps } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export declare const cnMenuItem: import("@bem-react/classname").ClassNameFormatter;
 export type MenuItemBaseProps = ListItemButtonBaseProps & {
-    /** Если {true} отображает элемент меню как выбранный */
-    selected?: boolean;
     /** Используется для вычисления лейбла выбранного элемента меню в выпадающих списках */
     label?: string;
     /** Используется для вычисления значения выбранного элемента меню в выпадающих списках */

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.js

@@ -4,7 +4,7 @@ import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn } from '../../../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../../../utils/polymorphicComponentWithRef';
-import { cnListItemButton, ListItemButton, } from '../../../List';
+import { ListItemButton } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export var cnMenuItem = cn('MenuItem');
 export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
@@ -17,6 +17,6 @@ export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [autoFocus, disabled]);
-    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag, disabled: disabled }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
+    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag, disabled: disabled, selected: selected }, other, { ref: useMultiRef([ref, innerRef]), className: cnMenuItem('', [className]), "data-value": value, "data-label": label }), children));
 });
 MenuItem.displayName = 'MenuItem';

package/__inner__/esm/hooks/useBoolean/useBoolean.d.ts

@@ -1,4 +1,4 @@
-type UseBooleanControllers = {
+export type UseBooleanControllers = {
     /** Установить значение в {true} */
     on: () => void;
     /** Установить значение в {false} */
@@ -6,8 +6,7 @@ type UseBooleanControllers = {
     /** Перевести значение в противоположное состояние */
     toggle: () => void;
 };
-type UseBooleanReturnValue = [boolean, UseBooleanControllers];
+export type UseBooleanReturnValue = [boolean, UseBooleanControllers];
 export declare function useBoolean(
 /** Значение по умолчанию */
 defaultValue?: boolean): UseBooleanReturnValue;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "React component library",
   "files": [
     "*"