@hua-labs/motion-core 2.0.0 → 2.0.1

package/dist/hooks/useGestureMotion.js

@@ -0,0 +1,167 @@
+import { useRef, useEffect, useState, useCallback } from 'react';
+export function useGestureMotion(options) {
+    const { gestureType, duration = 300, easing = 'ease-out', sensitivity = 1, enabled = true, onGestureStart, onGestureEnd } = options;
+    const elementRef = useRef(null);
+    const [gestureState, setGestureState] = useState({
+        isActive: false,
+        x: 0,
+        y: 0,
+        deltaX: 0,
+        deltaY: 0,
+        scale: 1,
+        rotation: 0
+    });
+    const [motionStyle, setMotionStyle] = useState({});
+    // 제스처 시작점 저장
+    const startPoint = useRef({ x: 0, y: 0 });
+    const isDragging = useRef(false);
+    // 모션 스타일 업데이트
+    const updateMotionStyle = useCallback(() => {
+        if (!enabled)
+            return;
+        const { isActive, deltaX, deltaY, scale, rotation } = gestureState;
+        let transform = '';
+        switch (gestureType) {
+            case 'hover':
+                transform = isActive
+                    ? `scale(${1 + sensitivity * 0.05}) translateY(-${sensitivity * 2}px)`
+                    : 'scale(1) translateY(0)';
+                break;
+            case 'drag':
+                transform = isActive
+                    ? `translate(${deltaX * sensitivity}px, ${deltaY * sensitivity}px)`
+                    : 'translate(0, 0)';
+                break;
+            case 'pinch':
+                transform = `scale(${scale})`;
+                break;
+            case 'swipe':
+                transform = isActive
+                    ? `translateX(${deltaX * sensitivity}px) rotateY(${deltaX * 0.1}deg)`
+                    : 'translateX(0) rotateY(0)';
+                break;
+            case 'tilt':
+                transform = isActive
+                    ? `rotateX(${deltaY * 0.1}deg) rotateY(${deltaX * 0.1}deg)`
+                    : 'rotateX(0) rotateY(0)';
+                break;
+        }
+        setMotionStyle({
+            transform,
+            transition: isActive ? 'none' : `all ${duration}ms ${easing}`,
+            cursor: gestureType === 'drag' && isActive ? 'grabbing' : 'pointer'
+        });
+    }, [gestureState, gestureType, enabled, duration, easing, sensitivity]);
+    // 마우스 이벤트 핸들러
+    const handleMouseDown = useCallback((e) => {
+        if (!enabled || gestureType !== 'drag')
+            return;
+        isDragging.current = true;
+        startPoint.current = { x: e.clientX, y: e.clientY };
+        setGestureState(prev => ({ ...prev, isActive: true }));
+        onGestureStart?.();
+    }, [enabled, gestureType, onGestureStart]);
+    const handleMouseMove = useCallback((e) => {
+        if (!enabled || !isDragging.current)
+            return;
+        const deltaX = e.clientX - startPoint.current.x;
+        const deltaY = e.clientY - startPoint.current.y;
+        setGestureState(prev => ({
+            ...prev,
+            x: e.clientX,
+            y: e.clientY,
+            deltaX,
+            deltaY
+        }));
+    }, [enabled]);
+    const handleMouseUp = useCallback(() => {
+        if (!enabled)
+            return;
+        isDragging.current = false;
+        setGestureState(prev => ({ ...prev, isActive: false }));
+        onGestureEnd?.();
+    }, [enabled, onGestureEnd]);
+    // 호버 이벤트 핸들러
+    const handleMouseEnter = useCallback(() => {
+        if (!enabled || gestureType !== 'hover')
+            return;
+        setGestureState(prev => ({ ...prev, isActive: true }));
+        onGestureStart?.();
+    }, [enabled, gestureType, onGestureStart]);
+    const handleMouseLeave = useCallback(() => {
+        if (!enabled || gestureType !== 'hover')
+            return;
+        setGestureState(prev => ({ ...prev, isActive: false }));
+        onGestureEnd?.();
+    }, [enabled, gestureType, onGestureEnd]);
+    // 터치 이벤트 핸들러 (모바일 지원)
+    const handleTouchStart = useCallback((e) => {
+        if (!enabled)
+            return;
+        const touch = e.touches[0];
+        startPoint.current = { x: touch.clientX, y: touch.clientY };
+        setGestureState(prev => ({ ...prev, isActive: true }));
+        onGestureStart?.();
+    }, [enabled, onGestureStart]);
+    const handleTouchMove = useCallback((e) => {
+        if (!enabled)
+            return;
+        const touch = e.touches[0];
+        const deltaX = touch.clientX - startPoint.current.x;
+        const deltaY = touch.clientY - startPoint.current.y;
+        setGestureState(prev => ({
+            ...prev,
+            x: touch.clientX,
+            y: touch.clientY,
+            deltaX,
+            deltaY
+        }));
+    }, [enabled]);
+    const handleTouchEnd = useCallback(() => {
+        if (!enabled)
+            return;
+        setGestureState(prev => ({ ...prev, isActive: false }));
+        onGestureEnd?.();
+    }, [enabled, onGestureEnd]);
+    // 이벤트 리스너 등록
+    useEffect(() => {
+        if (!elementRef.current)
+            return;
+        const element = elementRef.current;
+        // 마우스 이벤트
+        if (gestureType === 'hover') {
+            element.addEventListener('mouseenter', handleMouseEnter);
+            element.addEventListener('mouseleave', handleMouseLeave);
+        }
+        else if (gestureType === 'drag') {
+            element.addEventListener('mousedown', handleMouseDown);
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+        // 터치 이벤트
+        element.addEventListener('touchstart', handleTouchStart);
+        element.addEventListener('touchmove', handleTouchMove);
+        element.addEventListener('touchend', handleTouchEnd);
+        return () => {
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            element.removeEventListener('mouseleave', handleMouseLeave);
+            element.removeEventListener('mousedown', handleMouseDown);
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            element.removeEventListener('touchstart', handleTouchStart);
+            element.removeEventListener('touchmove', handleTouchMove);
+            element.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [gestureType, handleMouseEnter, handleMouseLeave, handleMouseDown, handleMouseMove, handleMouseUp, handleTouchStart, handleTouchMove, handleTouchEnd]);
+    // 모션 스타일 업데이트
+    useEffect(() => {
+        updateMotionStyle();
+    }, [updateMotionStyle]);
+    return {
+        ref: elementRef,
+        gestureState,
+        motionStyle,
+        isActive: gestureState.isActive
+    };
+}
+//# sourceMappingURL=useGestureMotion.js.map

package/dist/hooks/useGestureMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGestureMotion.js","sourceRoot":"","sources":["../../src/hooks/useGestureMotion.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useGradient.d.ts

@@ -1,25 +1,14 @@
-import { BaseMotionOptions, BaseMotionReturn, MotionElement } from '../types';
-export interface GradientOptions extends BaseMotionOptions {
-    colors: string[];
-    direction?: 'to-right' | 'to-left' | 'to-bottom' | 'to-top' | 'to-bottom-right' | 'to-bottom-left' | 'to-top-right' | 'to-top-left';
-    gradientType?: 'linear' | 'radial';
-    startPosition?: number;
-    endPosition?: number;
-    animateColors?: boolean;
-    animateDirection?: boolean;
-    animatePosition?: boolean;
-    colorTransitionDuration?: number;
-    directionTransitionDuration?: number;
-    positionTransitionDuration?: number;
+import { BaseMotionReturn, MotionElement } from '../types';
+export interface GradientOptions {
+    colors?: string[];
+    duration?: number;
+    direction?: 'horizontal' | 'vertical' | 'diagonal';
+    size?: number;
+    easing?: 'linear' | 'ease-in-out' | 'ease-in' | 'ease-out';
     autoStart?: boolean;
 }
-export declare function useGradient<T extends MotionElement = HTMLDivElement>(options: GradientOptions): BaseMotionReturn<T> & {
-    currentColors: string[];
-    currentDirection: string;
-    currentStartPosition: number;
-    currentEndPosition: number;
-    setColors: (colors: string[]) => void;
-    setDirection: (direction: 'to-right' | 'to-left' | 'to-bottom' | 'to-top' | 'to-bottom-right' | 'to-bottom-left' | 'to-top-right' | 'to-top-left') => void;
-    setPositions: (start: number, end: number) => void;
+export declare function useGradient<T extends MotionElement = HTMLDivElement>(options?: GradientOptions): BaseMotionReturn<T> & {
+    style: React.CSSProperties;
 };
+export declare const createGradientKeyframes: (name?: string) => void;
 //# sourceMappingURL=useGradient.d.ts.map

package/dist/hooks/useGradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGradient.d.ts","sourceRoot":"","sources":["../../src/hooks/useGradient.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7E,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,cAAc,GAAG,aAAa,CAAA;IACnI,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,2BAA2B,CAAC,EAAE,MAAM,CAAA;IACpC,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EAClE,OAAO,EAAE,eAAe,GACvB,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACvB,aAAa,EAAE,MAAM,EAAE,CAAA;IACvB,gBAAgB,EAAE,MAAM,CAAA;IACxB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACrC,YAAY,EAAE,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,cAAc,GAAG,aAAa,KAAK,IAAI,CAAA;IAC1J,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAkLA"}
+{"version":3,"file":"useGradient.d.ts","sourceRoot":"","sources":["../../src/hooks/useGradient.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAa,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,UAAU,CAAA;IAClD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,CAAA;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAID,wBAAgB,WAAW,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EAClE,OAAO,GAAE,eAAoB,GAC5B,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACvB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;CAC3B,CAsFA;AAGD,eAAO,MAAM,uBAAuB,GAAI,OAAM,MAAwB,SAarE,CAAA"}

package/dist/hooks/useGradient.js

@@ -1,144 +1,87 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
-export function useGradient(options) {
-    const { duration = 1000, easing = 'ease-in-out', colors, direction = 'to-right', gradientType = 'linear', startPosition = 0, endPosition = 100, animateColors = true, animateDirection = false, animatePosition = false, colorTransitionDuration = 1000, directionTransitionDuration = 500, positionTransitionDuration = 800, autoStart = true, onComplete, onStart, onStop, onReset } = options;
-    const ref = useRef(null);
-    const [isVisible, setIsVisible] = useState(false);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [progress, setProgress] = useState(0);
-    const [currentColors, setCurrentColors] = useState(colors);
-    const [currentDirection, setCurrentDirection] = useState(direction);
-    const [currentStartPosition, setCurrentStartPosition] = useState(startPosition);
-    const [currentEndPosition, setCurrentEndPosition] = useState(endPosition);
-    // 색상 변경 함수
-    const setColors = useCallback((newColors) => {
-        if (!animateColors) {
-            setCurrentColors(newColors);
-            return;
-        }
-        setIsAnimating(true);
-        setProgress(0);
-        onStart?.();
-        setTimeout(() => {
-            setCurrentColors(newColors);
-            setIsAnimating(false);
-            setProgress(1);
-            onComplete?.();
-        }, colorTransitionDuration);
-    }, [animateColors, colorTransitionDuration, onStart, onComplete]);
-    // 방향 변경 함수
-    const setDirection = useCallback((newDirection) => {
-        if (!animateDirection) {
-            setCurrentDirection(newDirection);
-            return;
-        }
-        setIsAnimating(true);
-        setProgress(0);
-        onStart?.();
-        setTimeout(() => {
-            setCurrentDirection(newDirection);
-            setIsAnimating(false);
-            setProgress(1);
-            onComplete?.();
-        }, directionTransitionDuration);
-    }, [animateDirection, directionTransitionDuration, onStart, onComplete]);
-    // 위치 변경 함수
-    const setPositions = useCallback((start, end) => {
-        if (!animatePosition) {
-            setCurrentStartPosition(start);
-            setCurrentEndPosition(end);
-            return;
-        }
-        setIsAnimating(true);
-        setProgress(0);
-        onStart?.();
-        setTimeout(() => {
-            setCurrentStartPosition(start);
-            setCurrentEndPosition(end);
-            setIsAnimating(false);
-            setProgress(1);
-            onComplete?.();
-        }, positionTransitionDuration);
-    }, [animatePosition, positionTransitionDuration, onStart, onComplete]);
-    // 모션 시작 함수
+import { useState, useEffect, useCallback } from 'react';
+const defaultColors = ['#60a5fa', '#34d399', '#fbbf24', '#f87171'];
+export function useGradient(options = {}) {
+    const { colors = defaultColors, duration = 6000, direction = 'diagonal', size = 300, easing = 'ease-in-out', autoStart = false } = options;
+    const [isAnimating, setIsAnimating] = useState(autoStart);
+    const [isVisible, setIsVisible] = useState(true);
+    const [motionProgress, setMotionProgress] = useState(0);
+    const getGradientStyle = useCallback(() => {
+        const gradientDirection = direction === 'horizontal' ? '90deg' :
+            direction === 'vertical' ? '180deg' : '135deg';
+        const background = `linear-gradient(${gradientDirection}, ${colors.join(', ')})`;
+        const backgroundSize = `${size}% ${size}%`;
+        const easingFunction = easing === 'linear' ? 'linear' :
+            easing === 'ease-in' ? 'ease-in' :
+                easing === 'ease-out' ? 'ease-out' : 'ease-in-out';
+        return {
+            background,
+            backgroundSize,
+            animation: isAnimating ? `gradientShift ${duration}ms ${easingFunction} infinite` : 'none',
+            backgroundPosition: isAnimating ? undefined : `${motionProgress}% 50%`
+        };
+    }, [colors, direction, size, duration, easing, isAnimating, motionProgress]);
     const start = useCallback(() => {
-        if (!isVisible) {
-            setIsVisible(true);
-            setIsAnimating(true);
-            setProgress(0);
-            onStart?.();
-            setTimeout(() => {
-                setIsAnimating(false);
-                setProgress(1);
-                onComplete?.();
-            }, duration);
-        }
-    }, [isVisible, duration, onStart, onComplete]);
-    // 모션 중단 함수
-    const stop = useCallback(() => {
+        setIsAnimating(true);
+    }, []);
+    const pause = useCallback(() => {
         setIsAnimating(false);
-        onStop?.();
-    }, [onStop]);
-    // 모션 리셋 함수
+    }, []);
+    const resume = useCallback(() => {
+        setIsAnimating(true);
+    }, []);
     const reset = useCallback(() => {
-        setIsVisible(false);
+        // 모션 완전 정지
         setIsAnimating(false);
-        setProgress(0);
-        setCurrentColors(colors);
-        setCurrentDirection(direction);
-        setCurrentStartPosition(startPosition);
-        setCurrentEndPosition(endPosition);
-        onReset?.();
-    }, [colors, direction, startPosition, endPosition, onReset]);
-    // 모션 일시정지 함수
-    const pause = useCallback(() => {
+        // 진행률 초기화
+        setMotionProgress(0);
+    }, []);
+    const stop = useCallback(() => {
         setIsAnimating(false);
     }, []);
-    // 모션 재개 함수
-    const resume = useCallback(() => {
-        if (isVisible) {
-            setIsAnimating(true);
-        }
-    }, [isVisible]);
-    // 자동 시작
     useEffect(() => {
-        if (autoStart) {
-            start();
-        }
-    }, [autoStart, start]);
-    // 그라데이션 스타일 생성
-    const getGradientStyle = () => {
-        let background;
-        if (gradientType === 'radial') {
-            background = `radial-gradient(circle at ${currentStartPosition}% ${currentEndPosition}%, ${currentColors.join(', ')})`;
-        }
-        else {
-            background = `linear-gradient(${currentDirection}, ${currentColors.join(', ')})`;
+        if (!isAnimating) {
+            const interval = setInterval(() => {
+                setMotionProgress(prev => {
+                    const newProgress = prev + (100 / (duration / 16)); // 60fps 기준
+                    return newProgress >= 100 ? 0 : newProgress;
+                });
+            }, 16);
+            return () => clearInterval(interval);
         }
-        return {
-            background,
-            transition: `all ${duration}ms ${easing}`,
-            willChange: 'background'
-        };
-    };
-    const style = getGradientStyle();
+    }, [isAnimating, duration]);
+    // 초기 상태 설정만 하고 이후에는 수동으로 제어
+    useEffect(() => {
+        setIsAnimating(autoStart);
+    }, [autoStart]);
     return {
-        ref,
+        ref: { current: null }, // useGradient는 ref를 직접 사용하지 않음
         isVisible,
         isAnimating,
-        style,
-        progress,
+        style: getGradientStyle(),
+        progress: motionProgress / 100,
         start,
-        stop,
-        reset,
         pause,
         resume,
-        currentColors,
-        currentDirection,
-        currentStartPosition,
-        currentEndPosition,
-        setColors,
-        setDirection,
-        setPositions
+        reset,
+        stop
     };
 }
+// CSS 키프레임 생성 함수
+export const createGradientKeyframes = (name = 'gradientShift') => {
+    const style = document.createElement('style');
+    style.textContent = `
+    @keyframes ${name} {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+    }
+  `;
+    if (!document.head.querySelector(`style[data-gradient="${name}"]`)) {
+        style.setAttribute('data-gradient', name);
+        document.head.appendChild(style);
+    }
+};
+// 자동으로 키프레임 생성
+if (typeof document !== 'undefined') {
+    createGradientKeyframes();
+}
 //# sourceMappingURL=useGradient.js.map

package/dist/hooks/useGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGradient.js","sourceRoot":"","sources":["../../src/hooks/useGradient.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useGradient.js","sourceRoot":"","sources":["../../src/hooks/useGradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAYxD,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAElE,MAAM,UAAU,WAAW,CACzB,UAA2B,EAAE;IAI7B,MAAM,EACJ,MAAM,GAAG,aAAa,EACtB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,aAAa,EACtB,SAAS,GAAG,KAAK,EAClB,GAAG,OAAO,CAAA;IAEX,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAA;IACzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAChD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvD,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAC7D,MAAM,iBAAiB,GAAG,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YACvC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAA;QAEvE,MAAM,UAAU,GAAG,mBAAmB,iBAAiB,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;QAChF,MAAM,cAAc,GAAG,GAAG,IAAI,KAAK,IAAI,GAAG,CAAA;QAE1C,MAAM,cAAc,GAAG,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACjC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;gBAClC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAA;QAExE,OAAO;YACL,UAAU;YACV,cAAc;YACd,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,iBAAiB,QAAQ,MAAM,cAAc,WAAW,CAAC,CAAC,CAAC,MAAM;YAC1F,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,cAAc,OAAO;SACvE,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAA;IAE5E,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,cAAc,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,cAAc,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,cAAc,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,WAAW;QACX,cAAc,CAAC,KAAK,CAAC,CAAA;QACrB,UAAU;QACV,iBAAiB,CAAC,CAAC,CAAC,CAAA;IACtB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,cAAc,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;gBAChC,iBAAiB,CAAC,IAAI,CAAC,EAAE;oBACvB,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC,CAAA,CAAC,WAAW;oBAC9D,OAAO,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAA;gBAC7C,CAAC,CAAC,CAAA;YACJ,CAAC,EAAE,EAAE,CAAC,CAAA;YAEN,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;QACtC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE3B,4BAA4B;IAC5B,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,SAAS,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO;QACL,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAA+B,EAAE,+BAA+B;QACpF,SAAS;QACT,WAAW;QACX,KAAK,EAAE,gBAAgB,EAAE;QACzB,QAAQ,EAAE,cAAc,GAAG,GAAG;QAC9B,KAAK;QACL,KAAK;QACL,MAAM;QACN,KAAK;QACL,IAAI;KACL,CAAA;AACH,CAAC;AAED,iBAAiB;AACjB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,OAAe,eAAe,EAAE,EAAE;IACxE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAC7C,KAAK,CAAC,WAAW,GAAG;iBACL,IAAI;;;;GAIlB,CAAA;IAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,IAAI,IAAI,CAAC,EAAE,CAAC;QACnE,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,CAAA;QACzC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IAClC,CAAC;AACH,CAAC,CAAA;AAED,eAAe;AACf,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;IACpC,uBAAuB,EAAE,CAAA;AAC3B,CAAC"}

package/dist/hooks/useHoverMotion.d.ts

@@ -1,15 +1,5 @@
-import { BaseMotionOptions, InteractionReturn, MotionElement } from '../types';
-export interface HoverMotionOptions extends BaseMotionOptions {
-    hoverScale?: number;
-    hoverOpacity?: number;
-    hoverRotate?: number;
-    hoverTranslateY?: number;
-    hoverTranslateX?: number;
-    initialScale?: number;
-    initialOpacity?: number;
-    initialRotate?: number;
-    initialTranslateY?: number;
-    initialTranslateX?: number;
-}
-export declare function useHoverMotion<T extends MotionElement = HTMLDivElement>(options?: HoverMotionOptions): InteractionReturn<T>;
+export declare function useHoverMotion(motionHook: (() => any) | any, options?: {
+    onHover?: 'start' | 'reverse';
+    onLeave?: 'reverse' | 'reset';
+}): any;
 //# sourceMappingURL=useHoverMotion.d.ts.map

package/dist/hooks/useHoverMotion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHoverMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useHoverMotion.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE9E,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACrE,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,CAAC,CAAC,CAAC,CA4HtB"}
+{"version":3,"file":"useHoverMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useHoverMotion.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAC5B,UAAU,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,EAC7B,OAAO,GAAE;IACP,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;CACzB,OAuDP"}

package/dist/hooks/useHoverMotion.js

@@ -1,63 +1,30 @@
-import { useRef, useState, useCallback, useEffect } from 'react';
-export function useHoverMotion(options = {}) {
-    const { duration = 300, easing = 'ease-out', hoverScale = 1.05, hoverOpacity = 1, hoverRotate = 0, hoverTranslateY = 0, hoverTranslateX = 0, initialScale = 1, initialOpacity = 1, initialRotate = 0, initialTranslateY = 0, initialTranslateX = 0, onComplete, onStart, onStop, onReset } = options;
-    const ref = useRef(null);
-    const [isHovered, setIsHovered] = useState(false);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [progress, setProgress] = useState(0);
-    // 호버 시작
+import { useRef, useEffect, useCallback } from 'react';
+export function useHoverMotion(motionHook, options = {}) {
+    const { onHover = 'start', onLeave = 'reverse' } = options;
+    const elementRef = useRef(null);
+    const motionRef = useRef(null);
+    // motion 객체를 ref로 안정화
+    if (!motionRef.current) {
+        motionRef.current = typeof motionHook === 'function' ? motionHook() : motionHook;
+    }
     const handleMouseEnter = useCallback(() => {
-        setIsHovered(true);
-        setIsAnimating(true);
-        setProgress(0);
-        onStart?.();
-        // 애니메이션 완료 시
-        setTimeout(() => {
-            setIsAnimating(false);
-            setProgress(1);
-            onComplete?.();
-        }, duration);
-    }, [duration, onStart, onComplete]);
-    // 호버 종료
+        if (onHover === 'start') {
+            motionRef.current?.start();
+        }
+        else if (onHover === 'reverse') {
+            motionRef.current?.reset();
+        }
+    }, [onHover]);
     const handleMouseLeave = useCallback(() => {
-        setIsHovered(false);
-        setIsAnimating(true);
-        setProgress(1);
-        // 애니메이션 완료 시
-        setTimeout(() => {
-            setIsAnimating(false);
-            setProgress(0);
-        }, duration);
-    }, [duration]);
-    // 모션 시작 함수 (프로그래매틱 제어용)
-    const start = useCallback(() => {
-        handleMouseEnter();
-    }, [handleMouseEnter]);
-    // 모션 중단 함수
-    const stop = useCallback(() => {
-        setIsAnimating(false);
-        onStop?.();
-    }, [onStop]);
-    // 모션 리셋 함수
-    const reset = useCallback(() => {
-        setIsHovered(false);
-        setIsAnimating(false);
-        setProgress(0);
-        onReset?.();
-    }, [onReset]);
-    // 모션 일시정지 함수
-    const pause = useCallback(() => {
-        setIsAnimating(false);
-    }, []);
-    // 모션 재개 함수
-    const resume = useCallback(() => {
-        if (isHovered) {
-            setIsAnimating(true);
+        if (onLeave === 'reverse') {
+            motionRef.current?.stop(); // stop 사용으로 현재 상태 유지
+        }
+        else if (onLeave === 'reset') {
+            motionRef.current?.reset(); // reset 사용으로 초기 상태로 복원
         }
-    }, [isHovered]);
-    // 이벤트 리스너 설정
+    }, [onLeave]);
     useEffect(() => {
-        const element = ref.current;
+        const element = elementRef.current;
         if (!element)
             return;
         element.addEventListener('mouseenter', handleMouseEnter);
@@ -67,33 +34,15 @@ export function useHoverMotion(options = {}) {
             element.removeEventListener('mouseleave', handleMouseLeave);
         };
     }, [handleMouseEnter, handleMouseLeave]);
-    // 스타일 계산
-    const style = {
-        transform: `
-      scale(${isHovered ? hoverScale : initialScale})
-      rotate(${isHovered ? hoverRotate : initialRotate}deg)
-      translate(${isHovered ? hoverTranslateX : initialTranslateX}px, ${isHovered ? hoverTranslateY : initialTranslateY}px)
-    `,
-        opacity: isHovered ? hoverOpacity : initialOpacity,
-        transition: `all ${duration}ms ${easing}`,
-        willChange: 'transform, opacity'
-    };
+    const setRef = useCallback((element) => {
+        elementRef.current = element;
+        if (motionRef.current?.ref) {
+            motionRef.current.ref(element);
+        }
+    }, []);
     return {
-        ref,
-        isVisible: isHovered,
-        isAnimating,
-        style,
-        progress,
-        start,
-        stop,
-        reset,
-        pause,
-        resume,
-        // 새로운 직관적 API 추가
-        hover: handleMouseEnter,
-        leave: handleMouseLeave,
-        // 상태 속성 추가
-        isHovered
+        ...motionRef.current,
+        ref: setRef
     };
 }
 //# sourceMappingURL=useHoverMotion.js.map