@alfalab/core-components-side-panel 1.1.0

package/dist/modern/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/modern/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/modern/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/modern/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/modern/components/header/Component.desktop.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import '../../Context.js';
+import { Header } from './Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+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')
+
+const HeaderDesktop = ({ size, className, contentClassName, hasCloser = true, sticky, leftAddons = React.createElement("span", null), title, children, ...restProps }) => {
+    const hasContent = Boolean(title || children);
+    return (React.createElement(Header, Object.assign({ className: cn(className, size && styles[size], {
+            [styles.sticky]: sticky,
+            [styles.hasContent]: hasContent,
+        }), contentClassName: cn(styles.content, contentClassName), closer: hasCloser ? React.createElement(Closer, null) : null, leftAddons: leftAddons, sticky: sticky, title: title }, restProps), children));
+};
+
+export { HeaderDesktop };

package/dist/modern/components/header/Component.js

@@ -0,0 +1,29 @@
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import { ModalContext } from '../../Context.js';
+
+var styles = {"header":"side-panel__header_1io7a","hasContent":"side-panel__hasContent_1io7a","highlighted":"side-panel__highlighted_1io7a","sticky":"side-panel__sticky_1io7a","content":"side-panel__content_1io7a","title":"side-panel__title_1io7a","addon":"side-panel__addon_1io7a","closer":"side-panel__closer_1io7a","left":"side-panel__left_1io7a","center":"side-panel__center_1io7a","right":"side-panel__right_1io7a","trim":"side-panel__trim_1io7a"};
+require('./index.css')
+
+const Header = ({ className, addonClassName, contentClassName, leftAddons, children, align = 'left', trim = true, title, closer, sticky, }) => {
+    const { headerHighlighted, setHasHeader } = useContext(ModalContext);
+    const hasContent = Boolean(title || children);
+    useEffect(() => {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    return (React.createElement("div", { className: cn(styles.header, className, {
+            [styles.highlighted]: hasContent && sticky && headerHighlighted,
+            [styles.sticky]: sticky,
+            [styles.hasContent]: hasContent,
+        }) },
+        leftAddons && React.createElement("div", { className: cn(styles.addon, addonClassName) }, leftAddons),
+        hasContent && (React.createElement("div", { className: cn(styles.content, contentClassName, styles[align], {
+                [styles.trim]: trim,
+            }) },
+            children,
+            title && React.createElement("div", { className: styles.title }, title))),
+        closer && (React.createElement("div", { className: cn(styles.addon, styles.closer, addonClassName) }, closer))));
+};
+
+export { Header };

package/dist/modern/components/header/Component.mobile.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { HeaderProps } from "./Component";
+type HeaderMobileProps = Omit<HeaderProps, 'closer'> & {
+    /**
+     * Наличие крестика
+     */
+    hasCloser?: boolean;
+};
+declare const HeaderMobile: FC<HeaderMobileProps>;
+export { HeaderMobileProps, HeaderMobile };

package/dist/modern/components/header/Component.mobile.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import '../../Context.js';
+import { Header } from './Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from '../closer/Component.js';
+import CrossMIcon from '@alfalab/icons-glyph/CrossMIcon';
+
+var styles = {"sticky":"side-panel__sticky_vwpuy","content":"side-panel__content_vwpuy"};
+require('./mobile.css')
+
+const HeaderMobile = ({ className, contentClassName, hasCloser = true, sticky, ...restProps }) => (React.createElement(Header, Object.assign({ className: cn(className, {
+        [styles.sticky]: sticky,
+    }), contentClassName: cn(styles.content, contentClassName), closer: hasCloser ? React.createElement(Closer, { icon: CrossMIcon, size: 'xs' }) : null, sticky: sticky }, restProps)));
+
+export { HeaderMobile };

package/dist/modern/components/header/desktop.css

@@ -0,0 +1,54 @@
+/* hash: 3uz6o */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-header-paddings: var(--gap-xs) var(--gap-xs) var(--gap-m);
+
+    /* scroll */
+
+    /* desktop */
+    --side-panel-s-header-desktop-content-paddings: var(--gap-s) var(--gap-m) 0 0;
+    --side-panel-s-header-desktop-font-size: 22px;
+    --side-panel-s-header-desktop-line-height: 26px;
+    --side-panel-header-desktop-font-weight: bold;
+    --side-panel-header-desktop-font-family: var(--font-family-system);
+
+    /* mobile */
+}
+.side-panel__content_1gynr {
+    font-weight: var(--side-panel-header-desktop-font-weight);
+    font-family: var(--side-panel-header-desktop-font-family);
+}
+.side-panel__s_1gynr .side-panel__content_1gynr {
+    padding: var(--side-panel-s-header-desktop-content-paddings);
+    font-size: var(--side-panel-s-header-desktop-font-size);
+    line-height: var(--side-panel-s-header-desktop-line-height);
+}
+.side-panel__s_1gynr {
+    padding: var(--side-panel-s-header-paddings)
+}
+.side-panel__s_1gynr:not(.side-panel__hasContent_1gynr) {
+        padding-bottom: 0;
+    }
+.side-panel__sticky_1gynr {
+    top: 0;
+}

package/dist/modern/components/header/index.css

@@ -0,0 +1,85 @@
+/* hash: 1tseh */
+:root {
+    --color-light-bg-primary: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --side-panel-header-background: var(--color-light-bg-primary);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+    --side-panel-header-highlight-background: var(--color-light-bg-primary);
+    --side-panel-header-highlight-box-shadow: none;
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__header_1io7a {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    transition: box-shadow 0.2s ease, background 0.2s ease
+}
+.side-panel__header_1io7a:not(.side-panel__hasContent_1io7a) {
+        pointer-events: none;
+    }
+.side-panel__highlighted_1io7a {
+    background: var(--side-panel-header-highlight-background);
+    box-shadow: var(--side-panel-header-highlight-box-shadow);
+}
+.side-panel__sticky_1io7a {
+    position: sticky
+}
+.side-panel__sticky_1io7a.side-panel__hasContent_1io7a {
+        background: var(--side-panel-header-background);
+    }
+.side-panel__content_1io7a {
+    flex-grow: 1;
+}
+.side-panel__title_1io7a {
+    word-break: break-word;
+}
+.side-panel__addon_1io7a {
+    min-width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: all;
+}
+.side-panel__closer_1io7a {
+    margin-left: auto;
+}
+.side-panel__left_1io7a {
+    justify-content: flex-start;
+    text-align: left;
+}
+.side-panel__center_1io7a {
+    justify-content: center;
+    text-align: center;
+}
+.side-panel__right_1io7a {
+    justify-content: flex-end;
+    text-align: right;
+}
+.side-panel__trim_1io7a {
+    overflow: hidden
+}
+.side-panel__trim_1io7a .side-panel__title_1io7a {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }

package/dist/modern/components/header/mobile.css

@@ -0,0 +1,46 @@
+/* hash: 1rk7g */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+    --side-panel-header-mobile-content-paddings: var(--gap-s) var(--gap-xs) var(--gap-s)
+        var(--gap-m);
+    --side-panel-header-mobile-font-size: 18px;
+    --side-panel-header-mobile-line-height: 24px;
+    --side-panel-header-mobile-font-family: var(--font-family-system);
+    --side-panel-header-mobile-font-weight: bold;
+}
+.side-panel__sticky_vwpuy {
+    top: 0;
+}
+.side-panel__content_vwpuy {
+    font-size: var(--side-panel-header-mobile-font-size);
+    line-height: var(--side-panel-header-mobile-line-height);
+    font-family: var(--side-panel-header-mobile-font-family);
+    font-weight: var(--side-panel-header-mobile-font-weight);
+    padding: var(--side-panel-header-mobile-content-paddings);
+}

package/dist/modern/desktop.css

@@ -0,0 +1,28 @@
+/* hash: sbjib */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+
+    /* sizes */
+    --side-panel-s-width: 500px;
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__s_1ysbr {
+    width: var(--side-panel-s-width);
+}
+.side-panel__hidden_1ysbr {
+    overflow-x: hidden;
+}

package/dist/modern/desktop.d.ts

@@ -0,0 +1 @@
+export * from "./Component.desktop";

package/dist/modern/desktop.js

@@ -0,0 +1,16 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-drawer/dist/modern';
+import 'react-merge-refs';
+import '@alfalab/core-components-base-modal/dist/modern';
+import './Context.js';
+import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
+import './components/header/Component.desktop.js';
+import './components/content/Component.js';
+import './components/content/Component.desktop.js';
+import './components/footer/Component.js';
+import './components/footer/Component.desktop.js';
+export { SidePanelDesktop } from './Component.desktop.js';

package/dist/modern/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./responsive";
+export * from "./Context";

package/dist/modern/index.js

@@ -0,0 +1,23 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-drawer/dist/modern';
+import 'react-merge-refs';
+import '@alfalab/core-components-base-modal/dist/modern';
+export { ModalContext } from './Context.js';
+import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
+import './components/header/Component.desktop.js';
+import './components/content/Component.js';
+import './components/content/Component.desktop.js';
+import './components/footer/Component.js';
+import './components/footer/Component.desktop.js';
+import './Component.desktop.js';
+import '@alfalab/icons-glyph/CrossMIcon';
+import './components/header/Component.mobile.js';
+import './components/content/Component.mobile.js';
+import './components/footer/Component.mobile.js';
+import './Component.mobile.js';
+import '@alfalab/hooks';
+export { SidePanelResponsive } from './Component.responsive.js';

package/dist/modern/mobile.css

@@ -0,0 +1,25 @@
+/* hash: 158pz */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+.side-panel__component_y5ha2 {
+    flex: 1;
+    width: 100%;
+}

package/dist/modern/mobile.d.ts

@@ -0,0 +1 @@
+export * from "./Component.mobile";

package/dist/modern/mobile.js

@@ -0,0 +1,15 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-base-modal/dist/modern';
+import './Context.js';
+import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
+import './components/content/Component.js';
+import './components/footer/Component.js';
+import '@alfalab/icons-glyph/CrossMIcon';
+import './components/header/Component.mobile.js';
+import './components/content/Component.mobile.js';
+import './components/footer/Component.mobile.js';
+export { SidePanelMobile } from './Component.mobile.js';

package/dist/modern/responsive.d.ts

@@ -0,0 +1 @@
+export * from "./Component.responsive";

package/dist/modern/responsive.js

@@ -0,0 +1,23 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-drawer/dist/modern';
+import 'react-merge-refs';
+import '@alfalab/core-components-base-modal/dist/modern';
+import './Context.js';
+import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
+import './components/header/Component.desktop.js';
+import './components/content/Component.js';
+import './components/content/Component.desktop.js';
+import './components/footer/Component.js';
+import './components/footer/Component.desktop.js';
+import './Component.desktop.js';
+import '@alfalab/icons-glyph/CrossMIcon';
+import './components/header/Component.mobile.js';
+import './components/content/Component.mobile.js';
+import './components/footer/Component.mobile.js';
+import './Component.mobile.js';
+import '@alfalab/hooks';
+export { SidePanelResponsive } from './Component.responsive.js';

package/dist/modern/transitions.desktop.css

@@ -0,0 +1,25 @@
+/* hash: 1xjfe */
+.side-panel__appear_1hpwc,
+.side-panel__enter_1hpwc {
+    opacity: 0;
+    transform: translateX(15px);
+}
+
+.side-panel__appearActive_1hpwc,
+.side-panel__enterActive_1hpwc {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 200ms ease-in, transform 200ms ease-in;
+}
+
+.side-panel__exit_1hpwc {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.side-panel__exitActive_1hpwc,
+.side-panel__exitDone_1hpwc {
+    opacity: 0;
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transform: translateX(15px);
+}

package/dist/modern/transitions.mobile.css

@@ -0,0 +1,25 @@
+/* hash: 14s5p */
+.side-panel__appear_kozij,
+.side-panel__enter_kozij {
+    opacity: 0;
+    transform: translateY(15px);
+}
+
+.side-panel__appearActive_kozij,
+.side-panel__enterActive_kozij {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 200ms ease-in, transform 200ms ease-in;
+}
+
+.side-panel__exit_kozij {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.side-panel__exitActive_kozij,
+.side-panel__exitDone_kozij {
+    opacity: 0;
+    transform: translateY(15px);
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+}

package/dist/responsive.d.ts

@@ -0,0 +1 @@
+export * from "./Component.responsive";