@hua-labs/motion-core 2.4.0 → 2.4.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present HUA Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -942,6 +942,10 @@ function useFadeIn(options = {}) {
     setProgress(0);
     onReset?.();
   }, [stop, onReset]);
+  const pause = react.useCallback(() => {
+  }, []);
+  const resume = react.useCallback(() => {
+  }, []);
   react.useEffect(() => {
     if (!ref.current || !autoStart) return;
     return observeElement(
@@ -958,14 +962,25 @@ function useFadeIn(options = {}) {
       stop();
     };
   }, [stop]);
-  const style = react.useMemo(() => ({
-    opacity: isVisible ? targetOpacity : initialOpacity,
-    transition: `opacity ${duration}ms ${easing}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing,
-    "--motion-progress": `${progress}`
-  }), [isVisible, targetOpacity, initialOpacity, duration, easing, delay, progress]);
+  const style = react.useMemo(
+    () => ({
+      opacity: isVisible ? targetOpacity : initialOpacity,
+      transition: `opacity ${duration}ms ${easing}`,
+      "--motion-delay": `${delay}ms`,
+      "--motion-duration": `${duration}ms`,
+      "--motion-easing": easing,
+      "--motion-progress": `${progress}`
+    }),
+    [
+      isVisible,
+      targetOpacity,
+      initialOpacity,
+      duration,
+      easing,
+      delay,
+      progress
+    ]
+  );
   return {
     ref,
     isVisible,
@@ -974,7 +989,9 @@ function useFadeIn(options = {}) {
     progress,
     start,
     stop,
-    reset
+    reset,
+    pause,
+    resume
   };
 }
 function useSlideUp(options = {}) {
@@ -1063,6 +1080,10 @@ function useSlideUp(options = {}) {
     setProgress(0);
     onReset?.();
   }, [stop, onReset]);
+  const pause = react.useCallback(() => {
+  }, []);
+  const resume = react.useCallback(() => {
+  }, []);
   react.useEffect(() => {
     if (!ref.current || !autoStart) return;
     return observeElement(
@@ -1079,21 +1100,37 @@ function useSlideUp(options = {}) {
       stop();
     };
   }, [stop]);
-  const initialTransform = react.useMemo(() => getInitialTransform2(), [getInitialTransform2]);
+  const initialTransform = react.useMemo(
+    () => getInitialTransform2(),
+    [getInitialTransform2]
+  );
   const finalTransform = react.useMemo(() => {
     return direction === "left" || direction === "right" ? "translateX(0)" : "translateY(0)";
   }, [direction]);
-  const style = react.useMemo(() => ({
-    opacity: isVisible ? 1 : 0,
-    transform: isVisible ? finalTransform : initialTransform,
-    transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing,
-    "--motion-progress": `${progress}`,
-    "--motion-direction": direction,
-    "--motion-distance": `${distance}px`
-  }), [isVisible, initialTransform, finalTransform, duration, easing, delay, progress, direction, distance]);
+  const style = react.useMemo(
+    () => ({
+      opacity: isVisible ? 1 : 0,
+      transform: isVisible ? finalTransform : initialTransform,
+      transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
+      "--motion-delay": `${delay}ms`,
+      "--motion-duration": `${duration}ms`,
+      "--motion-easing": easing,
+      "--motion-progress": `${progress}`,
+      "--motion-direction": direction,
+      "--motion-distance": `${distance}px`
+    }),
+    [
+      isVisible,
+      initialTransform,
+      finalTransform,
+      duration,
+      easing,
+      delay,
+      progress,
+      direction,
+      distance
+    ]
+  );
   return {
     ref,
     isVisible,
@@ -1102,7 +1139,9 @@ function useSlideUp(options = {}) {
     progress,
     start,
     stop,
-    reset
+    reset,
+    pause,
+    resume
   };
 }
 
@@ -1182,6 +1221,10 @@ function useScaleIn(options = {}) {
     }
     onReset?.();
   }, [stop, initialScale, onReset]);
+  const pause = react.useCallback(() => {
+  }, []);
+  const resume = react.useCallback(() => {
+  }, []);
   react.useEffect(() => {
     if (!ref.current || !autoStart) return;
     return observeElement(
@@ -1198,15 +1241,18 @@ function useScaleIn(options = {}) {
       stop();
     };
   }, [stop]);
-  const style = react.useMemo(() => ({
-    transform: `scale(${scale})`,
-    opacity,
-    transition: `all ${duration}ms ${easing}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing,
-    "--motion-progress": `${progress}`
-  }), [scale, opacity, duration, easing, delay, progress]);
+  const style = react.useMemo(
+    () => ({
+      transform: `scale(${scale})`,
+      opacity,
+      transition: `all ${duration}ms ${easing}`,
+      "--motion-delay": `${delay}ms`,
+      "--motion-duration": `${duration}ms`,
+      "--motion-easing": easing,
+      "--motion-progress": `${progress}`
+    }),
+    [scale, opacity, duration, easing, delay, progress]
+  );
   return {
     ref,
     isVisible,
@@ -1215,7 +1261,9 @@ function useScaleIn(options = {}) {
     progress,
     start,
     reset,
-    stop
+    stop,
+    pause,
+    resume
   };
 }
 function useBounceIn(options = {}) {
@@ -1293,6 +1341,10 @@ function useBounceIn(options = {}) {
     }
     onReset?.();
   }, [stop, onReset]);
+  const pause = react.useCallback(() => {
+  }, []);
+  const resume = react.useCallback(() => {
+  }, []);
   react.useEffect(() => {
     if (!ref.current || !autoStart) return;
     return observeElement(
@@ -1309,15 +1361,18 @@ function useBounceIn(options = {}) {
       stop();
     };
   }, [stop]);
-  const style = react.useMemo(() => ({
-    transform: `scale(${scale})`,
-    opacity,
-    transition: `all ${duration}ms ${easing}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing,
-    "--motion-progress": `${progress}`
-  }), [scale, opacity, duration, easing, delay, progress]);
+  const style = react.useMemo(
+    () => ({
+      transform: `scale(${scale})`,
+      opacity,
+      transition: `all ${duration}ms ${easing}`,
+      "--motion-delay": `${delay}ms`,
+      "--motion-duration": `${duration}ms`,
+      "--motion-easing": easing,
+      "--motion-progress": `${progress}`
+    }),
+    [scale, opacity, duration, easing, delay, progress]
+  );
   return {
     ref,
     isVisible,
@@ -1326,7 +1381,9 @@ function useBounceIn(options = {}) {
     progress,
     start,
     reset,
-    stop
+    stop,
+    pause,
+    resume
   };
 }
 function usePulse(options = {}) {
@@ -2590,9 +2647,11 @@ function useReducedMotion() {
       mediaQuery.removeEventListener("change", handleChange);
     };
   }, []);
-  return {
-    prefersReducedMotion
-  };
+  return prefersReducedMotion;
+}
+function useReducedMotionObject() {
+  const prefersReducedMotion = useReducedMotion();
+  return { prefersReducedMotion };
 }
 function useWindowSize(options = {}) {
   const {
@@ -6016,8 +6075,7 @@ function useSequence(sequence, options = {}) {
     isPlaying,
     currentIndex,
     totalMotions: sequence.length,
-    ref: motions[0]?.ref || (() => {
-    })
+    ref: motions[0]?.ref ?? { current: null }
     // 첫 번째 모션의 ref 반환
   };
 }
@@ -7503,6 +7561,7 @@ exports.usePageMotions = usePageMotions;
 exports.usePerformanceMonitor = usePerformanceMonitor;
 exports.usePulse = usePulse;
 exports.useReducedMotion = useReducedMotion;
+exports.useReducedMotionObject = useReducedMotionObject;
 exports.useRepeat = useRepeat;
 exports.useScaleIn = useScaleIn;
 exports.useScrollDirection = useScrollDirection;