@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.2

package/Swiper/Swiper.js

@@ -0,0 +1,412 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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);
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Swiper = void 0;
+const React = __importStar(require("react"));
+const SwiperContainer_1 = __importDefault(require("./SwiperContainer"));
+const SwiperWrapper_1 = __importDefault(require("./SwiperWrapper"));
+const SwiperTrack_1 = __importDefault(require("./SwiperTrack"));
+const SwiperSlidesRenderer_1 = __importDefault(require("./SwiperSlidesRenderer"));
+__exportStar(require("./SwiperSlide"), exports);
+exports.Swiper = React.forwardRef((props, ref) => {
+    const { children, dragThreshold = 240, snap = true, draggable = true, overrides, initialIndex = 0, infinite = false, onSlideChange, autoplay = false, autoplayInterval = 3000, pauseOnHover = true, keyboardControl = true, threshold = 20, resistance = true, slidesPerView = 1 } = props, restProps = __rest(props, ["children", "dragThreshold", "snap", "draggable", "overrides", "initialIndex", "infinite", "onSlideChange", "autoplay", "autoplayInterval", "pauseOnHover", "keyboardControl", "threshold", "resistance", "slidesPerView"]);
+    // #region Slides
+    const slides = React.useMemo(() => {
+        const childrenSlides = Array.isArray(children)
+            ? children
+            : [children];
+        if (infinite) {
+            if (childrenSlides.length < 2) {
+                console.error('To infinite loop counts of the slides must be greater than 2');
+                return childrenSlides;
+            }
+            if (childrenSlides.length < slidesPerView + 1) {
+                console.error(`For infinite loop with slidesPerView=${slidesPerView}, need at least ${slidesPerView + 1} slides`);
+                return childrenSlides;
+            }
+            // Используем стабильные ключи без Date.now()
+            const headClones = childrenSlides.slice(-slidesPerView).map((slide, i) => React.cloneElement(slide, {
+                key: `clone-head-${i}`,
+                'data-clone': 'head',
+            }));
+            const tailClones = childrenSlides.slice(0, slidesPerView).map((slide, i) => React.cloneElement(slide, {
+                key: `clone-tail-${i}`,
+                'data-clone': 'tail',
+            }));
+            const mainSlides = childrenSlides.map((slide, idx) => React.cloneElement(slide, {
+                key: `slide-${idx}`,
+            }));
+            return [...headClones, ...mainSlides, ...tailClones];
+        }
+        return childrenSlides.map((slide, idx) => React.cloneElement(slide, {
+            key: `slide-${idx}`,
+        }));
+    }, [children, infinite, slidesPerView]);
+    const total = slides.length;
+    const realSlidesCount = infinite ? total - 2 * slidesPerView : total;
+    const maxIndex = Math.max(0, total - slidesPerView);
+    // #region States
+    const [index, setIndex] = React.useState(() => {
+        if (!infinite) {
+            return Math.max(0, Math.min(initialIndex, maxIndex));
+        }
+        return initialIndex + slidesPerView;
+    });
+    const [offset, setOffset] = React.useState(0);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [disableAnimation, setDisableAnimation] = React.useState(false);
+    const [isPaused, setIsPaused] = React.useState(false);
+    // #region Refs
+    const dragging = React.useRef(false);
+    const startX = React.useRef(0);
+    const lastX = React.useRef(0);
+    const lastTime = React.useRef(0);
+    const velocity = React.useRef(0);
+    const wrapperRef = React.useRef(null);
+    const trackRef = React.useRef(null);
+    const isAnimating = React.useRef(false);
+    const autoplayTimer = React.useRef();
+    const mounted = React.useRef(true);
+    const normalizeTimeout = React.useRef();
+    // #region Real Index
+    const realIndex = React.useMemo(() => {
+        if (!infinite) {
+            return index;
+        }
+        const realIndex = index - slidesPerView;
+        if (realIndex < 0) {
+            return realSlidesCount + realIndex;
+        }
+        if (realIndex >= realSlidesCount) {
+            return realIndex - realSlidesCount;
+        }
+        return Math.min(realIndex, realSlidesCount - slidesPerView);
+    }, [index, infinite, slidesPerView, realSlidesCount]);
+    const prevRealIndex = React.useRef(realIndex);
+    // #region Effects
+    React.useEffect(() => {
+        if (realIndex !== prevRealIndex.current && mounted.current) {
+            onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(realIndex);
+            prevRealIndex.current = realIndex;
+        }
+    }, [realIndex, onSlideChange]);
+    React.useEffect(() => {
+        if (!mounted.current)
+            return;
+        const newTotal = slides.length;
+        if (index >= newTotal) {
+            setIndex(Math.max(0, newTotal - 1));
+        }
+    }, [slides.length, index]);
+    // #region Normalization
+    const normalizeIndex = React.useCallback(() => {
+        if (!infinite || !mounted.current)
+            return;
+        const firstRealIndex = slidesPerView;
+        const lastRealIndex = total - slidesPerView - 1;
+        if (index < firstRealIndex || index > lastRealIndex) {
+            const target = index < firstRealIndex ? lastRealIndex : firstRealIndex;
+            setDisableAnimation(true);
+            requestAnimationFrame(() => {
+                var _a;
+                if (!mounted.current)
+                    return;
+                (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                setIndex(target);
+                setOffset(0);
+                requestAnimationFrame(() => {
+                    if (mounted.current) {
+                        setDisableAnimation(false);
+                    }
+                });
+            });
+        }
+    }, [index, infinite, slidesPerView, total]);
+    // #region Navigation API
+    const indexRef = React.useRef(index);
+    React.useEffect(() => {
+        indexRef.current = index;
+    }, [index]);
+    const goToIndex = React.useCallback((i) => {
+        if (isAnimating.current)
+            return;
+        let targetIndex = i;
+        if (infinite) {
+            targetIndex = i + slidesPerView;
+            const minIndex = slidesPerView;
+            const maxIndex = slidesPerView + realSlidesCount - 1;
+            targetIndex = Math.max(minIndex, Math.min(maxIndex, targetIndex));
+        }
+        else {
+            targetIndex = Math.max(0, Math.min(maxIndex, i));
+        }
+        if (targetIndex === indexRef.current) {
+            return; // никуда не едем — флаг не трогаем
+        }
+        setDisableAnimation(false);
+        setIndex(targetIndex);
+        isAnimating.current = true;
+    }, [infinite, slidesPerView, realSlidesCount, maxIndex]);
+    const next = React.useCallback(() => {
+        // if (isAnimating.current) return;
+        setDisableAnimation(false);
+        setIndex(prev => {
+            let nextIndex;
+            if (infinite) {
+                nextIndex = Math.min(prev + 1, total - 1);
+            }
+            else {
+                nextIndex = Math.min(prev + 1, maxIndex);
+            }
+            // если индекс не меняется — не ставим флаг анимации
+            if (nextIndex === prev) {
+                return prev;
+            }
+            isAnimating.current = true;
+            return nextIndex;
+        });
+    }, [infinite, maxIndex, total]);
+    const prev = React.useCallback(() => {
+        // if (isAnimating.current) return;
+        setDisableAnimation(false);
+        setIndex(prev => {
+            const nextIndex = Math.max(prev - 1, 0);
+            if (nextIndex === prev) {
+                return prev;
+            }
+            isAnimating.current = true;
+            return nextIndex;
+        });
+    }, []);
+    // #region Pointer Events
+    const onPointerDown = React.useCallback((e) => {
+        if (!wrapperRef.current || !draggable)
+            return;
+        dragging.current = true;
+        isAnimating.current = false;
+        setDisableAnimation(true);
+        setIsDragging(true);
+        startX.current = e.clientX;
+        lastX.current = e.clientX;
+        lastTime.current = performance.now();
+        velocity.current = 0;
+        e.target.setPointerCapture(e.pointerId);
+    }, [draggable]);
+    const onPointerMove = React.useCallback((e) => {
+        if (!dragging.current || isAnimating.current)
+            return;
+        const now = performance.now();
+        const dx = e.clientX - lastX.current;
+        const dt = now - lastTime.current;
+        if (dt > 0) {
+            velocity.current = dx / dt;
+        }
+        lastX.current = e.clientX;
+        lastTime.current = now;
+        let delta = lastX.current - startX.current;
+        if (resistance && !infinite) {
+            if (index === 0 && delta > 0) {
+                delta *= 0.3;
+            }
+            if (index === maxIndex && delta < 0) {
+                delta *= 0.3;
+            }
+        }
+        setOffset(delta);
+    }, [resistance, infinite, index, maxIndex]);
+    const onPointerUp = React.useCallback((e) => {
+        if (!dragging.current)
+            return;
+        const delta = lastX.current - startX.current;
+        const v = Math.abs(velocity.current);
+        const velocityFactor = Math.min(v * 250, 0.65);
+        const dynamicThreshold = Math.max(threshold, Math.min(dragThreshold * (1 - velocityFactor), dragThreshold));
+        let nextIndex = index;
+        if (Math.abs(delta) > dynamicThreshold) {
+            nextIndex = delta < 0 ? index + 1 : index - 1;
+        }
+        if (!infinite) {
+            nextIndex = Math.max(0, Math.min(maxIndex, nextIndex));
+        }
+        else {
+            nextIndex = Math.max(0, Math.min(total - 1, nextIndex));
+        }
+        setDisableAnimation(false);
+        if (snap) {
+            setIndex(nextIndex);
+            setOffset(0);
+        }
+        else {
+            setIndex(nextIndex);
+        }
+        isAnimating.current = true;
+        dragging.current = false;
+        setIsDragging(false);
+        e.target.releasePointerCapture(e.pointerId);
+    }, [threshold, dragThreshold, index, maxIndex, snap, infinite, total]);
+    const onLostPointerCapture = React.useCallback((e) => {
+        if (dragging.current) {
+            onPointerUp(e);
+        }
+    }, [onPointerUp]);
+    // #region Autoplay
+    const startAutoplay = React.useCallback(() => {
+        if (!autoplay || isPaused)
+            return;
+        autoplayTimer.current = setInterval(() => {
+            if (!isDragging && !isAnimating.current && mounted.current) {
+                next();
+            }
+        }, autoplayInterval);
+    }, [autoplay, autoplayInterval, isDragging, isPaused, next]);
+    const pause = React.useCallback(() => {
+        setIsPaused(true);
+        if (autoplayTimer.current) {
+            clearInterval(autoplayTimer.current);
+            autoplayTimer.current = undefined;
+        }
+    }, []);
+    const resume = React.useCallback(() => {
+        setIsPaused(false);
+    }, []);
+    // #region Keyboard
+    React.useEffect(() => {
+        if (!keyboardControl)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                prev();
+            }
+            else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                next();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [keyboardControl, prev, next]);
+    // #region Hover
+    React.useEffect(() => {
+        if (!autoplay || !pauseOnHover)
+            return;
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const handleMouseEnter = () => pause();
+        const handleMouseLeave = () => resume();
+        wrapper.addEventListener('mouseenter', handleMouseEnter);
+        wrapper.addEventListener('mouseleave', handleMouseLeave);
+        return () => {
+            wrapper.removeEventListener('mouseenter', handleMouseEnter);
+            wrapper.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, [autoplay, pauseOnHover, pause, resume]);
+    // #region Autoplay Effect
+    React.useEffect(() => {
+        if (autoplay) {
+            startAutoplay();
+        }
+        return () => {
+            if (autoplayTimer.current) {
+                clearInterval(autoplayTimer.current);
+                autoplayTimer.current = undefined;
+            }
+        };
+    }, [autoplay, startAutoplay, isPaused]);
+    // #region Transition End
+    React.useEffect(() => {
+        const track = trackRef.current;
+        if (!track)
+            return;
+        const handleTransitionEnd = (e) => {
+            if (e.propertyName !== 'transform')
+                return;
+            isAnimating.current = false;
+            normalizeIndex(); // <-- вот здесь
+        };
+        track.addEventListener('transitionend', handleTransitionEnd);
+        return () => track.removeEventListener('transitionend', handleTransitionEnd);
+    }, [normalizeIndex]);
+    // #region Mount
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    // #region Imperative Handle
+    React.useImperativeHandle(ref, () => ({
+        next,
+        prev,
+        goToIndex,
+        getRealIndex: () => realIndex,
+        getTotalSlides: () => realSlidesCount,
+        pause,
+        resume,
+    }), [next, prev, goToIndex, realIndex, realSlidesCount, pause, resume]);
+    // #region Overrides
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || SwiperContainer_1.default,
+        Track: (overrides === null || overrides === void 0 ? void 0 : overrides.Track) || SwiperTrack_1.default,
+        Wrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.Wrapper) || SwiperWrapper_1.default,
+    }), [overrides]);
+    const getSlideRealIndex = React.useCallback((domIndex) => {
+        if (!infinite) {
+            return domIndex;
+        }
+        const totalSlides = realSlidesCount;
+        if (domIndex < slidesPerView) {
+            return totalSlides - slidesPerView + domIndex;
+        }
+        if (domIndex >= total - slidesPerView) {
+            return domIndex - (total - slidesPerView);
+        }
+        return domIndex - slidesPerView;
+    }, [infinite, realSlidesCount, slidesPerView, total]);
+    return (React.createElement(overridesMap.Container, Object.assign({}, restProps),
+        React.createElement(overridesMap.Wrapper, { ref: wrapperRef, draggable: draggable, slidesPerView: slidesPerView, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onLostPointerCapture: onLostPointerCapture },
+            React.createElement(overridesMap.Track, { ref: trackRef, dragging: isDragging, index: index, offset: offset, disableAnimation: disableAnimation, slidesPerView: slidesPerView },
+                React.createElement(SwiperSlidesRenderer_1.default, { slides: slides, slidesPerView: slidesPerView, realIndex: realIndex, realSlidesCount: realSlidesCount, getSlideRealIndex: getSlideRealIndex })))));
+});
+exports.Swiper.displayName = 'Swiper';
+exports.default = exports.Swiper;

package/Swiper/SwiperContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type SwiperContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const SwiperContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default SwiperContainer;

package/Swiper/SwiperContainer.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwiperContainer = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.SwiperContainer = styled_1.default.div `
+  width: 100%;
+    max-width: 1200px;
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+`;
+exports.default = exports.SwiperContainer;

package/Swiper/SwiperSlide.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type SwiperSlideBaseProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly children: React.ReactNode;
+};
+export type SwiperSlideProps = SwiperSlideBaseProps & {
+    readonly isVisible: boolean;
+    readonly isNearby: boolean;
+    readonly slidesPerView: number;
+    readonly key: string;
+};
+export declare const SwiperSlide: React.ForwardRefExoticComponent<(SwiperSlideBaseProps | SwiperSlideProps) & React.RefAttributes<HTMLDivElement>>;
+export default SwiperSlide;

package/Swiper/SwiperSlide.js

@@ -0,0 +1,58 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwiperSlide = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const React = __importStar(require("react"));
+const StyledSlide = styled_1.default.div `
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: calc(100% / ${({ $slidesPerView }) => $slidesPerView});
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+`;
+exports.SwiperSlide = React.forwardRef((props, ref) => {
+    const _a = props, { children, isVisible = true, slidesPerView = 1, isNearby = true } = _a, restProps = __rest(_a, ["children", "isVisible", "slidesPerView", "isNearby"]);
+    return (React.createElement(StyledSlide, Object.assign({ "data-is-visible": isVisible, "data-is-nearby": isNearby }, restProps, { "$slidesPerView": slidesPerView, ref: ref }), isVisible || isNearby ? children : null));
+});
+exports.SwiperSlide.displayName = 'SwiperSlide';
+exports.default = exports.SwiperSlide;

package/Swiper/SwiperSlidesRenderer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SwiperSlideElement } from './Swiper';
+export type SwiperSlidesRendererProps = {
+    readonly slides: readonly SwiperSlideElement[];
+    readonly slidesPerView: number;
+    readonly realIndex: number;
+    readonly realSlidesCount: number;
+    readonly getSlideRealIndex: (index: number) => number;
+};
+declare const _default: React.NamedExoticComponent<SwiperSlidesRendererProps>;
+export default _default;

package/Swiper/SwiperSlidesRenderer.js

@@ -0,0 +1,74 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const SwiperSlidesRenderer = props => {
+    const { slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex } = props;
+    // Мемоизируем вычисления видимости
+    const visibilityMap = React.useMemo(() => {
+        const map = new Map();
+        if (realSlidesCount <= slidesPerView) {
+            slides.forEach((_, i) => {
+                map.set(i, { isVisible: true, isNearby: false });
+            });
+        }
+        else {
+            const visibleIndices = [];
+            for (let j = 0; j < slidesPerView; j++) {
+                visibleIndices.push((realIndex + j) % realSlidesCount);
+            }
+            const prevIndex = (realIndex - 1 + realSlidesCount) % realSlidesCount;
+            const nextIndex = (realIndex + slidesPerView) % realSlidesCount;
+            slides.forEach((_, i) => {
+                const slideRealIndex = getSlideRealIndex(i);
+                const isVisible = visibleIndices.includes(slideRealIndex);
+                const isNearby = !isVisible && (slideRealIndex === prevIndex || slideRealIndex === nextIndex);
+                map.set(i, { isVisible, isNearby });
+            });
+        }
+        return map;
+    }, [slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex]);
+    return (React.createElement(React.Fragment, null, slides.map((slide, i) => {
+        const { isVisible, isNearby } = visibilityMap.get(i) || {
+            isVisible: false,
+            isNearby: false,
+        };
+        const slideRealIndex = getSlideRealIndex(i);
+        // Не клонируем заново, если пропсы не изменились
+        if (slide.props.slidesPerView === slidesPerView &&
+            slide.props.isVisible === isVisible &&
+            slide.props.isNearby === isNearby) {
+            return slide;
+        }
+        return React.cloneElement(slide, {
+            slidesPerView,
+            isVisible,
+            isNearby,
+            'data-index': i,
+            'data-real-index': slideRealIndex,
+        });
+    })));
+};
+exports.default = React.memo(SwiperSlidesRenderer);

package/Swiper/SwiperTrack.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export type SwiperTrackProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly children: React.ReactNode;
+    readonly index: number;
+    readonly offset: number;
+    readonly dragging: boolean;
+    readonly disableAnimation?: boolean;
+    readonly slidesPerView: number;
+};
+export declare const SwiperTrack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly children: React.ReactNode;
+    readonly index: number;
+    readonly offset: number;
+    readonly dragging: boolean;
+    readonly disableAnimation?: boolean | undefined;
+    readonly slidesPerView: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SwiperTrack;

package/Swiper/SwiperTrack.js

@@ -0,0 +1,55 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwiperTrack = void 0;
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledTrack = styled_1.default.div `
+  display: flex;
+  height: 100%;
+  transition: ${({ $dragging, $disableAnimation }) => $dragging || $disableAnimation ? 'none' : 'transform 0.3s ease'};
+  will-change: transform;
+  transform: ${({ $index, $offset, $slidesPerView }) => `translateX(calc(${-(($index * 100) / $slidesPerView)}% + ${$offset}px))`};
+`;
+exports.SwiperTrack = React.forwardRef((props, ref) => {
+    const { children, index, offset, dragging, disableAnimation, slidesPerView } = props, restProps = __rest(props, ["children", "index", "offset", "dragging", "disableAnimation", "slidesPerView"]);
+    return (React.createElement(StyledTrack, Object.assign({ "$dragging": dragging, "$index": index, "$offset": offset, "$disableAnimation": disableAnimation, "$slidesPerView": slidesPerView }, restProps, { ref: ref }), children));
+});
+exports.SwiperTrack.displayName = 'SwiperTrack';
+exports.default = exports.SwiperTrack;