@alfalab/core-components-popup-sheet 1.0.0

package/index-ebda875c.d.ts

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

package/index.css

@@ -0,0 +1,53 @@
+/* hash: 1qn71 */
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+} :root {
+} :root {
+} .popup-sheet__component_18ukp {
+    position: fixed;
+    bottom: 0;
+    margin: auto var(--gap-xs) var(--gap-xs);
+    width: calc(100% - 2 * var(--gap-xs));
+    max-width: 600px;
+    border-radius: 36px;
+    overflow: hidden;
+} .popup-sheet__closer_18ukp {
+    position: absolute;
+    top: 8px;
+    right: 8px
+} .popup-sheet__closer_18ukp > button {
+        -webkit-backdrop-filter: none;
+                backdrop-filter: none;
+    } .popup-sheet__content_18ukp {
+    box-sizing: border-box;
+} /* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */ .popup-sheet__appear_18ukp,
+.popup-sheet__enter_18ukp {
+    transform: translateY(calc(100% + 100px));
+} .popup-sheet__appearActive_18ukp,
+.popup-sheet__enterActive_18ukp {
+    transform: translateY(0);
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+    transition-delay: 50ms;
+} .popup-sheet__exit_18ukp {
+    transform: translateY(0);
+} .popup-sheet__exitBySwipe_18ukp {
+    transform: translateY(calc(100% + 100px));
+} .popup-sheet__exitActiveBySwipe_18ukp {
+    transition: none;
+} .popup-sheet__exitActive_18ukp,
+.popup-sheet__exitDone_18ukp {
+    transform: translateY(calc(100% + 100px));
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}

package/index.d.ts

@@ -0,0 +1 @@
+export { PopupSheet, PopupSheetProps } from "./Component";

package/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('tslib');
+require('react');
+require('react-swipeable');
+require('classnames');
+require('@alfalab/core-components-base-modal');
+require('@alfalab/core-components-navigation-bar/shared');
+require('@alfalab/core-components-shared');
+require('./components/backdrop/Component.js');
+require('@alfalab/core-components-backdrop');
+
+
+
+exports.PopupSheet = Component.PopupSheet;

package/modern/Component-9211a437.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { BaseButtonProps } from "./typings-9211a437";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/modern/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { KeyboardEvent, MouseEvent } from "react";
+import { BaseModalProps } from "@alfalab/core-components-base-modal";
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type PopupSheetProps = Omit<BaseModalProps, 'onClose'> & {
+    /**
+     * Наличие кнопки закрытия
+     */
+    hasCloser?: boolean;
+    /**
+     * Будет ли свайпаться шторка
+     */
+    swipeable?: boolean;
+    /**
+     * Отступы
+     */
+    padding?: PaddingType;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void;
+};
+declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalProps, "onClose"> & {
+    /**
+     * Наличие кнопки закрытия
+     */
+    hasCloser?: boolean | undefined;
+    /**
+     * Будет ли свайпаться шторка
+     */
+    swipeable?: boolean | undefined;
+    /**
+     * Отступы
+     */
+    padding?: PaddingType | undefined;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { PopupSheetProps, PopupSheet };

package/modern/Component.desktop-2e2b2125.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };

package/modern/Component.js

@@ -0,0 +1,136 @@
+import React, { forwardRef, useState, useRef } from 'react';
+import { useSwipeable } from 'react-swipeable';
+import cn from 'classnames';
+import { BaseModal } from '@alfalab/core-components-base-modal/modern';
+import { Closer } from '@alfalab/core-components-navigation-bar/modern/shared';
+import { createPaddingStyle, getDataTestId, easingFns } from '@alfalab/core-components-shared/modern';
+import { PopupBackdrop } from './components/backdrop/Component.js';
+import '@alfalab/core-components-backdrop/modern';
+
+const styles = {"component":"popup-sheet__component_18ukp","closer":"popup-sheet__closer_18ukp","content":"popup-sheet__content_18ukp","appear":"popup-sheet__appear_18ukp","enter":"popup-sheet__enter_18ukp","appearActive":"popup-sheet__appearActive_18ukp","enterActive":"popup-sheet__enterActive_18ukp","exit":"popup-sheet__exit_18ukp","exitBySwipe":"popup-sheet__exitBySwipe_18ukp","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_18ukp","exitActive":"popup-sheet__exitActive_18ukp","exitDone":"popup-sheet__exitDone_18ukp"};
+require('./index.css')
+
+const SWIPE_VELOCITY = 0.3;
+const CLOSE_OFFSET = 0.3;
+const ANIMATION_DURATION = 350;
+const DEFAULT_PADDING = 32;
+const PopupSheet = forwardRef(({ children, hasCloser, className, onClose, transitionProps, contentProps, swipeable, dataTestId, backdropProps, padding = DEFAULT_PADDING, ...restProps }, ref) => {
+    const [sheetOffset, setSheetOffset] = useState(0);
+    const [backdropOpacity, setBackdropOpacity] = useState(1);
+    const sheetHeight = useRef(0);
+    const sheetRef = useRef(null);
+    const bySwipeCloseAnimation = useRef(false);
+    const getSheetOffset = (deltaY) => Math.max(0, deltaY);
+    const getBackdropOpacity = (offset) => Math.max(0, 1 - offset / sheetHeight.current);
+    const getSwipeStyles = () => sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};
+    const handleSwiping = ({ deltaY }) => {
+        const offset = getSheetOffset(deltaY);
+        setSheetOffset(offset);
+        setBackdropOpacity(getBackdropOpacity(offset));
+    };
+    const handleSwiped = ({ deltaY, velocity, event }) => {
+        const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
+        const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;
+        const offset = sheetOffset;
+        const animDuration = ANIMATION_DURATION / 2;
+        let start;
+        if (shouldCloseByVelocity || shouldCloseByOffset) {
+            bySwipeCloseAnimation.current = true;
+            onClose?.(event, 'swipe');
+            const runLoop = (timeStamp) => {
+                if (!start)
+                    start = timeStamp;
+                const elapsedTime = timeStamp - start;
+                if (elapsedTime <= animDuration) {
+                    const nextOffset = offset +
+                        (sheetHeight.current - offset) *
+                            easingFns.easeInOutQuad(elapsedTime / animDuration);
+                    if (nextOffset > 0) {
+                        setSheetOffset(nextOffset);
+                    }
+                    requestAnimationFrame(runLoop);
+                }
+                else {
+                    setSheetOffset(0);
+                    bySwipeCloseAnimation.current = false;
+                }
+            };
+            requestAnimationFrame(runLoop);
+        }
+        else {
+            const runLoop = (timeStamp) => {
+                if (!start)
+                    start = timeStamp;
+                const elapsedTime = timeStamp - start;
+                if (elapsedTime <= animDuration) {
+                    const nextOffset = offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);
+                    if (nextOffset > 0) {
+                        setSheetOffset(nextOffset);
+                        setBackdropOpacity(getBackdropOpacity(nextOffset));
+                    }
+                    requestAnimationFrame(runLoop);
+                }
+                else {
+                    setSheetOffset(0);
+                    setBackdropOpacity(1);
+                }
+            };
+            requestAnimationFrame(runLoop);
+        }
+    };
+    const handleEntered = (node, isAppearing) => {
+        bySwipeCloseAnimation.current = false;
+        if (sheetRef.current) {
+            sheetHeight.current = sheetRef.current.offsetHeight;
+        }
+        if (transitionProps?.onEntered) {
+            transitionProps.onEntered(node, isAppearing);
+        }
+    };
+    const handleExited = (node) => {
+        bySwipeCloseAnimation.current = false;
+        setSheetOffset(0);
+        setBackdropOpacity(1);
+        if (transitionProps?.onExited) {
+            transitionProps.onExited(node);
+        }
+    };
+    const sheetSwipeableHandlers = useSwipeable({
+        onSwiping: handleSwiping,
+        onSwiped: handleSwiped,
+        trackMouse: swipeable,
+        trackTouch: swipeable,
+        delta: 5,
+    });
+    return (React.createElement(BaseModal, { ...restProps, onClose: onClose, ref: ref, className: cn(styles.component, className), dataTestId: dataTestId, Backdrop: PopupBackdrop, backdropProps: {
+            ...backdropProps,
+            opacity: backdropOpacity,
+        }, transitionProps: {
+            classNames: {
+                enter: styles.enter,
+                appear: styles.appear,
+                enterActive: styles.enterActive,
+                appearActive: styles.appearActive,
+                exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,
+                exitActive: bySwipeCloseAnimation.current
+                    ? styles.exitActiveBySwipe
+                    : styles.exitActive,
+            },
+            timeout: ANIMATION_DURATION,
+            ...transitionProps,
+            onEntered: handleEntered,
+            onExited: handleExited,
+        }, componentDivProps: {
+            ref: sheetRef,
+            style: getSwipeStyles(),
+        }, contentProps: {
+            style: createPaddingStyle(padding),
+            ...contentProps,
+            ...sheetSwipeableHandlers,
+            className: cn(styles.content, contentProps?.className),
+        } },
+        hasCloser && (React.createElement(Closer, { view: 'mobile', className: styles.closer, onClick: onClose, dataTestId: getDataTestId(dataTestId, 'closer') })),
+        children));
+});
+
+export { PopupSheet };

package/modern/components/backdrop/Component.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BackdropProps } from "@alfalab/core-components-backdrop";
+type PopupBackdropProps = BackdropProps & {
+    /**
+     * Прозрачность бэкдропа
+     */
+    opacity?: number;
+    /**
+     * Время анимации opacity
+     */
+    opacityTimeout?: number;
+};
+declare const PopupBackdrop: FC<BackdropProps>;
+export { PopupBackdropProps, PopupBackdrop };

package/modern/components/backdrop/Component.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Backdrop } from '@alfalab/core-components-backdrop/modern';
+
+const styles = {"appear":"popup-sheet__appear_1kdlf","enter":"popup-sheet__enter_1kdlf","appearActive":"popup-sheet__appearActive_1kdlf","enterActive":"popup-sheet__enterActive_1kdlf","appearDone":"popup-sheet__appearDone_1kdlf","enterDone":"popup-sheet__enterDone_1kdlf","exit":"popup-sheet__exit_1kdlf","exitActive":"popup-sheet__exitActive_1kdlf","exitDone":"popup-sheet__exitDone_1kdlf"};
+require('./index.css')
+
+const PopupBackdrop = ({ opacity, opacityTimeout, style, ...backdropProps }) => (React.createElement("div", { style: {
+        opacity,
+        transition: opacity === 1 ? `opacity ${opacityTimeout}ms ease-in-out` : '',
+        position: 'relative',
+        ...style,
+    } },
+    React.createElement(Backdrop, { transitionClassNames: styles, ...backdropProps })));
+
+export { PopupBackdrop };

package/modern/components/backdrop/index.css

@@ -0,0 +1,36 @@
+/* hash: 19vqu */
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --backdrop-visible-background: var(--color-light-bg-overlay);
+    --backdrop-hidden-background: transparent;
+} .popup-sheet__appear_1kdlf,
+.popup-sheet__enter_1kdlf {
+    background-color: var(--backdrop-hidden-background);
+} .popup-sheet__appearActive_1kdlf,
+.popup-sheet__enterActive_1kdlf,
+.popup-sheet__appearDone_1kdlf,
+.popup-sheet__enterDone_1kdlf {
+    background-color: var(--backdrop-visible-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+} .popup-sheet__exit_1kdlf {
+    background-color: var(--backdrop-visible-background);
+} .popup-sheet__exitActive_1kdlf,
+.popup-sheet__exitDone_1kdlf {
+    background-color: var(--backdrop-hidden-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}

package/modern/components/backdrop/index.d.ts

@@ -0,0 +1 @@
+export { PopupBackdrop } from "./Component";

package/modern/components/backdrop/index.js

@@ -0,0 +1,3 @@
+export { PopupBackdrop } from './Component.js';
+import 'react';
+import '@alfalab/core-components-backdrop/modern';

package/modern/desktop-2e2b2125.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/modern/index-ebda875c.d.ts

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

package/modern/index.css

@@ -0,0 +1,53 @@
+/* hash: 1qn71 */
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+} :root {
+} :root {
+} .popup-sheet__component_18ukp {
+    position: fixed;
+    bottom: 0;
+    margin: auto var(--gap-xs) var(--gap-xs);
+    width: calc(100% - 2 * var(--gap-xs));
+    max-width: 600px;
+    border-radius: 36px;
+    overflow: hidden;
+} .popup-sheet__closer_18ukp {
+    position: absolute;
+    top: 8px;
+    right: 8px
+} .popup-sheet__closer_18ukp > button {
+        -webkit-backdrop-filter: none;
+                backdrop-filter: none;
+    } .popup-sheet__content_18ukp {
+    box-sizing: border-box;
+} /* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */ .popup-sheet__appear_18ukp,
+.popup-sheet__enter_18ukp {
+    transform: translateY(calc(100% + 100px));
+} .popup-sheet__appearActive_18ukp,
+.popup-sheet__enterActive_18ukp {
+    transform: translateY(0);
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+    transition-delay: 50ms;
+} .popup-sheet__exit_18ukp {
+    transform: translateY(0);
+} .popup-sheet__exitBySwipe_18ukp {
+    transform: translateY(calc(100% + 100px));
+} .popup-sheet__exitActiveBySwipe_18ukp {
+    transition: none;
+} .popup-sheet__exitActive_18ukp,
+.popup-sheet__exitDone_18ukp {
+    transform: translateY(calc(100% + 100px));
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}

package/modern/index.d.ts

@@ -0,0 +1 @@
+export { PopupSheet, PopupSheetProps } from "./Component";

package/modern/index.js

@@ -0,0 +1,9 @@
+export { PopupSheet } from './Component.js';
+import 'react';
+import 'react-swipeable';
+import 'classnames';
+import '@alfalab/core-components-base-modal/modern';
+import '@alfalab/core-components-navigation-bar/modern/shared';
+import '@alfalab/core-components-shared/modern';
+import './components/backdrop/Component.js';
+import '@alfalab/core-components-backdrop/modern';

package/modern/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "@alfalab/core-components-popup-sheet",
+    "version": "1.0.0",
+    "description": "Popup sheet mobile component",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
+        "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-base-modal": "^5.4.0",
+        "@alfalab/core-components-backdrop": "^3.1.0",
+        "@alfalab/core-components-shared": "^0.2.0",
+        "@alfalab/core-components-navigation-bar": "^0.5.0",
+        "react-swipeable": "^7.0.0",
+        "classnames": "^2.3.1",
+        "tslib": "^2.4.0"
+    }
+}