@astral/ui 1.5.0 → 1.6.0

package/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { SwipeableDrawerProps as MuiSwipeableDrawerProps } from '@mui/material';
+export declare type SwipeableDrawerProps = {
+    /**
+     * @example <StyledSwipeableDrawer drawerBleedingTitle="Заголовок">
+     * @description Текстовый заголовок в шапке компонента.
+     */
+    drawerBleedingTitle: string;
+    /**
+     * @example <StyledSwipeableDrawer>
+     * @default false
+     * @description Остаётся ли компонент смонтированным после его скрытия.
+     */
+    isMountedOnHide?: boolean;
+    /**
+     * @example <StyledSwipeableDrawer>
+     * @default undefined
+     * @description Иконка в шапке компонента (над заголовком).
+     */
+    drawerBleedingIcon?: ReactNode;
+    /**
+     * @example <StyledSwipeableDrawer drawerBleedingIcon={56}>
+     * @default 56
+     * @description Высота шапки компонента и невидимого перетаскиваемого элемента.
+     */
+    drawerBleedingHeight?: number;
+} & MuiSwipeableDrawerProps;
+export declare const SwipeableDrawer: ({ drawerBleedingTitle, isMountedOnHide, drawerBleedingIcon, drawerBleedingHeight, children, ...props }: SwipeableDrawerProps) => JSX.Element;

package/SwipeableDrawer/SwipeableDrawer.js

@@ -0,0 +1,32 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwipeableDrawer = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var SwipeableDrawer = function (_a) {
+    var drawerBleedingTitle = _a.drawerBleedingTitle, _b = _a.isMountedOnHide, isMountedOnHide = _b === void 0 ? false : _b, drawerBleedingIcon = _a.drawerBleedingIcon, _c = _a.drawerBleedingHeight, drawerBleedingHeight = _c === void 0 ? 56 : _c, children = _a.children, props = __rest(_a, ["drawerBleedingTitle", "isMountedOnHide", "drawerBleedingIcon", "drawerBleedingHeight", "children"]);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledSwipeableDrawer, __assign({}, props, { swipeAreaWidth: drawerBleedingHeight, ModalProps: { keepMounted: isMountedOnHide } }, { children: [(0, jsx_runtime_1.jsxs)(styles_1.SwipeableDrawerHeader, __assign({ drawerBleedingHeight: drawerBleedingHeight }, { children: [(0, jsx_runtime_1.jsx)(styles_1.SwipeableDrawerPuller, { children: drawerBleedingIcon || (0, jsx_runtime_1.jsx)(styles_1.SwipeableDrawerPullerIcon, {}) }), (0, jsx_runtime_1.jsx)(styles_1.SwipeableDrawerTitle, __assign({ noWrap: true }, { children: drawerBleedingTitle }))] })), (0, jsx_runtime_1.jsx)(styles_1.SwipeableDrawerBody, __assign({ drawerBleedingHeight: drawerBleedingHeight }, { children: children }))] })));
+};
+exports.SwipeableDrawer = SwipeableDrawer;

package/SwipeableDrawer/index.d.ts

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

package/SwipeableDrawer/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./SwipeableDrawer"), exports);

package/SwipeableDrawer/styles.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { SwipeableDrawerProps } from '@mui/material';
+declare type SwipeableDrawerHeaderProps = {
+    drawerBleedingHeight: number;
+};
+declare type SwipeableDrawerBodyProps = {
+    drawerBleedingHeight: number;
+};
+export declare const StyledSwipeableDrawer: import("@emotion/styled").StyledComponent<SwipeableDrawerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SwipeableDrawerHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SwipeableDrawerHeaderProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SwipeableDrawerPuller: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwipeableDrawerPullerIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwipeableDrawerTitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "inherit" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | "div" | undefined;
+    variantMapping?: Partial<Record<"inherit" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | "div", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | "css" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "children" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | ("fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "typography" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SwipeableDrawerBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SwipeableDrawerBodyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/SwipeableDrawer/styles.js

@@ -0,0 +1,97 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwipeableDrawerBody = exports.SwipeableDrawerTitle = exports.SwipeableDrawerPullerIcon = exports.SwipeableDrawerPuller = exports.SwipeableDrawerHeader = exports.StyledSwipeableDrawer = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("../styles");
+/**
+ * @description Вывод высоты шапки компонента.
+ */
+var getHeight = function (_a) {
+    var drawerBleedingHeight = _a.drawerBleedingHeight;
+    return "".concat(drawerBleedingHeight, "px");
+};
+/**
+ * @description Расчет максимальной высоты тела компонента с учетом абсолютно
+ * позиционированной шапки, плюс отступ от верха экрана в размер шапки.
+ */
+var calcMaxBodyHeight = function (_a) {
+    var drawerBleedingHeight = _a.drawerBleedingHeight;
+    return "calc(100vh - ".concat(drawerBleedingHeight, "px * 2)");
+};
+/**
+ * @description Определение плавной анимации полного скрытия компонента.
+ * Предусматривает для <SwipeableDrawer keepMounted={false} /> переопределение
+ * базового "transition" плавно выводя компонент за рамки видимой области экрана.
+ */
+var getUnmountTransform = function (_a) {
+    var open = _a.open, ModalProps = _a.ModalProps;
+    return !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.keepMounted) && !open
+        ? 'translateY(100vh) !important'
+        : 'none';
+};
+exports.StyledSwipeableDrawer = (0, styles_1.styled)(material_1.SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    overflow: visible;\n\n    transform: ", ";\n  }\n\n  .MuiBackdrop-root {\n    background-color: ", ";\n  }\n"], ["\n  .MuiPaper-root {\n    overflow: visible;\n\n    transform: ", ";\n  }\n\n  .MuiBackdrop-root {\n    background-color: ", ";\n  }\n"])), function (props) { return getUnmountTransform(__assign({}, props)); }, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.background.modalShadow;
+});
+exports.SwipeableDrawerHeader = styles_1.styled.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: -", ";\n\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  visibility: visible;\n"], ["\n  position: absolute;\n  top: -", ";\n\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  visibility: visible;\n"])), function (props) { return getHeight(__assign({}, props)); }, function (props) { return getHeight(__assign({}, props)); }, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(6, 6, 3, 6);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.mode === 'light'
+        ? theme.palette.background.default
+        : theme.palette.grey[800];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.medium;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.medium;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shadows[8];
+});
+exports.SwipeableDrawerPuller = styles_1.styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n\n  svg {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n\n  svg {\n    fill: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.mode === 'light'
+        ? theme.palette.grey[900]
+        : theme.palette.grey[300];
+});
+exports.SwipeableDrawerPullerIcon = styles_1.styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 14px;\n  height: 2px;\n\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  width: 14px;\n  height: 2px;\n\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.mode === 'light'
+        ? theme.palette.grey[900]
+        : theme.palette.grey[300];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.small;
+});
+exports.SwipeableDrawerTitle = (0, styles_1.styled)(material_1.Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[700];
+});
+exports.SwipeableDrawerBody = styles_1.styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  z-index: ", ";\n\n  height: 100%;\n  max-height: ", ";\n  overflow: auto;\n\n  background-color: ", ";\n"], ["\n  z-index: ", ";\n\n  height: 100%;\n  max-height: ", ";\n  overflow: auto;\n\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.zIndex.mobileStepper;
+}, function (props) { return calcMaxBodyHeight(__assign({}, props)); }, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.mode === 'light'
+        ? theme.palette.background.default
+        : theme.palette.grey[800];
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/esm/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { SwipeableDrawerProps as MuiSwipeableDrawerProps } from '@mui/material';
+export declare type SwipeableDrawerProps = {
+    /**
+     * @example <StyledSwipeableDrawer drawerBleedingTitle="Заголовок">
+     * @description Текстовый заголовок в шапке компонента.
+     */
+    drawerBleedingTitle: string;
+    /**
+     * @example <StyledSwipeableDrawer>
+     * @default false
+     * @description Остаётся ли компонент смонтированным после его скрытия.
+     */
+    isMountedOnHide?: boolean;
+    /**
+     * @example <StyledSwipeableDrawer>
+     * @default undefined
+     * @description Иконка в шапке компонента (над заголовком).
+     */
+    drawerBleedingIcon?: ReactNode;
+    /**
+     * @example <StyledSwipeableDrawer drawerBleedingIcon={56}>
+     * @default 56
+     * @description Высота шапки компонента и невидимого перетаскиваемого элемента.
+     */
+    drawerBleedingHeight?: number;
+} & MuiSwipeableDrawerProps;
+export declare const SwipeableDrawer: ({ drawerBleedingTitle, isMountedOnHide, drawerBleedingIcon, drawerBleedingHeight, children, ...props }: SwipeableDrawerProps) => JSX.Element;

package/esm/SwipeableDrawer/SwipeableDrawer.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledSwipeableDrawer, SwipeableDrawerBody, SwipeableDrawerHeader, SwipeableDrawerPuller, SwipeableDrawerPullerIcon, SwipeableDrawerTitle, } from './styles';
+export var SwipeableDrawer = function (_a) {
+    var drawerBleedingTitle = _a.drawerBleedingTitle, _b = _a.isMountedOnHide, isMountedOnHide = _b === void 0 ? false : _b, drawerBleedingIcon = _a.drawerBleedingIcon, _c = _a.drawerBleedingHeight, drawerBleedingHeight = _c === void 0 ? 56 : _c, children = _a.children, props = __rest(_a, ["drawerBleedingTitle", "isMountedOnHide", "drawerBleedingIcon", "drawerBleedingHeight", "children"]);
+    return (_jsxs(StyledSwipeableDrawer, __assign({}, props, { swipeAreaWidth: drawerBleedingHeight, ModalProps: { keepMounted: isMountedOnHide } }, { children: [_jsxs(SwipeableDrawerHeader, __assign({ drawerBleedingHeight: drawerBleedingHeight }, { children: [_jsx(SwipeableDrawerPuller, { children: drawerBleedingIcon || _jsx(SwipeableDrawerPullerIcon, {}) }), _jsx(SwipeableDrawerTitle, __assign({ noWrap: true }, { children: drawerBleedingTitle }))] })), _jsx(SwipeableDrawerBody, __assign({ drawerBleedingHeight: drawerBleedingHeight }, { children: children }))] })));
+};

package/esm/SwipeableDrawer/index.d.ts

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

package/esm/SwipeableDrawer/index.js

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

package/esm/SwipeableDrawer/styles.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { SwipeableDrawerProps } from '@mui/material';
+declare type SwipeableDrawerHeaderProps = {
+    drawerBleedingHeight: number;
+};
+declare type SwipeableDrawerBodyProps = {
+    drawerBleedingHeight: number;
+};
+export declare const StyledSwipeableDrawer: import("@emotion/styled").StyledComponent<SwipeableDrawerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SwipeableDrawerHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SwipeableDrawerHeaderProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SwipeableDrawerPuller: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwipeableDrawerPullerIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwipeableDrawerTitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "inherit" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | "div" | undefined;
+    variantMapping?: Partial<Record<"inherit" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | "div", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | "css" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "children" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | ("fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "typography" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SwipeableDrawerBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SwipeableDrawerBodyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/esm/SwipeableDrawer/styles.js

@@ -0,0 +1,94 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { SwipeableDrawer, Typography, } from '@mui/material';
+import { styled } from '../styles';
+/**
+ * @description Вывод высоты шапки компонента.
+ */
+var getHeight = function (_a) {
+    var drawerBleedingHeight = _a.drawerBleedingHeight;
+    return "".concat(drawerBleedingHeight, "px");
+};
+/**
+ * @description Расчет максимальной высоты тела компонента с учетом абсолютно
+ * позиционированной шапки, плюс отступ от верха экрана в размер шапки.
+ */
+var calcMaxBodyHeight = function (_a) {
+    var drawerBleedingHeight = _a.drawerBleedingHeight;
+    return "calc(100vh - ".concat(drawerBleedingHeight, "px * 2)");
+};
+/**
+ * @description Определение плавной анимации полного скрытия компонента.
+ * Предусматривает для <SwipeableDrawer keepMounted={false} /> переопределение
+ * базового "transition" плавно выводя компонент за рамки видимой области экрана.
+ */
+var getUnmountTransform = function (_a) {
+    var open = _a.open, ModalProps = _a.ModalProps;
+    return !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.keepMounted) && !open
+        ? 'translateY(100vh) !important'
+        : 'none';
+};
+export var StyledSwipeableDrawer = styled(SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    overflow: visible;\n\n    transform: ", ";\n  }\n\n  .MuiBackdrop-root {\n    background-color: ", ";\n  }\n"], ["\n  .MuiPaper-root {\n    overflow: visible;\n\n    transform: ", ";\n  }\n\n  .MuiBackdrop-root {\n    background-color: ", ";\n  }\n"])), function (props) { return getUnmountTransform(__assign({}, props)); }, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.background.modalShadow;
+});
+export var SwipeableDrawerHeader = styled.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: -", ";\n\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  visibility: visible;\n"], ["\n  position: absolute;\n  top: -", ";\n\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  visibility: visible;\n"])), function (props) { return getHeight(__assign({}, props)); }, function (props) { return getHeight(__assign({}, props)); }, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(6, 6, 3, 6);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.mode === 'light'
+        ? theme.palette.background.default
+        : theme.palette.grey[800];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.medium;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.medium;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shadows[8];
+});
+export var SwipeableDrawerPuller = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n\n  svg {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n\n  svg {\n    fill: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.mode === 'light'
+        ? theme.palette.grey[900]
+        : theme.palette.grey[300];
+});
+export var SwipeableDrawerPullerIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 14px;\n  height: 2px;\n\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  width: 14px;\n  height: 2px;\n\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.mode === 'light'
+        ? theme.palette.grey[900]
+        : theme.palette.grey[300];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.small;
+});
+export var SwipeableDrawerTitle = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[700];
+});
+export var SwipeableDrawerBody = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  z-index: ", ";\n\n  height: 100%;\n  max-height: ", ";\n  overflow: auto;\n\n  background-color: ", ";\n"], ["\n  z-index: ", ";\n\n  height: 100%;\n  max-height: ", ";\n  overflow: auto;\n\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.zIndex.mobileStepper;
+}, function (props) { return calcMaxBodyHeight(__assign({}, props)); }, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.mode === 'light'
+        ? theme.palette.background.default
+        : theme.palette.grey[800];
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/esm/index.d.ts

@@ -64,6 +64,7 @@ export * from './SideDialogActions';
 export * from './SideDialogContent';
 export * from './SideDialogContentText';
 export * from './Slide';
+export * from './SwipeableDrawer';
 export * from './Zoom';
 export * from './Notification';
 export * from './LocalizationProvider';

package/esm/index.js

@@ -64,6 +64,7 @@ export * from './SideDialogActions';
 export * from './SideDialogContent';
 export * from './SideDialogContentText';
 export * from './Slide';
+export * from './SwipeableDrawer';
 export * from './Zoom';
 export * from './Notification';
 export * from './LocalizationProvider';

package/index.d.ts

@@ -64,6 +64,7 @@ export * from './SideDialogActions';
 export * from './SideDialogContent';
 export * from './SideDialogContentText';
 export * from './Slide';
+export * from './SwipeableDrawer';
 export * from './Zoom';
 export * from './Notification';
 export * from './LocalizationProvider';

package/index.js

@@ -80,6 +80,7 @@ __exportStar(require("./SideDialogActions"), exports);
 __exportStar(require("./SideDialogContent"), exports);
 __exportStar(require("./SideDialogContentText"), exports);
 __exportStar(require("./Slide"), exports);
+__exportStar(require("./SwipeableDrawer"), exports);
 __exportStar(require("./Zoom"), exports);
 __exportStar(require("./Notification"), exports);
 __exportStar(require("./LocalizationProvider"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^1.5.0",
+    "@astral/icons": "^1.6.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",