@ozen-ui/kit 0.82.0 → 0.83.1

package/Sidebar/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/Sidebar/index.js",
+	"module": "../__inner__/esm/components/Sidebar/index.js",
+	"types": "../__inner__/types/components/Sidebar/index.d.ts"
+}

package/__inner__/cjs/components/Badge/index.js

@@ -1,5 +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("./Badge"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Divider/Divider.css

@@ -2,14 +2,15 @@
   flex-shrink: 0;
   border-style: solid;
   margin: 0;
+  border-color: var(--divider-color);
 }
 
   .Divider_color_primary {
-      border-color: var(--color-border-main);
+      --divider-color: var(--color-border-main);
     }
 
   .Divider_color_secondary {
-      border-color: var(--color-border-secondary);
+      --divider-color: var(--color-border-secondary);
     }
 
   .Divider_display_block {

package/__inner__/cjs/components/ImageBase/ImageBase.css

@@ -11,8 +11,12 @@
     block-size: 100%;
     object-fit: contain;
     object-position: center;
+    opacity: 0;
+    transition: var(--transition-default) opacity;
+  }
+
+  .ImageBase-Image_visible {
     opacity: 1;
-    transition: var(--transition-default) opacity ease-in;
   }
 
   .ImageBase-Loader, .ImageBase-Placeholder {
@@ -22,3 +26,21 @@
     inline-size: 100%;
     block-size: 100%;
   }
+
+  .ImageBase-Fade-enter {
+      opacity: 0;
+    }
+
+  .ImageBase-Fade-enter-active {
+      opacity: 1;
+      transition: var(--transition-default) opacity;
+    }
+
+  .ImageBase-Fade-exit {
+      opacity: 1;
+    }
+
+  .ImageBase-Fade-exit-active {
+      opacity: 0;
+      transition: var(--transition-default) opacity;
+    }

package/__inner__/cjs/components/ImageBase/ImageBase.js

@@ -3,17 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageBase = exports.cnImageBase = void 0;
 var tslib_1 = require("tslib");
 require("./ImageBase.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var logger_1 = require("@ozen-ui/logger");
-var framer_motion_1 = require("framer-motion");
+var react_transition_group_1 = require("react-transition-group");
+var useMultiRef_1 = require("../../hooks/useMultiRef");
 var utils_1 = require("../../utils");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
 var hooks_1 = require("./hooks");
 var modules_1 = require("./modules");
 exports.cnImageBase = (0, utils_1.cn)('ImageBase');
+var FADE_TIMEOUT = 120;
 exports.ImageBase = (0, utils_1.polymorphicComponentWithRef)(function (_a, ref) {
-    var className = _a.className, src = _a.src, _b = _a.as, Tag = _b === void 0 ? constants_1.IMAGE_BASE_DEFAULT_ELEMENT : _b, alt = _a.alt, placeholder = _a.placeholder, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.loader, loader = _d === void 0 ? react_1.default.createElement(modules_1.ImageBaseLoader, null) : _d, style = _a.style, _e = _a.decoding, decoding = _e === void 0 ? 'async' : _e, aspectRatio = _a.aspectRatio, sources = _a.sources, pictureRef = _a.pictureRef, imgRef = _a.imgRef, other = tslib_1.__rest(_a, ["className", "src", "as", "alt", "placeholder", "loading", "loader", "style", "decoding", "aspectRatio", "sources", "pictureRef", "imgRef"]);
+    var className = _a.className, src = _a.src, _b = _a.as, Tag = _b === void 0 ? constants_1.IMAGE_BASE_DEFAULT_ELEMENT : _b, alt = _a.alt, placeholder = _a.placeholder, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.loader, loader = _d === void 0 ? react_1.default.createElement(modules_1.ImageBaseLoader, null) : _d, style = _a.style, _e = _a.decoding, decoding = _e === void 0 ? 'async' : _e, aspectRatio = _a.aspectRatio, sources = _a.sources, pictureRef = _a.pictureRef, imgRefProp = _a.imgRef, other = tslib_1.__rest(_a, ["className", "src", "as", "alt", "placeholder", "loading", "loader", "style", "decoding", "aspectRatio", "sources", "pictureRef", "imgRef"]);
+    var loaderRef = (0, react_1.useRef)(null);
+    var placeholderRef = (0, react_1.useRef)(null);
+    var internalImgRef = (0, react_1.useRef)(null);
+    var imgRef = (0, useMultiRef_1.useMultiRef)([imgRefProp, internalImgRef]);
     var _f = (0, hooks_1.useImageBaseStatus)(src), onLoad = _f.onLoad, onError = _f.onError, isError = _f.isError, isLoading = _f.isLoading;
     var paddingBottom = (function () {
         if (!aspectRatio) {
@@ -29,18 +35,13 @@ exports.ImageBase = (0, utils_1.polymorphicComponentWithRef)(function (_a, ref)
     var isShowPlaceholder = !!placeholder && (isError || !src);
     var isShowLoader = isLoading && !isShowPlaceholder && !!src;
     return (react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, role: "img", className: (0, exports.cnImageBase)('', className), style: tslib_1.__assign(tslib_1.__assign({}, style), { paddingBlockEnd: paddingBottom }) }),
-        react_1.default.createElement(framer_motion_1.AnimatePresence, null, isShowLoader && (react_1.default.createElement(framer_motion_1.motion.div, { className: (0, exports.cnImageBase)('Loader'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
-                visible: { opacity: 1 },
-                hidden: { opacity: 0 },
-            } }, loader))),
-        react_1.default.createElement(framer_motion_1.AnimatePresence, null, isShowPlaceholder && (react_1.default.createElement(framer_motion_1.motion.div, { className: (0, exports.cnImageBase)('Placeholder'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
-                visible: { opacity: 1 },
-                hidden: { opacity: 0 },
-            } }, placeholder))),
-        src && (react_1.default.createElement(components_1.ImageBasePicture, { ref: pictureRef, sources: sources },
-            react_1.default.createElement(framer_motion_1.motion.img, { key: src, ref: imgRef, className: (0, exports.cnImageBase)('Image'), onLoad: onLoad, onError: onError, alt: alt, src: src, decoding: decoding, loading: loading, initial: "hidden", animate: isShowLoader || isShowPlaceholder ? 'hidden' : 'visible', variants: {
-                    visible: { opacity: 1 },
-                    hidden: { opacity: 0 },
-                } })))));
+        react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: loaderRef, in: isShowLoader, timeout: FADE_TIMEOUT, mountOnEnter: true, unmountOnExit: true, classNames: (0, exports.cnImageBase)('Fade') },
+            react_1.default.createElement("div", { ref: loaderRef, className: (0, exports.cnImageBase)('Loader') }, loader)),
+        react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: placeholderRef, in: isShowPlaceholder, timeout: FADE_TIMEOUT, mountOnEnter: true, unmountOnExit: true, classNames: (0, exports.cnImageBase)('Fade') },
+            react_1.default.createElement("div", { ref: placeholderRef, className: (0, exports.cnImageBase)('Placeholder') }, placeholder)),
+        src && (react_1.default.createElement(react_transition_group_1.Transition, { nodeRef: internalImgRef, in: !isShowLoader && !isShowPlaceholder, timeout: FADE_TIMEOUT }, function (state) { return (react_1.default.createElement(components_1.ImageBasePicture, { ref: pictureRef, sources: sources },
+            react_1.default.createElement("img", { ref: imgRef, className: (0, exports.cnImageBase)('Image', {
+                    visible: state === 'entered',
+                }), onLoad: onLoad, onError: onError, alt: alt, src: src, decoding: decoding, loading: loading }))); }))));
 });
 exports.ImageBase.displayName = 'ImageBase';

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

@@ -0,0 +1,35 @@
+.Sidebar {
+  --sidebar-padding-inline: var(--spacing-xs);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding-block: var(--spacing-xs);
+  transition: var(--transition-default);
+  transition-property: inline-size;
+  background-color: var(--sidebar-background-color);
+  inline-size: var(--sidebar-width);
+}
+
+  .Sidebar_color_main {
+    --sidebar-background-color: var(--color-background-main);
+    --sidebar-content-primary-color: var(--color-content-primary);
+    --sidebar-content-secondary-color: var(--color-content-accent-secondary);
+  }
+
+  .Sidebar_color_accent {
+    --sidebar-background-color: var(--color-accent-main);
+    --sidebar-content-primary-color: var(--color-content-accent-primary);
+    --sidebar-content-secondary-color: var(--color-content-accent-secondary);
+  }
+
+  .Sidebar_rounded {
+    border-radius: var(--border-radius-l);
+  }
+
+  .Sidebar-Sizer {
+    position: absolute;
+    transform: translate(0, -50%);
+    inset-block-start: 50%;
+    inset-inline-end: calc(var(--sidebar-padding-inline) * -1);
+  }

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = exports.cnSidebar = void 0;
+var tslib_1 = require("tslib");
+require("./Sidebar.css");
+require("./modules/SidebarCollapsibleItem/SidebarCollapsibleItem.css");
+require("./modules/SidebarContent/SidebarContent.css");
+require("./modules/SidebarDivider/SidebarDivider.css");
+require("./modules/SidebarFooter/SidebarFooter.css");
+require("./modules/SidebarHeader/SidebarHeader.css");
+require("./modules/SidebarHeaderLogo/SidebarHeaderLogo.css");
+require("./modules/SidebarItem/SidebarItem.css");
+require("./modules/SidebarList/SidebarList.css");
+require("./modules/SidebarSizer/SidebarSizer.css");
+require("./modules/SidebarSubitem/SidebarSubitem.css");
+require("./modules/SidebarUser/SidebarUser.css");
+require("./modules/SidebarUserMenu/SidebarUserMenu.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var utils_1 = require("../../utils");
+var constants_1 = require("./constants");
+var SidebarContext_1 = require("./SidebarContext");
+exports.cnSidebar = (0, utils_1.cn)('Sidebar');
+exports.Sidebar = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var _a;
+    var props = (0, useThemeProps_1.useThemeProps)({
+        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, style = props.style, other = tslib_1.__rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "style"]);
+    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 },
+        react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, style: tslib_1.__assign(tslib_1.__assign({}, style), (0, utils_1.generateCSSVariables)((_a = {},
+                _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", { className: (0, exports.cnSidebar)('Sizer') }, sizer))));
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidebarContext = exports.SidebarContext = exports.SidebarContextDefaultValue = void 0;
+var react_1 = require("react");
+var environment_1 = require("../../constants/environment");
+var constants_1 = require("./constants");
+exports.SidebarContextDefaultValue = {
+    variant: constants_1.SIDEBAR_DEFAULT_VARIANT,
+    size: constants_1.SIDEBAR_DEFAULT_SIZE,
+    color: constants_1.SIDEBAR_DEFAULT_COLOR,
+};
+exports.SidebarContext = (0, react_1.createContext)(exports.SidebarContextDefaultValue);
+var useSidebarContext = function () { return (0, react_1.useContext)(exports.SidebarContext); };
+exports.useSidebarContext = useSidebarContext;
+// Именованный провайдер
+if (environment_1.isDev) {
+    exports.SidebarContext.displayName = 'SidebarContext';
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_CSS_VARIABLE = exports.SIDEBAR_WIDTH_BY_VARIANT = exports.SIDEBAR_DEFAULT_COLOR = exports.SIDEBAR_DEFAULT_SIZE = exports.SIDEBAR_DEFAULT_ROUNDED = exports.SIDEBAR_DEFAULT_VARIANT = exports.SIDEBAR_DEFAULT_TAG = void 0;
+exports.SIDEBAR_DEFAULT_TAG = 'aside';
+exports.SIDEBAR_DEFAULT_VARIANT = 'mini';
+exports.SIDEBAR_DEFAULT_ROUNDED = true;
+exports.SIDEBAR_DEFAULT_SIZE = 'm';
+exports.SIDEBAR_DEFAULT_COLOR = 'main';
+exports.SIDEBAR_WIDTH_BY_VARIANT = {
+    s: {
+        mini: 64,
+        compact: 108,
+        full: 256,
+    },
+    m: {
+        mini: 72,
+        compact: 108,
+        full: 280,
+    },
+};
+exports.SIDEBAR_CSS_VARIABLE = {
+    WIDTH: 'sidebar-width',
+};

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarColorVariant = void 0;
+exports.sidebarColorVariant = ['main', 'accent'];

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarSizeVariant = void 0;
+exports.sidebarSizeVariant = ['s', 'm'];

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarVariant = void 0;
+exports.sidebarVariant = ['mini', 'compact', 'full'];

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

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

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

@@ -0,0 +1,39 @@
+.SidebarCollapsibleItem {
+  --sidebar-collapsible-item-gap: var(--spacing-xs);
+  z-index: 0;
+}
+
+  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+      opacity: 0;
+      max-inline-size: 0;
+      margin-inline-start: 0;
+      pointer-events: none;
+    }
+
+  .SidebarCollapsibleItem-Fixed {
+    z-index: 1;
+  }
+
+  .SidebarCollapsibleItem-Content {
+    display: flex;
+    flex-shrink: 0;
+    margin-inline-start: var(--sidebar-collapsible-item-gap);
+  }
+
+  .SidebarCollapsibleItem-Content > * {
+    flex-shrink: 0;
+  }
+
+  .SidebarCollapsibleItem_center {
+    margin-inline: auto;
+  }
+
+.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-Content {
+    transition: var(--transition-default);
+    transition-property: opacity, transform, max-inline-size, margin-inline;
+  }
+
+.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+      transform: translateX(calc(var(--sidebar-collapsible-item-gap) * -1));
+      transition-duration: 100ms;
+    }

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarCollapsibleItem = exports.cnSidebarCollapsibleItem = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var utils_1 = require("../../../../utils");
+var Stack_1 = require("../../../Stack");
+var SidebarContext_1 = require("../../SidebarContext");
+var constants_1 = require("./constants");
+var hooks_1 = require("./hooks");
+exports.cnSidebarCollapsibleItem = (0, utils_1.cn)('SidebarCollapsibleItem');
+exports.SidebarCollapsibleItem = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        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 isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
+    var internalRef = (0, react_1.useRef)(null);
+    var itemRef = (0, useMultiRef_1.useMultiRef)([ref, internalRef]);
+    var fixedRef = (0, react_1.useRef)(null);
+    var fixedRendered = (0, utils_1.isFunction)(fixed)
+        ? (0, utils_1.renderContent)({
+            content: fixed,
+            props: { collapsed: isCollapsed },
+        })
+        : fixed;
+    var _e = (0, hooks_1.useSidebarCollapsibleItemAnimation)({
+        autoCenter: autoCenter,
+        ref: internalRef,
+        fixedRef: fixedRef,
+        isCollapsed: isCollapsed,
+    }), onExit = _e.onExit, onEnter = _e.onEnter, onTransitionEnd = _e.onTransitionEnd, hasMarginAutoClass = _e.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))));
+});
+exports.SidebarCollapsibleItem.displayName = 'SidebarCollapsibleItem';

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER = exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY = exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG = void 0;
+exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG = 'div';
+exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY = 'start';
+exports.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER = true;

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

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

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

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidebarCollapsibleItemAnimation = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useStoredValue_1 = require("../../../../../hooks/useStoredValue");
+var useThemeVariables_1 = require("../../../../../hooks/useThemeVariables");
+var constants_1 = require("../../../constants");
+var SidebarContext_1 = require("../../../SidebarContext");
+var useSidebarCollapsibleItemAnimation = function (_a) {
+    var autoCenter = _a.autoCenter, ref = _a.ref, fixedRef = _a.fixedRef, isCollapsed = _a.isCollapsed;
+    var _b = (0, SidebarContext_1.useSidebarContext)(), variant = _b.variant, size = _b.size;
+    var transition = (0, useThemeVariables_1.useThemeVariables)().transition;
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), wasRender = _c[0], setWasRender = _c[1];
+    var isFirstAnimation = (0, useStoredValue_1.useStoredValue)(true);
+    var currentWidths = constants_1.SIDEBAR_WIDTH_BY_VARIANT[size];
+    var calculateCenter = function () {
+        var _a;
+        if (!autoCenter) {
+            return null;
+        }
+        var element = ref.current;
+        if (!element) {
+            return null;
+        }
+        var parent = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!parent) {
+            return null;
+        }
+        var fixed = fixedRef.current;
+        if (!fixed) {
+            return null;
+        }
+        var fixedRect = fixed.getBoundingClientRect();
+        var panelWidth = currentWidths[variant];
+        var targetLeftCenter = parent.left + (panelWidth - fixedRect.width) / 2;
+        var dx = fixedRect.left - targetLeftCenter;
+        return Math.abs(dx);
+    };
+    var onEnter = function () {
+        if (!autoCenter) {
+            return;
+        }
+        var parent = ref.current;
+        var fixed = fixedRef.current;
+        if (!fixed || !parent) {
+            return;
+        }
+        var originalTransform = fixed.style.transform;
+        parent.style.marginInline = '0';
+        fixed.style.transition = '';
+        fixed.style.transform = '';
+        var centerX = calculateCenter();
+        if (centerX === null) {
+            return;
+        }
+        fixed.style.transform = originalTransform;
+        fixed.getBoundingClientRect();
+        if (!isFirstAnimation.current) {
+            fixed.style.transition = "".concat(transition.default, " transform");
+        }
+        fixed.style.transform = "translateX(".concat(centerX, "px)");
+        isFirstAnimation.current = false;
+    };
+    var onExit = function () {
+        if (!autoCenter) {
+            return;
+        }
+        var fixed = fixedRef.current;
+        if (!fixed) {
+            return;
+        }
+        fixed.style.transition = "".concat(transition.default, " transform");
+        fixed.style.transform = "translate(0px)";
+        isFirstAnimation.current = false;
+    };
+    var onTransitionEnd = function () {
+        var node = ref.current;
+        if (!node) {
+            return;
+        }
+        node.style.transition = '';
+        node.style.transform = '';
+    };
+    var previousIsCollapsed = (0, useStoredValue_1.useStoredValue)(isCollapsed);
+    (0, react_1.useEffect)(function () {
+        setWasRender(true);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!wasRender) {
+            return;
+        }
+        if (previousIsCollapsed.current === isCollapsed) {
+            onEnter();
+        }
+        previousIsCollapsed.current = isCollapsed;
+    }, [variant]);
+    var hasMarginAutoClass = isCollapsed && autoCenter && !wasRender;
+    return {
+        calculateCenter: calculateCenter,
+        onExit: onExit,
+        onEnter: onEnter,
+        onTransitionEnd: onTransitionEnd,
+        hasMarginAutoClass: hasMarginAutoClass,
+    };
+};
+exports.useSidebarCollapsibleItemAnimation = useSidebarCollapsibleItemAnimation;

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

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

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

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

@@ -0,0 +1,16 @@
+.SidebarContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1 0;
+  overflow: hidden auto;
+  scrollbar-width: none;
+}
+
+  .SidebarContent::-webkit-scrollbar {
+    display: none;
+  }
+
+  .SidebarContent-Content {
+    flex: 1 0;
+  }

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarContent = exports.cnSidebarContent = 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.cnSidebarContent = (0, utils_1.cn)('SidebarContent');
+exports.SidebarContent = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarContent',
+    });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.SIDEBAR_CONTENT_DEFAULT_TAG : _a, className = props.className, children = props.children, bottom = props.bottom, other = tslib_1.__rest(props, ["as", "className", "children", "bottom"]);
+    return (react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnSidebarContent)('', [className]) }),
+        react_1.default.createElement("div", { className: (0, exports.cnSidebarContent)('Content') }, children),
+        bottom && react_1.default.createElement("div", { className: (0, exports.cnSidebarContent)('Bottom') }, bottom)));
+});
+exports.SidebarContent.displayName = 'SidebarContent';

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+.SidebarDivider {
+  box-sizing: border-box;
+  margin-block: var(--spacing-xs);
+  margin-inline: auto;
+  inline-size: calc(100% - var(--sidebar-padding-inline) * 2);
+}
+
+  .SidebarDivider_color_accent {
+    --divider-color: var(--color-accent-primary);
+  }

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarDivider = exports.cnSidebarDivider = 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 Divider_1 = require("../../../Divider");
+var SidebarContext_1 = require("../../SidebarContext");
+var constants_1 = require("./constants");
+exports.cnSidebarDivider = (0, utils_1.cn)('SidebarDivider');
+exports.SidebarDivider = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarDivider',
+    });
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_DIVIDER_DEFAULT_TAG : _a, className = props.className, other = tslib_1.__rest(props, ["as", "className"]);
+    var color = (0, SidebarContext_1.useSidebarContext)().color;
+    return (react_1.default.createElement(Divider_1.Divider, tslib_1.__assign({}, other, { as: as, ref: ref, size: "s", color: "secondary", className: (0, exports.cnSidebarDivider)({ color: color }, [className]) })));
+});
+exports.SidebarDivider.displayName = 'SidebarDivider';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_DIVIDER_DEFAULT_TAG = void 0;
+var constants_1 = require("../../../Divider/constants");
+exports.SIDEBAR_DIVIDER_DEFAULT_TAG = constants_1.DIVIDER_DEFAULT_TAG;

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

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

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

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

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