@hua-labs/motion-core 2.0.0

package/dist/hooks/useButtonEffect.js

@@ -0,0 +1,311 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+export function useButtonEffect(options = {}) {
+    const { duration = 200, easing = 'ease-out', type = 'scale', scaleAmount = 0.95, rippleColor = 'rgba(255, 255, 255, 0.6)', rippleSize = 100, rippleDuration = 600, glowColor = '#3b82f6', glowSize = 20, glowIntensity = 0.8, shakeAmount = 5, shakeFrequency = 10, bounceHeight = 10, bounceStiffness = 0.3, slideDistance = 5, slideDirection = 'down', hoverScale = 1.05, hoverRotate = 0, hoverTranslateY = -2, hoverTranslateX = 0, activeScale = 0.95, activeRotate = 0, activeTranslateY = 2, activeTranslateX = 0, focusScale = 1.02, focusGlow = true, disabled = false, disabledOpacity = 0.5, autoStart = false, 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 [buttonType] = useState(type);
+    const [isPressed, setIsPressed] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [ripplePosition, setRipplePosition] = useState({ x: 0, y: 0 });
+    const [currentGlowIntensity, setGlowIntensity] = useState(0);
+    const [shakeOffset, setShakeOffset] = useState(0);
+    const [bounceOffset, setBounceOffset] = useState(0);
+    const [slideOffset, setSlideOffset] = useState(0);
+    const animationRef = useRef(null);
+    const startTimeRef = useRef(0);
+    // 리플 효과 함수
+    const createRipple = useCallback((event) => {
+        if (!ref.current)
+            return;
+        const rect = ref.current.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        setRipplePosition({ x, y });
+        setIsAnimating(true);
+        setProgress(0);
+        startTimeRef.current = Date.now();
+        onStart?.();
+        const animateRipple = () => {
+            const elapsed = Date.now() - startTimeRef.current;
+            const currentProgress = Math.min(elapsed / rippleDuration, 1);
+            setProgress(currentProgress);
+            if (currentProgress < 1) {
+                animationRef.current = requestAnimationFrame(animateRipple);
+            }
+            else {
+                setIsAnimating(false);
+                onComplete?.();
+            }
+        };
+        animationRef.current = requestAnimationFrame(animateRipple);
+    }, [rippleDuration, onStart, onComplete]);
+    // 흔들림 효과 함수
+    const shakeButton = useCallback(() => {
+        setIsAnimating(true);
+        setProgress(0);
+        startTimeRef.current = Date.now();
+        onStart?.();
+        const animateShake = () => {
+            const elapsed = Date.now() - startTimeRef.current;
+            const currentProgress = Math.min(elapsed / duration, 1);
+            setProgress(currentProgress);
+            const shake = shakeAmount * Math.sin(currentProgress * Math.PI * 2 * shakeFrequency) * (1 - currentProgress);
+            setShakeOffset(shake);
+            if (currentProgress < 1) {
+                animationRef.current = requestAnimationFrame(animateShake);
+            }
+            else {
+                setIsAnimating(false);
+                setShakeOffset(0);
+                onComplete?.();
+            }
+        };
+        animationRef.current = requestAnimationFrame(animateShake);
+    }, [duration, shakeAmount, shakeFrequency, onStart, onComplete]);
+    // 바운스 효과 함수
+    const bounceButton = useCallback(() => {
+        setIsAnimating(true);
+        setProgress(0);
+        startTimeRef.current = Date.now();
+        onStart?.();
+        const animateBounce = () => {
+            const elapsed = Date.now() - startTimeRef.current;
+            const currentProgress = Math.min(elapsed / duration, 1);
+            setProgress(currentProgress);
+            const bounce = bounceHeight * Math.sin(currentProgress * Math.PI * bounceStiffness) * Math.exp(-currentProgress * 3);
+            setBounceOffset(bounce);
+            if (currentProgress < 1) {
+                animationRef.current = requestAnimationFrame(animateBounce);
+            }
+            else {
+                setIsAnimating(false);
+                setBounceOffset(0);
+                onComplete?.();
+            }
+        };
+        animationRef.current = requestAnimationFrame(animateBounce);
+    }, [duration, bounceHeight, bounceStiffness, onStart, onComplete]);
+    // 슬라이드 효과 함수
+    const slideButton = useCallback(() => {
+        setIsAnimating(true);
+        setProgress(0);
+        startTimeRef.current = Date.now();
+        onStart?.();
+        const animateSlide = () => {
+            const elapsed = Date.now() - startTimeRef.current;
+            const currentProgress = Math.min(elapsed / duration, 1);
+            setProgress(currentProgress);
+            const slide = slideDistance * currentProgress;
+            setSlideOffset(slide);
+            if (currentProgress < 1) {
+                animationRef.current = requestAnimationFrame(animateSlide);
+            }
+            else {
+                setIsAnimating(false);
+                onComplete?.();
+            }
+        };
+        animationRef.current = requestAnimationFrame(animateSlide);
+    }, [duration, slideDistance, onStart, onComplete]);
+    // 버튼 누르기 함수
+    const pressButton = useCallback(() => {
+        if (disabled)
+            return;
+        setIsPressed(true);
+        switch (type) {
+            case 'ripple':
+                // 리플은 마우스 이벤트로 처리
+                break;
+            case 'shake':
+                shakeButton();
+                break;
+            case 'bounce':
+                bounceButton();
+                break;
+            case 'slide':
+                slideButton();
+                break;
+            default:
+                // 기본 스케일 효과
+                break;
+        }
+    }, [disabled, type, shakeButton, bounceButton, slideButton]);
+    // 버튼 놓기 함수
+    const releaseButton = useCallback(() => {
+        setIsPressed(false);
+    }, []);
+    // 버튼 상태 설정 함수
+    const setButtonState = useCallback((state) => {
+        switch (state) {
+            case 'hover':
+                setIsHovered(true);
+                break;
+            case 'active':
+                setIsPressed(true);
+                break;
+            case 'focus':
+                setIsFocused(true);
+                break;
+            case 'disabled':
+                setIsHovered(false);
+                setIsPressed(false);
+                setIsFocused(false);
+                break;
+            default:
+                setIsHovered(false);
+                setIsPressed(false);
+                setIsFocused(false);
+                break;
+        }
+    }, []);
+    // 모션 시작 함수
+    const start = useCallback(() => {
+        if (!isVisible) {
+            setIsVisible(true);
+        }
+    }, [isVisible]);
+    // 모션 중단 함수
+    const stop = useCallback(() => {
+        setIsAnimating(false);
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+        onStop?.();
+    }, [onStop]);
+    // 모션 리셋 함수
+    const reset = useCallback(() => {
+        setIsVisible(false);
+        setIsAnimating(false);
+        setProgress(0);
+        setIsPressed(false);
+        setIsHovered(false);
+        setIsFocused(false);
+        setRipplePosition({ x: 0, y: 0 });
+        setGlowIntensity(0);
+        setShakeOffset(0);
+        setBounceOffset(0);
+        setSlideOffset(0);
+        startTimeRef.current = 0;
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+        onReset?.();
+    }, [onReset]);
+    // 모션 일시정지 함수
+    const pause = useCallback(() => {
+        setIsAnimating(false);
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+        }
+    }, []);
+    // 모션 재개 함수
+    const resume = useCallback(() => {
+        if (isVisible && !isAnimating) {
+            setIsAnimating(true);
+        }
+    }, [isVisible, isAnimating]);
+    // 자동 시작
+    useEffect(() => {
+        if (autoStart) {
+            start();
+        }
+    }, [autoStart, start]);
+    // 컴포넌트 언마운트 시 정리
+    useEffect(() => {
+        return () => {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, []);
+    // 버튼 스타일 계산
+    const getButtonStyle = () => {
+        let scale = 1;
+        let rotate = 0;
+        let translateY = 0;
+        let translateX = 0;
+        let boxShadow = 'none';
+        // 상태별 효과 적용
+        if (isPressed) {
+            scale = activeScale;
+            rotate = activeRotate;
+            translateY = activeTranslateY;
+            translateX = activeTranslateX;
+        }
+        else if (isHovered) {
+            scale = hoverScale;
+            rotate = hoverRotate;
+            translateY = hoverTranslateY;
+            translateX = hoverTranslateX;
+        }
+        if (isFocused && focusGlow) {
+            boxShadow = `0 0 ${glowSize}px ${glowColor}`;
+        }
+        // 타입별 추가 효과
+        switch (type) {
+            case 'shake':
+                translateX += shakeOffset;
+                break;
+            case 'bounce':
+                translateY += bounceOffset;
+                break;
+            case 'slide':
+                if (slideDirection === 'left')
+                    translateX -= slideOffset;
+                else if (slideDirection === 'right')
+                    translateX += slideOffset;
+                else if (slideDirection === 'up')
+                    translateY -= slideOffset;
+                else if (slideDirection === 'down')
+                    translateY += slideOffset;
+                break;
+        }
+        const baseStyle = {
+            transform: `
+        scale(${scale})
+        rotate(${rotate}deg)
+        translate(${translateX}px, ${translateY}px)
+      `,
+            boxShadow,
+            opacity: disabled ? disabledOpacity : 1,
+            transition: `all ${duration}ms ${easing}`,
+            willChange: 'transform, box-shadow, opacity',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            position: 'relative',
+            overflow: 'hidden'
+        };
+        return baseStyle;
+    };
+    const style = getButtonStyle();
+    return {
+        ref,
+        isVisible,
+        isAnimating,
+        style,
+        progress,
+        start,
+        stop,
+        reset,
+        pause,
+        resume,
+        buttonType: type,
+        isPressed,
+        isHovered,
+        isFocused,
+        ripplePosition,
+        currentGlowIntensity,
+        shakeOffset,
+        bounceOffset,
+        slideOffset,
+        pressButton,
+        releaseButton,
+        setButtonState
+    };
+}
+//# sourceMappingURL=useButtonEffect.js.map

package/dist/hooks/useButtonEffect.js.map

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

package/dist/hooks/useCardList.d.ts

@@ -0,0 +1,23 @@
+import { BaseMotionOptions, BaseMotionReturn, MotionElement } from '../types';
+export interface CardListOptions extends BaseMotionOptions {
+    staggerDelay?: number;
+    cardScale?: number;
+    cardOpacity?: number;
+    cardRotate?: number;
+    cardTranslateY?: number;
+    cardTranslateX?: number;
+    initialScale?: number;
+    initialOpacity?: number;
+    initialRotate?: number;
+    initialTranslateY?: number;
+    initialTranslateX?: number;
+    gridColumns?: number;
+    gridGap?: number;
+}
+export declare function useCardList<T extends MotionElement = HTMLDivElement>(options?: CardListOptions): BaseMotionReturn<T> & {
+    cardStyles: React.CSSProperties[];
+    staggerDelay: number;
+    gridColumns: number;
+    gridGap: number;
+};
+//# sourceMappingURL=useCardList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCardList.d.ts","sourceRoot":"","sources":["../../src/hooks/useCardList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7E,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,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;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EAClE,OAAO,GAAE,eAAoB,GAC5B,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACvB,UAAU,EAAE,KAAK,CAAC,aAAa,EAAE,CAAA;IACjC,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;CAChB,CAuJA"}

package/dist/hooks/useCardList.js

@@ -0,0 +1,119 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+export function useCardList(options = {}) {
+    const { duration = 500, easing = 'ease-out', staggerDelay = 100, cardScale = 1, cardOpacity = 1, cardRotate = 0, cardTranslateY = 0, cardTranslateX = 0, initialScale = 0.8, initialOpacity = 0, initialRotate = 0, initialTranslateY = 30, initialTranslateX = 0, gridColumns = 3, gridGap = 20, 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 [cardCount, setCardCount] = useState(0);
+    const observerRef = useRef(null);
+    // 카드 개수 계산
+    useEffect(() => {
+        if (ref.current) {
+            const cards = ref.current.querySelectorAll('[data-card]');
+            setCardCount(cards.length);
+        }
+    }, []);
+    // 카드 스타일 배열 생성
+    const cardStyles = Array.from({ length: cardCount }, (_, index) => {
+        const delay = isVisible ? index * staggerDelay : 0;
+        const isCardVisible = isVisible && delay <= progress * (cardCount * staggerDelay);
+        return {
+            transform: `
+        scale(${isCardVisible ? cardScale : initialScale})
+        rotate(${isCardVisible ? cardRotate : initialRotate}deg)
+        translate(${isCardVisible ? cardTranslateX : initialTranslateX}px, ${isCardVisible ? cardTranslateY : initialTranslateY}px)
+      `,
+            opacity: isCardVisible ? cardOpacity : initialOpacity,
+            transition: `all ${duration}ms ${easing} ${delay}ms`,
+            willChange: 'transform, opacity'
+        };
+    });
+    // 모션 시작 함수
+    const start = useCallback(() => {
+        if (isAnimating)
+            return;
+        setIsAnimating(true);
+        setProgress(0);
+        onStart?.();
+        // 카드들이 순차적으로 나타나도록
+        const totalDuration = cardCount * staggerDelay + duration;
+        const interval = setInterval(() => {
+            setProgress(prev => {
+                const newProgress = prev + 0.1;
+                if (newProgress >= 1) {
+                    setIsVisible(true);
+                    setIsAnimating(false);
+                    onComplete?.();
+                    clearInterval(interval);
+                    return 1;
+                }
+                return newProgress;
+            });
+        }, totalDuration / 10);
+    }, [isAnimating, cardCount, staggerDelay, duration, onStart, onComplete]);
+    // 모션 중단 함수
+    const stop = useCallback(() => {
+        setIsAnimating(false);
+        onStop?.();
+    }, [onStop]);
+    // 모션 리셋 함수
+    const reset = useCallback(() => {
+        setIsVisible(false);
+        setIsAnimating(false);
+        setProgress(0);
+        onReset?.();
+    }, [onReset]);
+    // 모션 일시정지 함수
+    const pause = useCallback(() => {
+        setIsAnimating(false);
+    }, []);
+    // 모션 재개 함수
+    const resume = useCallback(() => {
+        if (!isVisible && !isAnimating) {
+            start();
+        }
+    }, [isVisible, isAnimating, start]);
+    // Intersection Observer 설정
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        observerRef.current = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    start();
+                }
+            });
+        }, { threshold: 0.1 });
+        observerRef.current.observe(ref.current);
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [start]);
+    // 그리드 스타일
+    const gridStyle = {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+        gap: `${gridGap}px`,
+        width: '100%'
+    };
+    return {
+        ref,
+        isVisible,
+        isAnimating,
+        style: gridStyle,
+        progress,
+        start,
+        stop,
+        reset,
+        pause,
+        resume,
+        cardStyles,
+        staggerDelay,
+        gridColumns,
+        gridGap
+    };
+}
+//# sourceMappingURL=useCardList.js.map

package/dist/hooks/useCardList.js.map

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

package/dist/hooks/useClickToggle.d.ts

@@ -0,0 +1,15 @@
+import { BaseMotionOptions, InteractionReturn, MotionElement } from '../types';
+export interface ClickToggleOptions extends BaseMotionOptions {
+    clickScale?: number;
+    clickOpacity?: number;
+    clickRotate?: number;
+    clickTranslateY?: number;
+    clickTranslateX?: number;
+    initialScale?: number;
+    initialOpacity?: number;
+    initialRotate?: number;
+    initialTranslateY?: number;
+    initialTranslateX?: number;
+}
+export declare function useClickToggle<T extends MotionElement = HTMLDivElement>(options?: ClickToggleOptions): InteractionReturn<T>;
+//# sourceMappingURL=useClickToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useClickToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickToggle.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,CA+HtB"}

package/dist/hooks/useClickToggle.js

@@ -0,0 +1,102 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+export function useClickToggle(options = {}) {
+    const { duration = 300, easing = 'ease-out', clickScale = 0.95, clickOpacity = 0.8, clickRotate = 0, clickTranslateY = 0, clickTranslateX = 0, initialScale = 1, initialOpacity = 1, initialRotate = 0, initialTranslateY = 0, initialTranslateX = 0, onComplete, onStart, onStop, onReset } = options;
+    const ref = useRef(null);
+    const [isClicked, setIsClicked] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [progress, setProgress] = useState(0);
+    // 클릭 시작
+    const handleMouseDown = useCallback(() => {
+        setIsClicked(true);
+        setIsAnimating(true);
+        setProgress(0);
+        onStart?.();
+        // 애니메이션 완료 시
+        setTimeout(() => {
+            setIsAnimating(false);
+            setProgress(1);
+            onComplete?.();
+        }, duration);
+    }, [duration, onStart, onComplete]);
+    // 클릭 종료
+    const handleMouseUp = useCallback(() => {
+        setIsClicked(false);
+        setIsAnimating(true);
+        setProgress(1);
+        // 애니메이션 완료 시
+        setTimeout(() => {
+            setIsAnimating(false);
+            setProgress(0);
+        }, duration);
+    }, [duration]);
+    // 모션 시작 함수 (프로그래매틱 제어용)
+    const start = useCallback(() => {
+        handleMouseDown();
+    }, [handleMouseDown]);
+    // 모션 중단 함수
+    const stop = useCallback(() => {
+        setIsAnimating(false);
+        onStop?.();
+    }, [onStop]);
+    // 모션 리셋 함수
+    const reset = useCallback(() => {
+        setIsClicked(false);
+        setIsAnimating(false);
+        setProgress(0);
+        onReset?.();
+    }, [onReset]);
+    // 모션 일시정지 함수
+    const pause = useCallback(() => {
+        setIsAnimating(false);
+    }, []);
+    // 모션 재개 함수
+    const resume = useCallback(() => {
+        if (isClicked) {
+            setIsAnimating(true);
+        }
+    }, [isClicked]);
+    // 이벤트 리스너 설정
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.addEventListener('mousedown', handleMouseDown);
+        element.addEventListener('mouseup', handleMouseUp);
+        element.addEventListener('mouseleave', handleMouseUp); // 마우스가 요소를 벗어나면 클릭 상태 해제
+        return () => {
+            element.removeEventListener('mousedown', handleMouseDown);
+            element.removeEventListener('mouseup', handleMouseUp);
+            element.removeEventListener('mouseleave', handleMouseUp);
+        };
+    }, [handleMouseDown, handleMouseUp]);
+    // 스타일 계산
+    const style = {
+        transform: `
+      scale(${isClicked ? clickScale : initialScale})
+      rotate(${isClicked ? clickRotate : initialRotate}deg)
+      translate(${isClicked ? clickTranslateX : initialTranslateX}px, ${isClicked ? clickTranslateY : initialTranslateY}px)
+    `,
+        opacity: isClicked ? clickOpacity : initialOpacity,
+        transition: `all ${duration}ms ${easing}`,
+        willChange: 'transform, opacity',
+        cursor: 'pointer'
+    };
+    return {
+        ref,
+        isVisible: isClicked,
+        isAnimating,
+        style,
+        progress,
+        start,
+        stop,
+        reset,
+        pause,
+        resume,
+        // 새로운 직관적 API 추가
+        click: handleMouseDown,
+        release: handleMouseUp,
+        // 상태 속성 추가
+        isClicked
+    };
+}
+//# sourceMappingURL=useClickToggle.js.map

package/dist/hooks/useClickToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickToggle.js","sourceRoot":"","sources":["../../src/hooks/useClickToggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAgBhE,MAAM,UAAU,cAAc,CAC5B,UAA8B,EAAE;IAEhC,MAAM,EACJ,QAAQ,GAAG,GAAG,EACd,MAAM,GAAG,UAAU,EACnB,UAAU,GAAG,IAAI,EACjB,YAAY,GAAG,GAAG,EAClB,WAAW,GAAG,CAAC,EACf,eAAe,GAAG,CAAC,EACnB,eAAe,GAAG,CAAC,EACnB,YAAY,GAAG,CAAC,EAChB,cAAc,GAAG,CAAC,EAClB,aAAa,GAAG,CAAC,EACjB,iBAAiB,GAAG,CAAC,EACrB,iBAAiB,GAAG,CAAC,EACrB,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EACrC,GAAG,OAAO,CAAA;IAEX,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAA;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAE3C,QAAQ;IACR,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,YAAY,CAAC,IAAI,CAAC,CAAA;QAClB,cAAc,CAAC,IAAI,CAAC,CAAA;QACpB,WAAW,CAAC,CAAC,CAAC,CAAA;QACd,OAAO,EAAE,EAAE,CAAA;QAEX,aAAa;QACb,UAAU,CAAC,GAAG,EAAE;YACd,cAAc,CAAC,KAAK,CAAC,CAAA;YACrB,WAAW,CAAC,CAAC,CAAC,CAAA;YACd,UAAU,EAAE,EAAE,CAAA;QAChB,CAAC,EAAE,QAAQ,CAAC,CAAA;IACd,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAA;IAEnC,QAAQ;IACR,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,cAAc,CAAC,IAAI,CAAC,CAAA;QACpB,WAAW,CAAC,CAAC,CAAC,CAAA;QAEd,aAAa;QACb,UAAU,CAAC,GAAG,EAAE;YACd,cAAc,CAAC,KAAK,CAAC,CAAA;YACrB,WAAW,CAAC,CAAC,CAAC,CAAA;QAChB,CAAC,EAAE,QAAQ,CAAC,CAAA;IACd,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,wBAAwB;IACxB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,eAAe,EAAE,CAAA;IACnB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,WAAW;IACX,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,cAAc,CAAC,KAAK,CAAC,CAAA;QACrB,MAAM,EAAE,EAAE,CAAA;IACZ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,WAAW;IACX,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,cAAc,CAAC,KAAK,CAAC,CAAA;QACrB,WAAW,CAAC,CAAC,CAAC,CAAA;QACd,OAAO,EAAE,EAAE,CAAA;IACb,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,aAAa;IACb,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,cAAc,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,WAAW;IACX,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,IAAI,SAAS,EAAE,CAAC;YACd,cAAc,CAAC,IAAI,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,aAAa;IACb,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAA;QAC3B,IAAI,CAAC,OAAO;YAAE,OAAM;QAEpB,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;QACtD,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QAClD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA,CAAC,yBAAyB;QAE/E,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;YACzD,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;YACrD,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;QAC1D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC,CAAA;IAEpC,SAAS;IACT,MAAM,KAAK,GAAwB;QACjC,SAAS,EAAE;cACD,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;eACpC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa;kBACpC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,OAAO,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB;KAClH;QACD,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc;QAClD,UAAU,EAAE,OAAO,QAAQ,MAAM,MAAM,EAAE;QACzC,UAAU,EAAE,oBAAoB;QAChC,MAAM,EAAE,SAAS;KAClB,CAAA;IAED,OAAO;QACL,GAAG;QACH,SAAS,EAAE,SAAS;QACpB,WAAW;QACX,KAAK;QACL,QAAQ;QACR,KAAK;QACL,IAAI;QACJ,KAAK;QACL,KAAK;QACL,MAAM;QACN,iBAAiB;QACjB,KAAK,EAAE,eAAe;QACtB,OAAO,EAAE,aAAa;QACtB,WAAW;QACX,SAAS;KACV,CAAA;AACH,CAAC"}

package/dist/hooks/useFadeIn.d.ts

@@ -0,0 +1,17 @@
+import { FadeInOptions, BaseMotionReturn, MotionElement } from '../types';
+/**
+ * 요소가 화면에 나타날 때 페이드인 효과를 적용합니다
+ *
+ * @example
+ * ```tsx
+ * const { ref, style } = useFadeIn({
+ *   delay: 200,        // 지연 시간
+ *   duration: 700,     // 지속 시간
+ *   triggerOnce: true  // 한 번만 실행
+ * })
+ *
+ * return <div ref={ref} style={style}>페이드인 효과</div>
+ * ```
+ */
+export declare function useFadeIn<T extends MotionElement = HTMLDivElement>(options?: FadeInOptions): BaseMotionReturn<T>;
+//# sourceMappingURL=useFadeIn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFadeIn.d.ts","sourceRoot":"","sources":["../../src/hooks/useFadeIn.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAEzE;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EAChE,OAAO,GAAE,aAAkB,GAC1B,gBAAgB,CAAC,CAAC,CAAC,CAgJrB"}