@ozen-ui/kit 0.84.0 → 0.84.2

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

@@ -46,8 +46,8 @@
       --list-item-avatar-min-width: 24px;
       --list-item-padding: 4px 8px;
       --list-item-children-margin-right: 8px;
-      --list-pipka-height: 40px;
-      --list-pipka-width: 4px;
+      --list-pipka-height: 32px;
+      --list-pipka-width: 2px;
       --list-item-border-radius: var(--border-radius-m);
     }
 
@@ -58,8 +58,8 @@
       --list-item-avatar-min-width: 32px;
       --list-item-padding: 6px 12px;
       --list-item-children-margin-right: 12px;
-      --list-pipka-height: 40px;
-      --list-pipka-width: 4px;
+      --list-pipka-height: 32px;
+      --list-pipka-width: 2px;
       --list-item-border-radius: var(--border-radius-l);
     }
 

package/__inner__/cjs/components/Sidebar/Sidebar.css

@@ -36,6 +36,7 @@
     z-index: 1;
   }
 
+  .Sidebar-SizerWrapper_forceShow .Sidebar-Sizer,
   .Sidebar-SizerWrapper:hover .Sidebar-Sizer,
   .Sidebar-SizerWrapper:focus-within .Sidebar-Sizer {
     opacity: 1;

package/__inner__/cjs/components/Sidebar/Sidebar.js

@@ -27,7 +27,7 @@ exports.Sidebar = (0, utils_1.polymorphicComponentWithRef)(function (inProps, re
         name: 'Sidebar',
         props: inProps,
     });
-    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? constants_1.SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? constants_1.SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? constants_1.SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? constants_1.SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? constants_1.SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, sizerWrapperProps = props.sizerWrapperProps, style = props.style, other = tslib_1.__rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "sizerWrapperProps", "style"]);
+    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? constants_1.SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? constants_1.SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? constants_1.SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? constants_1.SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? constants_1.SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, sizerWrapperProps = props.sizerWrapperProps, style = props.style, forceShowSizer = props.forceShowSizer, other = tslib_1.__rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "sizerWrapperProps", "style", "forceShowSizer"]);
     var memoizedContextValue = (0, react_1.useMemo)(function () { return ({ variant: variant, size: size, color: color }); }, [variant, size, color]);
     var width = constants_1.SIDEBAR_WIDTH_BY_VARIANT[size][variant];
     return (react_1.default.createElement(SidebarContext_1.SidebarContext.Provider, { value: memoizedContextValue },
@@ -35,8 +35,6 @@ exports.Sidebar = (0, utils_1.polymorphicComponentWithRef)(function (inProps, re
                 _a[constants_1.SIDEBAR_CSS_VARIABLE.WIDTH] = "".concat(width, "px"),
                 _a))), className: (0, exports.cnSidebar)({ variant: variant, rounded: rounded, size: size, color: color }, [className]) }),
             children,
-            sizer && (react_1.default.createElement("div", tslib_1.__assign({}, sizerWrapperProps, { className: (0, exports.cnSidebar)('SizerWrapper', [
-                    sizerWrapperProps === null || sizerWrapperProps === void 0 ? void 0 : sizerWrapperProps.className,
-                ]) }),
+            sizer && (react_1.default.createElement("div", tslib_1.__assign({}, sizerWrapperProps, { className: (0, exports.cnSidebar)('SizerWrapper', { forceShow: forceShowSizer }, [sizerWrapperProps === null || sizerWrapperProps === void 0 ? void 0 : sizerWrapperProps.className]) }),
                 react_1.default.createElement("div", { className: (0, exports.cnSidebar)('Sizer') }, sizer))))));
 });

package/__inner__/cjs/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.css

@@ -3,7 +3,7 @@
   z-index: 0;
 }
 
-  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
       opacity: 0;
       max-inline-size: 0;
       margin-inline-start: 0;
@@ -14,26 +14,32 @@
     z-index: 1;
   }
 
-  .SidebarCollapsibleItem-Content {
+  .SidebarCollapsibleItem-ContentWrapper {
     display: flex;
     flex-shrink: 0;
     margin-inline-start: var(--sidebar-collapsible-item-gap);
   }
 
-  .SidebarCollapsibleItem-Content > * {
-    flex-shrink: 0;
+  .SidebarCollapsibleItem-Content {
+    box-sizing: border-box;
   }
 
   .SidebarCollapsibleItem_center {
     margin-inline: auto;
   }
 
-.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-Content {
+.Sidebar_variant_full .SidebarCollapsibleItem-Content, .Sidebar_variant_mini .SidebarCollapsibleItem-Content {
+    overflow: hidden;
+    inline-size: var(--sidebar-collapsible-item-content-width);
+    min-inline-size: var(--sidebar-collapsible-item-content-width);
+  }
+
+.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-ContentWrapper {
     transition: var(--transition-default);
     transition-property: opacity, transform, max-inline-size, margin-inline;
   }
 
-.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
       transform: translateX(calc(var(--sidebar-collapsible-item-gap) * -1));
       transition-duration: 100ms;
     }

package/__inner__/cjs/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.js

@@ -17,8 +17,8 @@ exports.SidebarCollapsibleItem = (0, utils_1.polymorphicComponentWithRef)(functi
         props: inProps,
         name: 'SidebarCollapsibleItem',
     });
-    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, other = tslib_1.__rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter"]);
-    var variant = (0, SidebarContext_1.useSidebarContext)().variant;
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, contentFullWidth = props.contentFullWidth, other = tslib_1.__rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter", "contentFullWidth"]);
+    var _e = (0, SidebarContext_1.useSidebarContext)(), variant = _e.variant, size = _e.size;
     var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
     var internalRef = (0, react_1.useRef)(null);
     var itemRef = (0, useMultiRef_1.useMultiRef)([ref, internalRef]);
@@ -29,15 +29,22 @@ exports.SidebarCollapsibleItem = (0, utils_1.polymorphicComponentWithRef)(functi
             props: { collapsed: isCollapsed },
         })
         : fixed;
-    var _e = (0, hooks_1.useSidebarCollapsibleItemAnimation)({
+    var _f = (0, hooks_1.useSidebarCollapsibleItemAnimation)({
         autoCenter: autoCenter,
         ref: internalRef,
         fixedRef: fixedRef,
         isCollapsed: isCollapsed,
-    }), onExit = _e.onExit, onEnter = _e.onEnter, onTransitionEnd = _e.onTransitionEnd, hasMarginAutoClass = _e.hasMarginAutoClass;
+    }), onExit = _f.onExit, onEnter = _f.onEnter, onTransitionEnd = _f.onTransitionEnd, hasMarginAutoClass = _f.hasMarginAutoClass;
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 120 }, appear: true, onEnter: onEnter, onExit: onExit, onEntered: onTransitionEnd, onExited: onTransitionEnd },
         react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({}, other, { ref: itemRef, as: as, className: (0, exports.cnSidebarCollapsibleItem)({ collapsed: isCollapsed, animated: animated, center: hasMarginAutoClass }, [className]), justify: justify }),
             react_1.default.createElement("div", { ref: fixedRef, className: (0, exports.cnSidebarCollapsibleItem)('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
-            react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('Content', [classNames === null || classNames === void 0 ? void 0 : classNames.content]) }, children))));
+            react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('ContentWrapper', [
+                    classNames === null || classNames === void 0 ? void 0 : classNames.contentWrapper,
+                ]), style: (0, utils_1.generateCSSVariables)({
+                    'sidebar-collapsible-item-content-width': "".concat(contentFullWidth[size], "px"),
+                }) },
+                react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('Content', [
+                        classNames === null || classNames === void 0 ? void 0 : classNames.content,
+                    ]) }, children)))));
 });
 exports.SidebarCollapsibleItem.displayName = 'SidebarCollapsibleItem';

package/__inner__/cjs/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.css

@@ -20,7 +20,6 @@
     letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
     text-transform: var(--typography-text-m_1-text_transform, none);
     color: var(--sidebar-content-primary-color);
-    white-space: nowrap;
   }
 .SidebarHeaderLogo-Icon {
     background-color: var(--sidebar-header-icon-background);

package/__inner__/cjs/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.js

@@ -17,6 +17,9 @@ exports.SidebarHeaderLogo = (0, utils_1.polymorphicComponentWithRef)(function (i
     });
     var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_HEADER_LOGO_DEFAULT_TAG : _a, className = props.className, children = props.children, icon = props.icon, other = tslib_1.__rest(props, ["as", "className", "children", "icon"]);
     var _b = (0, SidebarContext_1.useSidebarContext)(), color = _b.color, variant = _b.variant, size = _b.size;
-    return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, fixed: react_1.default.createElement(Stack_1.Stack, { className: (0, exports.cnSidebarHeaderLogo)('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: (0, exports.cnSidebarHeaderLogo)('Text') }, ref: ref, className: (0, exports.cnSidebarHeaderLogo)({ color: color, size: size }, [className]), align: "center" }), children));
+    return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, fixed: react_1.default.createElement(Stack_1.Stack, { className: (0, exports.cnSidebarHeaderLogo)('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: (0, exports.cnSidebarHeaderLogo)('Text') }, ref: ref, className: (0, exports.cnSidebarHeaderLogo)({ color: color, size: size }, [className]), align: "center", contentFullWidth: {
+            s: 184,
+            m: 200,
+        } }), children));
 });
 exports.SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

package/__inner__/cjs/components/Sidebar/modules/SidebarItem/SidebarItem.css

@@ -64,9 +64,8 @@
     block-size: 24px;
   }
 .SidebarItem-Content {
-    flex: 1;
+    display: flex;
     color: var(--sidebar-content-primary-color);
-    white-space: nowrap;
     justify-content: space-between;
     align-items: center;
   }

package/__inner__/cjs/components/Sidebar/modules/SidebarItem/SidebarItem.js

@@ -54,7 +54,10 @@ exports.SidebarItem = (0, utils_1.polymorphicComponentWithRef)(function (inProps
         react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, onClick: function (event) {
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
                 setIsOpenSubItems(!isOpenSubitems);
-            }, collapsed: isCollapsed, className: (0, exports.cnSidebarItem)('Item'), autoCenter: false, fixed: function (props) {
+            }, collapsed: isCollapsed, className: (0, exports.cnSidebarItem)('Item'), contentFullWidth: {
+                s: 180,
+                m: 196,
+            }, autoCenter: false, fixed: function (props) {
                 var badge = (0, utils_1.isFunction)(badgeProp)
                     ? badgeProp({ collapsed: props.collapsed })
                     : badgeProp;

package/__inner__/cjs/components/Sidebar/modules/SidebarUser/SidebarUser.css

@@ -1,5 +1,7 @@
 .SidebarUser {
   --sidebar-collapsible-item-gap: var(--spacing-2xs);
+  inline-size: 100%;
+  box-sizing: border-box;
 }
 
   .SidebarUser-Indicator {
@@ -8,17 +10,36 @@
 
   .SidebarUser-Name {
     color: var(--sidebar-content-primary-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .SidebarUser-Fixed {
+    display: flex;
+    align-items: center;
   }
 
   .SidebarUser-Content {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    overflow: hidden;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-xs)
+  }
+
+  .SidebarUser-Info {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .SidebarUser-After {
     flex-shrink: 0;
-    white-space: nowrap;
+    transition: var(--transition-slow) opacity;
+    opacity: 1;
   }
 
-  .SidebarUser-Content_hasStatus {
-    display: flex;
-    flex-direction: column;
+.SidebarCollapsibleItem_collapsed .SidebarUser-After {
+    opacity: 0;
+    transition-duration: 0ms;
   }

package/__inner__/cjs/components/Sidebar/modules/SidebarUser/SidebarUser.js

@@ -6,6 +6,7 @@ var react_1 = tslib_1.__importDefault(require("react"));
 var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var utils_1 = require("../../../../utils");
 var Avatar_1 = require("../../../Avatar");
+var Stack_1 = require("../../../Stack");
 var Typography_1 = require("../../../Typography");
 var SidebarContext_1 = require("../../SidebarContext");
 var SidebarCollapsibleItem_1 = require("../SidebarCollapsibleItem");
@@ -17,17 +18,22 @@ exports.SidebarUser = (0, utils_1.polymorphicComponentWithRef)(function (inProps
         props: inProps,
         name: 'SidebarUser',
     });
-    var _b = props.as, as = _b === void 0 ? constants_1.SIDEBAR_USER_DEFAULT_TAG : _b, className = props.className, avatarProps = props.avatarProps, name = props.name, online = props.online, status = props.status, other = tslib_1.__rest(props, ["as", "className", "avatarProps", "name", "online", "status"]);
+    var _b = props.as, as = _b === void 0 ? constants_1.SIDEBAR_USER_DEFAULT_TAG : _b, className = props.className, avatarProps = props.avatarProps, name = props.name, online = props.online, status = props.status, after = props.after, other = tslib_1.__rest(props, ["as", "className", "avatarProps", "name", "online", "status", "after"]);
     var _c = (0, SidebarContext_1.useSidebarContext)(), variant = _c.variant, size = _c.size;
-    var hasStatus = !!status;
     var isCollapsed = variant !== 'full';
     return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { ref: ref, as: as, className: (0, exports.cnSidebarUser)('', [className]), fixed: react_1.default.createElement(Avatar_1.Avatar, tslib_1.__assign({}, avatarProps, { online: (0, utils_1.isFunction)(online) ? online({ collapsed: isCollapsed }) : online, name: (_a = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.name) !== null && _a !== void 0 ? _a : name, size: constants_1.SIDEBAR_USER_SIZE_TO_AVATAR[size], indicatorProps: { className: (0, exports.cnSidebarUser)('Indicator') }, className: (0, exports.cnSidebarUser)('Avatar', [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className]), colorScheme: {
                 text: 'content-primary',
                 background: 'background-tertiary',
             } })), collapsed: isCollapsed, classNames: {
-            content: (0, exports.cnSidebarUser)('Content', { hasStatus: hasStatus }),
+            content: (0, exports.cnSidebarUser)('Content'),
+            fixed: (0, exports.cnSidebarUser)('Fixed'),
+        }, contentFullWidth: {
+            s: 184,
+            m: 200,
         } }),
-        react_1.default.createElement(Typography_1.Typography, { variant: "text-s", as: "span", className: (0, exports.cnSidebarUser)('Name') }, name),
-        status));
+        react_1.default.createElement(Stack_1.Stack, { direction: "column", className: (0, exports.cnSidebarUser)('Info') },
+            react_1.default.createElement(Typography_1.Typography, { variant: "text-s", as: "span", className: (0, exports.cnSidebarUser)('Name') }, name),
+            status),
+        after && (react_1.default.createElement(Stack_1.Stack, { display: "block", align: "center", justify: "center", className: (0, exports.cnSidebarUser)('After') }, after))));
 });
 exports.SidebarUser.displayName = 'SidebarUser';

package/__inner__/cjs/components/Sidebar/modules/SidebarUserMenu/SidebarUserMenu.css

@@ -1,34 +1,45 @@
-/* stylelint-disable */
 .SidebarUserMenu-Button_color_main.ButtonNext {
     --button-font-color: var(--color-content-primary);
     --button-font-color-hover: var(--color-content-primary);
     --button-font-color-active: var(--color-content-primary);
     --button-font-color-focus: var(--color-content-primary);
   }
-.SidebarUserMenu-Button_color_accent.ButtonNext {
+  .SidebarUserMenu-Button_color_accent.ButtonNext {
     --button-font-color: var(--color-content-primary-inverse);
     --button-font-color-hover: var(--color-content-primary-inverse);
     --button-font-color-active: var(--color-content-primary-inverse);
     --button-font-color-focus: var(--color-content-primary-inverse);
   }
-.SidebarUserMenu-Chevron {
+  .SidebarUserMenu-Chevron {
     transform: rotate(0deg);
     transition: var(--transition-default) transform;
+    flex-shrink: 0;
   }
-.SidebarUserMenu-Button.ButtonNext {
+  .SidebarUserMenu-Button.ButtonNext {
       inline-size: -moz-fit-content;
       inline-size: fit-content;
+      max-inline-size: 100%;
       justify-content: flex-start;
     }
-.SidebarUserMenu-Button .ButtonNext-Content {
+  .SidebarUserMenu-Button .ButtonNext-Content {
       flex-grow: initial;
       gap: var(--spacing-3xs);
     }
-.SidebarUserMenu-Button .ButtonNext-Label {
-      font: var(--typography-text-2xs_1-font);
-      letter-spacing: var(--typography-text-2xs_1-letter_spacing, 0);
-      text-transform: var(--typography-text-2xs_1-text_transform, none);
-    }
-.SidebarUserMenu-Button_open .SidebarUserMenu-Chevron {
+  .SidebarUserMenu-Button_manyLines .SidebarUserMenu-Label {
+        white-space: normal;
+      }
+  .SidebarUserMenu-Button_open .SidebarUserMenu-Chevron {
         transform: rotate(180deg);
       }
+  .SidebarUserMenu-Button .SidebarUserMenu-LabelWrapper {
+    overflow: initial;
+    text-overflow: initial;
+    white-space: initial;
+  }
+  .SidebarUserMenu-Label {
+    display: -webkit-box;
+    -webkit-box-orient: block-axis;
+    -webkit-line-clamp: var(--sidebar-user-menu-ellipsis);
+    overflow: hidden;
+    text-align: start;
+  }

package/__inner__/cjs/components/Sidebar/modules/SidebarUserMenu/SidebarUserMenu.js

@@ -10,35 +10,41 @@ var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var utils_1 = require("../../../../utils");
 var ButtonNext_1 = require("../../../ButtonNext");
 var Menu_1 = require("../../../Menu");
+var Typography_1 = require("../../../Typography");
 var SidebarContext_1 = require("../../SidebarContext");
 var constants_1 = require("./constants");
 exports.cnSidebarUserMenu = (0, utils_1.cn)('SidebarUserMenu');
 exports.SidebarUserMenu = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var _a;
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'SidebarUserMenu',
     });
-    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_USER_MENU_DEFAULT_TAG : _a, className = props.className, children = props.children, label = props.label, open = props.open, onOpenChange = props.onOpenChange, menuProps = props.menuProps, onClick = props.onClick, other = tslib_1.__rest(props, ["as", "className", "children", "label", "open", "onOpenChange", "menuProps", "onClick"]);
+    var _b = props.as, as = _b === void 0 ? constants_1.SIDEBAR_USER_MENU_DEFAULT_TAG : _b, className = props.className, children = props.children, label = props.label, _c = props.labelVariant, labelVariant = _c === void 0 ? constants_1.SIDEBAR_USER_MENU_DEFAULT_LABEL_VARIANT : _c, open = props.open, onOpenChange = props.onOpenChange, menuProps = props.menuProps, onClick = props.onClick, _d = props.maxLines, maxLines = _d === void 0 ? constants_1.SIDEBAR_USER_MENU_DEFAULT_MAX_LINES : _d, other = tslib_1.__rest(props, ["as", "className", "children", "label", "labelVariant", "open", "onOpenChange", "menuProps", "onClick", "maxLines"]);
     var color = (0, SidebarContext_1.useSidebarContext)().color;
     var buttonRef = (0, react_1.useRef)(null);
-    var _b = tslib_1.__read((0, useControlled_1.useControlled)({
+    var _e = tslib_1.__read((0, useControlled_1.useControlled)({
         name: 'SidebarUserMenu',
         value: open,
         defaultValue: false,
         state: 'isOpen',
-    }), 2), isOpen = _b[0], setIsOpenState = _b[1];
+    }), 2), isOpen = _e[0], setIsOpenState = _e[1];
     var setIsOpen = function (isOpen) {
         setIsOpenState(isOpen);
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({ open: isOpen });
     };
+    var isManyLines = maxLines > 1;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(ButtonNext_1.Button, tslib_1.__assign({}, other, { as: as, ref: (0, useMultiRef_1.useMultiRef)([ref, buttonRef]), variant: "function", onClick: function (event) {
                 setIsOpen(!isOpen);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            }, className: (0, exports.cnSidebarUserMenu)('Button', { color: color, open: isOpen }, [
-                className,
-            ]), size: "2xs", iconRight: react_1.default.createElement(icons_1.ChevronDownSmallIcon, { className: (0, exports.cnSidebarUserMenu)('Chevron') }) }), label),
-        react_1.default.createElement(Menu_1.Menu, tslib_1.__assign({ placement: "right-end" }, menuProps, { size: "xs", anchorRef: buttonRef, open: isOpen, className: (0, exports.cnSidebarUserMenu)('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
+            }, style: (0, utils_1.generateCSSVariables)({
+                'sidebar-user-menu-ellipsis': maxLines.toString(),
+            }), className: (0, exports.cnSidebarUserMenu)('Button', { color: color, open: isOpen, manyLines: isManyLines }, [className]), labelProps: {
+                className: (0, exports.cnSidebarUserMenu)('LabelWrapper'),
+            }, size: "2xs", iconRight: react_1.default.createElement(icons_1.ChevronDownSmallIcon, { className: (0, exports.cnSidebarUserMenu)('Chevron') }) }),
+            react_1.default.createElement(Typography_1.Typography, { variant: labelVariant, className: (0, exports.cnSidebarUserMenu)('Label'), color: "inherit", as: "span" }, label)),
+        react_1.default.createElement(Menu_1.Menu, tslib_1.__assign({ placement: "right-end" }, menuProps, { size: (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.size) !== null && _a !== void 0 ? _a : constants_1.SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, anchorRef: buttonRef, open: isOpen, className: (0, exports.cnSidebarUserMenu)('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
                 var _a;
                 setIsOpen(false);
                 (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps);

package/__inner__/cjs/components/Sidebar/modules/SidebarUserMenu/constants.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SIDEBAR_USER_MENU_DEFAULT_TAG = void 0;
+exports.SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE = exports.SIDEBAR_USER_MENU_DEFAULT_LABEL_VARIANT = exports.SIDEBAR_USER_MENU_DEFAULT_MAX_LINES = exports.SIDEBAR_USER_MENU_DEFAULT_TAG = void 0;
 var ButtonNext_1 = require("../../../ButtonNext");
 exports.SIDEBAR_USER_MENU_DEFAULT_TAG = ButtonNext_1.BUTTON_DEFAULT_TAG;
+exports.SIDEBAR_USER_MENU_DEFAULT_MAX_LINES = 1;
+exports.SIDEBAR_USER_MENU_DEFAULT_LABEL_VARIANT = 'text-2xs_1';
+exports.SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE = 'xs';

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

@@ -46,8 +46,8 @@
       --list-item-avatar-min-width: 24px;
       --list-item-padding: 4px 8px;
       --list-item-children-margin-right: 8px;
-      --list-pipka-height: 40px;
-      --list-pipka-width: 4px;
+      --list-pipka-height: 32px;
+      --list-pipka-width: 2px;
       --list-item-border-radius: var(--border-radius-m);
     }
 
@@ -58,8 +58,8 @@
       --list-item-avatar-min-width: 32px;
       --list-item-padding: 6px 12px;
       --list-item-children-margin-right: 12px;
-      --list-pipka-height: 40px;
-      --list-pipka-width: 4px;
+      --list-pipka-height: 32px;
+      --list-pipka-width: 2px;
       --list-item-border-radius: var(--border-radius-l);
     }
 

package/__inner__/esm/components/Sidebar/Sidebar.css

@@ -36,6 +36,7 @@
     z-index: 1;
   }
 
+  .Sidebar-SizerWrapper_forceShow .Sidebar-Sizer,
   .Sidebar-SizerWrapper:hover .Sidebar-Sizer,
   .Sidebar-SizerWrapper:focus-within .Sidebar-Sizer {
     opacity: 1;

package/__inner__/esm/components/Sidebar/Sidebar.js

@@ -24,7 +24,7 @@ export var Sidebar = polymorphicComponentWithRef(function (inProps, ref) {
         name: 'Sidebar',
         props: inProps,
     });
-    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, sizerWrapperProps = props.sizerWrapperProps, style = props.style, other = __rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "sizerWrapperProps", "style"]);
+    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, sizerWrapperProps = props.sizerWrapperProps, style = props.style, forceShowSizer = props.forceShowSizer, other = __rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "sizerWrapperProps", "style", "forceShowSizer"]);
     var memoizedContextValue = useMemo(function () { return ({ variant: variant, size: size, color: color }); }, [variant, size, color]);
     var width = SIDEBAR_WIDTH_BY_VARIANT[size][variant];
     return (React.createElement(SidebarContext.Provider, { value: memoizedContextValue },
@@ -32,8 +32,6 @@ export var Sidebar = polymorphicComponentWithRef(function (inProps, ref) {
                 _a[SIDEBAR_CSS_VARIABLE.WIDTH] = "".concat(width, "px"),
                 _a))), className: cnSidebar({ variant: variant, rounded: rounded, size: size, color: color }, [className]) }),
             children,
-            sizer && (React.createElement("div", __assign({}, sizerWrapperProps, { className: cnSidebar('SizerWrapper', [
-                    sizerWrapperProps === null || sizerWrapperProps === void 0 ? void 0 : sizerWrapperProps.className,
-                ]) }),
+            sizer && (React.createElement("div", __assign({}, sizerWrapperProps, { className: cnSidebar('SizerWrapper', { forceShow: forceShowSizer }, [sizerWrapperProps === null || sizerWrapperProps === void 0 ? void 0 : sizerWrapperProps.className]) }),
                 React.createElement("div", { className: cnSidebar('Sizer') }, sizer))))));
 });

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.css

@@ -3,7 +3,7 @@
   z-index: 0;
 }
 
-  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
       opacity: 0;
       max-inline-size: 0;
       margin-inline-start: 0;
@@ -14,26 +14,32 @@
     z-index: 1;
   }
 
-  .SidebarCollapsibleItem-Content {
+  .SidebarCollapsibleItem-ContentWrapper {
     display: flex;
     flex-shrink: 0;
     margin-inline-start: var(--sidebar-collapsible-item-gap);
   }
 
-  .SidebarCollapsibleItem-Content > * {
-    flex-shrink: 0;
+  .SidebarCollapsibleItem-Content {
+    box-sizing: border-box;
   }
 
   .SidebarCollapsibleItem_center {
     margin-inline: auto;
   }
 
-.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-Content {
+.Sidebar_variant_full .SidebarCollapsibleItem-Content, .Sidebar_variant_mini .SidebarCollapsibleItem-Content {
+    overflow: hidden;
+    inline-size: var(--sidebar-collapsible-item-content-width);
+    min-inline-size: var(--sidebar-collapsible-item-content-width);
+  }
+
+.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-ContentWrapper {
     transition: var(--transition-default);
     transition-property: opacity, transform, max-inline-size, margin-inline;
   }
 
-.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
       transform: translateX(calc(var(--sidebar-collapsible-item-gap) * -1));
       transition-duration: 100ms;
     }

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.js

@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
-import { cn, isFunction, polymorphicComponentWithRef, renderContent, } from '../../../../utils';
+import { cn, generateCSSVariables, isFunction, polymorphicComponentWithRef, renderContent, } from '../../../../utils';
 import { Stack } from '../../../Stack';
 import { useSidebarContext } from '../../SidebarContext';
 import { SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG, SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY, SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER, } from './constants';
@@ -14,8 +14,8 @@ export var SidebarCollapsibleItem = polymorphicComponentWithRef(function (inProp
         props: inProps,
         name: 'SidebarCollapsibleItem',
     });
-    var _a = props.as, as = _a === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, other = __rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter"]);
-    var variant = useSidebarContext().variant;
+    var _a = props.as, as = _a === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, contentFullWidth = props.contentFullWidth, other = __rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter", "contentFullWidth"]);
+    var _e = useSidebarContext(), variant = _e.variant, size = _e.size;
     var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
     var internalRef = useRef(null);
     var itemRef = useMultiRef([ref, internalRef]);
@@ -26,15 +26,22 @@ export var SidebarCollapsibleItem = polymorphicComponentWithRef(function (inProp
             props: { collapsed: isCollapsed },
         })
         : fixed;
-    var _e = useSidebarCollapsibleItemAnimation({
+    var _f = useSidebarCollapsibleItemAnimation({
         autoCenter: autoCenter,
         ref: internalRef,
         fixedRef: fixedRef,
         isCollapsed: isCollapsed,
-    }), onExit = _e.onExit, onEnter = _e.onEnter, onTransitionEnd = _e.onTransitionEnd, hasMarginAutoClass = _e.hasMarginAutoClass;
+    }), onExit = _f.onExit, onEnter = _f.onEnter, onTransitionEnd = _f.onTransitionEnd, hasMarginAutoClass = _f.hasMarginAutoClass;
     return (React.createElement(CSSTransition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 120 }, appear: true, onEnter: onEnter, onExit: onExit, onEntered: onTransitionEnd, onExited: onTransitionEnd },
         React.createElement(Stack, __assign({}, other, { ref: itemRef, as: as, className: cnSidebarCollapsibleItem({ collapsed: isCollapsed, animated: animated, center: hasMarginAutoClass }, [className]), justify: justify }),
             React.createElement("div", { ref: fixedRef, className: cnSidebarCollapsibleItem('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
-            React.createElement("div", { className: cnSidebarCollapsibleItem('Content', [classNames === null || classNames === void 0 ? void 0 : classNames.content]) }, children))));
+            React.createElement("div", { className: cnSidebarCollapsibleItem('ContentWrapper', [
+                    classNames === null || classNames === void 0 ? void 0 : classNames.contentWrapper,
+                ]), style: generateCSSVariables({
+                    'sidebar-collapsible-item-content-width': "".concat(contentFullWidth[size], "px"),
+                }) },
+                React.createElement("div", { className: cnSidebarCollapsibleItem('Content', [
+                        classNames === null || classNames === void 0 ? void 0 : classNames.content,
+                    ]) }, children)))));
 });
 SidebarCollapsibleItem.displayName = 'SidebarCollapsibleItem';

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.css

@@ -20,7 +20,6 @@
     letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
     text-transform: var(--typography-text-m_1-text_transform, none);
     color: var(--sidebar-content-primary-color);
-    white-space: nowrap;
   }
 .SidebarHeaderLogo-Icon {
     background-color: var(--sidebar-header-icon-background);

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.js

@@ -14,6 +14,9 @@ export var SidebarHeaderLogo = polymorphicComponentWithRef(function (inProps, re
     });
     var _a = props.as, as = _a === void 0 ? SIDEBAR_HEADER_LOGO_DEFAULT_TAG : _a, className = props.className, children = props.children, icon = props.icon, other = __rest(props, ["as", "className", "children", "icon"]);
     var _b = useSidebarContext(), color = _b.color, variant = _b.variant, size = _b.size;
-    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, fixed: React.createElement(Stack, { className: cnSidebarHeaderLogo('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: cnSidebarHeaderLogo('Text') }, ref: ref, className: cnSidebarHeaderLogo({ color: color, size: size }, [className]), align: "center" }), children));
+    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, fixed: React.createElement(Stack, { className: cnSidebarHeaderLogo('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: cnSidebarHeaderLogo('Text') }, ref: ref, className: cnSidebarHeaderLogo({ color: color, size: size }, [className]), align: "center", contentFullWidth: {
+            s: 184,
+            m: 200,
+        } }), children));
 });
 SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

package/__inner__/esm/components/Sidebar/modules/SidebarItem/SidebarItem.css

@@ -64,9 +64,8 @@
     block-size: 24px;
   }
 .SidebarItem-Content {
-    flex: 1;
+    display: flex;
     color: var(--sidebar-content-primary-color);
-    white-space: nowrap;
     justify-content: space-between;
     align-items: center;
   }

package/__inner__/esm/components/Sidebar/modules/SidebarItem/SidebarItem.js

@@ -51,7 +51,10 @@ export var SidebarItem = polymorphicComponentWithRef(function (inProps, ref) {
         React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, onClick: function (event) {
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
                 setIsOpenSubItems(!isOpenSubitems);
-            }, collapsed: isCollapsed, className: cnSidebarItem('Item'), autoCenter: false, fixed: function (props) {
+            }, collapsed: isCollapsed, className: cnSidebarItem('Item'), contentFullWidth: {
+                s: 180,
+                m: 196,
+            }, autoCenter: false, fixed: function (props) {
                 var badge = isFunction(badgeProp)
                     ? badgeProp({ collapsed: props.collapsed })
                     : badgeProp;

package/__inner__/esm/components/Sidebar/modules/SidebarUser/SidebarUser.css

@@ -1,5 +1,7 @@
 .SidebarUser {
   --sidebar-collapsible-item-gap: var(--spacing-2xs);
+  inline-size: 100%;
+  box-sizing: border-box;
 }
 
   .SidebarUser-Indicator {
@@ -8,17 +10,36 @@
 
   .SidebarUser-Name {
     color: var(--sidebar-content-primary-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .SidebarUser-Fixed {
+    display: flex;
+    align-items: center;
   }
 
   .SidebarUser-Content {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    overflow: hidden;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-xs)
+  }
+
+  .SidebarUser-Info {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .SidebarUser-After {
     flex-shrink: 0;
-    white-space: nowrap;
+    transition: var(--transition-slow) opacity;
+    opacity: 1;
   }
 
-  .SidebarUser-Content_hasStatus {
-    display: flex;
-    flex-direction: column;
+.SidebarCollapsibleItem_collapsed .SidebarUser-After {
+    opacity: 0;
+    transition-duration: 0ms;
   }

package/__inner__/esm/components/Sidebar/modules/SidebarUser/SidebarUser.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn, isFunction, polymorphicComponentWithRef } from '../../../../utils';
 import { Avatar } from '../../../Avatar';
+import { Stack } from '../../../Stack';
 import { Typography } from '../../../Typography';
 import { useSidebarContext } from '../../SidebarContext';
 import { SidebarCollapsibleItem } from '../SidebarCollapsibleItem';
@@ -14,17 +15,22 @@ export var SidebarUser = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'SidebarUser',
     });
-    var _b = props.as, as = _b === void 0 ? SIDEBAR_USER_DEFAULT_TAG : _b, className = props.className, avatarProps = props.avatarProps, name = props.name, online = props.online, status = props.status, other = __rest(props, ["as", "className", "avatarProps", "name", "online", "status"]);
+    var _b = props.as, as = _b === void 0 ? SIDEBAR_USER_DEFAULT_TAG : _b, className = props.className, avatarProps = props.avatarProps, name = props.name, online = props.online, status = props.status, after = props.after, other = __rest(props, ["as", "className", "avatarProps", "name", "online", "status", "after"]);
     var _c = useSidebarContext(), variant = _c.variant, size = _c.size;
-    var hasStatus = !!status;
     var isCollapsed = variant !== 'full';
     return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { ref: ref, as: as, className: cnSidebarUser('', [className]), fixed: React.createElement(Avatar, __assign({}, avatarProps, { online: isFunction(online) ? online({ collapsed: isCollapsed }) : online, name: (_a = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.name) !== null && _a !== void 0 ? _a : name, size: SIDEBAR_USER_SIZE_TO_AVATAR[size], indicatorProps: { className: cnSidebarUser('Indicator') }, className: cnSidebarUser('Avatar', [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className]), colorScheme: {
                 text: 'content-primary',
                 background: 'background-tertiary',
             } })), collapsed: isCollapsed, classNames: {
-            content: cnSidebarUser('Content', { hasStatus: hasStatus }),
+            content: cnSidebarUser('Content'),
+            fixed: cnSidebarUser('Fixed'),
+        }, contentFullWidth: {
+            s: 184,
+            m: 200,
         } }),
-        React.createElement(Typography, { variant: "text-s", as: "span", className: cnSidebarUser('Name') }, name),
-        status));
+        React.createElement(Stack, { direction: "column", className: cnSidebarUser('Info') },
+            React.createElement(Typography, { variant: "text-s", as: "span", className: cnSidebarUser('Name') }, name),
+            status),
+        after && (React.createElement(Stack, { display: "block", align: "center", justify: "center", className: cnSidebarUser('After') }, after))));
 });
 SidebarUser.displayName = 'SidebarUser';

package/__inner__/esm/components/Sidebar/modules/SidebarUserMenu/SidebarUserMenu.css

@@ -1,34 +1,45 @@
-/* stylelint-disable */
 .SidebarUserMenu-Button_color_main.ButtonNext {
     --button-font-color: var(--color-content-primary);
     --button-font-color-hover: var(--color-content-primary);
     --button-font-color-active: var(--color-content-primary);
     --button-font-color-focus: var(--color-content-primary);
   }
-.SidebarUserMenu-Button_color_accent.ButtonNext {
+  .SidebarUserMenu-Button_color_accent.ButtonNext {
     --button-font-color: var(--color-content-primary-inverse);
     --button-font-color-hover: var(--color-content-primary-inverse);
     --button-font-color-active: var(--color-content-primary-inverse);
     --button-font-color-focus: var(--color-content-primary-inverse);
   }
-.SidebarUserMenu-Chevron {
+  .SidebarUserMenu-Chevron {
     transform: rotate(0deg);
     transition: var(--transition-default) transform;
+    flex-shrink: 0;
   }
-.SidebarUserMenu-Button.ButtonNext {
+  .SidebarUserMenu-Button.ButtonNext {
       inline-size: -moz-fit-content;
       inline-size: fit-content;
+      max-inline-size: 100%;
       justify-content: flex-start;
     }
-.SidebarUserMenu-Button .ButtonNext-Content {
+  .SidebarUserMenu-Button .ButtonNext-Content {
       flex-grow: initial;
       gap: var(--spacing-3xs);
     }
-.SidebarUserMenu-Button .ButtonNext-Label {
-      font: var(--typography-text-2xs_1-font);
-      letter-spacing: var(--typography-text-2xs_1-letter_spacing, 0);
-      text-transform: var(--typography-text-2xs_1-text_transform, none);
-    }
-.SidebarUserMenu-Button_open .SidebarUserMenu-Chevron {
+  .SidebarUserMenu-Button_manyLines .SidebarUserMenu-Label {
+        white-space: normal;
+      }
+  .SidebarUserMenu-Button_open .SidebarUserMenu-Chevron {
         transform: rotate(180deg);
       }
+  .SidebarUserMenu-Button .SidebarUserMenu-LabelWrapper {
+    overflow: initial;
+    text-overflow: initial;
+    white-space: initial;
+  }
+  .SidebarUserMenu-Label {
+    display: -webkit-box;
+    -webkit-box-orient: block-axis;
+    -webkit-line-clamp: var(--sidebar-user-menu-ellipsis);
+    overflow: hidden;
+    text-align: start;
+  }

package/__inner__/esm/components/Sidebar/modules/SidebarUserMenu/SidebarUserMenu.js

@@ -4,38 +4,44 @@ import { ChevronDownSmallIcon } from '@ozen-ui/icons';
 import { useControlled } from '../../../../hooks/useControlled';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
-import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { cn, generateCSSVariables, polymorphicComponentWithRef, } from '../../../../utils';
 import { Button } from '../../../ButtonNext';
 import { Menu } from '../../../Menu';
+import { Typography } from '../../../Typography';
 import { useSidebarContext } from '../../SidebarContext';
-import { SIDEBAR_USER_MENU_DEFAULT_TAG } from './constants';
+import { SIDEBAR_USER_MENU_DEFAULT_LABEL_VARIANT, SIDEBAR_USER_MENU_DEFAULT_MAX_LINES, SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, SIDEBAR_USER_MENU_DEFAULT_TAG, } from './constants';
 export var cnSidebarUserMenu = cn('SidebarUserMenu');
 export var SidebarUserMenu = polymorphicComponentWithRef(function (inProps, ref) {
+    var _a;
     var props = useThemeProps({
         props: inProps,
         name: 'SidebarUserMenu',
     });
-    var _a = props.as, as = _a === void 0 ? SIDEBAR_USER_MENU_DEFAULT_TAG : _a, className = props.className, children = props.children, label = props.label, open = props.open, onOpenChange = props.onOpenChange, menuProps = props.menuProps, onClick = props.onClick, other = __rest(props, ["as", "className", "children", "label", "open", "onOpenChange", "menuProps", "onClick"]);
+    var _b = props.as, as = _b === void 0 ? SIDEBAR_USER_MENU_DEFAULT_TAG : _b, className = props.className, children = props.children, label = props.label, _c = props.labelVariant, labelVariant = _c === void 0 ? SIDEBAR_USER_MENU_DEFAULT_LABEL_VARIANT : _c, open = props.open, onOpenChange = props.onOpenChange, menuProps = props.menuProps, onClick = props.onClick, _d = props.maxLines, maxLines = _d === void 0 ? SIDEBAR_USER_MENU_DEFAULT_MAX_LINES : _d, other = __rest(props, ["as", "className", "children", "label", "labelVariant", "open", "onOpenChange", "menuProps", "onClick", "maxLines"]);
     var color = useSidebarContext().color;
     var buttonRef = useRef(null);
-    var _b = __read(useControlled({
+    var _e = __read(useControlled({
         name: 'SidebarUserMenu',
         value: open,
         defaultValue: false,
         state: 'isOpen',
-    }), 2), isOpen = _b[0], setIsOpenState = _b[1];
+    }), 2), isOpen = _e[0], setIsOpenState = _e[1];
     var setIsOpen = function (isOpen) {
         setIsOpenState(isOpen);
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({ open: isOpen });
     };
+    var isManyLines = maxLines > 1;
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, __assign({}, other, { as: as, ref: useMultiRef([ref, buttonRef]), variant: "function", onClick: function (event) {
                 setIsOpen(!isOpen);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            }, className: cnSidebarUserMenu('Button', { color: color, open: isOpen }, [
-                className,
-            ]), size: "2xs", iconRight: React.createElement(ChevronDownSmallIcon, { className: cnSidebarUserMenu('Chevron') }) }), label),
-        React.createElement(Menu, __assign({ placement: "right-end" }, menuProps, { size: "xs", anchorRef: buttonRef, open: isOpen, className: cnSidebarUserMenu('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
+            }, style: generateCSSVariables({
+                'sidebar-user-menu-ellipsis': maxLines.toString(),
+            }), className: cnSidebarUserMenu('Button', { color: color, open: isOpen, manyLines: isManyLines }, [className]), labelProps: {
+                className: cnSidebarUserMenu('LabelWrapper'),
+            }, size: "2xs", iconRight: React.createElement(ChevronDownSmallIcon, { className: cnSidebarUserMenu('Chevron') }) }),
+            React.createElement(Typography, { variant: labelVariant, className: cnSidebarUserMenu('Label'), color: "inherit", as: "span" }, label)),
+        React.createElement(Menu, __assign({ placement: "right-end" }, menuProps, { size: (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.size) !== null && _a !== void 0 ? _a : SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, anchorRef: buttonRef, open: isOpen, className: cnSidebarUserMenu('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
                 var _a;
                 setIsOpen(false);
                 (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps);

package/__inner__/esm/components/Sidebar/modules/SidebarUserMenu/constants.js

@@ -1,2 +1,5 @@
 import { BUTTON_DEFAULT_TAG } from '../../../ButtonNext';
 export var SIDEBAR_USER_MENU_DEFAULT_TAG = BUTTON_DEFAULT_TAG;
+export var SIDEBAR_USER_MENU_DEFAULT_MAX_LINES = 1;
+export var SIDEBAR_USER_MENU_DEFAULT_LABEL_VARIANT = 'text-2xs_1';
+export var SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE = 'xs';

package/__inner__/types/components/Sidebar/modules/SidebarCollapsibleItem/types.d.ts

@@ -1,18 +1,23 @@
 import type { ComponentRef, ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithRef, RenderContentType } from '../../../../utils';
 import type { StackBaseProps } from '../../../Stack';
+import type { SidebarSizeVariant } from '../../entities';
 import type { SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG } from './constants';
 export type SidebarCollapsibleItemClassNames = {
     content?: string;
+    contentWrapper?: string;
     fixed?: string;
 };
 export type SidebarCollapsibleItemFixedProps = {
     collapsed: boolean;
 };
 export type SidebarCollapsibleItemFixed = RenderContentType<SidebarCollapsibleItemFixedProps>['content'];
+export type SidebarCollapsibleItemContentFullWidth = Record<SidebarSizeVariant, number>;
 export type SidebarCollapsibleItemBaseProps = {
     /** Фиксированная часть */
     fixed: SidebarCollapsibleItemFixed;
+    /** Полная ширина контента для full-варианта */
+    contentFullWidth: SidebarCollapsibleItemContentFullWidth;
     /** Кастомный класс */
     className?: string;
     /** Кастомный классы блоков */

package/__inner__/types/components/Sidebar/modules/SidebarUser/types.d.ts

@@ -15,6 +15,8 @@ export type SidebarUserBaseProps = {
     avatarProps?: Omit<AvatarProps, 'size' | 'online'>;
     /** Компонент статуса */
     status?: ReactNode;
+    /** Компонент справа */
+    after?: ReactNode;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };

package/__inner__/types/components/Sidebar/modules/SidebarUserMenu/constants.d.ts

@@ -1 +1,4 @@
 export declare const SIDEBAR_USER_MENU_DEFAULT_TAG = "button";
+export declare const SIDEBAR_USER_MENU_DEFAULT_MAX_LINES = 1;
+export declare const SIDEBAR_USER_MENU_DEFAULT_LABEL_VARIANT = "text-2xs_1";
+export declare const SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE = "xs";

package/__inner__/types/components/Sidebar/modules/SidebarUserMenu/types.d.ts

@@ -1,12 +1,15 @@
 import type { ComponentRef, ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithRef } from '../../../../utils';
 import type { MenuProps } from '../../../Menu';
+import type { TypographyVariant } from '../../../Typography';
 import type { SIDEBAR_USER_MENU_DEFAULT_TAG } from './constants';
 export type SidebarUserMenuBaseProps = {
     /** Кастомный класс */
     className?: string;
     /** Текст кнопки открытия */
     label?: string;
+    /** Вариант текста кнопки открытия */
+    labelVariant?: TypographyVariant;
     /** Контент меню */
     children: ReactNode;
     /** Текущее состояние списка. Если `true`, список отображается */
@@ -16,7 +19,9 @@ export type SidebarUserMenuBaseProps = {
         open: boolean;
     }) => void;
     /** Свойства компонента Menu */
-    menuProps?: Omit<MenuProps, 'size' | 'anchorRef' | 'open'>;
+    menuProps?: Omit<MenuProps, 'anchorRef' | 'open'>;
+    /** Максимальное количество строк */
+    maxLines?: number;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };

package/__inner__/types/components/Sidebar/types.d.ts

@@ -19,6 +19,8 @@ export type SidebarBaseProps = {
     sizer?: ReactNode;
     /** Параметры обертки кнопки изменения размера */
     sizerWrapperProps?: ComponentProps<'div'>;
+    /** Флаг принудительного отображения sizer, если `true`, то отображает sizer всегда */
+    forceShowSizer?: boolean;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.84.0",
+  "version": "0.84.2",
   "description": "React component library",
   "files": [
     "*"
@@ -29,9 +29,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.3",
-    "@ozen-ui/fonts": "0.84.0",
-    "@ozen-ui/icons": "0.84.0",
-    "@ozen-ui/logger": "0.84.0"
+    "@ozen-ui/fonts": "0.84.2",
+    "@ozen-ui/logger": "0.84.2",
+    "@ozen-ui/icons": "0.84.2"
   },
   "devDependencies": {
     "@types/lodash.isequal": "^4.5.0"