@sima-land/ui-nucleons 45.0.0-alpha.7 → 45.0.0-alpha.71

package/dist/select/types.d.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties, Dispatch, ReactElement, ReactNode, SetStateAction } from 'react';
+import type { DropdownProps } from '../dropdown';
+import type { FieldBlockStyle } from '../field-block';
+export interface SelectStyle extends FieldBlockStyle {
+    '--dropdown-width'?: string | number;
+}
+export interface SelectContextValue {
+    selectProps: SelectProps;
+    currentValue: string;
+    setCurrentValue: Dispatch<SetStateAction<string>>;
+    menuOpen: boolean;
+    setMenuOpen: Dispatch<SetStateAction<boolean>>;
+    openerElement: HTMLElement | null;
+    setOpenerElement: (element: HTMLElement | null) => void;
+    anchorElement: HTMLElement | null;
+    setAnchorElement: (element: HTMLElement | null) => void;
+    menuElement: HTMLElement | null;
+    setMenuElement: (element: HTMLElement | null) => void;
+    menuFloatingStyle?: CSSProperties;
+}
+export interface SelectProps {
+    /** Опции. */
+    children?: ReactNode;
+    /** Отключенное состояние. */
+    disabled?: boolean;
+    /** Ошибочное состояние. */
+    failed?: boolean;
+    /** Состояние загрузки опций. */
+    loading?: boolean;
+    /** Сработает при выборе опции. */
+    onValueChange?: (value: string) => void;
+    /** Сработает при открытии/закрытии меню. */
+    onMenuToggle?: (state: {
+        opened: boolean;
+    }) => void;
+    /** Значение, выводимое в качестве выбранного. При отсутствии будет выведено значение defaultValue. */
+    value?: string;
+    /** Значение по умолчанию. При отсутствии будет выведено значение label. */
+    defaultValue?: string;
+    /** Получив значение являющееся текущим или пустую строку, должна вернуть ReactNode. */
+    renderValue?: (value: string) => ReactNode;
+    /** Ярлык. */
+    label?: string;
+    /** Открывающий элемент. */
+    opener?: ReactElement;
+    /** Элемент меню. */
+    menu?: ReactElement;
+    /** Свойства компонента Dropdown. */
+    dropdownProps?: Omit<DropdownProps, 'rootRef' | 'viewportRef'>;
+    /** Сработает при открытии меню. */
+    onMenuOpen?: VoidFunction;
+    /** Сработает при закрытии меню. */
+    onMenuClose?: VoidFunction;
+}

package/dist/select/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/select/utils.d.ts

@@ -0,0 +1,3 @@
+import type { SelectContextValue } from './types';
+export declare const SELECT_CONTEXT_DEFAULT_VALUE: SelectContextValue;
+export declare const SelectContext: import("react").Context<SelectContextValue>;

package/dist/select/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectContext = exports.SELECT_CONTEXT_DEFAULT_VALUE = void 0;
+const react_1 = require("react");
+exports.SELECT_CONTEXT_DEFAULT_VALUE = {
+    selectProps: {},
+    currentValue: '',
+    setCurrentValue: () => { },
+    menuOpen: false,
+    setMenuOpen: () => { },
+    openerElement: null,
+    setOpenerElement: () => { },
+    anchorElement: null,
+    setAnchorElement: () => { },
+    menuElement: null,
+    setMenuElement: () => { },
+    menuFloatingStyle: {},
+};
+exports.SelectContext = (0, react_1.createContext)(exports.SELECT_CONTEXT_DEFAULT_VALUE);
+//# sourceMappingURL=utils.js.map

package/dist/select/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/select/utils.ts"],"names":[],"mappings":";;;AACA,iCAAsC;AAEzB,QAAA,4BAA4B,GAAuB;IAC9D,WAAW,EAAE,EAAE;IAEf,YAAY,EAAE,EAAE;IAChB,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC;IAEzB,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IAErB,aAAa,EAAE,IAAI;IACnB,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;IAE1B,aAAa,EAAE,IAAI;IACnB,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;IAE1B,WAAW,EAAE,IAAI;IACjB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IAExB,iBAAiB,EAAE,EAAE;CACtB,CAAC;AAEW,QAAA,aAAa,GAAG,IAAA,qBAAa,EAAqB,oCAA4B,CAAC,CAAC"}

package/dist/shadows.scss

@@ -0,0 +1,54 @@
+/**
+ * Формирует тень по дизайн-гайдам.
+ */
+@mixin box-shadow($key) {
+  @if $key == 'z1' {
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 2px 4px rgba(0, 0, 0, 0.08);
+  } @else if $key == 'z2' {
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 4px 8px rgba(0, 0, 0, 0.1);
+  } @else if $key == 'z2-straight' {
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
+  } @else if $key == 'z3' {
+    box-shadow:
+      0 8px 16px rgba(0, 0, 0, 0.08),
+      0 0 4px rgba(0, 0, 0, 0.04);
+  } @else if $key == 'z4' {
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 12px 30px rgba(0, 0, 0, 0.1);
+  } @else {
+    @warn 'No such shadow `#{$key}`.';
+  }
+}
+
+@function get-box-shadow($key) {
+  $result: none;
+
+  @if $key == 'z1' {
+    $result:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 2px 4px rgba(0, 0, 0, 0.08);
+  } @else if $key == 'z2' {
+    $result:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 4px 8px rgba(0, 0, 0, 0.1);
+  } @else if $key == 'z2-straight' {
+    $result: 0 0 15px rgba(0, 0, 0, 0.12);
+  } @else if $key == 'z3' {
+    $result:
+      0 8px 16px rgba(0, 0, 0, 0.08),
+      0 0 4px rgba(0, 0, 0, 0.04);
+  } @else if $key == 'z4' {
+    $result:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 12px 30px rgba(0, 0, 0, 0.1);
+  } @else {
+    @warn 'No such shadow `#{$key}`.';
+  }
+
+  @return $result;
+}

package/dist/side-page/index.d.ts

@@ -0,0 +1,4 @@
+export type { SidePageProps } from './types';
+export { SidePage } from './side-page';
+export { SidePageBody } from './side-page-body';
+export { getResponsiveSidePageProps, useSidePageTransition } from './utils';

package/dist/side-page/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidePageTransition = exports.getResponsiveSidePageProps = exports.SidePageBody = exports.SidePage = void 0;
+var side_page_1 = require("./side-page");
+Object.defineProperty(exports, "SidePage", { enumerable: true, get: function () { return side_page_1.SidePage; } });
+var side_page_body_1 = require("./side-page-body");
+Object.defineProperty(exports, "SidePageBody", { enumerable: true, get: function () { return side_page_body_1.SidePageBody; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getResponsiveSidePageProps", { enumerable: true, get: function () { return utils_1.getResponsiveSidePageProps; } });
+Object.defineProperty(exports, "useSidePageTransition", { enumerable: true, get: function () { return utils_1.useSidePageTransition; } });
+//# sourceMappingURL=index.js.map

package/dist/side-page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/side-page/index.ts"],"names":[],"mappings":";;;AACA,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,mDAAgD;AAAvC,8GAAA,YAAY,OAAA;AACrB,iCAA4E;AAAnE,mHAAA,0BAA0B,OAAA;AAAE,8GAAA,qBAAqB,OAAA"}

package/dist/side-page/side-page-body.d.ts

@@ -0,0 +1,7 @@
+import { SidePageBodyProps } from './types';
+/**
+ * Основной контент SidePage.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SidePageBody({ rootRef, children, className, withScrollDisable, scrollDisableOptions, 'data-testid': testId, ...restProps }: SidePageBodyProps): import("react").JSX.Element;

package/dist/side-page/side-page-body.js

@@ -0,0 +1,60 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePageBody = SidePageBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
+const helpers_1 = require("../helpers");
+const classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./side-page-body.module.scss"));
+/**
+ * Основной контент SidePage.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SidePageBody({ rootRef, children, className, withScrollDisable, scrollDisableOptions, 'data-testid': testId, ...restProps }) {
+    const innerRootRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_1.useMemo)(() => (0, helpers_1.mergeRefs)([rootRef, innerRootRef]), [rootRef, innerRootRef]);
+    (0, page_scroll_lock_1.usePageScrollLock)(innerRootRef, {
+        lockEnabled: withScrollDisable,
+        ...scrollDisableOptions,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: mergedRef, className: (0, classnames_1.default)(styles.body, className), ...restProps, "data-testid": testId, children: children }));
+}
+//# sourceMappingURL=side-page-body.js.map

package/dist/side-page/side-page-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-page-body.js","sourceRoot":"","sources":["../../src/side-page/side-page-body.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,oCAsBC;;AAjCD,iCAAwC;AACxC,oEAAkE;AAClE,wCAAuC;AACvC,4DAA4B;AAC5B,qEAAuD;AAEvD;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACM;IAClB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,mBAAS,EAAC,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7F,IAAA,oCAAiB,EAAC,YAAY,EAAE;QAC9B,WAAW,EAAE,iBAAiB;QAC9B,GAAG,oBAAoB;KACxB,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,IAAA,oBAAE,EAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS,iBAAe,MAAM,YAC3F,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/side-page/side-page-body.module.scss

@@ -0,0 +1,4 @@
+.body {
+  flex-grow: 1;
+  overflow-y: auto;
+}

package/dist/side-page/side-page-util.scss

@@ -0,0 +1,9 @@
+@use '../shadows';
+
+@mixin size-s {
+  --side-page-max-width: 488px;
+}
+
+@mixin size-m {
+  --side-page-max-width: 968px;
+}

package/dist/side-page/side-page.d.ts

@@ -0,0 +1,7 @@
+import type { SidePageProps } from './types';
+/**
+ * Модальное окно, прикрепленное к правой стороне экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SidePage({ size, className, children, onClose, overlayProps, 'data-testid': testId, ...restProps }: SidePageProps): import("react").JSX.Element;

package/dist/side-page/side-page.js

@@ -0,0 +1,64 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePage = SidePage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const modal_overlay_1 = require("../modal-overlay");
+const utils_1 = require("../modal-overlay/utils");
+const classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./side-page.module.scss"));
+const hooks_1 = require("../hooks");
+/**
+ * Модальное окно, прикрепленное к правой стороне экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SidePage({ size = 'm', className, children, onClose, overlayProps, 'data-testid': testId = 'side-page', ...restProps }) {
+    const overlayClickProps = (0, utils_1.useExactClick)(onClose, {
+        onMouseDown: overlayProps?.onMouseDown,
+        onMouseUp: overlayProps?.onMouseUp,
+    });
+    const overlayClassName = (0, classnames_1.default)(
+    // ВАЖНО: классы размера и скруглений кидаем на ModalOverlay для того чтобы понизить специфичность
+    // а также потому что надо регулировать отступы от края
+    size !== 'unset' && styles[`size-${size}`], overlayProps?.className);
+    const sidePageClassName = (0, classnames_1.default)(styles['side-page'], className);
+    (0, hooks_1.useKeydown)('Escape', onClose);
+    return ((0, jsx_runtime_1.jsx)(modal_overlay_1.ModalOverlay, { ...overlayProps, className: overlayClassName, ...overlayClickProps, children: (0, jsx_runtime_1.jsx)("div", { className: sidePageClassName, "data-testid": testId, ...restProps, children: children }) }));
+}
+//# sourceMappingURL=side-page.js.map

package/dist/side-page/side-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-page.js","sourceRoot":"","sources":["../../src/side-page/side-page.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,4BAgCC;;AA3CD,oDAAgD;AAChD,kDAAuD;AACvD,4DAA4B;AAC5B,gEAAkD;AAClD,oCAAsC;AAEtC;;;;GAIG;AACH,SAAgB,QAAQ,CAAC,EACvB,IAAI,GAAG,GAAG,EACV,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,aAAa,EAAE,MAAM,GAAG,WAAW,EACnC,GAAG,SAAS,EACE;IACd,MAAM,iBAAiB,GAAG,IAAA,qBAAa,EAAC,OAAO,EAAE;QAC/C,WAAW,EAAE,YAAY,EAAE,WAAW;QACtC,SAAS,EAAE,YAAY,EAAE,SAAS;KACnC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,IAAA,oBAAE;IACzB,kGAAkG;IAClG,uDAAuD;IACvD,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EAC1C,YAAY,EAAE,SAAS,CACxB,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAA,oBAAE,EAAC,MAAM,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,CAAC;IAE7D,IAAA,kBAAU,EAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAE9B,OAAO,CACL,uBAAC,4BAAY,OAAK,YAAY,EAAE,SAAS,EAAE,gBAAgB,KAAM,iBAAiB,YAChF,gCAAK,SAAS,EAAE,iBAAiB,iBAAe,MAAM,KAAM,SAAS,YAClE,QAAQ,GACL,GACO,CAChB,CAAC;AACJ,CAAC"}

package/dist/side-page/side-page.module.scss

@@ -0,0 +1,23 @@
+@use '../breakpoints';
+@use './side-page-util';
+@use '../modal-overlay/modal-overlay-util';
+
+.side-page {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  max-width: var(--side-page-max-width, auto);
+}
+
+.size-s {
+  @include side-page-util.size-s;
+}
+
+.size-m {
+  @include side-page-util.size-m;
+}

package/dist/side-page/types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, Ref } from 'react';
+import type { WithTestId } from '../types';
+import type { ModalOverlayProps } from '../modal-overlay';
+import type { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export interface SidePageProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Ширина. */
+    size?: 's' | 'm' | 'unset';
+    /** Будет вызвана при закрытии. */
+    onClose?: () => void;
+    /** Свойства компонента ModalOverlay. */
+    overlayProps?: ModalOverlayProps;
+}
+export interface SidePageBodyProps extends HTMLAttributes<HTMLDivElement>, WithTestId, WithPageScrollLock {
+    rootRef?: Ref<HTMLDivElement>;
+}

package/dist/side-page/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/side-page/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/side-page/types.ts"],"names":[],"mappings":""}

package/dist/side-page/utils.d.ts

@@ -0,0 +1,26 @@
+import type { SidePageProps } from './types';
+import { type TransitionOptions, type TransitionState } from 'react-transition-state';
+/**
+ * Вернет свойства SidePage для формирования отзывчивого дизайна по гайдам.
+ * @param props Свойства SidePage.
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @param props.size Размер на desktop-разрешениях.
+ * @return Свойства SidePage.
+ */
+export declare function getResponsiveSidePageProps(props: SidePageProps): SidePageProps;
+/**
+ * Хук для формирования перехода (плавного появления/исчезания) SidePage.
+ * @param config Конфиг.
+ * @param config.extraProps Свойства SidePage и свойства состояния (shown).
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @return Состояние перехода и Свойства SidePage.
+ */
+export declare function useSidePageTransition({ shown, timeout, onStateChange, extraProps, }: {
+    shown?: boolean;
+    timeout?: number;
+    onStateChange?: TransitionOptions['onStateChange'];
+    extraProps?: SidePageProps;
+}): {
+    state: TransitionState;
+    sidePageProps: SidePageProps;
+};

package/dist/side-page/utils.js

@@ -0,0 +1,102 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getResponsiveSidePageProps = getResponsiveSidePageProps;
+exports.useSidePageTransition = useSidePageTransition;
+const hooks_1 = require("../hooks");
+const react_transition_state_1 = require("react-transition-state");
+const classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./utils.module.scss"));
+/**
+ * Вернет свойства SidePage для формирования отзывчивого дизайна по гайдам.
+ * @param props Свойства SidePage.
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @param props.size Размер на desktop-разрешениях.
+ * @return Свойства SidePage.
+ */
+function getResponsiveSidePageProps(props) {
+    const { size, overlayProps, ...restProps } = props;
+    return {
+        ...restProps,
+        size: 'unset',
+        // ВАЖНО: накидываем класс именно на ModalOverlay так как размер влияет и на него в том числе
+        overlayProps: {
+            ...overlayProps,
+            className: (0, classnames_1.default)(styles[`size-${size}`], overlayProps?.className),
+        },
+    };
+}
+/**
+ * Хук для формирования перехода (плавного появления/исчезания) SidePage.
+ * @param config Конфиг.
+ * @param config.extraProps Свойства SidePage и свойства состояния (shown).
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @return Состояние перехода и Свойства SidePage.
+ */
+function useSidePageTransition({ shown, timeout = 300, onStateChange, extraProps, }) {
+    const [state, toggle] = (0, react_transition_state_1.useTransition)({
+        initialEntered: shown,
+        preEnter: true,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        timeout,
+        onStateChange,
+    });
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        toggle(shown);
+    }, [shown]);
+    return {
+        state,
+        sidePageProps: {
+            ...extraProps,
+            className: (0, classnames_1.default)(extraProps?.className, styles['side-page']),
+            onClose: state.status === 'entering' ? undefined : extraProps?.onClose,
+            overlayProps: {
+                ...extraProps?.overlayProps,
+                className: (0, classnames_1.default)(extraProps?.overlayProps?.className, styles[state.status]),
+                style: timeout !== 300
+                    ? {
+                        '--side-page-transition-duration': `${timeout}ms`,
+                        ...extraProps?.overlayProps?.style,
+                    }
+                    : extraProps?.overlayProps?.style,
+            },
+        },
+    };
+}
+//# sourceMappingURL=utils.js.map

package/dist/side-page/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/side-page/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,gEAeC;AASD,sDAoDC;AA5FD,oCAAqD;AACrD,mEAIgC;AAChC,4DAA4B;AAC5B,4DAA8C;AAE9C;;;;;;GAMG;AACH,SAAgB,0BAA0B,CAAC,KAAoB;IAC7D,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEnD,OAAO;QACL,GAAG,SAAS;QAEZ,IAAI,EAAE,OAAO;QAEb,6FAA6F;QAC7F,YAAY,EAAE;YACZ,GAAG,YAAY;YAEf,SAAS,EAAE,IAAA,oBAAE,EAAC,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC;SAC/D;KACF,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,OAAO,GAAG,GAAG,EACb,aAAa,EACb,UAAU,GAMX;IAIC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAA,sCAAa,EAAC;QACpC,cAAc,EAAE,KAAK;QACrB,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE,IAAI;QAClB,aAAa,EAAE,IAAI;QACnB,OAAO;QACP,aAAa;KACd,CAAC,CAAC;IAEH,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO;QACL,KAAK;QAEL,aAAa,EAAE;YACb,GAAG,UAAU;YAEb,SAAS,EAAE,IAAA,oBAAE,EAAC,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;YAEzD,OAAO,EAAE,KAAK,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,OAAO;YAEtE,YAAY,EAAE;gBACZ,GAAG,UAAU,EAAE,YAAY;gBAE3B,SAAS,EAAE,IAAA,oBAAE,EAAC,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBAExE,KAAK,EACH,OAAO,KAAK,GAAG;oBACb,CAAC,CAAE;wBACC,iCAAiC,EAAE,GAAG,OAAO,IAAI;wBACjD,GAAG,UAAU,EAAE,YAAY,EAAE,KAAK;qBACjB;oBACrB,CAAC,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK;aACtC;SACF;KACF,CAAC;AACJ,CAAC"}

package/dist/side-page/utils.module.scss

@@ -0,0 +1,67 @@
+@use '../breakpoints';
+@use './side-page-util';
+@use '../top-bar/top-bar-util';
+@use '../bottom-bar/bottom-bar-util';
+@use '../modal-overlay/modal-overlay-util';
+
+@include breakpoints.lt('xs') {
+  .size-s {
+    @include top-bar-util.size-m;
+    @include bottom-bar-util.size-m;
+  }
+  .size-m {
+    @include top-bar-util.size-m;
+    @include bottom-bar-util.size-m;
+  }
+}
+
+@include breakpoints.gte('xs') {
+  .size-s {
+    @include side-page-util.size-s;
+    @include top-bar-util.size-xl;
+    @include bottom-bar-util.size-l;
+  }
+  .size-m {
+    @include side-page-util.size-m;
+    @include top-bar-util.size-xl;
+    @include bottom-bar-util.size-l;
+  }
+}
+
+// transitions
+
+/* stylelint-disable-next-line selector-class-pattern */
+.preEnter {
+  background-color: transparent;
+  .side-page {
+    transform: translateX(100%);
+  }
+}
+
+.entering {
+  transition: background-color var(--side-page-transition-duration, 300ms) ease-in-out;
+  background-color: modal-overlay-util.$overlay-color;
+  overflow: hidden;
+  .side-page {
+    transition: transform var(--side-page-transition-duration, 300ms) ease-in-out;
+    transform: translateX(0);
+  }
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.preExit {
+  background-color: modal-overlay-util.$overlay-color;
+  .side-page {
+    transform: translateX(0);
+  }
+}
+
+.exiting {
+  transition: background-color var(--side-page-transition-duration, 300ms) ease-in-out;
+  background-color: transparent;
+  overflow: hidden;
+  .side-page {
+    transition: transform var(--side-page-transition-duration, 300ms) ease-in-out;
+    transform: translateX(100%);
+  }
+}

package/dist/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export type { SkeletonStyle, SkeletonProps } from './types';
+export { Skeleton } from './skeleton';

package/dist/skeleton/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+var skeleton_1 = require("./skeleton");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return skeleton_1.Skeleton; } });
+//# sourceMappingURL=index.js.map

package/dist/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/skeleton/index.ts"],"names":[],"mappings":";;;AACA,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA"}

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,7 @@
+import type { SkeletonProps } from './types';
+/**
+ * Скелетон - блок с анимацией загрузки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Skeleton({ theme, shining, children, className, rootRef, ...restProps }: SkeletonProps): import("react").JSX.Element;