@astral/ui 4.17.5 → 4.17.6

package/components/DashboardLayout/Header/styles.d.ts

@@ -1,36 +1,36 @@
 /// <reference types="react" />
-export declare const HeaderRoot: import("@emotion/styled").StyledComponent<{
+export declare const HeaderRoot: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     $isFocusedMode: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const MobileSidebarTogglerWrapper: import("@emotion/styled").StyledComponent<{
+export declare const MobileSidebarTogglerWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HeaderSection: import("@emotion/styled").StyledComponent<{
+export declare const HeaderSection: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HeaderContentSection: import("@emotion/styled").StyledComponent<{
+export declare const HeaderContentSection: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const ProductSwitcherWrapper: import("@emotion/styled").StyledComponent<{
+export declare const ProductSwitcherWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ProfileWrapper: import("@emotion/styled").StyledComponent<{
+export declare const ProfileWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     $isShow: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ExitButton: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
-    variant?: "link" | "light" | "outlined" | "contained" | "text" | undefined;
+export declare const ExitButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
     loading?: boolean | undefined;
     color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
     component?: import("react").ElementType | undefined;
@@ -42,7 +42,7 @@ export declare const ExitButton: import("@emotion/styled").StyledComponent<Omit<
 } & {
     $isShow: boolean;
 }, {}, {}>;
-export declare const HeaderContent: import("@emotion/styled").StyledComponent<{
+export declare const HeaderContent: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DashboardLayout/Header/styles.js

@@ -1,8 +1,8 @@
 import { buttonClasses } from '@mui/material';
+import { dashboardSidebarClassnames } from '../../DashboardSidebar/constants';
 import { IconButton } from '../../IconButton';
-import { styled } from '../../styles';
+import { styled } from '../../styled';
 import { dashboardLayoutClassnames, HEADER_HEIGHT, HEADER_HEIGHT_MOBILE, } from '../constants';
-import { dashboardLayoutSidebarClassnames } from '../Sidebar';
 export const HeaderRoot = styled('header', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
 }) `
@@ -48,7 +48,7 @@ export const MobileSidebarTogglerWrapper = styled.div `
     padding: ${({ theme }) => theme.spacing(2)};
   }
   
-  .${dashboardLayoutClassnames.root}:not(:has(.${dashboardLayoutSidebarClassnames.root}))
+  .${dashboardLayoutClassnames.root}:not(:has(.${dashboardSidebarClassnames.root}))
     & {
     display: none;
   }

package/components/DashboardLayout/Main/index.d.ts

@@ -1 +1,2 @@
 export * from './Main';
+export { dashboardLayoutMainClassnames } from './constants';

package/components/DashboardLayout/Main/index.js

@@ -1 +1,2 @@
 export * from './Main';
+export { dashboardLayoutMainClassnames } from './constants';

package/components/DashboardLayout/Main/styles.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const MainRoot: import("@emotion/styled").StyledComponent<{
+export declare const MainRoot: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const AlertWrapper: import("@emotion/styled").StyledComponent<{
+export declare const AlertWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DashboardLayout/Main/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../../styles';
+import { styled } from '../../styled';
 export const MainRoot = styled.main `
   overflow: hidden;
   display: flex;

package/components/DashboardLayout/Main/useLogic/useLogic.js

@@ -1,7 +1,6 @@
 import { useContext, useEffect, useRef } from 'react';
-import { pageContentClassnames } from '../../../PageLayout';
-import { PAGE_CONTENT_ANIMATION } from '../../../PageLayout/PageContent/constants';
-import { DashboardContext } from '../../DashboardContext';
+import { DashboardContext } from '../../../DashboardContext';
+import { PAGE_CONTENT_ANIMATION, pageContentClassnames, } from '../../../PageContent/constants';
 export const useLogic = () => {
     const { isFocusedMode, setAlertElement } = useContext(DashboardContext);
     const prevFocusedModeRef = useRef(isFocusedMode);

package/components/DashboardLayout/index.d.ts

@@ -1,4 +1,4 @@
 export { type DashboardLayoutProps, DashboardLayout } from './DashboardLayout';
-export { MenuSidebarButton, type MenuSidebarButtonProps, SidebarButton, SidebarCounter, type SidebarCounterProps, SidebarPopover, type SidebarPopoverItemProps, type SidebarPopoverProps, type DashboardSidebarProps, SidebarSkeleton, } from './Sidebar';
-export { DashboardContext, type DashboardContextProps, } from './DashboardContext';
-export { DashboardLayoutSkeleton, type DashboardLayoutSkeletonProps, } from './DashboardLayoutSkeleton';
+export { dashboardLayoutHeaderClassnames } from './Header';
+export { dashboardLayoutMainClassnames } from './Main';
+export { dashboardLayoutClassnames } from './constants';

package/components/DashboardLayout/index.js

@@ -1,4 +1,4 @@
 export { DashboardLayout } from './DashboardLayout';
-export { MenuSidebarButton, SidebarButton, SidebarCounter, SidebarPopover, SidebarSkeleton, } from './Sidebar';
-export { DashboardContext, } from './DashboardContext';
-export { DashboardLayoutSkeleton, } from './DashboardLayoutSkeleton';
+export { dashboardLayoutHeaderClassnames } from './Header';
+export { dashboardLayoutMainClassnames } from './Main';
+export { dashboardLayoutClassnames } from './constants';

package/components/DashboardLayout/public.d.ts

@@ -1,4 +1,2 @@
-export { DashboardContext, type DashboardContextProps, } from './DashboardContext';
+export type { DashboardSidebarProps } from '../DashboardSidebar';
 export { DashboardLayout, type DashboardLayoutProps } from './DashboardLayout';
-export { DashboardLayoutSkeleton, type DashboardLayoutSkeletonProps, } from './DashboardLayoutSkeleton';
-export { type DashboardSidebarProps, MenuSidebarButton, type MenuSidebarButtonProps, SidebarButton, SidebarCounter, type SidebarCounterProps, SidebarPopover, type SidebarPopoverItemProps, type SidebarPopoverProps, SidebarSkeleton, } from './Sidebar';

package/components/DashboardLayout/public.js

@@ -1,4 +1 @@
-export { DashboardContext, } from './DashboardContext';
 export { DashboardLayout } from './DashboardLayout';
-export { DashboardLayoutSkeleton, } from './DashboardLayoutSkeleton';
-export { MenuSidebarButton, SidebarButton, SidebarCounter, SidebarPopover, SidebarSkeleton, } from './Sidebar';

package/components/DashboardLayout/styles.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DecorativeHeaderBackground: import("@emotion/styled").StyledComponent<{
+export declare const DecorativeHeaderBackground: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     $isFocusedMode: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LayoutContent: import("@emotion/styled").StyledComponent<{
+export declare const LayoutContent: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {

package/components/DashboardLayout/styles.js

@@ -1,6 +1,6 @@
-import { styled } from '../styles';
+import { dashboardSidebarClassnames } from '../DashboardSidebar/constants';
+import { styled } from '../styled';
 import { HEADER_HEIGHT } from './constants';
-import { dashboardLayoutSidebarClassnames } from './Sidebar';
 export const Wrapper = styled('div') `
   display: flex;
   justify-content: center;
@@ -52,7 +52,7 @@ export const LayoutContent = styled('div', {
     });
 }};
 
-  &:has(.${dashboardLayoutSidebarClassnames.root}) {
+  &:has(.${dashboardSidebarClassnames.root}) {
     column-gap: ${({ theme }) => theme.spacing(4)};
 
     ${({ theme }) => theme.breakpoints.down('sm')} {

package/components/DashboardLayoutSkeleton/DashboardLayoutSkeleton.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { ProductProps } from '../Product';
+export type DashboardLayoutSkeletonProps = {
+    product: ProductProps;
+    productSwitcher?: (props: PropsWithChildren<{}>) => ReactElement;
+    hasSidebar?: boolean;
+    hasProfile?: boolean;
+    hasMenuOrganization?: boolean;
+};
+/**
+ * Компонент можно использовать для отображения состояния загрузки дашборда
+ */
+export declare const DashboardLayoutSkeleton: ({ product, productSwitcher, hasSidebar, hasProfile, hasMenuOrganization, }: DashboardLayoutSkeletonProps) => JSX.Element;

package/components/DashboardLayoutSkeleton/DashboardLayoutSkeleton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dashboardLayoutClassnames } from '../DashboardLayout/constants';
+import { DashboardLayout } from '../DashboardLayout/DashboardLayout';
+import { Header } from '../DashboardLayout/Header';
+import { DecorativeHeaderBackground, LayoutContent, Wrapper, } from '../DashboardLayout/styles';
+import { DashboardSidebarSkeleton } from '../DashboardSidebarSkeleton';
+import { MenuOrganizationSkeleton } from '../MenuOrganization';
+import { LoadingPlaceholder } from '../placeholders';
+import { Content } from './styles';
+/**
+ * Компонент можно использовать для отображения состояния загрузки дашборда
+ */
+export const DashboardLayoutSkeleton = ({ product, productSwitcher, hasSidebar = true, hasProfile = true, hasMenuOrganization = true, }) => {
+    return (_jsxs(Wrapper, { className: dashboardLayoutClassnames.root, children: [_jsx(DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": false }), _jsxs(LayoutContent, { "$isFocusedMode": false, children: [hasSidebar && _jsx(DashboardSidebarSkeleton, {}), _jsx(Header, { productSwitcher: productSwitcher, product: product, menuOrganization: hasMenuOrganization ? () => _jsx(MenuOrganizationSkeleton, {}) : undefined, profile: hasProfile
+                            ? { displayName: '', isLoading: true, menuList: [] }
+                            : undefined }), _jsx(DashboardLayout.Main, { children: _jsx(Content, { children: _jsx(LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445" }) }) })] })] }));
+};

package/components/DashboardLayoutSkeleton/public.d.ts

@@ -0,0 +1 @@
+export { DashboardLayoutSkeleton, type DashboardLayoutSkeletonProps, } from './DashboardLayoutSkeleton';

package/components/DashboardLayoutSkeleton/public.js

@@ -0,0 +1 @@
+export { DashboardLayoutSkeleton, } from './DashboardLayoutSkeleton';

package/components/DashboardLayoutSkeleton/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Content: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DashboardLayoutSkeleton/styles.js

@@ -0,0 +1,16 @@
+import { styled } from '../styled';
+export const Content = styled.div `
+  flex-grow: 1;
+
+  height: 100%;
+  min-height: 0;
+
+  background-color: ${({ theme }) => theme.palette.common.white};
+  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme }) => theme.shape.medium};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    background-color: unset;
+    border: unset;
+  }
+`;

package/components/DashboardMenuSidebarButton/DashboardMenuSidebarButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DashboardMenuSidebarButtonProps } from './types';
+export declare const DashboardMenuSidebarButton: import("react").ForwardRefExoticComponent<Omit<DashboardMenuSidebarButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/components/DashboardMenuSidebarButton/DashboardMenuSidebarButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext } from 'react';
+import { Collapse } from '../Collapse';
+import { DashboardSidebarButton } from '../DashboardSidebarButton';
+import { DashboardSidebarContext } from '../DashboardSidebarProvider';
+import { useLogic } from './useLogic';
+export const DashboardMenuSidebarButton = forwardRef((props, ref) => {
+    const { collapsedIn, isPopupOpen, setIsPopupOpen } = useContext(DashboardSidebarContext);
+    const { handleTogglePopover, popoverAnchorRef } = useLogic({
+        isPopupOpen,
+        setIsPopupOpen,
+        ref,
+    });
+    const { children, popover, ...buttonProps } = props;
+    return (_jsxs(_Fragment, { children: [_jsx(DashboardSidebarButton, { ref: popoverAnchorRef, ...buttonProps, onClick: handleTogglePopover, selected: isPopupOpen, children: _jsx(Collapse, { orientation: "horizontal", in: collapsedIn, children: children }) }), popover] }));
+});

package/components/DashboardMenuSidebarButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DashboardMenuSidebarButton';
+export * from './types';

package/components/DashboardMenuSidebarButton/index.js

@@ -0,0 +1,2 @@
+export * from './DashboardMenuSidebarButton';
+export * from './types';

package/components/DashboardMenuSidebarButton/public.d.ts

@@ -0,0 +1,2 @@
+export { DashboardMenuSidebarButton } from './DashboardMenuSidebarButton';
+export type { DashboardMenuSidebarButtonProps } from './types';

package/components/DashboardMenuSidebarButton/public.js

@@ -0,0 +1 @@
+export { DashboardMenuSidebarButton } from './DashboardMenuSidebarButton';

package/components/DashboardMenuSidebarButton/types.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import { type ButtonProps } from '../Button';
+export type DashboardMenuSidebarButtonProps = Omit<ButtonProps, 'onClick'> & {
+    /**
+     * Контент popover
+     */
+    popover: ReactNode;
+};

package/components/DashboardMenuSidebarButton/useLogic/useLogic.js

@@ -0,0 +1,10 @@
+import { useContext, useImperativeHandle } from 'react';
+import { DashboardSidebarContext } from '../../DashboardSidebarProvider';
+export const useLogic = ({ setIsPopupOpen, isPopupOpen, ref, }) => {
+    const { popoverAnchorRef } = useContext(DashboardSidebarContext);
+    useImperativeHandle(ref, () => popoverAnchorRef.current);
+    const handleTogglePopover = () => {
+        setIsPopupOpen(!isPopupOpen);
+    };
+    return { handleTogglePopover, popoverAnchorRef };
+};

package/components/DashboardSidebar/DashboardSidebar.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type DashboardSidebarProps } from './types';
+/**
+ * Основной sidebar приложения
+ */
+export declare const DashboardSidebar: import("react").ForwardRefExoticComponent<DashboardSidebarProps & import("react").RefAttributes<HTMLBaseElement>>;

package/components/DashboardSidebar/DashboardSidebar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { DashboardSidebarSkeleton } from '../DashboardSidebarSkeleton';
+import { NavMenu } from '../NavMenu';
+import { PinButton } from '../PinButton';
+import { classNames } from '../utils';
+import { dashboardSidebarClassnames } from './constants';
+import { SidebarNav } from './SidebarNav';
+import { Footer, SidebarContent, SidebarHeader, SidebarRoot, StyledPaper, Wrapper, } from './styles';
+import { useLogic } from './useLogic';
+/**
+ * Основной sidebar приложения
+ */
+export const DashboardSidebar = forwardRef((props, ref) => {
+    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, className, menu, header, isLoading, } = useLogic(props);
+    if (isLoading) {
+        return _jsx(DashboardSidebarSkeleton, {});
+    }
+    return (_jsx(Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, children: _jsx(SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classNames(className, dashboardSidebarClassnames.root), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, inert: isMobile && !isPinned ? '' : undefined, children: _jsxs(StyledPaper, { variant: "outlined", children: [_jsxs(SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && _jsx(SidebarHeader, { children: header }), _jsx(SidebarNav, { menu: _jsx(NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), _jsx(Footer, { children: _jsx(PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
+});

package/components/DashboardSidebar/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const dashboardSidebarClassnames: {
+    root: string;
+};

package/components/DashboardSidebar/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils';
+export const dashboardSidebarClassnames = {
+    root: createUIKitClassname('dashboard-layout-sidebar'),
+};

package/components/DashboardSidebar/index.d.ts

@@ -0,0 +1,3 @@
+export type { DashboardSidebarProps } from './types';
+export { DashboardSidebar } from './DashboardSidebar';
+export { dashboardSidebarClassnames } from './constants';

package/components/DashboardSidebar/index.js

@@ -0,0 +1,2 @@
+export { DashboardSidebar } from './DashboardSidebar';
+export { dashboardSidebarClassnames } from './constants';

package/components/DashboardSidebar/styles.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isPinned: boolean;
+    $alertHeight: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledPaper: import("../styled").StyledComponent<Omit<import("../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SidebarRoot: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isPinned: boolean;
+    $collapsedIn: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SidebarHeader: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SidebarContent: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $collapsedIn: boolean;
+    $isPinned: boolean;
+    $hasHeader: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Footer: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/components/DashboardSidebar/styles.js

@@ -0,0 +1,124 @@
+import { HEADER_HEIGHT_MOBILE } from '../DashboardLayout/constants';
+import { Paper } from '../Paper';
+import { pinButtonClassnames } from '../PinButton';
+import { styled } from '../styled';
+export const Wrapper = styled('div', {
+    shouldForwardProp: (prop) => !['$isPinned', '$alertHeight'].includes(prop),
+}) `
+  position: relative;
+
+  grid-column: 1;
+  grid-row: 2 / -1;
+
+  width: ${({ $isPinned }) => ($isPinned ? '242px' : '58px')};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: absolute;
+    z-index: ${({ theme }) => theme.zIndex.appBar - 1};
+    top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${HEADER_HEIGHT_MOBILE}) `};
+    bottom: 0;
+    transform: ${({ $isPinned }) => $isPinned ? 'translateX(0px)' : 'translateX(-100vw)'};
+
+    overflow: hidden auto;
+
+    width: 100vw;
+    min-width: 100vw;
+
+    transition: ${({ theme }) => {
+    return theme.transitions.create(['transform'], {
+        duration: theme.transitions.duration.standard,
+    });
+}};
+  }
+`;
+export const StyledPaper = styled(Paper) `
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border: unset;
+    border-radius: 0;
+  }
+`;
+export const SidebarRoot = styled('aside', {
+    shouldForwardProp: (prop) => !['$isPinned', '$collapsedIn'].includes(prop),
+}) `
+  position: ${({ $isPinned }) => ($isPinned ? 'relative' : 'absolute')};
+  z-index: ${({ theme }) => theme.zIndex.appBar - 1};
+
+  width: ${({ $collapsedIn, $isPinned }) => $isPinned || (!$isPinned && $collapsedIn) ? '242px' : '58px'};
+  height: 100%;
+
+  background-color: ${({ theme }) => theme.palette.background.default};;
+  border-radius: ${({ theme }) => theme.shape.medium};
+  box-shadow: ${({ theme, $isPinned, $collapsedIn }) => ($isPinned || !$collapsedIn ? 'unset' : theme.elevation[300])};
+  
+  transition: ${({ theme }) => {
+    return theme.transitions.create(['min-width', 'width', 'box-shadow'], {
+        duration: theme.transitions.duration.standard,
+        easing: theme.transitions.easing.easeInOut,
+    });
+}};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: relative;
+
+    width: 100vw;
+    min-width: 100vw;
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border-radius: 0;
+  }
+`;
+export const SidebarHeader = styled.header `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(4)};
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
+`;
+export const SidebarContent = styled.div `
+  overflow: hidden auto;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: ${({ theme }) => theme.spacing(4)};
+
+  width: ${({ $collapsedIn, $isPinned }) => $isPinned || (!$isPinned && $collapsedIn) ? '240px' : '56px'};
+  padding: ${({ theme }) => theme.spacing(4, 2, 2)};
+
+  transition: ${({ theme }) => {
+    return theme.transitions.create(['width'], {
+        duration: theme.transitions.duration.standard,
+        easing: theme.transitions.easing.easeInOut,
+    });
+}};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: inherit;
+    padding: ${({ theme, $hasHeader }) => theme.spacing($hasHeader ? 0 : 2, 0, 0, 0)};
+  }
+`;
+export const Footer = styled.footer `
+  display: flex;
+  flex-shrink: 0;
+
+  box-sizing: content-box;
+  height: 64px;
+  margin-top: auto;
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
+  border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
+  
+  .${pinButtonClassnames.root} {
+    padding-left: ${({ theme }) => theme.microSpacing(9)};;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/components/DashboardSidebar/types.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { NavMenuProps } from '../NavMenu';
+export type DashboardSidebarProps = {
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Пропс для передачи контента в заголовок сайдбара
+     * @example <Sidebar header={<SidebarButton />>} >
+     */
+    header?: ReactNode;
+    /**
+     * Описание меню
+     */
+    menu: {
+        /**
+         * Пункты меню
+         */
+        items: NavMenuProps['items'];
+    };
+    /**
+     * Если true, отображается skeleton
+     */
+    isLoading?: boolean;
+};

package/components/DashboardSidebar/useLogic/useLogic.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { type DashboardSidebarProps } from '../types';
+export declare const useLogic: (props: DashboardSidebarProps) => {
+    isPinned: boolean;
+    isMobile: boolean;
+    collapsedIn: boolean;
+    onTogglePin: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    alertHeight: number;
+    className: string | undefined;
+    menu: {
+        items: [key: string, value: {
+            icon: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+            text: import("react").ReactNode;
+            counter?: import("../../NavMenu/Item").CounterProps | undefined;
+            active?: boolean | undefined;
+            items?: [key: string, value: {
+                text: import("react").ReactNode;
+                active: boolean;
+                component: import("react").ElementType;
+                counter?: import("../../NavMenu/Item").CounterProps | undefined;
+            }][] | undefined;
+            component?: import("react").ElementType | undefined;
+        } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & {
+            component?: import("react").ElementType | undefined;
+        }][];
+    };
+    header: import("react").ReactNode;
+    isLoading: boolean;
+};