@sima-land/moleculas 16.0.0-alpha.2 → 16.0.0-alpha.21

package/common/components/breadcrumbs/breadcrumbs.m.scss

@@ -0,0 +1,113 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  line-height: 16px;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.root .item {
+  margin-bottom: 12px;
+}
+
+// ВАЖНО: именно after чтобы при переносе выглядело правильно
+.root .item:not(:last-child)::after {
+  content: '/';
+  display: block;
+  margin: 0 8px;
+}
+
+.inner {
+  position: relative;
+  display: flex;
+}
+
+.name {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.icon {
+  flex-shrink: 0;
+  flex-grow: 0;
+  display: block;
+  margin-left: 2px;
+  stroke: currentColor;
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+.dropdown {
+  min-width: 180px;
+  position: absolute;
+  top: -16px;
+  left: -16px;
+  padding: 16px;
+  z-index: 2;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.dropdown .name {
+  margin-bottom: 16px;
+}
+
+.dropdown .icon {
+  transform: scaleY(-1);
+  stroke: colors.$basic-gray38;
+}
+
+.dropdown-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.sibling {
+  display: block;
+}
+
+.dropdown-body > .sibling + .sibling {
+  margin-top: 12px;
+}
+
+.stub {
+  border-radius: 4px;
+  height: 12px;
+  background: colors.$basic-gray4;
+}
+
+.stubs > .stub + .stub {
+  margin-top: 12px;
+}
+
+.fade-enter {
+  opacity: 0;
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}

package/common/components/breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export type { BreadcrumbProps, BreadcrumbItemProps } from './types';
+export { Breadcrumbs, BreadcrumbsItem } from './breadcrumbs';

package/common/components/breadcrumbs/index.js

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

package/common/components/breadcrumbs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/breadcrumbs/index.ts"],"names":[],"mappings":";;;AACA,6CAA6D;AAApD,0GAAA,WAAW,OAAA;AAAE,8GAAA,eAAe,OAAA"}

package/common/components/breadcrumbs/types.d.ts

@@ -0,0 +1,8 @@
+import type { LinkProps } from '@sima-land/ui-nucleons/link';
+import type { WithTestId } from '@sima-land/ui-nucleons/types';
+import type { HTMLAttributes } from 'react';
+export interface BreadcrumbProps extends WithTestId, HTMLAttributes<HTMLElement> {
+}
+export interface BreadcrumbItemProps extends LinkProps, WithTestId {
+    active?: boolean;
+}

package/common/{types.js → components/breadcrumbs/types.js}

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

package/common/components/breadcrumbs/types.js.map

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

package/common/components/img-stub/img-stub.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties, HTMLAttributes } from 'react';
+import type { WithTestId } from '@sima-land/ui-nucleons/types';
+export interface ImgStubStyle extends CSSProperties {
+    '--img-stub-size'?: string;
+}
+export interface ImgStubProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'>, WithTestId {
+    style?: ImgStubStyle;
+}
+/**
+ * Баннер-заглушка для больших картинок которые не загрузились из-за ошибки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ImgStub({ className, ...rest }: ImgStubProps): import("react/jsx-runtime").JSX.Element;

package/common/components/img-stub/img-stub.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImgStub = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Repeat_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Repeat"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const img_stub_m_scss_1 = __importDefault(require("./img-stub.m.scss"));
+const cx = bind_1.default.bind(img_stub_m_scss_1.default);
+/**
+ * Баннер-заглушка для больших картинок которые не загрузились из-за ошибки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ImgStub({ className, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rest, className: cx('root', className), role: 'banner', children: [(0, jsx_runtime_1.jsxs)("svg", { className: img_stub_m_scss_1.default.text, viewBox: '0 0 160 160', children: [(0, jsx_runtime_1.jsx)("text", { x: '50%', y: '14.5%', className: img_stub_m_scss_1.default.line, children: "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435" }), (0, jsx_runtime_1.jsx)("text", { x: '50%', y: '24.5%', className: img_stub_m_scss_1.default.line, children: "\u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043B\u043E\u0441\u044C :(" }), (0, jsx_runtime_1.jsx)("text", { x: '50%', y: '80%', className: img_stub_m_scss_1.default.line, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435" }), (0, jsx_runtime_1.jsx)("text", { x: '50%', y: '90%', className: img_stub_m_scss_1.default.line, children: "\u043E\u0431\u043D\u043E\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443" })] }), (0, jsx_runtime_1.jsx)(Repeat_1.default, { className: img_stub_m_scss_1.default.icon })] }));
+}
+exports.ImgStub = ImgStub;
+//# sourceMappingURL=img-stub.js.map

package/common/components/img-stub/img-stub.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"img-stub.js","sourceRoot":"","sources":["../../../../src/common/components/img-stub/img-stub.tsx"],"names":[],"mappings":";;;;;;;AAEA,6FAAwE;AACxE,2DAAyC;AACzC,wEAAuC;AAUvC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,yBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAgB;IAC1D,OAAO,CACL,oCAAS,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,QAAQ,aAC5D,iCAAK,SAAS,EAAE,yBAAM,CAAC,IAAI,EAAE,OAAO,EAAC,aAAa,aAChD,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,OAAO,EAAC,SAAS,EAAE,yBAAM,CAAC,IAAI,mFAEvC,EACP,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,OAAO,EAAC,SAAS,EAAE,yBAAM,CAAC,IAAI,mGAEvC,EAEP,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,SAAS,EAAE,yBAAM,CAAC,IAAI,6EAErC,EACP,iCAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,SAAS,EAAE,yBAAM,CAAC,IAAI,kHAErC,IACH,EACN,uBAAC,gBAAS,IAAC,SAAS,EAAE,yBAAM,CAAC,IAAI,GAAI,IACjC,CACP,CAAC;AACJ,CAAC;AArBD,0BAqBC"}

package/common/components/img-stub/img-stub.m.scss

@@ -0,0 +1,36 @@
+.root {
+  position: relative;
+  width: var(--img-stub-size, 160px);
+  height: var(--img-stub-size, 160px);
+  background: #f5f5f5;
+  flex-grow: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
+}
+
+.text {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.line {
+  fill: #9e9e9e;
+  font-size: 13px;
+  text-anchor: middle;
+  text-align: center;
+}
+
+.icon {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30.625%;
+  height: 30.625%;
+  fill: #757575;
+  transform: translate(-50%, -50%) scaleX(-1);
+}

package/common/components/img-stub/index.d.ts

@@ -0,0 +1 @@
+export { type ImgStubProps, type ImgStubStyle, ImgStub } from './img-stub';

package/common/components/img-stub/index.js

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

package/common/components/img-stub/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/img-stub/index.ts"],"names":[],"mappings":";;;AAAA,uCAA2E;AAA5B,mGAAA,OAAO,OAAA"}

package/common/components/{intractive-image → interactive-image}/index.js

@@ -4,3 +4,4 @@ exports.Parts = exports.InteractiveImage = void 0;
 const interactive_image_1 = require("./interactive-image");
 Object.defineProperty(exports, "InteractiveImage", { enumerable: true, get: function () { return interactive_image_1.InteractiveImage; } });
 Object.defineProperty(exports, "Parts", { enumerable: true, get: function () { return interactive_image_1.Parts; } });
+//# sourceMappingURL=index.js.map

package/common/components/interactive-image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/interactive-image/index.ts"],"names":[],"mappings":";;;AAMA,2DAA8D;AASrD,iGATA,oCAAgB,OASA;AAAE,sFATA,yBAAK,OASA"}

package/common/components/interactive-image/interactive-image.d.ts

@@ -0,0 +1,15 @@
+import { AnchorHTMLAttributes } from 'react';
+import { InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
+export declare const InteractiveImage: import("react").ForwardRefExoticComponent<InteractiveImageProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Обертка-ссылка для картинки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function ImageAnchor({ children, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+export declare const Parts: {
+    readonly ImageAnchor: typeof ImageAnchor;
+    readonly Image: import("react").ForwardRefExoticComponent<InteractiveImageImageProps & import("react").RefAttributes<HTMLImageElement>>;
+    readonly Point: import("react").ForwardRefExoticComponent<InteractiveImagePointProps & import("react").RefAttributes<HTMLAnchorElement>>;
+};
+export {};

package/common/components/interactive-image/interactive-image.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Parts = exports.InteractiveImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const bind_1 = __importDefault(require("classnames/bind"));
+const interactive_image_m_scss_1 = __importDefault(require("./interactive-image.m.scss"));
+const cx = bind_1.default.bind(interactive_image_m_scss_1.default);
+exports.InteractiveImage = (0, react_1.forwardRef)(({ children, 'data-testid': testId, className, dotSize, ...rest }, ref) => {
+    const rootClassName = cx('root', {
+        'dot-size-unset': dotSize === 'unset',
+    }, className);
+    validateChildren(children);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: rootClassName, ...rest, "data-testid": testId, children: react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) &&
+            (child.type === ImageAnchor || child.type === Image || child.type === Point)) }));
+});
+/**
+ * Проверка валидности содержимого, переданного в InteractiveImage.
+ * @param children Содержимое.
+ */
+function validateChildren(children) {
+    let counter = 0;
+    for (const child of react_1.Children.toArray(children)) {
+        if ((0, react_1.isValidElement)(child) && (child.type === ImageAnchor || child.type === Image)) {
+            counter++;
+        }
+        if (counter > 1) {
+            throw new Error('[InteractiveImage] Either Image or ImageAnchor allowed. Not both.');
+        }
+    }
+}
+/**
+ * Обертка-ссылка для картинки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ImageAnchor({ children, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("a", { ...rest, className: cx('image-anchor', className), "data-testid": 'interactive-image:image-anchor', children: react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && child.type === Image) }));
+}
+/**
+ * Изображение на котором будут располагаться точки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const Image = (0, react_1.forwardRef)(({ className, 'data-testid': testId = 'interactive-image:image', ...rest }, ref) => ((0, jsx_runtime_1.jsx)("img", { ref: ref, className: cx('image', className), "data-testid": testId, ...rest })));
+/**
+ * Точка которая будет располагаться на изображении.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const Point = (0, react_1.forwardRef)(({ x, y, className, style, 'data-testid': testId = 'interactive-image:point', ...rest }, ref) => ((0, jsx_runtime_1.jsx)("a", { ref: ref, "aria-label": '\u0422\u043E\u0447\u043A\u0430 \u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0438', "data-testid": testId, className: cx('point', className), style: { ...style, top: `${y}%`, left: `${x}%` }, ...rest })));
+exports.Parts = { ImageAnchor, Image, Point };
+//# sourceMappingURL=interactive-image.js.map

package/common/components/interactive-image/interactive-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive-image.js","sourceRoot":"","sources":["../../../../src/common/components/interactive-image/interactive-image.tsx"],"names":[],"mappings":"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"}

package/common/components/{intractive-image → interactive-image}/types.d.ts

@@ -1,9 +1,9 @@
-import type { CSSProperties } from 'react';
+import type { HTMLAttributes, AnchorHTMLAttributes, ImgHTMLAttributes, CSSProperties } from 'react';
 export interface InteractiveImageStyle extends CSSProperties {
     '--dot-size'?: string;
     '--dot-size-core'?: string;
 }
-export interface InteractiveImageProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface InteractiveImageProps extends HTMLAttributes<HTMLDivElement> {
     /** Размер точек. При указании "unset" можно задать css-переменные через className или style. */
     dotSize?: 'unset';
     /** Стили с возможностью указания размера точек через css-переменные. */
@@ -11,11 +11,11 @@ export interface InteractiveImageProps extends React.HTMLAttributes<HTMLDivEleme
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
-export interface InteractiveImageImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+export interface InteractiveImageImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
-export interface InteractiveImagePointProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface InteractiveImagePointProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     x: number;
     y: number;
     /** Идентификатор для систем автоматизированного тестирования. */

package/common/components/interactive-image/types.js

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

package/common/components/interactive-image/types.js.map

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

package/common/components/media-gallery/index.d.ts

@@ -0,0 +1,2 @@
+export type { MediaGalleryProps, MediaGalleryStyle } from './types';
+export { MediaGallery, MediaSlide } from './media-gallery';

package/common/components/media-gallery/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaSlide = exports.MediaGallery = void 0;
+var media_gallery_1 = require("./media-gallery");
+Object.defineProperty(exports, "MediaGallery", { enumerable: true, get: function () { return media_gallery_1.MediaGallery; } });
+Object.defineProperty(exports, "MediaSlide", { enumerable: true, get: function () { return media_gallery_1.MediaSlide; } });
+//# sourceMappingURL=index.js.map

package/common/components/media-gallery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/media-gallery/index.ts"],"names":[],"mappings":";;;AACA,iDAA2D;AAAlD,6GAAA,YAAY,OAAA;AAAE,2GAAA,UAAU,OAAA"}

package/common/components/media-gallery/media-gallery.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { MediaGalleryProps } from './types';
+/**
+ * Блок просмотра медиа (фото/видео) с возможностью прокрутки с помощью свайпа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaGallery({ className, style, children, targetIndex, onChangeTargetIndex, }: MediaGalleryProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Слот слайда галереи.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MediaSlide({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/common/components/media-gallery/media-gallery.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaSlide = exports.MediaGallery = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const media_gallery_m_scss_1 = __importDefault(require("./media-gallery.m.scss"));
+const cx = bind_1.default.bind(media_gallery_m_scss_1.default);
+/**
+ * Блок просмотра медиа (фото/видео) с возможностью прокрутки с помощью свайпа.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaGallery({ className, style, children, targetIndex = 0, onChangeTargetIndex, }) {
+    const mounted = (0, hooks_1.useMounted)();
+    const slidesRef = (0, react_1.useRef)(null);
+    const items = react_1.Children.toArray(children).filter(item => (0, react_1.isValidElement)(item) && item.type === MediaSlide);
+    const total = items.length;
+    const totalRef = (0, react_1.useRef)(total);
+    totalRef.current = total;
+    const targetIndexRef = (0, react_1.useRef)(targetIndex);
+    targetIndexRef.current = targetIndex;
+    const onChangeTargetIndexRef = (0, react_1.useRef)(onChangeTargetIndex);
+    onChangeTargetIndexRef.current = onChangeTargetIndex;
+    const moveBackward = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = onChangeTargetIndexRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeTargetIndexRef, utils_1.LoopUtil.getPrevIndex(targetIndexRef.current, totalRef.current));
+    }, []);
+    const moveForward = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = onChangeTargetIndexRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeTargetIndexRef, utils_1.LoopUtil.getNextIndex(targetIndexRef.current, totalRef.current));
+    }, []);
+    const target = items[targetIndex];
+    const next = items[utils_1.LoopUtil.getNextIndex(targetIndex, total)];
+    const prev = items[utils_1.LoopUtil.getPrevIndex(targetIndex, total)];
+    const { init, getProps } = (0, react_1.useMemo)(() => (0, utils_1.createSwipe)({
+        onSwipeStart: () => {
+            if (!slidesRef.current) {
+                return;
+            }
+            slidesRef.current.classList.remove(cx('transition'));
+        },
+        onSwipeMove: ({ distanceX }) => {
+            if (!slidesRef.current) {
+                return;
+            }
+            // @todo линейная интерполяция для того чтобы не докручивать до тех слайдов которые не смонтированы
+            slidesRef.current.style.setProperty('transform', `translate3d(${distanceX}px, 0, 0)`);
+        },
+        onSwipeEnd: ({ distanceX, isLeft, isRight }) => {
+            const slides = slidesRef.current;
+            if (!slides) {
+                return;
+            }
+            if (isLeft) {
+                slides.style.setProperty('transform', `translate3d(calc(${distanceX}px - var(--media-gallery-width)), 0, 0)`);
+                moveBackward();
+            }
+            if (isRight) {
+                slides.style.setProperty('transform', `translate3d(calc(${distanceX}px + var(--media-gallery-width)), 0, 0)`);
+                moveForward();
+            }
+            // ВАЖНО: здесь должны быть именно два requestAnimationFrame, один внутри другого
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    slides.classList.add(cx('transition'));
+                    slides.style.setProperty('transform', `translate3d(0px, 0, 0)`);
+                });
+            });
+        },
+    }), [moveBackward, moveBackward]);
+    (0, react_1.useEffect)(init, [init]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: cx('root', className), style: style, ...getProps(), children: mounted && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { ref: slidesRef, className: cx('slides'), children: [prev && ((0, jsx_runtime_1.jsx)("div", { className: cx('slide', 'prev'), children: prev }, prev.key)), target && ((0, jsx_runtime_1.jsx)("div", { className: cx('slide'), children: target }, target.key)), next && ((0, jsx_runtime_1.jsx)("div", { className: cx('slide', 'next'), children: next }, next.key))] }) })) }));
+}
+exports.MediaGallery = MediaGallery;
+/**
+ * Слот слайда галереи.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MediaSlide({ children }) {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}
+exports.MediaSlide = MediaSlide;
+//# sourceMappingURL=media-gallery.js.map

package/common/components/media-gallery/media-gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-gallery.js","sourceRoot":"","sources":["../../../../src/common/components/media-gallery/media-gallery.tsx"],"names":[],"mappings":"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"}

package/common/components/media-gallery/media-gallery.m.scss

@@ -0,0 +1,35 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  width: var(--media-gallery-width, 320px);
+  height: var(--media-gallery-height, 240px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+}
+
+.slides {
+  position: relative;
+}
+
+.slide {
+  width: var(--media-gallery-width, 320px);
+  height: var(--media-gallery-height, 240px);
+}
+
+.slide.prev {
+  position: absolute;
+  left: -100%;
+  top: 0;
+}
+
+.slide.next {
+  position: absolute;
+  left: 100%;
+  top: 0;
+}
+
+.transition {
+  transition: transform 0.3s ease-in-out;
+}

package/common/components/media-gallery/types.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface MediaGalleryStyle extends CSSProperties {
+    '--media-gallery-width'?: string;
+    '--media-gallery-height'?: string;
+}
+export interface MediaGalleryProps {
+    style?: MediaGalleryStyle;
+    className?: string;
+    children: ReactNode;
+    targetIndex?: number;
+    onChangeTargetIndex?: (newIndex: number) => void;
+}

package/common/components/media-gallery/types.js

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

package/common/components/media-gallery/types.js.map

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

package/common/components/media-gallery/utils.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+export declare const LoopUtil: {
+    /**
+     * Возвращает индекс предыдущего элемента.
+     * @param current Текущий индекс.
+     * @param total Всего.
+     * @return Индекс.
+     */
+    readonly getPrevIndex: (current: number, total: number) => number;
+    /**
+     * Возвращает индекс следующего элемента.
+     * @param current Текущий индекс.
+     * @param total Всего.
+     * @return Индекс.
+     */
+    readonly getNextIndex: (current: number, total: number) => number;
+};
+/**
+ * Получив пропсы items и children вернет массив пропсов для MediaView.
+ * @param props Свойства.
+ * @return Пропсы.
+ */
+export declare function createSwipe({ onSwipeStart, onSwipeMove, onSwipeEnd, }?: {
+    onSwipeStart?: VoidFunction;
+    onSwipeMove?: (event: {
+        startX: number;
+        distanceX: number;
+    }) => void;
+    onSwipeEnd?: (event: {
+        startX: number;
+        distanceX: number;
+        isLeft: boolean;
+        isRight: boolean;
+    }) => void;
+}): {
+    getProps: () => HTMLAttributes<HTMLElement>;
+    init: () => VoidFunction;
+};