@ozen-ui/kit 0.82.0 → 0.83.1

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);
+      }

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarUserMenu = exports.cnSidebarUserMenu = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useControlled_1 = require("../../../../hooks/useControlled");
+var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var utils_1 = require("../../../../utils");
+var ButtonNext_1 = require("../../../ButtonNext");
+var Menu_1 = require("../../../Menu");
+var SidebarContext_1 = require("../../SidebarContext");
+var constants_1 = require("./constants");
+exports.cnSidebarUserMenu = (0, utils_1.cn)('SidebarUserMenu');
+exports.SidebarUserMenu = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarUserMenu',
+    });
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_USER_MENU_DEFAULT_TAG : _a, className = props.className, children = props.children, label = props.label, open = props.open, onOpenChange = props.onOpenChange, menuProps = props.menuProps, onClick = props.onClick, other = tslib_1.__rest(props, ["as", "className", "children", "label", "open", "onOpenChange", "menuProps", "onClick"]);
+    var color = (0, SidebarContext_1.useSidebarContext)().color;
+    var buttonRef = (0, react_1.useRef)(null);
+    var _b = tslib_1.__read((0, useControlled_1.useControlled)({
+        name: 'SidebarUserMenu',
+        value: open,
+        defaultValue: false,
+        state: 'isOpen',
+    }), 2), isOpen = _b[0], setIsOpenState = _b[1];
+    var setIsOpen = function (isOpen) {
+        setIsOpenState(isOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({ open: isOpen });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ButtonNext_1.Button, tslib_1.__assign({}, other, { as: as, ref: (0, useMultiRef_1.useMultiRef)([ref, buttonRef]), variant: "function", onClick: function (event) {
+                setIsOpen(!isOpen);
+                onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            }, className: (0, exports.cnSidebarUserMenu)('Button', { color: color, open: isOpen }, [
+                className,
+            ]), size: "2xs", iconRight: react_1.default.createElement(icons_1.ChevronDownSmallIcon, { className: (0, exports.cnSidebarUserMenu)('Chevron') }) }), label),
+        react_1.default.createElement(Menu_1.Menu, tslib_1.__assign({ placement: "right-end" }, menuProps, { size: "xs", anchorRef: buttonRef, open: isOpen, className: (0, exports.cnSidebarUserMenu)('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
+                var _a;
+                setIsOpen(false);
+                (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps);
+            } }), children)));
+});
+exports.SidebarUserMenu.displayName = 'SidebarUserMenu';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_USER_MENU_DEFAULT_TAG = void 0;
+var ButtonNext_1 = require("../../../ButtonNext");
+exports.SIDEBAR_USER_MENU_DEFAULT_TAG = ButtonNext_1.BUTTON_DEFAULT_TAG;

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

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarUserOnline = exports.cnSidebarUserOnline = 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 Indicator_1 = require("../../../Indicator");
+var Stack_1 = require("../../../Stack");
+var Typography_1 = require("../../../Typography");
+var constants_1 = require("./constants");
+exports.cnSidebarUserOnline = (0, utils_1.cn)('SidebarUserOnline');
+exports.SidebarUserOnline = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'SidebarUserOnline',
+    });
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_USER_ONLINE_DEFAULT_TAG : _a, className = props.className, _b = props.indicatorVariant, indicatorVariant = _b === void 0 ? constants_1.SIDEBAR_USER_ONLINE_DEFAULT_INDICATOR_VARIANT : _b, _c = props.textColor, textColor = _c === void 0 ? constants_1.SIDEBAR_USER_ONLINE_DEFAULT_TYPOGRAPHY_COLOR : _c, label = props.label, other = tslib_1.__rest(props, ["as", "className", "indicatorVariant", "textColor", "label"]);
+    return (react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({}, other, { ref: ref, as: as, gap: "xs", align: "center", justify: "start", className: (0, exports.cnSidebarUserOnline)('', [className]) }),
+        react_1.default.createElement(Indicator_1.Indicator, { variant: indicatorVariant, className: (0, exports.cnSidebarUserOnline)('Indicator'), size: "s" }),
+        react_1.default.createElement(Typography_1.Typography, { variant: "text-2xs_1", className: (0, exports.cnSidebarUserOnline)('Label'), color: textColor, as: "span" }, label)));
+});
+exports.SidebarUserOnline.displayName = 'SidebarUserOnline';

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_USER_ONLINE_DEFAULT_TYPOGRAPHY_COLOR = exports.SIDEBAR_USER_ONLINE_DEFAULT_INDICATOR_VARIANT = exports.SIDEBAR_USER_ONLINE_DEFAULT_TAG = void 0;
+exports.SIDEBAR_USER_ONLINE_DEFAULT_TAG = 'div';
+exports.SIDEBAR_USER_ONLINE_DEFAULT_INDICATOR_VARIANT = 'success';
+exports.SIDEBAR_USER_ONLINE_DEFAULT_TYPOGRAPHY_COLOR = 'success';

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

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./SidebarCollapsibleItem"), exports);
+tslib_1.__exportStar(require("./SidebarContent"), exports);
+tslib_1.__exportStar(require("./SidebarDivider"), exports);
+tslib_1.__exportStar(require("./SidebarFooter"), exports);
+tslib_1.__exportStar(require("./SidebarHeader"), exports);
+tslib_1.__exportStar(require("./SidebarHeaderLogo"), exports);
+tslib_1.__exportStar(require("./SidebarItem"), exports);
+tslib_1.__exportStar(require("./SidebarItemBadge"), exports);
+tslib_1.__exportStar(require("./SidebarList"), exports);
+tslib_1.__exportStar(require("./SidebarSizer"), exports);
+tslib_1.__exportStar(require("./SidebarSubitem"), exports);
+tslib_1.__exportStar(require("./SidebarUser"), exports);
+tslib_1.__exportStar(require("./SidebarUserMenu"), exports);
+tslib_1.__exportStar(require("./SidebarUserOnline"), exports);

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

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

package/__inner__/cjs/locale/locale.js

@@ -107,6 +107,9 @@ exports.ruRU = {
         Select: {
             clearText: 'Очистить',
         },
+        SidebarUserOnline: {
+            label: 'Онлайн',
+        },
     },
 };
 exports.kkKZ = {
@@ -214,6 +217,9 @@ exports.kkKZ = {
         Select: {
             clearText: 'Тазалау',
         },
+        SidebarUserOnline: {
+            label: 'Онлайн',
+        },
     },
 };
 exports.enUS = {
@@ -322,5 +328,8 @@ exports.enUS = {
         Select: {
             clearText: 'Clear',
         },
+        SidebarUserOnline: {
+            label: 'Online',
+        },
     },
 };

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

@@ -1,2 +1,3 @@
+export * from './constants';
 export * from './Badge';
 export * from './types';

package/__inner__/esm/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__/esm/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__/esm/components/ImageBase/ImageBase.js

@@ -1,16 +1,22 @@
 import { __assign, __read, __rest } from "tslib";
 import './ImageBase.css';
-import React from 'react';
+import React, { useRef } from 'react';
 import { logger } from '@ozen-ui/logger';
-import { AnimatePresence, motion } from 'framer-motion';
+import { Transition, CSSTransition } from 'react-transition-group';
+import { useMultiRef } from '../../hooks/useMultiRef';
 import { cn, polymorphicComponentWithRef } from '../../utils';
 import { ImageBasePicture } from './components';
 import { IMAGE_BASE_DEFAULT_ELEMENT } from './constants';
 import { useImageBaseStatus } from './hooks';
 import { ImageBaseLoader } from './modules';
 export var cnImageBase = cn('ImageBase');
+var FADE_TIMEOUT = 120;
 export var ImageBase = polymorphicComponentWithRef(function (_a, ref) {
-    var className = _a.className, src = _a.src, _b = _a.as, Tag = _b === void 0 ? 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.createElement(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 = __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 ? 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.createElement(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 = __rest(_a, ["className", "src", "as", "alt", "placeholder", "loading", "loader", "style", "decoding", "aspectRatio", "sources", "pictureRef", "imgRef"]);
+    var loaderRef = useRef(null);
+    var placeholderRef = useRef(null);
+    var internalImgRef = useRef(null);
+    var imgRef = useMultiRef([imgRefProp, internalImgRef]);
     var _f = useImageBaseStatus(src), onLoad = _f.onLoad, onError = _f.onError, isError = _f.isError, isLoading = _f.isLoading;
     var paddingBottom = (function () {
         if (!aspectRatio) {
@@ -26,18 +32,13 @@ export var ImageBase = polymorphicComponentWithRef(function (_a, ref) {
     var isShowPlaceholder = !!placeholder && (isError || !src);
     var isShowLoader = isLoading && !isShowPlaceholder && !!src;
     return (React.createElement(Tag, __assign({}, other, { ref: ref, role: "img", className: cnImageBase('', className), style: __assign(__assign({}, style), { paddingBlockEnd: paddingBottom }) }),
-        React.createElement(AnimatePresence, null, isShowLoader && (React.createElement(motion.div, { className: cnImageBase('Loader'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
-                visible: { opacity: 1 },
-                hidden: { opacity: 0 },
-            } }, loader))),
-        React.createElement(AnimatePresence, null, isShowPlaceholder && (React.createElement(motion.div, { className: cnImageBase('Placeholder'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
-                visible: { opacity: 1 },
-                hidden: { opacity: 0 },
-            } }, placeholder))),
-        src && (React.createElement(ImageBasePicture, { ref: pictureRef, sources: sources },
-            React.createElement(motion.img, { key: src, ref: imgRef, className: 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.createElement(CSSTransition, { nodeRef: loaderRef, in: isShowLoader, timeout: FADE_TIMEOUT, mountOnEnter: true, unmountOnExit: true, classNames: cnImageBase('Fade') },
+            React.createElement("div", { ref: loaderRef, className: cnImageBase('Loader') }, loader)),
+        React.createElement(CSSTransition, { nodeRef: placeholderRef, in: isShowPlaceholder, timeout: FADE_TIMEOUT, mountOnEnter: true, unmountOnExit: true, classNames: cnImageBase('Fade') },
+            React.createElement("div", { ref: placeholderRef, className: cnImageBase('Placeholder') }, placeholder)),
+        src && (React.createElement(Transition, { nodeRef: internalImgRef, in: !isShowLoader && !isShowPlaceholder, timeout: FADE_TIMEOUT }, function (state) { return (React.createElement(ImageBasePicture, { ref: pictureRef, sources: sources },
+            React.createElement("img", { ref: imgRef, className: cnImageBase('Image', {
+                    visible: state === 'entered',
+                }), onLoad: onLoad, onError: onError, alt: alt, src: src, decoding: decoding, loading: loading }))); }))));
 });
 ImageBase.displayName = 'ImageBase';

package/__inner__/esm/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__/esm/components/Sidebar/Sidebar.js

@@ -0,0 +1,36 @@
+import { __assign, __rest } from "tslib";
+import './Sidebar.css';
+import './modules/SidebarCollapsibleItem/SidebarCollapsibleItem.css';
+import './modules/SidebarContent/SidebarContent.css';
+import './modules/SidebarDivider/SidebarDivider.css';
+import './modules/SidebarFooter/SidebarFooter.css';
+import './modules/SidebarHeader/SidebarHeader.css';
+import './modules/SidebarHeaderLogo/SidebarHeaderLogo.css';
+import './modules/SidebarItem/SidebarItem.css';
+import './modules/SidebarList/SidebarList.css';
+import './modules/SidebarSizer/SidebarSizer.css';
+import './modules/SidebarSubitem/SidebarSubitem.css';
+import './modules/SidebarUser/SidebarUser.css';
+import './modules/SidebarUserMenu/SidebarUserMenu.css';
+import React, { useMemo } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn, generateCSSVariables, polymorphicComponentWithRef, } from '../../utils';
+import { SIDEBAR_CSS_VARIABLE, SIDEBAR_DEFAULT_COLOR, SIDEBAR_DEFAULT_ROUNDED, SIDEBAR_DEFAULT_SIZE, SIDEBAR_DEFAULT_TAG, SIDEBAR_DEFAULT_VARIANT, SIDEBAR_WIDTH_BY_VARIANT, } from './constants';
+import { SidebarContext } from './SidebarContext';
+export var cnSidebar = cn('Sidebar');
+export var Sidebar = polymorphicComponentWithRef(function (inProps, ref) {
+    var _a;
+    var props = useThemeProps({
+        name: 'Sidebar',
+        props: inProps,
+    });
+    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, style = props.style, other = __rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "style"]);
+    var memoizedContextValue = useMemo(function () { return ({ variant: variant, size: size, color: color }); }, [variant, size, color]);
+    var width = SIDEBAR_WIDTH_BY_VARIANT[size][variant];
+    return (React.createElement(SidebarContext.Provider, { value: memoizedContextValue },
+        React.createElement(Tag, __assign({}, other, { ref: ref, style: __assign(__assign({}, style), generateCSSVariables((_a = {},
+                _a[SIDEBAR_CSS_VARIABLE.WIDTH] = "".concat(width, "px"),
+                _a))), className: cnSidebar({ variant: variant, rounded: rounded, size: size, color: color }, [className]) }),
+            children,
+            sizer && React.createElement("div", { className: cnSidebar('Sizer') }, sizer))));
+});

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

@@ -0,0 +1,14 @@
+import { useContext, createContext } from 'react';
+import { isDev } from '../../constants/environment';
+import { SIDEBAR_DEFAULT_VARIANT, SIDEBAR_DEFAULT_SIZE, SIDEBAR_DEFAULT_COLOR, } from './constants';
+export var SidebarContextDefaultValue = {
+    variant: SIDEBAR_DEFAULT_VARIANT,
+    size: SIDEBAR_DEFAULT_SIZE,
+    color: SIDEBAR_DEFAULT_COLOR,
+};
+export var SidebarContext = createContext(SidebarContextDefaultValue);
+export var useSidebarContext = function () { return useContext(SidebarContext); };
+// Именованный провайдер
+if (isDev) {
+    SidebarContext.displayName = 'SidebarContext';
+}

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

@@ -0,0 +1,20 @@
+export var SIDEBAR_DEFAULT_TAG = 'aside';
+export var SIDEBAR_DEFAULT_VARIANT = 'mini';
+export var SIDEBAR_DEFAULT_ROUNDED = true;
+export var SIDEBAR_DEFAULT_SIZE = 'm';
+export var SIDEBAR_DEFAULT_COLOR = 'main';
+export var SIDEBAR_WIDTH_BY_VARIANT = {
+    s: {
+        mini: 64,
+        compact: 108,
+        full: 256,
+    },
+    m: {
+        mini: 72,
+        compact: 108,
+        full: 280,
+    },
+};
+export var SIDEBAR_CSS_VARIABLE = {
+    WIDTH: 'sidebar-width',
+};

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

@@ -0,0 +1 @@
+export var sidebarColorVariant = ['main', 'accent'];

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

@@ -0,0 +1,3 @@
+export * from './color';
+export * from './size';
+export * from './variant';

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

@@ -0,0 +1 @@
+export var sidebarSizeVariant = ['s', 'm'];

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

@@ -0,0 +1 @@
+export var sidebarVariant = ['mini', 'compact', 'full'];

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

@@ -0,0 +1,6 @@
+export * from './entities';
+export * from './modules';
+export * from './constants';
+export * from './Sidebar';
+export * from './SidebarContext';
+export * from './types';

package/__inner__/esm/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__/esm/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.js

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

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

@@ -0,0 +1,3 @@
+export var SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG = 'div';
+export var SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY = 'start';
+export var SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER = true;

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

@@ -0,0 +1 @@
+export * from './useSidebarCollapsibleItemAnimation';