@ozen-ui/kit 0.81.0 → 0.83.0

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

@@ -0,0 +1,151 @@
+/* stylelint-disable */
+.SidebarItem {
+  --sidebar-item-background: transparent;
+  --sidebar-item-indicator-color: transparent;
+  --sidebar-item-indicator-transform-x: -2px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  gap: var(--spacing-3xs);
+}
+.SidebarItem_color_main {
+    --sidebar-item-background-hover: var(--color-background-main-hover);
+    --sidebar-item-background-active: var(--color-background-main-pressed);
+    --sidebar-item-background-selected: var(--color-background-main-pressed);
+    --sidebar-item-active-indicator-color: var(--color-content-action);
+  }
+.SidebarItem_color_accent {
+    --sidebar-item-background-hover: var(--color-accent-primary-hover);
+    --sidebar-item-background-active: var(--color-accent-primary-pressed);
+    --sidebar-item-background-selected: var(--color-accent-primary-pressed);
+    --sidebar-item-active-indicator-color: var(--color-content-accent-primary);
+  }
+.SidebarItem_interactive.SidebarItem:not(.SidebarItem_active) .SidebarItem-Item:hover {
+        background-color: var(--sidebar-item-background-hover);
+      }
+.SidebarItem_interactive.SidebarItem:not(.SidebarItem_active) .SidebarItem-Item:active {
+        background-color: var(--sidebar-item-background-active);
+      }
+.SidebarItem_interactive .SidebarItem-Item {
+      cursor: pointer;
+    }
+.SidebarItem_interactive .SidebarItem-Item:focus {
+      box-shadow: inset var(--shadow-outline-focused);
+    }
+.SidebarItem_interactive .SidebarItem-Item:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+.SidebarItem_active {
+    --sidebar-item-indicator-color: var(--sidebar-item-active-indicator-color);
+    --sidebar-item-indicator-transform-x: 0;
+  }
+.SidebarItem_active > .SidebarItem-Item {
+      background-color: var(--sidebar-item-background-selected);
+    }
+.SidebarItem_gutters .SidebarItem-Item {
+      margin-inline: var(--sidebar-padding-inline);
+    }
+.SidebarItem_openSubitems .SidebarItem-Chevron {
+      transform: rotate(180deg);
+    }
+.SidebarItem-Chevron {
+    transform: rotate(0deg);
+    color: var(--sidebar-content-primary-color);
+    transition: var(--transition-default) transform;
+  }
+.SidebarItem-Icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sidebar-content-primary-color);
+    inline-size: 24px;
+    block-size: 24px;
+  }
+.SidebarItem-Content {
+    flex: 1;
+    color: var(--sidebar-content-primary-color);
+    white-space: nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+.SidebarItem-Item {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    outline: none;
+    text-decoration: none;
+    text-align: start;
+    -webkit-tap-highlight-color: transparent;
+    border: none;
+    border-radius: var(--border-radius-m);
+    padding: var(--sidebar-item-padding);
+    background-color: var(--sidebar-item-background);
+    transition: background-color var(--transition-default);
+    align-items: center;
+  }
+.SidebarItem-Item::before {
+    content: "";
+    box-sizing: border-box;
+    display: block;
+    inline-size: 2px;
+    block-size: 24px;
+    position: absolute;
+    transform: translate(var(--sidebar-item-indicator-transform-x), -50%);
+    inset-block-start: 50%;
+    inset-inline-start: calc(var(--sidebar-padding-inline) * -1);
+    transition: var(--transition-default);
+    transition-property: background-color, transform;
+    border-radius: 0 var(--border-radius-2xs) var(--border-radius-2xs) 0;
+    background-color: var(--sidebar-item-indicator-color);
+  }
+.SidebarItem-Right {
+    display: flex;
+    gap: var(--spacing-3xs);
+    align-items: center;
+    transition: var(--transition-slow) opacity;
+    opacity: 1;
+  }
+.SidebarItem .SidebarCollapsibleItem_collapsed .SidebarItem-Right {
+      opacity: 0;
+      transition-duration: 0ms;
+    }
+.SidebarItem_variant_compact .SidebarItem-Item {
+      --sidebar-collapsible-item-gap: 0;
+      padding-block: var(--spacing-2xs);
+    }
+.SidebarItem_variant_compact .SidebarItem-Content {
+      font: var(--typography-text-3xs-font);
+      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs-text_transform, none);
+      text-align: center;
+      margin-block-start: var(--spacing-3xs);
+    }
+.SidebarItem_variant_compact .SidebarItem-After {
+      display: none;
+    }
+.SidebarItem_variant_default .SidebarItem-Content {
+      text-align: start;
+    }
+.SidebarItem_variant_default.SidebarItem_size_s .SidebarItem-Content {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --sidebar-collapsible-item-gap: var(--spacing-s);
+    }
+.SidebarItem_variant_default.SidebarItem_size_s .SidebarItem-Item {
+      --sidebar-item-padding: var(--spacing-2xs);
+    }
+.SidebarItem_variant_default.SidebarItem_size_m .SidebarItem-Content {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --sidebar-collapsible-item-gap: 20px;
+    }
+.SidebarItem_variant_default.SidebarItem_size_m .SidebarItem-Item {
+      --sidebar-item-padding: var(--spacing-xs);
+    }

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarItem = exports.cnSidebarItem = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useControlled_1 = require("../../../../hooks/useControlled");
+var useStoredValue_1 = require("../../../../hooks/useStoredValue");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var utils_1 = require("../../../../utils");
+var Badge_1 = require("../../../Badge");
+var Collapse_1 = require("../../../Collapse");
+var SidebarContext_1 = require("../../SidebarContext");
+var SidebarCollapsibleItem_1 = require("../SidebarCollapsibleItem");
+var SidebarList_1 = require("../SidebarList");
+var constants_1 = require("./constants");
+exports.cnSidebarItem = (0, utils_1.cn)('SidebarItem');
+exports.SidebarItem = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarItem',
+    });
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_ITEM_DEFAULT_TAG : _a, icon = props.icon, children = props.children, className = props.className, _b = props.interactive, interactive = _b === void 0 ? constants_1.SIDEBAR_ITEM_DEFAULT_INTERACTIVE : _b, subitems = props.subitems, onOpenChange = props.onOpenChange, open = props.open, wrapperProps = props.wrapperProps, onClick = props.onClick, _c = props.gutters, gutters = _c === void 0 ? constants_1.SIDEBAR_ITEM_DEFAULT_GUTTERS : _c, _d = props.enableSubitemsOnCollapsed, enableSubitemsOnCollapsed = _d === void 0 ? constants_1.SIDEBAR_ITEM_DEFAULT_ENABLE_OPEN_ON_COLLAPSED : _d, active = props.active, badgeProp = props.badge, badgeProps = props.badgeProps, after = props.after, dataTestId = props["data-testid"], other = tslib_1.__rest(props, ["as", "icon", "children", "className", "interactive", "subitems", "onOpenChange", "open", "wrapperProps", "onClick", "gutters", "enableSubitemsOnCollapsed", "active", "badge", "badgeProps", "after", 'data-testid']);
+    var _e = (0, SidebarContext_1.useSidebarContext)(), variant = _e.variant, color = _e.color, size = _e.size;
+    var _f = tslib_1.__read((0, useControlled_1.useControlled)({
+        name: 'SidebarItem',
+        value: open,
+        defaultValue: false,
+        state: 'isOpenSubitems',
+    }), 2), isOpenSubitemsState = _f[0], setIsOpenSubitemsState = _f[1];
+    var hasSubitems = !!subitems;
+    var isOpenSubitems = hasSubitems && !!isOpenSubitemsState;
+    var isCollapsed = variant === 'mini';
+    var setIsOpenSubItems = function (isOpen) {
+        if (isCollapsed && !enableSubitemsOnCollapsed) {
+            return;
+        }
+        setIsOpenSubitemsState(isOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+    };
+    var previousVariant = (0, useStoredValue_1.useStoredValue)(variant);
+    var isCompact = variant === 'compact';
+    var isAnimated = previousVariant.current !== 'compact' && !isCompact;
+    previousVariant.current = variant;
+    return (react_1.default.createElement("li", tslib_1.__assign({}, wrapperProps, { ref: ref, className: (0, exports.cnSidebarItem)({
+            variant: isCompact ? 'compact' : 'default',
+            color: color,
+            interactive: interactive,
+            gutters: gutters,
+            active: active,
+            size: size,
+            openSubitems: isOpenSubitems,
+        }, [className]), "data-testid": dataTestId }),
+        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'), fixed: function (props) {
+                var badge = (0, utils_1.isFunction)(badgeProp)
+                    ? badgeProp({ collapsed: props.collapsed })
+                    : badgeProp;
+                var renderedIcon = (0, utils_1.isFunction)(icon)
+                    ? (0, utils_1.renderContent)({ content: icon, props: props })
+                    : icon;
+                if (badge) {
+                    return (react_1.default.createElement(Badge_1.Badge, tslib_1.__assign({ variant: "dot", color: "errorDark" }, badgeProps, { className: (0, exports.cnSidebarItem)('Badge', [badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.className]), size: "s" }), renderedIcon));
+                }
+                return renderedIcon;
+            }, animated: isAnimated, align: isCompact ? 'center' : 'start', direction: isCompact ? 'column' : 'row', classNames: {
+                content: (0, exports.cnSidebarItem)('Content'),
+                fixed: (0, exports.cnSidebarItem)('Icon'),
+            } }),
+            react_1.default.createElement("span", null, children),
+            (after || hasSubitems) && (react_1.default.createElement("div", { className: (0, exports.cnSidebarItem)('Right') },
+                after && react_1.default.createElement("div", { className: (0, exports.cnSidebarItem)('After') }, after),
+                hasSubitems && (react_1.default.createElement(icons_1.ArrowDownFilledIcon, { className: (0, exports.cnSidebarItem)('Chevron'), size: "s" }))))),
+        !!subitems && (react_1.default.createElement(Collapse_1.Collapse, { expanded: isOpenSubitems, className: (0, exports.cnSidebarItem)('SubitemsCollapse') },
+            react_1.default.createElement(SidebarList_1.SidebarList, { className: (0, exports.cnSidebarItem)('Subitems') }, subitems)))));
+});
+exports.SidebarItem.displayName = 'SidebarItem';

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_ITEM_DEFAULT_ENABLE_OPEN_ON_COLLAPSED = exports.SIDEBAR_ITEM_DEFAULT_GUTTERS = exports.SIDEBAR_ITEM_DEFAULT_INTERACTIVE = exports.SIDEBAR_ITEM_DEFAULT_TAG = void 0;
+var constants_1 = require("../../../ButtonBase/constants");
+exports.SIDEBAR_ITEM_DEFAULT_TAG = constants_1.BUTTON_BASE_DEFAULT_TAG;
+exports.SIDEBAR_ITEM_DEFAULT_INTERACTIVE = true;
+exports.SIDEBAR_ITEM_DEFAULT_GUTTERS = true;
+exports.SIDEBAR_ITEM_DEFAULT_ENABLE_OPEN_ON_COLLAPSED = true;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./SidebarItem"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarItemBadge = exports.cnSidebarItemBadge = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var utils_1 = require("../../../../utils");
+var Badge_1 = require("../../../Badge");
+var constants_1 = require("./constants");
+exports.cnSidebarItemBadge = (0, utils_1.cn)('SidebarItemBadge');
+exports.SidebarItemBadge = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarItemBadge',
+    });
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_ITEM_BADGE_DEFAULT_TAG : _a, _b = props.color, color = _b === void 0 ? constants_1.SIDEBAR_ITEM_BADGE_DEFAULT_COLOR : _b, className = props.className, other = tslib_1.__rest(props, ["as", "color", "className"]);
+    return (react_1.default.createElement(Badge_1.Badge, tslib_1.__assign({}, other, { as: as, ref: ref, size: "s", color: color, className: (0, exports.cnSidebarItemBadge)('', [className]) })));
+});
+exports.SidebarItemBadge.displayName = 'SidebarItemBadge';

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_ITEM_BADGE_DEFAULT_COLOR = exports.SIDEBAR_ITEM_BADGE_DEFAULT_TAG = void 0;
+var Badge_1 = require("../../../Badge");
+exports.SIDEBAR_ITEM_BADGE_DEFAULT_TAG = Badge_1.BADGE_DEFAULT_TAG;
+exports.SIDEBAR_ITEM_BADGE_DEFAULT_COLOR = 'errorDark';

package/__inner__/cjs/components/Sidebar/modules/SidebarItemBadge/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./SidebarItemBadge"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Sidebar/modules/SidebarItemBadge/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,8 @@
+.SidebarList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xs);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarList = exports.cnSidebarList = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var utils_1 = require("../../../../utils");
+var constants_1 = require("./constants");
+exports.cnSidebarList = (0, utils_1.cn)('SidebarList');
+exports.SidebarList = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarList',
+    });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.SIDEBAR_LIST_DEFAULT_TAG : _a, className = props.className, children = props.children, other = tslib_1.__rest(props, ["as", "className", "children"]);
+    return (react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnSidebarList)('', [className]) }), children));
+});
+exports.SidebarList.displayName = 'SidebarList';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_LIST_DEFAULT_TAG = void 0;
+exports.SIDEBAR_LIST_DEFAULT_TAG = 'ul';

package/__inner__/cjs/components/Sidebar/modules/SidebarList/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./SidebarList"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Sidebar/modules/SidebarList/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,24 @@
+.SidebarSizer {
+  box-shadow: var(--shadow-l);
+}
+
+  .SidebarSizer.IconButtonNext {
+    --icon-button-size: 24px;
+    --icon-button-bg-color: var(--color-background-main);
+    --icon-button-bg-color-hover: var(--color-background-main-hover);
+    --icon-button-bg-color-active: var(--color-background-main-pressed);
+    --icon-button-bg-color-focus: var(--color-background-main-hover);
+    --icon-button-font-color: var(--color-content-primary);
+    --icon-button-font-color-hover: var(--color-content-primary);
+    --icon-button-font-color-active: var(--color-content-primary);
+    --icon-button-font-color-focus: var(--color-content-primary);
+  }
+
+  .SidebarSizer-Icon {
+    transform: rotate(180deg);
+    transition: var(--transition-default) transform;
+  }
+
+  .SidebarSizer_expanded .SidebarSizer-Icon {
+      transform: rotate(0deg);
+    }

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSizer = exports.cnSidebarSizer = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var utils_1 = require("../../../../utils");
+var IconButtonNext_1 = require("../../../IconButtonNext");
+var SidebarContext_1 = require("../../SidebarContext");
+var constants_1 = require("./constants");
+exports.cnSidebarSizer = (0, utils_1.cn)('SidebarSizer');
+exports.SidebarSizer = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarSizer',
+    });
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_SIZER_DEFAULT_TAG : _a, className = props.className, _b = props.expandedVariants, expandedVariants = _b === void 0 ? constants_1.SIDEBAR_SIZER_DEFAULT_EXPANDED_VARIANTS : _b, onClick = props.onClick, onChange = props.onChange, other = tslib_1.__rest(props, ["as", "className", "expandedVariants", "onClick", "onChange"]);
+    var variant = (0, SidebarContext_1.useSidebarContext)().variant;
+    var isExpanded = expandedVariants.includes(variant);
+    return (react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({}, other, { as: as, ref: ref, size: "2xs", compressed: true, onClick: function (event) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            onChange === null || onChange === void 0 ? void 0 : onChange({ currentVariant: variant, collapsed: !isExpanded }, event);
+        }, className: (0, exports.cnSidebarSizer)({ expanded: isExpanded }, [className]), icon: react_1.default.createElement(icons_1.ArrowLeftIcon, { className: (0, exports.cnSidebarSizer)('Icon') }) })));
+});
+exports.SidebarSizer.displayName = 'SidebarSizer';

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_SIZER_DEFAULT_EXPANDED_VARIANTS = exports.SIDEBAR_SIZER_DEFAULT_TAG = void 0;
+var IconButtonNext_1 = require("../../../IconButtonNext");
+exports.SIDEBAR_SIZER_DEFAULT_TAG = IconButtonNext_1.ICON_BUTTON_DEFAULT_TAG;
+exports.SIDEBAR_SIZER_DEFAULT_EXPANDED_VARIANTS = [
+    'full',
+];

package/__inner__/cjs/components/Sidebar/modules/SidebarSizer/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./SidebarSizer"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Sidebar/modules/SidebarSizer/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,37 @@
+.SidebarSubitem-Icon {
+  block-size: 100%;
+}
+
+.SidebarSubitem-Icon_animation-enter {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+.SidebarSubitem-Icon_animation-enter-active {
+    opacity: 1;
+    transform: scale(1);
+    transition: var(--transition-default);
+    transition-property: opacity, transform;
+  }
+
+.SidebarSubitem-Icon_animation-enter-done {
+    opacity: 1;
+    transform: none;
+  }
+
+.SidebarSubitem-Icon_animation-exit {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+.SidebarSubitem-Icon_animation-exit-active {
+    opacity: 0;
+    transform: scale(0);
+    transition: var(--transition-default);
+    transition-property: opacity, transform;
+  }
+
+.SidebarSubitem-Icon_animation-exit-done {
+    opacity: 0;
+    transform: scale(0);
+  }

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSubitem = exports.cnSidebarSubitem = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var react_transition_group_1 = require("react-transition-group");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var utils_1 = require("../../../../utils");
+var SidebarContext_1 = require("../../SidebarContext");
+var SidebarItem_1 = require("../SidebarItem");
+var constants_1 = require("./constants");
+exports.cnSidebarSubitem = (0, utils_1.cn)('SidebarSubitem');
+exports.SidebarSubitem = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarSubitem',
+    });
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_SUBITEM_DEFAULT_TAG : _a, children = props.children, className = props.className, other = tslib_1.__rest(props, ["as", "children", "className"]);
+    var variant = (0, SidebarContext_1.useSidebarContext)().variant;
+    var iconRef = (0, react_1.useRef)(null);
+    var isShowDot = variant !== 'full';
+    return (react_1.default.createElement(SidebarItem_1.SidebarItem, tslib_1.__assign({}, other, { icon: react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: iconRef, in: isShowDot, timeout: 120, classNames: (0, exports.cnSidebarSubitem)('Icon', { animation: true }), unmountOnExit: true, mountOnEnter: true },
+            react_1.default.createElement("div", { ref: iconRef, className: (0, exports.cnSidebarSubitem)('Icon') },
+                react_1.default.createElement(icons_1.DotIcon, null))), gutters: false, ref: ref, as: as, className: (0, exports.cnSidebarSubitem)('', [className]) }), children));
+});
+exports.SidebarSubitem.displayName = 'SidebarSubitem';

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_SUBITEM_DEFAULT_INTERACTIVE = exports.SIDEBAR_SUBITEM_DEFAULT_TAG = void 0;
+var SidebarItem_1 = require("../SidebarItem");
+exports.SIDEBAR_SUBITEM_DEFAULT_TAG = SidebarItem_1.SIDEBAR_ITEM_DEFAULT_TAG;
+exports.SIDEBAR_SUBITEM_DEFAULT_INTERACTIVE = true;

package/__inner__/cjs/components/Sidebar/modules/SidebarSubitem/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./SidebarSubitem"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Sidebar/modules/SidebarSubitem/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,17 @@
+.SidebarUser-Indicator {
+    --indicator-border-color: var(--sidebar-background-color)
+  }
+  .SidebarUser-Name {
+    color: var(--sidebar-content-primary-color);
+  }
+  .SidebarUser-Content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+  .SidebarUser-Content_hasStatus {
+    display: flex;
+    flex-direction: column;
+  }

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarUser = exports.cnSidebarUser = void 0;
+var tslib_1 = require("tslib");
+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 Typography_1 = require("../../../Typography");
+var SidebarContext_1 = require("../../SidebarContext");
+var SidebarCollapsibleItem_1 = require("../SidebarCollapsibleItem");
+var constants_1 = require("./constants");
+exports.cnSidebarUser = (0, utils_1.cn)('SidebarUser');
+exports.SidebarUser = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var _a;
+    var props = (0, useThemeProps_1.useThemeProps)({
+        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 variant = (0, SidebarContext_1.useSidebarContext)().variant;
+    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: "xs", 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 }),
+        } }),
+        react_1.default.createElement(Typography_1.Typography, { variant: "text-s", as: "span", className: (0, exports.cnSidebarUser)('Name') }, name),
+        status));
+});
+exports.SidebarUser.displayName = 'SidebarUser';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_USER_DEFAULT_TAG = void 0;
+exports.SIDEBAR_USER_DEFAULT_TAG = 'div';

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./SidebarUser"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,34 @@
+/* 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 {
+    --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 {
+    transform: rotate(0deg);
+    transition: var(--transition-default) transform;
+  }
+.SidebarUserMenu-Button.ButtonNext {
+      inline-size: -moz-fit-content;
+      inline-size: fit-content;
+      justify-content: flex-start;
+    }
+.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 {
+        transform: rotate(180deg);
+      }