@alfalab/core-components-side-panel 1.1.0

package/dist/esm/components/closer/Component.js

@@ -0,0 +1,28 @@
+import { _ as __rest, a as __assign } from '../../tslib.es6-44d9de0b.js';
+import React, { useContext, useCallback } from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/esm';
+import { ModalContext } from '../../Context.js';
+import { IconButton } from '@alfalab/core-components-icon-button/dist/esm';
+import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
+
+var styles = {"closer":"side-panel__closer_8pghy","button":"side-panel__button_8pghy","sticky":"side-panel__sticky_8pghy"};
+require('./index.css')
+
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
+var Closer = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.size, size = _c === void 0 ? 's' : _c, sticky = _a.sticky, _d = _a.icon, icon = _d === void 0 ? CrossHeavyMIcon : _d, restProps = __rest(_a, ["className", "size", "sticky", "icon"]);
+    var onClose = useContext(ModalContext).onClose;
+    var handleClick = useCallback(function (event) {
+        onClose(event, 'closerClick');
+    }, [onClose]);
+    return (React.createElement("div", { className: cn(styles.closer, className, (_b = {},
+            _b[styles.sticky] = sticky,
+            _b)) },
+        React.createElement(IconButton, __assign({ size: size, className: styles.button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps))));
+};
+
+export { Closer };

package/dist/esm/components/closer/index.css

@@ -0,0 +1,46 @@
+/* hash: rxean */
+:root {
+    --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+:root {
+    --side-panel-closer-bg-color: var(--color-light-bg-primary-alpha-40);
+}
+.side-panel__closer_8pghy {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.side-panel__button_8pghy {
+    background: var(--side-panel-closer-bg-color);
+    -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+    border-radius: 50px;
+}
+.side-panel__sticky_8pghy {
+    position: sticky;
+    top: 0;
+}

package/dist/esm/components/content/Component.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+declare const Content: FC<ContentProps>;
+export { ContentProps, Content };

package/dist/esm/components/content/Component.desktop.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ContentProps } from "./Component";
+import { SidePanelDesktopProps } from "../../Component.desktop";
+type ContentDesktopProps = ContentProps & {
+    /**
+     * Размер
+     */
+    size?: SidePanelDesktopProps['size'];
+};
+declare const ContentDesktop: FC<ContentDesktopProps>;
+export { ContentDesktopProps, ContentDesktop };

package/dist/esm/components/content/Component.desktop.js

@@ -0,0 +1,16 @@
+import { _ as __rest, a as __assign } from '../../tslib.es6-44d9de0b.js';
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../Context.js';
+import { Content } from './Component.js';
+
+var styles = {"s":"side-panel__s_lq99o"};
+require('./desktop.css')
+
+var ContentDesktop = function (_a) {
+    var size = _a.size, className = _a.className, restProps = __rest(_a, ["size", "className"]);
+    return (React.createElement(Content, __assign({ className: cn(className, size && styles[size]) }, restProps)));
+};
+
+export { ContentDesktop };

package/dist/esm/components/content/Component.js

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/esm';
+import { ModalContext } from '../../Context.js';
+
+var styles = {"content":"side-panel__content_1yxkj","flex":"side-panel__flex_1yxkj"};
+require('./index.css')
+
+var Content = function (_a) {
+    var children = _a.children, className = _a.className;
+    var contentRef = useContext(ModalContext).contentRef;
+    return (React.createElement("div", { className: cn(styles.content, className, styles.flex), ref: contentRef }, children));
+};
+
+export { Content };

package/dist/esm/components/content/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ContentProps } from "./Component";
+type ContentMobileProps = ContentProps;
+declare const ContentMobile: FC<ContentMobileProps>;
+export { ContentMobileProps, ContentMobile };

package/dist/esm/components/content/Component.mobile.js

@@ -0,0 +1,16 @@
+import { _ as __rest, a as __assign } from '../../tslib.es6-44d9de0b.js';
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../Context.js';
+import { Content } from './Component.js';
+
+var styles = {"content":"side-panel__content_7gese"};
+require('./mobile.css')
+
+var ContentMobile = function (_a) {
+    var className = _a.className, restProps = __rest(_a, ["className"]);
+    return (React.createElement(Content, __assign({ className: cn(className, styles.content) }, restProps)));
+};
+
+export { ContentMobile };

package/dist/esm/components/content/desktop.css

@@ -0,0 +1,31 @@
+/* hash: 1e1gn */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xl: 32px;
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-content-paddings: 0 56px;
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__s_lq99o {
+    padding: var(--side-panel-s-content-paddings)
+}
+.side-panel__s_lq99o:last-child {
+        padding-bottom: var(--gap-2xl);
+    }

package/dist/esm/components/content/index.css

@@ -0,0 +1,28 @@
+/* hash: gtex2 */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__content_1yxkj {
+    box-sizing: border-box;
+    width: 100%;
+}
+.side-panel__flex_1yxkj {
+    flex: 1 1 auto;
+}

package/dist/esm/components/content/mobile.css

@@ -0,0 +1,30 @@
+/* hash: 1bi3k */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__content_7gese {
+    padding: 0 var(--gap-m)
+}
+.side-panel__content_7gese:last-child {
+        padding-bottom: var(--gap-m);
+    }

package/dist/esm/components/footer/Component.d.ts

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const Footer: FC<FooterProps>;
+export { FooterProps, Footer };

package/dist/esm/components/footer/Component.desktop.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { FooterProps } from "./Component";
+import { SidePanelDesktopProps } from "../../Component.desktop";
+type FooterDesktopProps = FooterProps & {
+    /**
+     * Размер
+     */
+    size?: SidePanelDesktopProps['size'];
+};
+declare const FooterDesktop: FC<FooterDesktopProps>;
+export { FooterDesktopProps, FooterDesktop };

package/dist/esm/components/footer/Component.desktop.js

@@ -0,0 +1,19 @@
+import { _ as __rest, a as __assign } from '../../tslib.es6-44d9de0b.js';
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../Context.js';
+import { Footer } from './Component.js';
+
+var styles = {"sticky":"side-panel__sticky_1nka4","s":"side-panel__s_1nka4"};
+require('./desktop.css')
+
+var FooterDesktop = function (_a) {
+    var _b;
+    var size = _a.size, className = _a.className, sticky = _a.sticky, restProps = __rest(_a, ["size", "className", "sticky"]);
+    return (React.createElement(Footer, __assign({ className: cn(className, size && styles[size], (_b = {},
+            _b[styles.sticky] = sticky,
+            _b)), sticky: sticky }, restProps)));
+};
+
+export { FooterDesktop };

package/dist/esm/components/footer/Component.js

@@ -0,0 +1,25 @@
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/esm';
+import { ModalContext } from '../../Context.js';
+
+var styles = {"footer":"side-panel__footer_1efth","sticky":"side-panel__sticky_1efth","highlighted":"side-panel__highlighted_1efth"};
+require('./index.css')
+
+var layoutStyles = {"column":"side-panel__column_158ux","gap-16":"side-panel__gap-16_158ux","gap-24":"side-panel__gap-24_158ux","gap-32":"side-panel__gap-32_158ux","start":"side-panel__start_158ux","center":"side-panel__center_158ux","space-between":"side-panel__space-between_158ux"};
+require('./layout.css')
+
+var Footer = function (_a) {
+    var _b;
+    var children = _a.children, className = _a.className, sticky = _a.sticky, _c = _a.layout, layout = _c === void 0 ? 'start' : _c, gap = _a.gap;
+    var _d = useContext(ModalContext), footerHighlighted = _d.footerHighlighted, setHasFooter = _d.setHasFooter;
+    useEffect(function () {
+        setHasFooter(true);
+    }, [setHasFooter]);
+    return (React.createElement("div", { className: cn(styles.footer, className, layoutStyles[layout], gap && layoutStyles["gap-" + gap], (_b = {},
+            _b[styles.highlighted] = sticky && footerHighlighted,
+            _b[styles.sticky] = sticky,
+            _b)) }, children));
+};
+
+export { Footer };

package/dist/esm/components/footer/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { FooterProps } from "./Component";
+type FooterMobileProps = FooterProps;
+declare const FooterMobile: FC<FooterMobileProps>;
+export { FooterMobileProps, FooterMobile };

package/dist/esm/components/footer/Component.mobile.js

@@ -0,0 +1,19 @@
+import { _ as __rest, a as __assign } from '../../tslib.es6-44d9de0b.js';
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../Context.js';
+import { Footer } from './Component.js';
+
+var styles = {"footer":"side-panel__footer_6188a","sticky":"side-panel__sticky_6188a"};
+require('./mobile.css')
+
+var FooterMobile = function (_a) {
+    var _b;
+    var className = _a.className, sticky = _a.sticky, restProps = __rest(_a, ["className", "sticky"]);
+    return (React.createElement(Footer, __assign({ className: cn(className, styles.footer, (_b = {},
+            _b[styles.sticky] = sticky,
+            _b)), sticky: sticky }, restProps)));
+};
+
+export { FooterMobile };

package/dist/esm/components/footer/desktop.css

@@ -0,0 +1,32 @@
+/* hash: 1kcn0 */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-footer-paddings: var(--gap-xl) 56px var(--gap-2xl);
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__sticky_1nka4 {
+    bottom: 0;
+}
+.side-panel__s_1nka4 {
+    padding: var(--side-panel-s-footer-paddings);
+}

package/dist/esm/components/footer/index.css

@@ -0,0 +1,41 @@
+/* hash: ylr82 */
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dbdee1;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --side-panel-footer-background: var(--color-light-bg-primary);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+    --side-panel-footer-highlight-background: var(--color-light-bg-primary);
+    --side-panel-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-primary);
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__footer_1efth {
+    width: 100%;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s ease, background 0.2s ease;
+}
+.side-panel__sticky_1efth {
+    background: var(--side-panel-footer-background);
+    position: sticky;
+}
+.side-panel__highlighted_1efth {
+    background: var(--side-panel-footer-highlight-background);
+    box-shadow: var(--side-panel-footer-highlight-box-shadow);
+}

package/dist/esm/components/footer/layout.css

@@ -0,0 +1,84 @@
+/* hash: l0vdl */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+}
+:root {
+    --side-panel-footer-default-gap: var(--gap-m);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__column_158ux {
+    display: flex;
+    flex-direction: column
+}
+.side-panel__column_158ux > * {
+        margin-bottom: var(--side-panel-footer-default-gap);
+    }
+.side-panel__column_158ux > *:last-child,
+    .side-panel__column_158ux > *:only-child {
+        margin-bottom: 0;
+    }
+.side-panel__column_158ux.side-panel__gap-16_158ux > * {
+        margin-bottom: var(--gap-m);
+    }
+.side-panel__column_158ux.side-panel__gap-24_158ux > * {
+        margin-bottom: var(--gap-xl);
+    }
+.side-panel__column_158ux.side-panel__gap-32_158ux > * {
+        margin-bottom: var(--gap-2xl);
+    }
+.side-panel__start_158ux {
+    justify-content: flex-start;
+}
+.side-panel__center_158ux {
+    justify-content: center;
+}
+.side-panel__space-between_158ux {
+    justify-content: space-between
+}
+.side-panel__space-between_158ux > * {
+        flex: 1;
+    }
+.side-panel__start_158ux,
+.side-panel__center_158ux,
+.side-panel__space-between_158ux {
+    display: flex
+}
+.side-panel__start_158ux > *, .side-panel__center_158ux > *, .side-panel__space-between_158ux > * {
+        margin-right: var(--side-panel-footer-default-gap);
+    }
+.side-panel__start_158ux > *:last-child,
+    .side-panel__start_158ux > *:only-child,
+    .side-panel__center_158ux > *:last-child,
+    .side-panel__center_158ux > *:only-child,
+    .side-panel__space-between_158ux > *:last-child,
+    .side-panel__space-between_158ux > *:only-child {
+        margin-right: 0;
+    }
+.side-panel__start_158ux.side-panel__gap-16_158ux > *, .side-panel__center_158ux.side-panel__gap-16_158ux > *, .side-panel__space-between_158ux.side-panel__gap-16_158ux > * {
+        margin-right: var(--gap-m);
+    }
+.side-panel__start_158ux.side-panel__gap-24_158ux > *, .side-panel__center_158ux.side-panel__gap-24_158ux > *, .side-panel__space-between_158ux.side-panel__gap-24_158ux > * {
+        margin-right: var(--gap-xl);
+    }
+.side-panel__start_158ux.side-panel__gap-32_158ux > *, .side-panel__center_158ux.side-panel__gap-32_158ux > *, .side-panel__space-between_158ux.side-panel__gap-32_158ux > * {
+        margin-right: var(--gap-2xl);
+    }

package/dist/esm/components/footer/mobile.css

@@ -0,0 +1,30 @@
+/* hash: 172sz */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__footer_6188a {
+    padding: var(--gap-m);
+}
+.side-panel__sticky_6188a {
+    bottom: 0;
+}

package/dist/esm/components/header/Component.d.ts

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from 'react';
+type HeaderProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Компонент крестика
+     */
+    closer?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: 'left' | 'center';
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+};
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/dist/esm/components/header/Component.desktop.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { HeaderProps } from "./Component";
+import { SidePanelDesktopProps } from "../../Component.desktop";
+type HeaderDesktopProps = Omit<HeaderProps, 'closer'> & {
+    /**
+     * Размер
+     */
+    size?: SidePanelDesktopProps['size'];
+    /**
+     * Наличие крестика
+     */
+    hasCloser?: boolean;
+};
+declare const HeaderDesktop: FC<HeaderDesktopProps>;
+export { HeaderDesktopProps, HeaderDesktop };

package/dist/esm/components/header/Component.desktop.js

@@ -0,0 +1,24 @@
+import { _ as __rest, a as __assign } from '../../tslib.es6-44d9de0b.js';
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../Context.js';
+import { Header } from './Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from '../closer/Component.js';
+
+var styles = {"content":"side-panel__content_1gynr","s":"side-panel__s_1gynr","hasContent":"side-panel__hasContent_1gynr","sticky":"side-panel__sticky_1gynr"};
+require('./desktop.css')
+
+var HeaderDesktop = function (_a) {
+    var _b;
+    var size = _a.size, className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, _d = _a.leftAddons, leftAddons = _d === void 0 ? React.createElement("span", null) : _d, title = _a.title, children = _a.children, restProps = __rest(_a, ["size", "className", "contentClassName", "hasCloser", "sticky", "leftAddons", "title", "children"]);
+    var hasContent = Boolean(title || children);
+    return (React.createElement(Header, __assign({ className: cn(className, size && styles[size], (_b = {},
+            _b[styles.sticky] = sticky,
+            _b[styles.hasContent] = hasContent,
+            _b)), contentClassName: cn(styles.content, contentClassName), closer: hasCloser ? React.createElement(Closer, null) : null, leftAddons: leftAddons, sticky: sticky, title: title }, restProps), children));
+};
+
+export { HeaderDesktop };