@astral/ui 4.71.4 → 4.73.0

package/node/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/node/components/PageAside/hooks/usePageAside/usePageAside.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageAside = void 0;
+const react_1 = require("react");
+const PageHeader_1 = require("../../../PageHeader");
+const usePageAside = ({ navigation }) => {
+    const [pageHeaderContainer, setPageHeaderContainer] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!navigation) {
+            return;
+        }
+        const container = document.querySelector(`.${PageHeader_1.pageHeaderClassnames.root}`);
+        setPageHeaderContainer(container);
+    }, []);
+    const isMobileNavigationVisible = navigation && pageHeaderContainer;
+    return {
+        pageHeaderContainer,
+        isMobileNavigationVisible,
+    };
+};
+exports.usePageAside = usePageAside;

package/node/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/node/components/PageAside/index.js

@@ -14,7 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PAGE_ASIDE_WIDTH = void 0;
+exports.pageAsideClassnames = exports.MobileAsideButton = exports.usePageAside = exports.PAGE_ASIDE_WIDTH = void 0;
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "PAGE_ASIDE_WIDTH", { enumerable: true, get: function () { return constants_1.PAGE_ASIDE_WIDTH; } });
 __exportStar(require("./PageAside"), exports);
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "usePageAside", { enumerable: true, get: function () { return hooks_1.usePageAside; } });
+var MobileAsideButton_1 = require("./MobileAsideButton");
+Object.defineProperty(exports, "MobileAsideButton", { enumerable: true, get: function () { return MobileAsideButton_1.MobileAsideButton; } });
+var constants_2 = require("./constants");
+Object.defineProperty(exports, "pageAsideClassnames", { enumerable: true, get: function () { return constants_2.pageAsideClassnames; } });

package/node/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/node/components/PageAside/public.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageAside = void 0;
+exports.PageAside = exports.pageAsideClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "pageAsideClassnames", { enumerable: true, get: function () { return constants_1.pageAsideClassnames; } });
 var PageAside_1 = require("./PageAside");
 Object.defineProperty(exports, "PageAside", { enumerable: true, get: function () { return PageAside_1.PageAside; } });

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

@@ -3,3 +3,18 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Divider").DividerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const MobileAsideNavigation: import("@emotion/styled/dist/declarations/src/types").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/node/components/PageAside/styles.js

@@ -1,32 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wrapper = void 0;
+exports.MobileAsideNavigation = exports.StyledDivider = exports.AsideHeader = exports.MobileAsideHeader = exports.Wrapper = void 0;
+const Divider_1 = require("../Divider");
+const constants_1 = require("../PageAsideNavigation/constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.aside `
   overflow: auto;
   grid-column: 2;
   grid-row: 2;
 
-  width: ${constants_1.PAGE_ASIDE_WIDTH};
+  width: ${constants_2.PAGE_ASIDE_WIDTH};
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
   border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
+  &.${constants_2.pageAsideClassnames.withHeader} {
+    & .${constants_1.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;
+  }
+`;
+exports.MobileAsideHeader = styled_1.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)};
+  }
+`;
+exports.AsideHeader = styled_1.styled.div `
+  position: relative;
+
+  padding: ${({ theme }) => theme.spacing(1, 0, 4)};
+`;
+exports.StyledDivider = (0, styled_1.styled)(Divider_1.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)})`};
+`;
+exports.MobileAsideNavigation = styled_1.styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
   }
 `;

package/node/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/node/components/PageAside/types.js

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

package/node/components/PageAsideBlock/styles.js

@@ -25,11 +25,11 @@ exports.Wrapper = styled_1.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/node/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/node/components/PageAsideNavigation/PageAsideNavigation.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageAsideNavigation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useScrollToActiveElement_1 = require("../useScrollToActiveElement");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const PageAsideNavigation = ({ addonNavigation, children, className, addonNavigationPosition = 'start', }) => {
+    const { containerRef } = (0, useScrollToActiveElement_1.useScrollToActiveElement)();
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(constants_1.pageAsideNavigationClassnames.root, className), children: [addonNavigationPosition === 'start' && addonNavigation && ((0, jsx_runtime_1.jsx)(styles_1.AddonNavigationWrapper, { children: addonNavigation })), (0, jsx_runtime_1.jsx)(styles_1.NavigationList, { ref: containerRef, children: children }), addonNavigationPosition === 'end' && addonNavigation && ((0, jsx_runtime_1.jsx)(styles_1.AddonNavigationWrapper, { children: addonNavigation }))] }));
+};
+exports.PageAsideNavigation = PageAsideNavigation;

package/node/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/node/components/PageAsideNavigation/PageAsideNavigationItem/PageAsideNavigationItem.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageAsideNavigationItem = exports.PageAsideNavigationItemInner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forwardRefWithGeneric_1 = require("../../forwardRefWithGeneric");
+const OverflowTypography_1 = require("../../OverflowTypography");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const itemCva = (0, cva_1.cva)(constants_1.pageAsideNavigationItemClassnames.root, {
+    variants: {
+        isActive: {
+            true: constants_1.pageAsideNavigationItemClassnames.isActive,
+        },
+    },
+});
+const PageAsideNavigationItemInner = ({ children, component, icon, onClick, isActive, className, ...props }, ref) => {
+    const Component = component ?? 'a';
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsxs)(Component, { ref: ref, ...props, className: itemCva({ isActive }), onClick: onClick, "aria-selected": isActive, children: [(0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { children: icon }), (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { children: children })] }) }));
+};
+exports.PageAsideNavigationItemInner = PageAsideNavigationItemInner;
+exports.PageAsideNavigationItem = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(exports.PageAsideNavigationItemInner);

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

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

package/node/components/PageAsideNavigation/PageAsideNavigationItem/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationItemClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.pageAsideNavigationItemClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('page-aside-navigation__item'),
+    isActive: (0, createUIKitClassname_1.createUIKitClassname)('page-aside-navigation__item_active'),
+};

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

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

package/node/components/PageAsideNavigation/PageAsideNavigationItem/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationItemClassnames = exports.PageAsideNavigationItem = void 0;
+var PageAsideNavigationItem_1 = require("./PageAsideNavigationItem");
+Object.defineProperty(exports, "PageAsideNavigationItem", { enumerable: true, get: function () { return PageAsideNavigationItem_1.PageAsideNavigationItem; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "pageAsideNavigationItemClassnames", { enumerable: true, get: function () { return constants_1.pageAsideNavigationItemClassnames; } });

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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/node/components/PageAsideNavigation/PageAsideNavigationItem/styles.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWrapper = exports.Wrapper = void 0;
+const constants_1 = require("../../SvgIcon/constants");
+const styled_1 = require("../../styled");
+const constants_2 = require("./constants");
+exports.Wrapper = styled_1.styled.li `
+  cursor: pointer;
+
+  height: 44px;
+
+  & .${constants_2.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]};
+    }
+  }
+
+  & .${constants_2.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;
+    
+    & .${constants_2.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]};
+      }
+    }
+
+    & .${constants_2.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]};
+      }
+    }
+  }
+`;
+exports.IconWrapper = styled_1.styled.div `
+  display: flex;
+
+  & .${constants_1.svgIconClassnames.root} {
+    width: 20px;
+    height: 20px;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/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/node/components/PageAsideNavigation/PageAsideNavigationItem/types.js

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

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

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

package/node/components/PageAsideNavigation/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.pageAsideNavigationClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('page-aside-navigation'),
+};

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

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

package/node/components/PageAsideNavigation/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationClassnames = exports.pageAsideNavigationItemClassnames = exports.PageAsideNavigationItem = exports.PageAsideNavigation = void 0;
+var PageAsideNavigation_1 = require("./PageAsideNavigation");
+Object.defineProperty(exports, "PageAsideNavigation", { enumerable: true, get: function () { return PageAsideNavigation_1.PageAsideNavigation; } });
+var PageAsideNavigationItem_1 = require("./PageAsideNavigationItem");
+Object.defineProperty(exports, "PageAsideNavigationItem", { enumerable: true, get: function () { return PageAsideNavigationItem_1.PageAsideNavigationItem; } });
+Object.defineProperty(exports, "pageAsideNavigationItemClassnames", { enumerable: true, get: function () { return PageAsideNavigationItem_1.pageAsideNavigationItemClassnames; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "pageAsideNavigationClassnames", { enumerable: true, get: function () { return constants_1.pageAsideNavigationClassnames; } });

package/node/components/PageAsideNavigation/public.d.ts

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

package/node/components/PageAsideNavigation/public.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationItemClassnames = exports.PageAsideNavigationItem = exports.PageAsideNavigation = exports.pageAsideNavigationClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "pageAsideNavigationClassnames", { enumerable: true, get: function () { return constants_1.pageAsideNavigationClassnames; } });
+var PageAsideNavigation_1 = require("./PageAsideNavigation");
+Object.defineProperty(exports, "PageAsideNavigation", { enumerable: true, get: function () { return PageAsideNavigation_1.PageAsideNavigation; } });
+var PageAsideNavigationItem_1 = require("./PageAsideNavigationItem");
+Object.defineProperty(exports, "PageAsideNavigationItem", { enumerable: true, get: function () { return PageAsideNavigationItem_1.PageAsideNavigationItem; } });
+Object.defineProperty(exports, "pageAsideNavigationItemClassnames", { enumerable: true, get: function () { return PageAsideNavigationItem_1.pageAsideNavigationItemClassnames; } });

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").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 NavigationList: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const AddonNavigationWrapper: import("@emotion/styled/dist/declarations/src/types").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/node/components/PageAsideNavigation/styles.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddonNavigationWrapper = exports.NavigationList = exports.Wrapper = void 0;
+const styled_1 = require("../styled");
+exports.Wrapper = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(10)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    width: 100%;
+    padding: ${({ theme }) => theme.spacing(0, 0, 3)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  }
+`;
+exports.NavigationList = styled_1.styled.ul `
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Убираем видимую полосу прокрутки в firefox */
+    scrollbar-width: none;
+
+    overflow-x: auto;
+    flex-direction: row;
+    gap: ${({ theme }) => theme.spacing(2)};
+
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+
+    /* Убираем видимую полосу прокрутки в chrome */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+  }
+`;
+exports.AddonNavigationWrapper = styled_1.styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+  }
+`;

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export type PageAsideNavigationProps = {
+    children?: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Дополнительный контент для навигации
+     */
+    addonNavigation?: ReactNode;
+    /**
+     * Позиционирование дополнительного контента для навигации
+     * @default 'start'
+     */
+    addonNavigationPosition?: 'start' | 'end';
+};

package/node/components/PageAsideNavigation/types.js

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

package/node/components/PageContent/PageContentHeader/Description/Description.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 type DescriptionProps = {
     description?: ReactNode;
     isLoading?: boolean;
+    className?: string;
 };
-export declare const Description: ({ description, isLoading }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Description: ({ className, description, isLoading, }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/PageContent/PageContentHeader/Description/Description.js

@@ -4,13 +4,13 @@ exports.Description = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../../../Skeleton");
 const Typography_1 = require("../../../Typography");
-const Description = ({ description, isLoading }) => {
+const Description = ({ className, description, isLoading, }) => {
     if (!description && isLoading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { height: 20, width: 300 });
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { className: className, height: 20, width: 300 });
     }
     if (typeof description === 'string') {
-        return (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", children: description });
+        return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, variant: "body1", children: description }));
     }
-    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "div", variant: "body1", children: description }));
+    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, component: "div", variant: "body1", children: description }));
 };
 exports.Description = Description;