react-magic-card 1.1.1 → 2.0.0

package/README.md

@@ -1,10 +1,8 @@
-# react-magic-card
-
 [![Release Status](https://img.shields.io/github/release/su-pull/react-magic-card.svg)](https://github.com/su-pull/react-magic-card/releases/latest)
 [![Minzip Size](https://img.shields.io/bundlephobia/minzip/react-magic-card)](https://bundlephobia.com/package/react-magic-card)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-This is the framer motion components, that support images gallery.
+This is the framer motion animation components, that support images gallery.
 
 ## Installation
 
@@ -15,27 +13,33 @@ npm install react-magic-card framer-motion
 ## Usage Guide
 
 ```tsx
-import { MagicCircle } from 'react-magic-card'
+import { StraightInfinity } from "react-magic-card";
 
 function MyComponent() {
   const images = [
     {
-      src: '/src.jpeg',
-      alt: 'alt'
-    }
-  ]
+      src: "/cat.jpeg",
+      alt: "alt",
+    },
+    {
+      src: "/dog.jpeg",
+      alt: "alt",
+    },
+    {
+      src: "/bird.jpeg",
+      alt: "alt",
+    },
+  ];
 
   return (
-    <MagicCircle
+    <StraightInfinity
       images={images}
       width={100}
       height={100}
-      radius={100}
       controller={100}
-      start={1}
-      delay={100}
+      start={Math.ceil(images.length / 2)}
     />
-  )
+  );
 }
 ```
 
@@ -48,12 +52,8 @@ function MyComponent() {
 | width (required)      | width of the single image                                         |
 | height (required)     | height of the single image                                        |
 | controller (required) | controller size is add to the size of the component               |
-| delay                 | delay of the animation firing interval                            |
 | offsetIndex           | add an offset to the index of the components and images           |
 | reverseIndex          | order the change the overlap of zindex default true               |
-| loading               | loading attribute of img element in html                          |
-| initialFadeRange      | range of fade animation after page loaded                         |
-| initialTransTime      | transition time of fade animation after page loaded               |
 | className             | className of the component                                        |
 | classImages           | className of the images                                           |
 | classImageSelect      | className of the select image                                     |
@@ -61,24 +61,24 @@ function MyComponent() {
 | animate               | object in the animation property                                  |
 | initial               | object in the animation property                                  |
 | transition            | object in the transition property                                 |
-| pickTransition        | object in the transition property                                 |
-| pickProperty          | object in the pick property                                       |
+| detailTransition      | object in the transition property                                 |
+| detailProperty        | object in the detail property                                     |
+| loading               | loading attribute of img element in html                          |
+| initialFadeRange      | range of fade animation after page loaded                         |
+| initialTransTime      | transition time of fade animation after page loaded               |
 
-## MagicCircle Properties
+## CircleRotation Properties
 
-| Property          | Meaning                                         |
-| ----------------- | ----------------------------------------------- |
-| radius (required) | radius of the circle                            |
-| dynamic           | dynamic or static for rotation the default true |
+| Property          | Meaning              |
+| ----------------- | -------------------- |
+| radius (required) | radius of the circle |
 
-## MagicStraight Properties
+## StraightInfinity Properties
 
-| Property      | Meaning                                 |
-| ------------- | --------------------------------------- |
-| vertical      | vertical or horizontal the default true |
-| margin        | spacing of the between images           |
-| selectOffsetX | X-axis position                         |
-| selectOffsetY | Y-axis position                         |
+| Property | Meaning                                 |
+| -------- | --------------------------------------- |
+| vertical | vertical or horizontal the default true |
+| margin   | spacing of the between images           |
 
 ## Animation Object
 
@@ -99,16 +99,16 @@ function MyComponent() {
 
 It is Inherits framer motion transition object other than intera.
 
-## PickProperty Object
+## detailProperty Object
 
-| Property  | Meaning                                                   |
-| --------- | --------------------------------------------------------- |
-| classPick | className of the pick image                               |
-| white     | white or black for background the default true            |
-| alpha     | background transparency of a number between 0 ~ 1         |
-| blur      | blur intensity of a number between 1 ~ 20 a preferred     |
-| scale     | scale of the pick image                                   |
-| offset    | offset of an appearance position from the center position |
+| Property    | Meaning                                                   |
+| ----------- | --------------------------------------------------------- |
+| classDetail | className of the detail image                             |
+| white       | white or black for background the default true            |
+| alpha       | background transparency of a number between 0 ~ 1         |
+| blur        | blur intensity of a number between 1 ~ 20 a preferred     |
+| scale       | scale of the detail image                                 |
+| offset      | offset of an appearance position from the center position |
 
 ## License
 

package/dist/CircleRotation/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CircleRotationProps } from '../types';
+export declare const CircleRotation: ({ images, start, height, width, radius, controller, offsetIndex, reverseIndex, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, detail, detailProperty, detailTransition, loading, initialFadeRange, initialFadeTime }: CircleRotationProps) => React.JSX.Element;

package/dist/{MagicCircle → CircleRotation}/index.js

@@ -26,12 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MagicCircle = void 0;
+exports.CircleRotation = void 0;
 const react_1 = __importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
-const PickImage_1 = __importDefault(require("../common/PickImage"));
-const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirection = true, radius, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, initialFadeRange = 4, initialTransTime = 0.2, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
+const DetailImage_1 = require("../common/DetailImage");
+const CircleRotation = ({ images, start, height, width, radius, controller, offsetIndex = 0, reverseIndex = true, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, detail = true, detailProperty, detailTransition, loading = 'lazy', initialFadeRange = 1, initialFadeTime = 0.2 }) => {
     // array out of range adjusting.
     start = Math.max(0, start);
     start = Math.min(start, images.length - 1);
@@ -42,38 +42,33 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
     const [initialY, setInitialY] = (0, react_1.useState)(0);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const [hasMove, setHasMove] = (0, react_1.useState)(false);
-    const [hasShift, setHasShift] = (0, react_1.useState)(false);
     const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
     const [select, setSelect] = (0, react_1.useState)(start);
-    const [hasPick, setHasPick] = (0, react_1.useState)(false);
+    const [hasDetail, setHasDetail] = (0, react_1.useState)(false);
     const refOuter = (0, react_1.useRef)(null);
-    const refPicker = (0, react_1.useRef)(null);
+    const refDetail = (0, react_1.useRef)(null);
     const centralAngle = ((2 * Math.PI) / images.length) * (180 / Math.PI);
     // Functions of the rotation and select and delay.
     // turn left
     const shiftLeft = (0, react_1.useCallback)(() => {
         setSelect(select == 0 ? images.length - 1 : select - 1);
-        setHasShift(false);
         setHasDelayed(false);
-        if (dynamic)
-            return setCount(count + centralAngle);
-    }, [centralAngle, count, dynamic, images.length, select]);
+        setCount(count + centralAngle);
+    }, [centralAngle, count, images.length, select]);
     // turn right
     const shiftRight = (0, react_1.useCallback)(() => {
         setSelect(select == images.length - 1 ? 0 : select + 1);
-        setHasShift(true);
         setHasDelayed(false);
-        if (dynamic)
-            return setCount(count - centralAngle);
-    }, [centralAngle, count, dynamic, images.length, select]);
+        setCount(count - centralAngle);
+    }, [centralAngle, count, images.length, select]);
     // Function of the desktop.
     const handleScroll = (0, react_1.useCallback)((e) => {
         const delta = e.deltaY;
         if (delta < 0)
-            scrollDirection ? shiftLeft() : shiftRight();
+            shiftLeft();
         if (delta > 0)
-            scrollDirection ? shiftRight() : shiftLeft();
-    }, [scrollDirection, shiftLeft, shiftRight]);
+            shiftRight();
+    }, [shiftLeft, shiftRight]);
     // Get a start y and x position in touchStart Y and X.
     const handleTouchStart = (e) => {
         const touch = e.touches[0];
@@ -123,12 +118,12 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
         setTouchStartY(deltaY);
     }, [shiftLeft, shiftRight, touchStartX, touchStartY]);
     const handleMouseDown = (0, react_1.useCallback)((e) => {
-        if (hasPick)
+        if (hasDetail)
             return;
         setIsDragging(true);
         setInitialX(e.clientX);
         setInitialY(e.clientY);
-    }, [hasPick]);
+    }, [hasDetail]);
     const handleMouseMove = (0, react_1.useCallback)((e) => {
         if (isDragging) {
             const outer = refOuter.current;
@@ -179,45 +174,45 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
     // Main functional, exit function if ref and hasDelayed does not exist.
     (0, react_1.useEffect)(() => {
         const outer = refOuter.current;
-        const picker = refPicker.current;
+        const detail = refDetail.current;
         const timeId = setTimeout(() => {
             setHasDelayed(true);
-        }, delay);
+        }, ((transition === null || transition === void 0 ? void 0 : transition.duration) / 2) * 1000);
         // Add handle event when component mount and deps update.
         document.addEventListener('mouseup', handleMouseUp);
         if (!hasDelayed)
             return;
-        picker.addEventListener('mousedown', handleMouseDown);
+        detail.addEventListener('mousedown', handleMouseDown);
         outer.addEventListener('mousedown', handleMouseDown);
         document.addEventListener('mousemove', handleMouseMove);
         outer.addEventListener('wheel', handleScroll);
         outer.addEventListener('touchstart', handleTouchStart);
         outer.addEventListener('touchmove', handleTouchMove);
-        picker.addEventListener('wheel', handleScroll);
-        picker.addEventListener('touchstart', handleTouchStart);
-        picker.addEventListener('touchmove', handleTouchMove);
+        detail.addEventListener('wheel', handleScroll);
+        detail.addEventListener('touchstart', handleTouchStart);
+        detail.addEventListener('touchmove', handleTouchMove);
         // Clean up event and timeId when component is unmount.
         return () => {
             clearTimeout(timeId);
             document.removeEventListener('mouseup', handleMouseUp);
-            picker.removeEventListener('mousedown', handleMouseDown);
+            detail.removeEventListener('mousedown', handleMouseDown);
             outer.removeEventListener('mousedown', handleMouseDown);
             document.removeEventListener('mousemove', handleMouseMove);
             outer.removeEventListener('wheel', handleScroll);
             outer.removeEventListener('touchstart', handleTouchStart);
             outer.removeEventListener('touchmove', handleTouchMove);
-            picker.removeEventListener('wheel', handleScroll);
-            picker.removeEventListener('touchstart', handleTouchStart);
-            picker.removeEventListener('touchmove', handleTouchMove);
+            detail.removeEventListener('wheel', handleScroll);
+            detail.removeEventListener('touchstart', handleTouchStart);
+            detail.removeEventListener('touchmove', handleTouchMove);
         };
     }, [
-        delay,
         handleMouseDown,
         handleMouseMove,
         handleMouseUp,
         handleTouchMove,
         handleScroll,
-        hasDelayed
+        hasDelayed,
+        transition === null || transition === void 0 ? void 0 : transition.duration
     ]);
     // The controll start or end.
     // Added event when component is mounted.
@@ -230,26 +225,26 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
             document.body.style.overflow = 'auto';
         };
         const outer = refOuter.current;
-        const picker = refPicker.current;
+        const detail = refDetail.current;
         // Add event.
         outer.addEventListener('mouseover', enterControl, { passive: false });
         outer.addEventListener('mouseout', leaveControl);
         outer.addEventListener('touchmove', enterControl, { passive: false });
         outer.addEventListener('touchend', leaveControl);
-        picker.addEventListener('mouseover', enterControl, { passive: false });
-        picker.addEventListener('mouseout', leaveControl);
-        picker.addEventListener('touchmove', enterControl, { passive: false });
-        picker.addEventListener('touchend', leaveControl);
+        detail.addEventListener('mouseover', enterControl, { passive: false });
+        detail.addEventListener('mouseout', leaveControl);
+        detail.addEventListener('touchmove', enterControl, { passive: false });
+        detail.addEventListener('touchend', leaveControl);
         // Clean up event when component is unmount.
         return () => {
             outer.removeEventListener('mouseover', enterControl);
             outer.removeEventListener('mouseout', leaveControl);
             outer.removeEventListener('touchmove', enterControl);
             outer.removeEventListener('touchend', leaveControl);
-            picker.removeEventListener('mouseover', enterControl);
-            picker.removeEventListener('mouseout', leaveControl);
-            picker.removeEventListener('touchmove', enterControl);
-            picker.removeEventListener('touchend', leaveControl);
+            detail.removeEventListener('mouseover', enterControl);
+            detail.removeEventListener('mouseout', leaveControl);
+            detail.removeEventListener('touchmove', enterControl);
+            detail.removeEventListener('touchend', leaveControl);
             // page unmount with leave control.
             leaveControl();
         };
@@ -264,8 +259,8 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
         e.key === 'ArrowRight' && shiftLeft();
         e.key === 'ArrowDown' && shiftRight();
         e.key === 'ArrowLeft' && shiftRight();
-        e.key === 'Enter' && setHasPick(true);
-        e.key === 'Escape' && setHasPick(false);
+        e.key === 'Enter' && setHasDetail(true);
+        e.key === 'Escape' && setHasDetail(false);
     };
     // has after Lazy loading fade transition.
     const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
@@ -289,8 +284,8 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
                             (hasSelect && classImageSelect) +
                             ' ' +
                             classImageUnique +
-                            zIndex, role: 'button', src: image.src, alt: image.alt, draggable: false, loading: loading, animate: {
-                            rotate: -count,
+                            zIndex, role: 'button', "aria-label": "click and scale image", src: image.src, alt: image.alt, draggable: false, loading: loading, animate: {
+                            rotate: -count - ((animate === null || animate === void 0 ? void 0 : animate.rotate) ? animate === null || animate === void 0 ? void 0 : animate.rotate : 0),
                             scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
                             rotateY: hasSelect
                                 ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
@@ -302,12 +297,12 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
                                 ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ
                                 : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
                             opacity: hasSelect
-                                ? hasPick
+                                ? hasDetail
                                     ? 0
                                     : animate === null || animate === void 0 ? void 0 : animate.selectOpacity
                                 : animate === null || animate === void 0 ? void 0 : animate.opacity
                         }, initial: {
-                            rotate: -count,
+                            rotate: -count - ((initial === null || initial === void 0 ? void 0 : initial.rotate) ? initial === null || initial === void 0 ? void 0 : initial.rotate : 0),
                             scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
                             rotateY: hasSelect
                                 ? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
@@ -321,7 +316,7 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
                             opacity: hasSelect
                                 ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity
                                 : initial === null || initial === void 0 ? void 0 : initial.opacity
-                        }, transition: transition, onPointerDown: () => setSelect(index), onClick: () => hasSelect && pickScale && !hasMove && setHasPick(true), style: {
+                        }, transition: transition, onPointerDown: () => setSelect(index), onClick: () => hasSelect && detail && !hasMove && setHasDetail(true), style: {
                             zIndex: hasSelect ? frontImage : zIndex,
                             width: width + 'px',
                             height: height + 'px',
@@ -333,14 +328,16 @@ const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirec
                                 radius -
                                 height / 2 +
                                 'px',
-                            filter: isLoaded
-                                ? 'blur(0)'
+                            filter: initialFadeRange && isLoaded
+                                ? ''
                                 : `blur(${initialFadeRange}px)`,
-                            transition: `filter ${initialTransTime}s ease-in-out`
+                            transition: initialFadeTime
+                                ? `filter ${initialFadeTime}s ease-in-out`
+                                : ''
                         } }));
                 }))),
-            react_1.default.createElement(PickImage_1.default, { onClick: () => {
-                    setHasPick(false);
-                }, hasPick: hasPick, classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argRef: refPicker, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage }))));
+            react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
+                    setHasDetail(false);
+                }, classDetail: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.classDetail, src: images[select].src, alt: images[select].alt, width: width, height: height, white: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.white, alpha: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.alpha, blur: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.blur, scale: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.scale, transition: detailTransition, zIndex: frontImage }))));
 };
-exports.MagicCircle = MagicCircle;
+exports.CircleRotation = CircleRotation;

package/dist/StraightInfinity/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { StraightInfinityProps } from '../types';
+export declare const StraightInfinity: ({ images, start, height, width, vertical, margin, controller, offsetIndex, reverseIndex, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, detail, detailProperty, detailTransition, loading, initialFadeRange, initialFadeTime }: StraightInfinityProps) => React.JSX.Element;

package/dist/{MagicStraight → StraightInfinity}/index.js

@@ -22,16 +22,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MagicStraight = void 0;
+exports.StraightInfinity = void 0;
 const react_1 = __importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
-const PickImage_1 = __importDefault(require("../common/PickImage"));
-const MagicStraight = ({ images, start, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, controller, delay = 20, offsetIndex = 0, reverseIndex = true, loading, initialFadeRange = 4, initialTransTime = 0.2, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
+const DetailImage_1 = require("../common/DetailImage");
+const StraightInfinity = ({ images, start, height, width, vertical = false, margin = 0, controller = 0, offsetIndex = 0, reverseIndex = true, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, detail = true, detailProperty, detailTransition, loading = 'lazy', initialFadeRange = 1, initialFadeTime = 0.2 }) => {
     // array out of range adjusting.
     start = Math.max(0, start);
     start = Math.min(start, images.length - 1);
@@ -44,30 +53,38 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
     const [hasShift, setHasShift] = (0, react_1.useState)(false);
     const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
     const [select, setSelect] = (0, react_1.useState)(start);
-    const [hasPick, setHasPick] = (0, react_1.useState)(false);
+    const [edge, setEdge] = (0, react_1.useState)(images.length);
+    const [hasDetail, setHasDetail] = (0, react_1.useState)(false);
     const refOuter = (0, react_1.useRef)(null);
-    const refPicker = (0, react_1.useRef)(null);
+    const refDetail = (0, react_1.useRef)(null);
+    const [count, setCount] = (0, react_1.useState)(0);
     // Functions of the swipe and wheel a shifting.
     // turn left
-    const shiftLeft = (0, react_1.useCallback)(() => {
-        setSelect(select == 0 ? images.length - 1 : select - 1);
+    const shiftLeft = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        edge !== 0 && setSelect(select === 0 ? images.length - 1 : select - 1);
+        setEdge(edge === 0 ? images.length : edge - 1);
         setHasShift(false);
         setHasDelayed(false);
-    }, [images.length, select]);
+        setCount(edge === 0 ? 5 : count + width + margin * 2);
+        return;
+    }), [count, images.length, margin, select, edge, width]);
     // turn right
-    const shiftRight = (0, react_1.useCallback)(() => {
-        setSelect(select == images.length - 1 ? 0 : select + 1);
+    const shiftRight = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        edge !== 5 && setSelect(select === images.length - 1 ? 0 : select + 1);
+        setEdge(edge === images.length ? 0 : edge + 1);
         setHasShift(true);
         setHasDelayed(false);
-    }, [images.length, select]);
+        setCount(edge === 5 ? 0 : count - (width + margin * 2));
+        return;
+    }), [count, images.length, margin, select, edge, width]);
     // Wheel function of the desktop.
-    const handleScroll = (0, react_1.useCallback)((e) => {
+    const handleScroll = (0, react_1.useCallback)((e) => __awaiter(void 0, void 0, void 0, function* () {
         const delta = e.deltaY;
         if (delta < 0)
             shiftLeft();
         if (delta > 0)
             shiftRight();
-    }, [shiftLeft, shiftRight]);
+    }), [shiftLeft, shiftRight]);
     // Get a start y and x position in touchStart Y and X.
     const handleTouchStart = (e) => {
         const touch = e.touches[0];
@@ -77,29 +94,29 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
     // Swipe Function of the mobile.
     const handleTouchMove = (0, react_1.useCallback)((e) => {
         const touch = e.touches[0];
-        const delta = hasPick
+        const delta = hasDetail
             ? touch.clientX
             : !vertical
                 ? touch.clientX
                 : touch.clientY;
-        if (hasPick
+        if (hasDetail
             ? delta < touchStartX
             : !vertical
                 ? delta < touchStartX
                 : delta < touchStartY)
             shiftLeft();
-        if (hasPick
+        if (hasDetail
             ? delta > touchStartX
             : !vertical
                 ? delta > touchStartX
                 : delta > touchStartY)
             shiftRight();
-        hasPick
+        hasDetail
             ? setTouchStartX(delta)
             : !vertical
                 ? setTouchStartX(delta)
                 : setTouchStartY(delta);
-    }, [hasPick, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
+    }, [hasDetail, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
     const handleMouseDown = (0, react_1.useCallback)((e) => {
         setIsDragging(true);
         setInitialX(e.clientX);
@@ -124,23 +141,23 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
     // Main functional, exit function if ref and hasDelayed does not exist.
     (0, react_1.useEffect)(() => {
         const outer = refOuter.current;
-        const picker = refPicker.current;
+        const detail = refDetail.current;
         const timeId = setTimeout(() => {
             setHasDelayed(true);
-        }, delay);
+        }, ((transition === null || transition === void 0 ? void 0 : transition.duration) / 2) * 1000);
         // Add handle event when component mount and deps update.
         document.addEventListener('mouseup', handleMouseUp);
         if (!hasDelayed)
             return;
-        picker.addEventListener('mousedown', handleMouseDown);
+        detail.addEventListener('mousedown', handleMouseDown);
         outer.addEventListener('mousedown', handleMouseDown);
         document.addEventListener('mousemove', handleMouseMove);
         outer.addEventListener('wheel', handleScroll);
         outer.addEventListener('touchstart', handleTouchStart);
         outer.addEventListener('touchmove', handleTouchMove);
-        picker.addEventListener('wheel', handleScroll);
-        picker.addEventListener('touchstart', handleTouchStart);
-        picker.addEventListener('touchmove', handleTouchMove);
+        detail.addEventListener('wheel', handleScroll);
+        detail.addEventListener('touchstart', handleTouchStart);
+        detail.addEventListener('touchmove', handleTouchMove);
         // Clean up event and timeId when component is unmount.
         return () => {
             clearTimeout(timeId);
@@ -148,20 +165,20 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
             outer.removeEventListener('touchstart', handleTouchStart);
             outer.removeEventListener('touchmove', handleTouchMove);
             document.removeEventListener('mouseup', handleMouseUp);
-            picker.removeEventListener('mousedown', handleMouseDown);
+            detail.removeEventListener('mousedown', handleMouseDown);
             outer.removeEventListener('mousedown', handleMouseDown);
             document.removeEventListener('mousemove', handleMouseMove);
-            picker.removeEventListener('touchstart', handleTouchStart);
-            picker.removeEventListener('touchmove', handleTouchMove);
+            detail.removeEventListener('touchstart', handleTouchStart);
+            detail.removeEventListener('touchmove', handleTouchMove);
         };
     }, [
-        delay,
         handleMouseDown,
         handleMouseMove,
         handleMouseUp,
         handleTouchMove,
         handleScroll,
-        hasDelayed
+        hasDelayed,
+        transition === null || transition === void 0 ? void 0 : transition.duration
     ]);
     // The controll start or end.
     // Added event when component is mounted.
@@ -174,35 +191,30 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
             document.body.style.overflow = 'auto';
         };
         const outer = refOuter.current;
-        const picker = refPicker.current;
+        const detail = refDetail.current;
         // Add event.
         outer.addEventListener('mouseover', enterControl, { passive: false });
         outer.addEventListener('mouseout', leaveControl);
         outer.addEventListener('touchmove', enterControl, { passive: false });
         outer.addEventListener('touchend', leaveControl);
-        picker.addEventListener('mouseover', enterControl, { passive: false });
-        picker.addEventListener('mouseout', leaveControl);
-        picker.addEventListener('touchmove', enterControl, { passive: false });
-        picker.addEventListener('touchend', leaveControl);
+        detail.addEventListener('mouseover', enterControl, { passive: false });
+        detail.addEventListener('mouseout', leaveControl);
+        detail.addEventListener('touchmove', enterControl, { passive: false });
+        detail.addEventListener('touchend', leaveControl);
         // Clean up event when component is unmount.
         return () => {
             outer.removeEventListener('mouseover', enterControl);
             outer.removeEventListener('mouseout', leaveControl);
             outer.removeEventListener('touchmove', enterControl);
             outer.removeEventListener('touchend', leaveControl);
-            picker.removeEventListener('mouseover', enterControl);
-            picker.removeEventListener('mouseout', leaveControl);
-            picker.removeEventListener('touchmove', enterControl);
-            picker.removeEventListener('touchend', leaveControl);
+            detail.removeEventListener('mouseover', enterControl);
+            detail.removeEventListener('mouseout', leaveControl);
+            detail.removeEventListener('touchmove', enterControl);
+            detail.removeEventListener('touchend', leaveControl);
             // page unmount with leave control.
             leaveControl();
         };
     }, []);
-    // average calculation.
-    let total = 0;
-    for (let i = 1; i < images.length; i++)
-        total += i;
-    const average = total / images.length;
     // selected image.
     const frontImage = offsetIndex + images.length + 1;
     // keyboard control.
@@ -211,27 +223,71 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
         e.key === 'ArrowUp' && shiftLeft();
         e.key === 'ArrowRight' && shiftRight();
         e.key === 'ArrowDown' && shiftRight();
-        e.key === 'Enter' && setHasPick(true);
-        e.key === 'Escape' && setHasPick(false);
+        e.key === 'Enter' && setHasDetail(true);
+        e.key === 'Escape' && setHasDetail(false);
     };
     // has after Lazy loading fade transition.
     const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         setIsLoaded(true);
     }, []);
+    const [offsetWide, setOffsetWide] = (0, react_1.useState)(0);
+    const [offsetHeight, setOffsetHeight] = (0, react_1.useState)(0);
+    (0, react_1.useLayoutEffect)(() => {
+        if (edge === 0 && hasShift == true) {
+            if (!vertical)
+                setOffsetWide(images.length * width + images.length * (margin * 2));
+            if (vertical)
+                setOffsetHeight(images.length * height + images.length * (margin * 2));
+        }
+        if (edge === 5 && hasShift == false) {
+            if (!vertical)
+                setOffsetWide(0);
+            if (vertical)
+                setOffsetHeight(0);
+        }
+    }, [
+        hasDelayed,
+        hasShift,
+        height,
+        images.length,
+        margin,
+        edge,
+        vertical,
+        width
+    ]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (edge === 0 && hasShift == false) {
+            shiftLeft();
+        }
+        if (edge === 0 && hasShift == true) {
+            shiftRight();
+        }
+    }, [hasDelayed, hasShift, shiftLeft, shiftRight, edge]);
     return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
         react_1.default.createElement("div", { className: className },
-            react_1.default.createElement("div", { className: styles_module_css_1.default.outer, ref: refOuter, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, style: {
+            react_1.default.createElement(framer_motion_1.m.div, { className: styles_module_css_1.default.outer, ref: refOuter, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, style: {
                     zIndex: offsetIndex - 1,
                     width: !vertical
-                        ? images.length * (width + margin * 2) + controller + 'px'
+                        ? images.length * (width + margin * 2) * 6 + controller + 'px'
                         : width + controller,
                     height: vertical
-                        ? images.length * (height + margin * 2) + controller + 'px'
+                        ? images.length * (height + margin * 2) * 6 + controller + 'px'
                         : height + controller,
                     flexDirection: vertical ? 'column' : 'row'
-                } }, images.map((image, index) => {
+                }, animate: {
+                    x: !vertical ? count + offsetWide : 0,
+                    y: vertical ? count + offsetHeight : 0
+                }, transition: transition }, images.map((image, index) => {
                 const hasSelect = images[select] == images[index];
+                const hasEdge = () => {
+                    for (let i = edge; i <= images.length - 1; i++) {
+                        if (images[i] === images[index]) {
+                            return true;
+                        }
+                    }
+                    return false;
+                };
                 const zIndex = reverseIndex
                     ? offsetIndex + images.length - 1 - index
                     : offsetIndex + index;
@@ -240,22 +296,15 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
                         (hasSelect && classImageSelect) +
                         ' ' +
                         classImageUnique +
-                        index, src: image.src, alt: image.alt, role: 'button', draggable: false, loading: loading, animate: {
-                        y: hasSelect
-                            ? vertical
-                                ? (average - index) * height +
-                                    (average - index) * (margin * 2) +
-                                    selectOffsetY
-                                : selectOffsetY
+                        index, src: image.src, alt: image.alt, role: 'button', "aria-label": "click and scale image", draggable: false, loading: loading, animate: {
+                        x: !vertical && hasEdge()
+                            ? -(images.length * width + images.length * (margin * 2))
                             : 0,
-                        x: hasSelect
-                            ? !vertical
-                                ? (average - index) * width +
-                                    (average - index) * (margin * 2) +
-                                    selectOffsetX
-                                : selectOffsetX
+                        y: vertical && hasEdge()
+                            ? -(images.length * height + images.length * (margin * 2))
                             : 0,
                         scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
+                        rotate: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotate : animate === null || animate === void 0 ? void 0 : animate.rotate,
                         rotateY: hasSelect
                             ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
                             : animate === null || animate === void 0 ? void 0 : animate.rotateY,
@@ -265,13 +314,16 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
                         rotateZ: hasSelect
                             ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ
                             : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
-                        opacity: hasSelect
-                            ? hasPick
-                                ? 0
-                                : animate === null || animate === void 0 ? void 0 : animate.selectOpacity
-                            : animate === null || animate === void 0 ? void 0 : animate.opacity
+                        opacity: images[images[edge] === images[images.length] ? 0 : edge] === images[index] || images[edge - 1] === images[index]
+                            ? 0
+                            : hasSelect
+                                ? hasDetail
+                                    ? 0
+                                    : animate === null || animate === void 0 ? void 0 : animate.selectOpacity
+                                : animate === null || animate === void 0 ? void 0 : animate.opacity
                     }, initial: {
                         scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
+                        rotate: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotate : animate === null || animate === void 0 ? void 0 : animate.rotate,
                         rotateY: hasSelect
                             ? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
                             : initial === null || initial === void 0 ? void 0 : initial.rotateY,
@@ -283,8 +335,17 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
                             : initial === null || initial === void 0 ? void 0 : initial.rotateZ,
                         opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity
                     }, transition: transition, onClick: () => {
-                        setSelect(index);
-                        hasSelect && pickScale && !hasMove && setHasPick(true);
+                        hasSelect && detail && !hasMove && setHasDetail(true);
+                        if (!hasDelayed)
+                            return;
+                        images[select - 1] === images[index] ||
+                            (select === 0 && images[images.length - 1] === images[index])
+                            ? shiftLeft()
+                            : images[select + 1] === images[index] ||
+                                (select === images.length - 1 &&
+                                    images[0] === images[index])
+                                ? shiftRight()
+                                : null;
                     }, style: {
                         zIndex: hasSelect ? frontImage : zIndex,
                         width: width + 'px',
@@ -292,12 +353,17 @@ const MagicStraight = ({ images, start, height, width, vertical = true, margin =
                         margin: vertical
                             ? margin + 'px' + ' 0'
                             : '0 ' + margin + 'px',
-                        filter: isLoaded ? 'blur(0)' : `blur(${initialFadeRange}px)`,
-                        transition: `filter ${initialTransTime}s ease-in-out`
+                        filter: initialFadeRange && isLoaded
+                            ? ''
+                            : `blur(${initialFadeRange}px)`,
+                        transition: initialFadeTime
+                            ? `filter ${initialFadeTime}s ease-in-out`
+                            : ''
                     } }));
             })),
-            react_1.default.createElement(PickImage_1.default, { classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, argRef: refPicker, onClick: () => {
-                    setHasPick(false);
-                }, hasPick: hasPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage }))));
+            react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
+                    setHasDetail(false);
+                }, classDetail: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.classDetail, src: images[select].src, alt: images[select].alt, width: width, height: height, white: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.white, alpha: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.alpha, blur: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.blur, scale: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.scale, transition: detailTransition, zIndex: frontImage }),
+            react_1.default.createElement(react_1.default.Fragment, null, select))));
 };
-exports.MagicStraight = MagicStraight;
+exports.StraightInfinity = StraightInfinity;

package/dist/common/DetailImage/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DetailImageProps } from '../../types';
+export declare const DetailImage: ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white, alpha, blur, scale, transition }: DetailImageProps) => React.JSX.Element;

package/dist/common/{PickImage → DetailImage}/index.js

@@ -3,26 +3,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DetailImage = void 0;
 const react_1 = __importDefault(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
-const PickImage = ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src, alt, width, height, zIndex, white = true, alpha = 0.4, blur = 4, scale = 2, offset = 0, transition }) => {
-    const backdropFilter = hasPick ? `blur(${blur}px)` : undefined;
-    const background = hasPick
+const DetailImage = ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white = true, alpha = 0.3, blur = 3, scale = 2.5, transition }) => {
+    const backdropFilter = hasDetail ? `blur(${blur}px)` : undefined;
+    const background = hasDetail
         ? white
             ? `rgba(255, 255, 255, ${alpha})`
             : `rgba(0, 0, 0, ${alpha})`
         : undefined;
-    return (react_1.default.createElement(framer_motion_1.m.div, { role: "button", onClick: onClick, ref: argRef, className: styles_module_css_1.default.full_size, animate: {
+    return (react_1.default.createElement(framer_motion_1.m.div, { role: "button", onClick: onClick, ref: detailRef, className: styles_module_css_1.default.full_size, animate: {
             zIndex: zIndex,
-            opacity: hasPick ? 1 : 0,
-            pointerEvents: hasPick ? 'auto' : 'none'
+            opacity: hasDetail ? 1 : 0,
+            pointerEvents: hasDetail ? 'auto' : 'none'
         }, style: { backdropFilter: backdropFilter, background: background }, transition: transition },
-        react_1.default.createElement(framer_motion_1.m.img, { key: argKey, className: classPick + ' ' + styles_module_css_1.default.no_select, src: src, alt: alt, width: width, height: height, draggable: false, animate: {
+        react_1.default.createElement(framer_motion_1.m.img, { key: detailKey, className: classDetail + ' ' + styles_module_css_1.default.no_select, src: src, alt: alt, width: width, height: height, draggable: false, animate: {
                 zIndex: zIndex + 1,
                 scale: scale,
-                opacity: hasPick ? 1 : 0,
+                opacity: hasDetail ? 1 : 0,
                 x: 0
-            }, initial: { scale: 1, opacity: 0, x: hasShift ? offset : -offset }, transition: transition })));
+            }, initial: { scale: 1, opacity: 0 }, transition: transition })));
 };
-exports.default = PickImage;
+exports.DetailImage = DetailImage;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { MagicCircle } from './MagicCircle';
-import { MagicStraight } from './MagicStraight';
-export { MagicCircle };
-export { MagicStraight };
+import { CircleRotation } from './CircleRotation';
+import { StraightInfinity } from './StraightInfinity';
+export { CircleRotation };
+export { StraightInfinity };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MagicStraight = exports.MagicCircle = void 0;
-const MagicCircle_1 = require("./MagicCircle");
-Object.defineProperty(exports, "MagicCircle", { enumerable: true, get: function () { return MagicCircle_1.MagicCircle; } });
-const MagicStraight_1 = require("./MagicStraight");
-Object.defineProperty(exports, "MagicStraight", { enumerable: true, get: function () { return MagicStraight_1.MagicStraight; } });
+exports.StraightInfinity = exports.CircleRotation = void 0;
+const CircleRotation_1 = require("./CircleRotation");
+Object.defineProperty(exports, "CircleRotation", { enumerable: true, get: function () { return CircleRotation_1.CircleRotation; } });
+const StraightInfinity_1 = require("./StraightInfinity");
+Object.defineProperty(exports, "StraightInfinity", { enumerable: true, get: function () { return StraightInfinity_1.StraightInfinity; } });

package/dist/types.d.ts

@@ -5,11 +5,13 @@ type ImageProperty = {
 };
 type AnimationProperty = {
     scale?: number;
+    rotate?: number;
     rotateY?: number;
     rotateX?: number;
     rotateZ?: number;
     opacity?: number;
     selectScale?: number;
+    selectRotate?: number;
     selectRotateY?: number;
     selectRotateX?: number;
     selectRotateZ?: number;
@@ -26,12 +28,9 @@ type TransitionProperty = {
     damping?: number;
     mass?: number;
     stiffness?: number;
-    velocity?: number;
-    restSpeed?: number;
-    restDelta?: number;
 };
-type PickProperty = {
-    classPick?: string;
+type DetailProperty = {
+    classDetail?: string;
     white?: boolean;
     alpha?: number;
     blur?: number;
@@ -41,15 +40,11 @@ type PickProperty = {
 type CommonProperty = {
     images: ImageProperty[];
     start: number;
-    loading?: 'eager' | 'lazy';
     height: number;
     width: number;
     controller: number;
-    delay: number;
     offsetIndex?: number;
     reverseIndex?: boolean;
-    initialFadeRange: number;
-    initialTransTime: number;
     className?: string;
     classImages?: string;
     classImageSelect?: string;
@@ -57,36 +52,36 @@ type CommonProperty = {
     animate?: AnimationProperty;
     initial?: AnimationProperty;
     transition?: TransitionProperty;
+    loading?: 'eager' | 'lazy';
+    initialFadeRange?: number;
+    initialFadeTime?: number;
 };
-type OffPick = {
-    pickScale?: true;
-    pickProperty: PickProperty;
-    pickTransition: TransitionProperty;
+type DetailOn = {
+    detail?: true;
+    detailProperty: DetailProperty;
+    detailTransition: TransitionProperty;
 };
-type OnPick = {
-    pickScale?: false;
-    pickProperty?: undefined;
-    pickTransition?: undefined;
+type DetailOff = {
+    detail?: false;
+    detailProperty?: undefined;
+    detailTransition?: undefined;
 };
-type MagicProperty = CommonProperty & (OffPick | OnPick);
-export type MagicCircleProps = MagicProperty & {
+type MagicProperty = CommonProperty & (DetailOn | DetailOff);
+export type CircleRotationProps = MagicProperty & {
     radius: number;
-    dynamic?: boolean;
-    scrollDirection?: boolean;
 };
-export type MagicStraightProps = MagicProperty & {
+export type StraightInfinityProps = MagicProperty & {
     vertical?: boolean;
     margin?: number;
     selectOffsetX?: number;
     selectOffsetY?: number;
 };
-export type PickImageProps = {
+export type DetailImageProps = {
     onClick: MouseEventHandler<HTMLDivElement>;
-    classPick?: string;
-    hasPick: boolean;
-    hasShift: boolean;
-    argRef: Ref<HTMLDivElement>;
-    argKey: number;
+    classDetail?: string;
+    hasDetail: boolean;
+    detailRef: Ref<HTMLDivElement>;
+    detailKey: number;
     src: string;
     alt: string;
     width: number;
@@ -96,7 +91,6 @@ export type PickImageProps = {
     alpha?: number;
     blur?: number;
     scale?: number;
-    offset?: number;
     transition?: TransitionProperty;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-magic-card",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "React Component library for images gallery using the framer motion animation.",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -23,7 +23,9 @@
     "component",
     "animation",
     "images",
-    "gallery"
+    "gallery",
+    "circle",
+    "infinity"
   ],
   "license": "MIT",
   "dependencies": {

package/dist/MagicCircle/index.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { MagicCircleProps } from '../types';
-export declare const MagicCircle: ({ images, start, height, width, dynamic, scrollDirection, radius, delay, controller, offsetIndex, reverseIndex, loading, initialFadeRange, initialTransTime, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;

package/dist/MagicCircle/styles.module.css

@@ -1,14 +0,0 @@
-.outer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-}
-
-.inner {
-  position: relative;
-}
-
-.inner img {
-  position: absolute;
-}

package/dist/MagicStraight/index.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { MagicStraightProps } from '../types';
-export declare const MagicStraight: ({ images, start, height, width, vertical, margin, selectOffsetX, selectOffsetY, controller, delay, offsetIndex, reverseIndex, loading, initialFadeRange, initialTransTime, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;

package/dist/MagicStraight/styles.module.css

@@ -1,6 +0,0 @@
-.outer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-}

package/dist/common/PickImage/index.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { PickImageProps } from '../../types';
-declare const PickImage: ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src, alt, width, height, zIndex, white, alpha, blur, scale, offset, transition }: PickImageProps) => React.JSX.Element;
-export default PickImage;

package/dist/common/PickImage/styles.module.css

@@ -1,14 +0,0 @@
-.full_size {
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.no_select {
-  user-select: none;
-}