@astral/ui 4.72.0 → 4.73.1

package/components/DashboardLayout/Header/styles.js

@@ -70,7 +70,9 @@ export const HeaderSection = styled.div `
   align-items: center;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    flex-grow: 1;
+    flex-shrink: 0;
+
+    min-width: 0;
   }
 `;
 export const HeaderContentSection = styled(HeaderSection) `
@@ -78,6 +80,8 @@ export const HeaderContentSection = styled(HeaderSection) `
   justify-content: flex-end;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    flex-shrink: unset;
     gap: ${({ theme }) => theme.spacing(2)};
 
     &.${dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
@@ -119,6 +123,7 @@ export const HeaderContent = styled.div `
   justify-content: space-between;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
     padding: 0;
   }
 `;
@@ -127,6 +132,17 @@ export const HeaderContent = styled.div `
  */
 export const PriorityFeatureWrapper = styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    justify-content: flex-end;
+
+    min-width: 0;
+
+    &.${dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+      & .${menuOrganizationClassnames.button} {
+        padding: ${({ theme }) => theme.spacing(2, 0)};
+      }
+    }
+
     &.${dashboardLayoutHeaderClassnames.featureInSidebar} {
       position: absolute;
       z-index: ${({ theme }) => theme.zIndex.appBar - 1};
@@ -188,6 +204,10 @@ export const PriorityFeatureWrapper = styled.div `
       }
 
       &.${dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+        & .${menuOrganizationClassnames.button} {
+          padding: ${({ theme }) => theme.spacing(2, 0)};
+        }
+
         & .${dashboardLayoutHeaderClassnames.profile} {
           display: block;
           flex-grow: 1;

package/components/MenuOrganization/OrganizationButton/styles.js

@@ -27,6 +27,7 @@ export const StyledButton = styled(Button) `
     justify-content: space-between;
 
     width: 100%;
+    min-width: unset;
     max-width: unset;
 
     border-radius: 0;
@@ -48,6 +49,8 @@ export const Container = styled.div `
   display: flex;
   flex-direction: column;
 
+  /* Позволяет элементу сжиматься до ширины контейнера */
+  min-width: 0;
   max-width: 260px;
 `;
 export const StyledTypography = styled(Typography, {

package/components/PageAside/MobileAsideButton/MobileAsideButton.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type MobileAsideButtonProps = {
+    content?: ReactNode;
+};
+export declare const MobileAsideButton: ({ content }: MobileAsideButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/components/PageAside/MobileAsideButton/MobileAsideButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDOutlineMd } from '../../../icons/ChevronDOutlineMd';
+import { useToggle } from '../../useToggle';
+import { DrawerContent, StyledBottomDrawer, StyledButton } from './styles';
+export const MobileAsideButton = ({ content }) => {
+    const [isDrawerOpen, handleOpenDrawer, handleCloseDrawer] = useToggle({
+        initialState: false,
+    });
+    if (!content) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(StyledButton, { variant: "outlined", color: "grey", endIcon: _jsx(ChevronDOutlineMd, {}), onClick: handleOpenDrawer, children: "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F" }), _jsx(StyledBottomDrawer, { title: "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F", open: isDrawerOpen, onClose: handleCloseDrawer, children: _jsx(DrawerContent, { children: content }) })] }));
+};

package/components/PageAside/MobileAsideButton/index.d.ts

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

package/components/PageAside/MobileAsideButton/index.js

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

package/components/PageAside/MobileAsideButton/styles.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const StyledButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DrawerContent: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledBottomDrawer: import("../../styled").StyledComponent<{
+    title?: string | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    drawerHeaderHeight?: number | undefined;
+    headerContent?: import("react").ReactNode;
+} & import("../..").WithoutEmotionSpecific<Omit<import("@mui/material").DrawerProps, "title" | "anchor" | "variant">> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/PageAside/MobileAsideButton/styles.js

@@ -0,0 +1,31 @@
+import { paperClasses } from '@mui/material';
+import { BottomDrawer } from '../../BottomDrawer';
+import { OFFSET_TOP_SCREEN } from '../../BottomDrawer/constants';
+import { Button } from '../../Button';
+import { styled } from '../../styled';
+export const StyledButton = styled(Button) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    order: 3;
+
+    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+  }
+`;
+export const DrawerContent = styled.div `
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+export const StyledBottomDrawer = styled(BottomDrawer) `
+  & .${paperClasses.root} {
+     height: calc(100vh - ${OFFSET_TOP_SCREEN});
+
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    @supports (height: 100dvh) {
+      height: calc(100dvh - ${OFFSET_TOP_SCREEN});
+    }
+  }
+`;

package/components/PageAside/PageAside.d.ts

@@ -1,9 +1,2 @@
-import { type ReactNode } from 'react';
-export type PageAsideProps = {
-    children: ReactNode;
-    /**
-     * Название класса, применяется к корневому компоненту
-     */
-    className?: string;
-};
-export declare const PageAside: ({ children, className }: PageAsideProps) => import("react/jsx-runtime").JSX.Element;
+import { type PageAsideProps } from './types';
+export declare const PageAside: ({ children, className, header, navigation, }: PageAsideProps) => import("react/jsx-runtime").JSX.Element;

package/components/PageAside/PageAside.js

@@ -1,5 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Wrapper } from './styles';
-export const PageAside = ({ children, className }) => {
-    return _jsx(Wrapper, { className: className, children: children });
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
+import { pageAsideClassnames } from './constants';
+import { usePageAside } from './hooks';
+import { MobileAsideButton } from './MobileAsideButton';
+import { AsideHeader, MobileAsideHeader, MobileAsideNavigation, StyledDivider, Wrapper, } from './styles';
+const asideCva = cva(pageAsideClassnames.root, {
+    variants: {
+        withHeader: {
+            true: pageAsideClassnames.withHeader,
+        },
+    },
+});
+export const PageAside = ({ children, className, header, navigation, }) => {
+    const { pageHeaderContainer, isMobileNavigationVisible } = usePageAside({
+        navigation,
+    });
+    return (_jsxs(_Fragment, { children: [isMobileNavigationVisible &&
+                createPortal(_jsx(MobileAsideNavigation, { className: pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && _jsx(MobileAsideHeader, { children: header }), _jsx(MobileAsideButton, { content: children }), _jsxs(Wrapper, { className: classNames(className, asideCva({ withHeader: Boolean(header) })), children: [header && (_jsxs(AsideHeader, { children: [header, _jsx(StyledDivider, {})] })), navigation, children] })] }));
 };

package/components/PageAside/constants.d.ts

@@ -1 +1,6 @@
 export declare const PAGE_ASIDE_WIDTH = "320px";
+export declare const pageAsideClassnames: {
+    mobileNavigation: string;
+    withHeader: string;
+    root: string;
+};

package/components/PageAside/constants.js

@@ -1 +1,7 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const PAGE_ASIDE_WIDTH = '320px';
+export const pageAsideClassnames = {
+    mobileNavigation: createUIKitClassname('page-aside__mobile-navigation'),
+    withHeader: createUIKitClassname('page-aside_with-header'),
+    root: createUIKitClassname('page-aside'),
+};

package/components/PageAside/hooks/index.d.ts

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

package/components/PageAside/hooks/index.js

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

package/components/PageAside/hooks/usePageAside/index.d.ts

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

package/components/PageAside/hooks/usePageAside/index.js

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

package/components/PageAside/hooks/usePageAside/usePageAside.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+type UsePageAsideParams = {
+    navigation?: ReactNode;
+};
+export declare const usePageAside: ({ navigation }: UsePageAsideParams) => {
+    pageHeaderContainer: Element | null;
+    isMobileNavigationVisible: false | "" | 0 | 0n | Element | null | undefined;
+};
+export {};

package/components/PageAside/hooks/usePageAside/usePageAside.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { pageHeaderClassnames } from '../../../PageHeader';
+export const usePageAside = ({ navigation }) => {
+    const [pageHeaderContainer, setPageHeaderContainer] = useState(null);
+    useEffect(() => {
+        if (!navigation) {
+            return;
+        }
+        const container = document.querySelector(`.${pageHeaderClassnames.root}`);
+        setPageHeaderContainer(container);
+    }, []);
+    const isMobileNavigationVisible = navigation && pageHeaderContainer;
+    return {
+        pageHeaderContainer,
+        isMobileNavigationVisible,
+    };
+};

package/components/PageAside/index.d.ts

@@ -1,2 +1,6 @@
 export { PAGE_ASIDE_WIDTH } from './constants';
 export * from './PageAside';
+export type { PageAsideProps } from './types';
+export { usePageAside } from './hooks';
+export { MobileAsideButton } from './MobileAsideButton';
+export { pageAsideClassnames } from './constants';

package/components/PageAside/index.js

@@ -1,2 +1,5 @@
 export { PAGE_ASIDE_WIDTH } from './constants';
 export * from './PageAside';
+export { usePageAside } from './hooks';
+export { MobileAsideButton } from './MobileAsideButton';
+export { pageAsideClassnames } from './constants';

package/components/PageAside/public.d.ts

@@ -1 +1,3 @@
-export { PageAside, type PageAsideProps } from './PageAside';
+export { pageAsideClassnames } from './constants';
+export { PageAside } from './PageAside';
+export type { PageAsideProps } from './types';

package/components/PageAside/public.js

@@ -1 +1,2 @@
+export { pageAsideClassnames } from './constants';
 export { PageAside } from './PageAside';

package/components/PageAside/styles.d.ts

@@ -3,3 +3,18 @@ export declare const Wrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const MobileAsideHeader: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AsideHeader: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledDivider: import("../styled").StyledComponent<import("../Divider").DividerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const MobileAsideNavigation: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageAside/styles.js

@@ -1,5 +1,7 @@
+import { Divider } from '../Divider';
+import { pageAsideNavigationClassnames } from '../PageAsideNavigation/constants';
 import { styled } from '../styled';
-import { PAGE_ASIDE_WIDTH } from './constants';
+import { PAGE_ASIDE_WIDTH, pageAsideClassnames } from './constants';
 export const Wrapper = styled.aside `
   overflow: auto;
   grid-column: 2;
@@ -11,19 +13,46 @@ export const Wrapper = styled.aside `
   border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
+  &.${pageAsideClassnames.withHeader} {
+    & .${pageAsideNavigationClassnames.root} {
+      padding-top: ${({ theme }) => theme.spacing(5)};
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding: ${({ theme }) => theme.spacing(4)};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    overflow: unset;
+    display: none;
+  }
+`;
+export const MobileAsideHeader = styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
     order: 3;
 
-    width: unset;
-    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+    padding: ${({ theme }) => theme.microSpacing(0, 8, 5)};
+  }
+`;
+export const AsideHeader = styled.div `
+  position: relative;
+
+  padding: ${({ theme }) => theme.spacing(1, 0, 4)};
+`;
+export const StyledDivider = styled(Divider) `
+  position: absolute;
+  bottom: 0;
+  left: ${({ theme }) => theme.spacing(-6)};
 
-    background-color: ${({ theme }) => theme.palette.background.default};  
-    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
-    border-radius: ${({ theme }) => theme.shape.medium};
+  width: ${({ theme }) => `calc(100% + ${theme.spacing(12)})`};
+`;
+export const MobileAsideNavigation = styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
   }
 `;

package/components/PageAside/types.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+export type PageAsideProps = {
+    children?: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Заголовок боковой панели
+     */
+    header?: ReactNode;
+    /**
+     * Компонент для отображения навигации
+     * @example
+     * <PageAside navigation={
+     *   <PageAsideNavigation>
+     *     <PageAsideNavigationItem>
+     *       Home
+     *     </PageAsideNavigationItem>
+     *   </PageAsideNavigation>}
+     * />
+     */
+    navigation?: ReactNode;
+};

package/components/PageAside/types.js

@@ -0,0 +1 @@
+export {};

package/components/PageAsideBlock/styles.js

@@ -22,11 +22,11 @@ export const Wrapper = styled.div `
     padding: ${({ theme }) => theme.spacing(4, 0)};
 
     :first-of-type {
-      padding: ${({ theme }) => theme.spacing(3, 0, 4)};
+      padding: ${({ theme }) => theme.spacing(0, 0, 4)};
     }
 
     :last-of-type {
-      padding: ${({ theme }) => theme.spacing(4, 0, 3)};
+      padding: ${({ theme }) => theme.spacing(4, 0, 0)};
     }
   }
 `;

package/components/PageAsideNavigation/PageAsideNavigation.d.ts

@@ -0,0 +1,2 @@
+import { type PageAsideNavigationProps } from './types';
+export declare const PageAsideNavigation: ({ addonNavigation, children, className, addonNavigationPosition, }: PageAsideNavigationProps) => import("react/jsx-runtime").JSX.Element;

package/components/PageAsideNavigation/PageAsideNavigation.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScrollToActiveElement } from '../useScrollToActiveElement';
+import { classNames } from '../utils/classNames';
+import { pageAsideNavigationClassnames } from './constants';
+import { AddonNavigationWrapper, NavigationList, Wrapper } from './styles';
+export const PageAsideNavigation = ({ addonNavigation, children, className, addonNavigationPosition = 'start', }) => {
+    const { containerRef } = useScrollToActiveElement();
+    return (_jsxs(Wrapper, { className: classNames(pageAsideNavigationClassnames.root, className), children: [addonNavigationPosition === 'start' && addonNavigation && (_jsx(AddonNavigationWrapper, { children: addonNavigation })), _jsx(NavigationList, { ref: containerRef, children: children }), addonNavigationPosition === 'end' && addonNavigation && (_jsx(AddonNavigationWrapper, { children: addonNavigation }))] }));
+};

package/components/PageAsideNavigation/PageAsideNavigationItem/PageAsideNavigationItem.d.ts

@@ -0,0 +1,18 @@
+import { type ElementType, type ForwardedRef } from 'react';
+import { type PageAsideNavigationItemProps } from './types';
+export declare const PageAsideNavigationItemInner: <TComponent extends ElementType = "a">({ children, component, icon, onClick, isActive, className, ...props }: PageAsideNavigationItemProps<TComponent>, ref: ForwardedRef<TComponent>) => import("react/jsx-runtime").JSX.Element;
+export declare const PageAsideNavigationItem: <TComponent extends ElementType = "a">(props: {
+    children: import("react").ReactNode;
+    className?: string | undefined;
+    isActive?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+    icon?: import("react").ReactNode;
+    component?: TComponent | undefined;
+} & Omit<import("react").ComponentPropsWithRef<TComponent>, keyof {
+    children: import("react").ReactNode;
+    className?: string | undefined;
+    isActive?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+    icon?: import("react").ReactNode;
+    component?: ElementType | undefined;
+}> & import("react").RefAttributes<TComponent>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/components/PageAsideNavigation/PageAsideNavigationItem/PageAsideNavigationItem.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRefWithGeneric } from '../../forwardRefWithGeneric';
+import { OverflowTypography } from '../../OverflowTypography';
+import { cva } from '../../utils/cva';
+import { pageAsideNavigationItemClassnames } from './constants';
+import { IconWrapper, Wrapper } from './styles';
+const itemCva = cva(pageAsideNavigationItemClassnames.root, {
+    variants: {
+        isActive: {
+            true: pageAsideNavigationItemClassnames.isActive,
+        },
+    },
+});
+export const PageAsideNavigationItemInner = ({ children, component, icon, onClick, isActive, className, ...props }, ref) => {
+    const Component = component ?? 'a';
+    return (_jsx(Wrapper, { className: className, children: _jsxs(Component, { ref: ref, ...props, className: itemCva({ isActive }), onClick: onClick, "aria-selected": isActive, children: [_jsx(IconWrapper, { children: icon }), _jsx(OverflowTypography, { children: children })] }) }));
+};
+export const PageAsideNavigationItem = forwardRefWithGeneric(PageAsideNavigationItemInner);

package/components/PageAsideNavigation/PageAsideNavigationItem/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const pageAsideNavigationItemClassnames: {
+    root: string;
+    isActive: string;
+};

package/components/PageAsideNavigation/PageAsideNavigationItem/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const pageAsideNavigationItemClassnames = {
+    root: createUIKitClassname('page-aside-navigation__item'),
+    isActive: createUIKitClassname('page-aside-navigation__item_active'),
+};

package/components/PageAsideNavigation/PageAsideNavigationItem/index.d.ts

@@ -0,0 +1,3 @@
+export { PageAsideNavigationItem } from './PageAsideNavigationItem';
+export { pageAsideNavigationItemClassnames } from './constants';
+export type { PageAsideNavigationItemProps } from './types';

package/components/PageAsideNavigation/PageAsideNavigationItem/index.js

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

package/components/PageAsideNavigation/PageAsideNavigationItem/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const IconWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageAsideNavigation/PageAsideNavigationItem/styles.js

@@ -0,0 +1,113 @@
+import { svgIconClassnames } from '../../SvgIcon/constants';
+import { styled } from '../../styled';
+import { pageAsideNavigationItemClassnames } from './constants';
+export const Wrapper = styled.li `
+  cursor: pointer;
+
+  height: 44px;
+
+  & .${pageAsideNavigationItemClassnames.root} {
+    cursor: pointer;
+    
+    position: relative;
+
+    overflow: hidden;
+    display: flex;
+    gap: ${({ theme }) => theme.spacing(3)};
+    align-items: center;
+
+    width: 100%;
+    margin: 0;
+    padding: ${({ theme }) => theme.microSpacing(6, 5)};
+
+    color: ${({ theme }) => theme.palette.grey[800]};
+    text-decoration: none;
+
+    /* Сбрасываем стандартные стили */
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border: none;
+    border-radius: ${({ theme }) => theme.shape.small};
+    outline: none;
+
+    &:visited, &:link {
+      color: ${({ theme }) => theme.palette.grey[800]};
+    }
+
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
+
+    &:active {
+      color: ${({ theme }) => theme.palette.primary[900]};
+    }
+  }
+
+  & .${pageAsideNavigationItemClassnames.isActive} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset: 0;
+
+      width: 10px;
+
+      border-left: 3px solid ${({ theme }) => theme.palette.primary[800]};
+    }
+  }
+
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 40px;
+    -webkit-tap-highlight-color: transparent;
+    
+    & .${pageAsideNavigationItemClassnames.root} {
+      box-sizing: border-box;
+      height: inherit;
+      padding: ${({ theme }) => theme.microSpacing(5, 6)};
+
+      border: 1px solid ${({ theme }) => theme.palette.grey[400]};
+      border-radius: ${({ theme }) => theme.shape.medium};
+
+      transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {
+    duration: theme.transitions.duration.shortest,
+})};
+      
+      &:hover {
+        color: ${({ theme }) => theme.palette.grey[800]};
+      }
+
+      &:active {
+        color: ${({ theme }) => theme.palette.grey[800]};
+
+        border-color: ${({ theme }) => theme.palette.grey[800]};
+      }
+    }
+
+    & .${pageAsideNavigationItemClassnames.isActive} {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+      border-color: ${({ theme }) => theme.palette.grey[800]};
+
+      &::before {
+        display: none;
+      }
+
+      &:active {
+        border-color: ${({ theme }) => theme.palette.grey[400]};
+      }
+    }
+  }
+`;
+export const IconWrapper = styled.div `
+  display: flex;
+
+  & .${svgIconClassnames.root} {
+    width: 20px;
+    height: 20px;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/components/PageAsideNavigation/PageAsideNavigationItem/types.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
+type PageAsideNavigationItemOwnProps<TComponent extends ElementType> = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Флаг активности элемента
+     */
+    isActive?: boolean;
+    /**
+     * Функция вызываемая при клике на элемент
+     */
+    onClick?: () => void;
+    /**
+     * Иконка элемента
+     */
+    icon?: ReactNode;
+    /**
+     * Тип элемента
+     */
+    component?: TComponent;
+};
+export type PageAsideNavigationItemProps<TComponent extends ElementType> = PageAsideNavigationItemOwnProps<TComponent> & Omit<ComponentPropsWithRef<TComponent>, keyof PageAsideNavigationItemOwnProps<ElementType>>;
+export {};

package/components/PageAsideNavigation/PageAsideNavigationItem/types.js

@@ -0,0 +1 @@
+export {};