@ozen-ui/kit 0.82.0 → 0.83.1

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarFooter = exports.cnSidebarFooter = 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.cnSidebarFooter = (0, utils_1.cn)('SidebarFooter');
+exports.SidebarFooter = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarFooter',
+    });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.SIDEBAR_FOOTER_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.cnSidebarFooter)('', [className]) }), children));
+});
+exports.SidebarFooter.displayName = 'SidebarFooter';

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

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

package/__inner__/cjs/components/Sidebar/modules/SidebarFooter/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("./SidebarFooter"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

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

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

@@ -0,0 +1,7 @@
+.SidebarHeader {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-inline: var(--sidebar-padding-inline);
+  overflow: hidden;
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarHeader = exports.cnSidebarHeader = 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.cnSidebarHeader = (0, utils_1.cn)('SidebarHeader');
+exports.SidebarHeader = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarHeader',
+    });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.SIDEBAR_HEADER_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.cnSidebarHeader)('', [className]) }), children));
+});
+exports.SidebarHeader.displayName = 'SidebarHeader';

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

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

package/__inner__/cjs/components/Sidebar/modules/SidebarHeader/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("./SidebarHeader"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

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

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

@@ -0,0 +1,24 @@
+/* stylelint-disable */
+.SidebarHeaderLogo {
+  --sidebar-collapsible-item-gap: var(--spacing-2xs);
+}
+.SidebarHeaderLogo_color_main {
+    --sidebar-header-icon-background: var(--color-background-primary);
+  }
+.SidebarHeaderLogo_color_accent {
+    --sidebar-header-icon-background: var(--color-accent-primary);
+  }
+.SidebarHeaderLogo-Text {
+    font: var(--typography-text-m_1-font);
+    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);
+    color: var(--sidebar-content-secondary-color);
+    border-radius: var(--border-radius-m);
+    flex-shrink: 0;
+    padding: var(--spacing-2xs);
+  }

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarHeaderLogo = exports.cnSidebarHeaderLogo = 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 Stack_1 = require("../../../Stack");
+var SidebarContext_1 = require("../../SidebarContext");
+var SidebarCollapsibleItem_1 = require("../SidebarCollapsibleItem");
+var constants_1 = require("./constants");
+exports.cnSidebarHeaderLogo = (0, utils_1.cn)('SidebarHeaderLogo');
+exports.SidebarHeaderLogo = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarHeaderLogo',
+    });
+    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;
+    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 }, [className]), align: "center" }), children));
+});
+exports.SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

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

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

package/__inner__/cjs/components/Sidebar/modules/SidebarHeaderLogo/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("./SidebarHeaderLogo"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

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

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'), autoCenter: false, 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';