@hua-labs/motion-core 2.1.0-alpha.1 → 2.1.0-alpha.10

package/dist/hooks/useLoadingSpinner.js

@@ -1,283 +0,0 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
-export function useLoadingSpinner(options = {}) {
-    const { duration = 1000, easing = 'linear', type = 'rotate', rotationSpeed = 1, pulseSpeed = 1, bounceHeight = 20, waveCount = 3, dotCount = 3, barCount = 4, color = '#3b82f6', backgroundColor = 'transparent', size = 40, thickness = 4, autoStart = true, infinite = 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 [isLoading, setIsLoading] = useState(false);
-    const [rotationAngle, setRotationAngle] = useState(0);
-    const [pulseScale, setPulseScale] = useState(1);
-    const [bounceOffset, setBounceOffset] = useState(0);
-    const [waveProgress, setWaveProgress] = useState(0);
-    const [dotProgress, setDotProgress] = useState(0);
-    const [barProgress, setBarProgress] = useState(0);
-    const animationRef = useRef(null);
-    const startTimeRef = useRef(0);
-    // 애니메이션 루프 함수
-    const runAnimation = useCallback(() => {
-        if (!isAnimating)
-            return;
-        const animate = (currentTime) => {
-            if (!isAnimating)
-                return;
-            if (!startTimeRef.current) {
-                startTimeRef.current = currentTime;
-            }
-            const elapsed = currentTime - startTimeRef.current;
-            const currentProgress = (elapsed / duration) % 1;
-            setProgress(currentProgress);
-            // 타입별 애니메이션 업데이트
-            switch (type) {
-                case 'rotate':
-                    setRotationAngle(currentProgress * 360 * rotationSpeed);
-                    break;
-                case 'pulse':
-                    setPulseScale(0.8 + 0.4 * Math.sin(currentProgress * Math.PI * 2 * pulseSpeed));
-                    break;
-                case 'bounce':
-                    setBounceOffset(bounceHeight * Math.sin(currentProgress * Math.PI * 2));
-                    break;
-                case 'wave':
-                    setWaveProgress(currentProgress);
-                    break;
-                case 'dots':
-                    setDotProgress(currentProgress);
-                    break;
-                case 'bars':
-                    setBarProgress(currentProgress);
-                    break;
-            }
-            if (infinite || currentProgress < 1) {
-                animationRef.current = requestAnimationFrame(animate);
-            }
-            else {
-                setIsAnimating(false);
-                onComplete?.();
-            }
-        };
-        animationRef.current = requestAnimationFrame(animate);
-    }, [isAnimating, duration, type, rotationSpeed, pulseSpeed, bounceHeight, infinite, onComplete]);
-    // 로딩 시작 함수
-    const startLoading = useCallback(() => {
-        if (isLoading)
-            return;
-        setIsLoading(true);
-        setIsAnimating(true);
-        setProgress(0);
-        startTimeRef.current = 0;
-        onStart?.();
-        runAnimation();
-    }, [isLoading, onStart, runAnimation]);
-    // 로딩 중단 함수
-    const stopLoading = useCallback(() => {
-        setIsLoading(false);
-        setIsAnimating(false);
-        if (animationRef.current) {
-            cancelAnimationFrame(animationRef.current);
-            animationRef.current = null;
-        }
-        onStop?.();
-    }, [onStop]);
-    // 로딩 상태 설정 함수
-    const setLoadingState = useCallback((loading) => {
-        if (loading) {
-            startLoading();
-        }
-        else {
-            stopLoading();
-        }
-    }, [startLoading, stopLoading]);
-    // 모션 시작 함수
-    const start = useCallback(() => {
-        if (!isVisible) {
-            setIsVisible(true);
-            startLoading();
-        }
-    }, [isVisible, startLoading]);
-    // 모션 중단 함수
-    const stop = useCallback(() => {
-        stopLoading();
-    }, [stopLoading]);
-    // 모션 리셋 함수
-    const reset = useCallback(() => {
-        setIsVisible(false);
-        setIsAnimating(false);
-        setProgress(0);
-        setIsLoading(false);
-        setRotationAngle(0);
-        setPulseScale(1);
-        setBounceOffset(0);
-        setWaveProgress(0);
-        setDotProgress(0);
-        setBarProgress(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);
-            runAnimation();
-        }
-    }, [isVisible, isAnimating, runAnimation]);
-    // 자동 시작
-    useEffect(() => {
-        if (autoStart) {
-            startLoading();
-        }
-    }, [autoStart, startLoading]);
-    // 컴포넌트 언마운트 시 정리
-    useEffect(() => {
-        return () => {
-            if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-            }
-        };
-    }, []);
-    // 스피너 스타일 계산
-    const getSpinnerStyle = () => {
-        const baseStyle = {
-            width: size,
-            height: size,
-            backgroundColor: 'transparent',
-            position: 'relative',
-            display: 'inline-block'
-        };
-        switch (type) {
-            case 'rotate':
-                return {
-                    ...baseStyle,
-                    border: `${thickness}px solid ${backgroundColor}`,
-                    borderTop: `${thickness}px solid ${color}`,
-                    borderRadius: '50%',
-                    transform: `rotate(${rotationAngle}deg)`,
-                    transition: `transform ${duration}ms ${easing}`
-                };
-            case 'pulse':
-                return {
-                    ...baseStyle,
-                    backgroundColor: color,
-                    borderRadius: '50%',
-                    transform: `scale(${pulseScale})`,
-                    transition: `transform ${duration}ms ${easing}`
-                };
-            case 'bounce':
-                return {
-                    ...baseStyle,
-                    backgroundColor: color,
-                    borderRadius: '50%',
-                    transform: `translateY(${bounceOffset}px)`,
-                    transition: `transform ${duration}ms ${easing}`
-                };
-            case 'wave':
-                return {
-                    ...baseStyle,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between'
-                };
-            case 'dots':
-                return {
-                    ...baseStyle,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between'
-                };
-            case 'bars':
-                return {
-                    ...baseStyle,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between'
-                };
-            default:
-                return baseStyle;
-        }
-    };
-    // 웨이브 바 스타일 생성
-    const getWaveBars = () => {
-        return Array.from({ length: waveCount }, (_, index) => {
-            const delay = index * (duration / waveCount);
-            const height = size * (0.3 + 0.7 * Math.sin((waveProgress + index / waveCount) * Math.PI * 2));
-            return {
-                width: thickness,
-                height: `${height}px`,
-                backgroundColor: color,
-                borderRadius: thickness / 2,
-                animationDelay: `${delay}ms`,
-                transition: `height ${duration}ms ${easing}`
-            };
-        });
-    };
-    // 점 스타일 생성
-    const getDots = () => {
-        return Array.from({ length: dotCount }, (_, index) => {
-            const delay = index * (duration / dotCount);
-            const opacity = 0.3 + 0.7 * Math.sin((dotProgress + index / dotCount) * Math.PI * 2);
-            const scale = 0.8 + 0.4 * Math.sin((dotProgress + index / dotCount) * Math.PI * 2);
-            return {
-                width: thickness * 2,
-                height: thickness * 2,
-                backgroundColor: color,
-                borderRadius: '50%',
-                opacity,
-                transform: `scale(${scale})`,
-                animationDelay: `${delay}ms`,
-                transition: `all ${duration}ms ${easing}`
-            };
-        });
-    };
-    // 바 스타일 생성
-    const getBars = () => {
-        return Array.from({ length: barCount }, (_, index) => {
-            const delay = index * (duration / barCount);
-            const height = size * (0.2 + 0.8 * Math.sin((barProgress + index / barCount) * Math.PI * 2));
-            return {
-                width: thickness,
-                height: `${height}px`,
-                backgroundColor: color,
-                borderRadius: thickness / 2,
-                animationDelay: `${delay}ms`,
-                transition: `height ${duration}ms ${easing}`
-            };
-        });
-    };
-    const style = getSpinnerStyle();
-    return {
-        ref,
-        isVisible,
-        isAnimating,
-        style,
-        progress,
-        start,
-        stop,
-        reset,
-        pause,
-        resume,
-        isLoading,
-        spinnerType: type,
-        rotationAngle,
-        pulseScale,
-        bounceOffset,
-        waveProgress,
-        dotProgress,
-        barProgress,
-        startLoading,
-        stopLoading,
-        setLoadingState
-    };
-}
-//# sourceMappingURL=useLoadingSpinner.js.map

package/dist/hooks/useLoadingSpinner.js.map

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

package/dist/hooks/useMotion.d.ts

@@ -1,103 +0,0 @@
-import { BaseMotionOptions, BaseMotionReturn, MotionElement } from '../types';
-export interface MotionOptions extends BaseMotionOptions {
-    scale?: number | {
-        from: number;
-        to: number;
-    };
-    opacity?: number | {
-        from: number;
-        to: number;
-    };
-    rotate?: number | {
-        from: number;
-        to: number;
-    };
-    translateX?: number | {
-        from: number;
-        to: number;
-    };
-    translateY?: number | {
-        from: number;
-        to: number;
-    };
-    skewX?: number | {
-        from: number;
-        to: number;
-    };
-    skewY?: number | {
-        from: number;
-        to: number;
-    };
-    backgroundColor?: string | {
-        from: string;
-        to: string;
-    };
-    color?: string | {
-        from: string;
-        to: string;
-    };
-    borderColor?: string | {
-        from: string;
-        to: string;
-    };
-    width?: number | string | {
-        from: number | string;
-        to: number | string;
-    };
-    height?: number | string | {
-        from: number | string;
-        to: number | string;
-    };
-    borderRadius?: number | string | {
-        from: number | string;
-        to: number | string;
-    };
-    borderWidth?: number | {
-        from: number;
-        to: number;
-    };
-    boxShadow?: string | {
-        from: string;
-        to: string;
-    };
-    blur?: number | {
-        from: number;
-        to: number;
-    };
-    brightness?: number | {
-        from: number;
-        to: number;
-    };
-    contrast?: number | {
-        from: number;
-        to: number;
-    };
-    grayscale?: number | {
-        from: number;
-        to: number;
-    };
-    hueRotate?: number | {
-        from: number;
-        to: number;
-    };
-    saturate?: number | {
-        from: number;
-        to: number;
-    };
-    sepia?: number | {
-        from: number;
-        to: number;
-    };
-    playOnMount?: boolean;
-    loop?: boolean;
-    yoyo?: boolean;
-    stagger?: number;
-    onUpdate?: (progress: number) => void;
-}
-export declare function useMotion<T extends MotionElement = HTMLDivElement>(options?: MotionOptions): BaseMotionReturn<T> & {
-    play: () => void;
-    reverse: () => void;
-    seek: (progress: number) => void;
-    getValue: (property: string) => any;
-};
-//# sourceMappingURL=useMotion.d.ts.map

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

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

package/dist/hooks/useMotion.js

@@ -1,266 +0,0 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
-export function useMotion(options = {}) {
-    const { duration = 1000, easing = 'ease-out', delay = 0, threshold = 0.1, triggerOnce = true, autoStart = false, playOnMount = false, loop = false, yoyo = false, stagger = 0, scale = { from: 1, to: 1 }, opacity = { from: 1, to: 1 }, rotate = { from: 0, to: 0 }, translateX = { from: 0, to: 0 }, translateY = { from: 0, to: 0 }, skewX = { from: 0, to: 0 }, skewY = { from: 0, to: 0 }, backgroundColor, color, borderColor, width, height, borderRadius, borderWidth, boxShadow, blur = { from: 0, to: 0 }, brightness = { from: 100, to: 100 }, contrast = { from: 100, to: 100 }, grayscale = { from: 0, to: 0 }, hueRotate = { from: 0, to: 0 }, saturate = { from: 100, to: 100 }, sepia = { from: 0, to: 0 }, onComplete, onStart, onStop, onReset, onUpdate } = options;
-    const ref = useRef(null);
-    const [isVisible, setIsVisible] = useState(false);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [progress, setProgress] = useState(0);
-    const [isReversed, setIsReversed] = useState(false);
-    const observerRef = useRef(null);
-    const animationRef = useRef(null);
-    // 값 정규화 함수
-    const normalizeValue = (value) => {
-        if (typeof value === 'object' && 'from' in value && 'to' in value) {
-            return value;
-        }
-        return { from: value, to: value };
-    };
-    // 정규화된 값들
-    const normalizedScale = normalizeValue(scale);
-    const normalizedOpacity = normalizeValue(opacity);
-    const normalizedRotate = normalizeValue(rotate);
-    const normalizedTranslateX = normalizeValue(translateX);
-    const normalizedTranslateY = normalizeValue(translateY);
-    const normalizedSkewX = normalizeValue(skewX);
-    const normalizedSkewY = normalizeValue(skewY);
-    const normalizedBlur = normalizeValue(blur);
-    const normalizedBrightness = normalizeValue(brightness);
-    const normalizedContrast = normalizeValue(contrast);
-    const normalizedGrayscale = normalizeValue(grayscale);
-    const normalizedHueRotate = normalizeValue(hueRotate);
-    const normalizedSaturate = normalizeValue(saturate);
-    const normalizedSepia = normalizeValue(sepia);
-    // 보간 함수
-    const interpolate = (from, to, progress) => {
-        return from + (to - from) * progress;
-    };
-    // 애니메이션 실행 함수
-    const runAnimation = useCallback((startTime, isReverse = false) => {
-        if (!isAnimating)
-            return;
-        const animate = (currentTime) => {
-            if (!isAnimating)
-                return;
-            const elapsed = currentTime - startTime;
-            const currentProgress = Math.min(elapsed / duration, 1);
-            // 진행률 계산 (정방향/역방향)
-            let finalProgress = isReverse ? 1 - currentProgress : currentProgress;
-            // 이징 적용
-            const easedProgress = finalProgress;
-            setProgress(easedProgress);
-            // 업데이트 콜백 호출
-            onUpdate?.(easedProgress);
-            if (currentProgress < 1) {
-                animationRef.current = requestAnimationFrame(animate);
-            }
-            else {
-                // 애니메이션 완료
-                setIsAnimating(false);
-                // 루프 또는 요요 처리
-                if (loop || yoyo) {
-                    if (yoyo) {
-                        setIsReversed(!isReversed);
-                        setTimeout(() => {
-                            if (isAnimating)
-                                return;
-                            setIsAnimating(true);
-                            runAnimation(Date.now(), !isReversed);
-                        }, stagger);
-                    }
-                    else {
-                        setTimeout(() => {
-                            if (isAnimating)
-                                return;
-                            setIsAnimating(true);
-                            runAnimation(Date.now(), isReverse);
-                        }, stagger);
-                    }
-                }
-                else {
-                    onComplete?.();
-                }
-            }
-        };
-        animationRef.current = requestAnimationFrame(animate);
-    }, [isAnimating, duration, loop, yoyo, stagger, onComplete, onUpdate]);
-    // 모션 시작 함수
-    const start = useCallback(() => {
-        if (!isVisible) {
-            setIsVisible(true);
-            setIsAnimating(true);
-            setProgress(0);
-            onStart?.();
-            runAnimation(Date.now(), isReversed);
-        }
-    }, [isVisible, onStart, runAnimation, isReversed]);
-    // 재생 함수
-    const play = useCallback(() => {
-        if (!isAnimating) {
-            setIsAnimating(true);
-            onStart?.();
-            runAnimation(Date.now(), isReversed);
-        }
-    }, [isAnimating, onStart, runAnimation, isReversed]);
-    // 역방향 재생 함수
-    const reverse = useCallback(() => {
-        setIsReversed(!isReversed);
-        if (!isAnimating) {
-            setIsAnimating(true);
-            onStart?.();
-            runAnimation(Date.now(), !isReversed);
-        }
-    }, [isReversed, isAnimating, onStart, runAnimation]);
-    // 진행률 이동 함수
-    const seek = useCallback((targetProgress) => {
-        const clampedProgress = Math.max(0, Math.min(1, targetProgress));
-        setProgress(clampedProgress);
-        onUpdate?.(clampedProgress);
-    }, [onUpdate]);
-    // 특정 속성의 현재 값 가져오기
-    const getValue = useCallback((property) => {
-        const currentProgress = progress;
-        switch (property) {
-            case 'scale':
-                return interpolate(normalizedScale.from, normalizedScale.to, currentProgress);
-            case 'opacity':
-                return interpolate(normalizedOpacity.from, normalizedOpacity.to, currentProgress);
-            case 'rotate':
-                return interpolate(normalizedRotate.from, normalizedRotate.to, currentProgress);
-            case 'translateX':
-                return interpolate(normalizedTranslateX.from, normalizedTranslateX.to, currentProgress);
-            case 'translateY':
-                return interpolate(normalizedTranslateY.from, normalizedTranslateY.to, currentProgress);
-            case 'skewX':
-                return interpolate(normalizedSkewX.from, normalizedSkewX.to, currentProgress);
-            case 'skewY':
-                return interpolate(normalizedSkewY.from, normalizedSkewY.to, currentProgress);
-            case 'blur':
-                return interpolate(normalizedBlur.from, normalizedBlur.to, currentProgress);
-            case 'brightness':
-                return interpolate(normalizedBrightness.from, normalizedBrightness.to, currentProgress);
-            case 'contrast':
-                return interpolate(normalizedContrast.from, normalizedContrast.to, currentProgress);
-            case 'grayscale':
-                return interpolate(normalizedGrayscale.from, normalizedGrayscale.to, currentProgress);
-            case 'hueRotate':
-                return interpolate(normalizedHueRotate.from, normalizedHueRotate.to, currentProgress);
-            case 'saturate':
-                return interpolate(normalizedSaturate.from, normalizedSaturate.to, currentProgress);
-            case 'sepia':
-                return interpolate(normalizedSepia.from, normalizedSepia.to, currentProgress);
-            default:
-                return null;
-        }
-    }, [progress, normalizedScale, normalizedOpacity, normalizedRotate, normalizedTranslateX,
-        normalizedTranslateY, normalizedSkewX, normalizedSkewY, normalizedBlur, normalizedBrightness,
-        normalizedContrast, normalizedGrayscale, normalizedHueRotate, normalizedSaturate, normalizedSepia]);
-    // 모션 중단 함수
-    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);
-        setIsReversed(false);
-        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);
-            runAnimation(Date.now(), isReversed);
-        }
-    }, [isVisible, isAnimating, runAnimation, isReversed]);
-    // Intersection Observer 설정
-    useEffect(() => {
-        if (!ref.current || !autoStart)
-            return;
-        observerRef.current = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    start();
-                    if (triggerOnce) {
-                        observerRef.current?.disconnect();
-                    }
-                }
-            });
-        }, { threshold });
-        observerRef.current.observe(ref.current);
-        return () => {
-            if (observerRef.current) {
-                observerRef.current.disconnect();
-            }
-        };
-    }, [autoStart, threshold, triggerOnce, start]);
-    // 마운트 시 자동 시작
-    useEffect(() => {
-        if (playOnMount) {
-            start();
-        }
-    }, [playOnMount, start]);
-    // 컴포넌트 언마운트 시 정리
-    useEffect(() => {
-        return () => {
-            if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-            }
-        };
-    }, []);
-    // 현재 진행률에 따른 스타일 계산
-    const style = {
-        transform: `
-      scale(${getValue('scale')})
-      rotate(${getValue('rotate')}deg)
-      translate(${getValue('translateX')}px, ${getValue('translateY')}px)
-      skew(${getValue('skewX')}deg, ${getValue('skewY')}deg)
-    `,
-        opacity: getValue('opacity'),
-        filter: `
-      blur(${getValue('blur')}px)
-      brightness(${getValue('brightness')}%)
-      contrast(${getValue('contrast')}%)
-      grayscale(${getValue('grayscale')}%)
-      hue-rotate(${getValue('hueRotate')}deg)
-      saturate(${getValue('saturate')}%)
-      sepia(${getValue('sepia')}%)
-    `,
-        transition: `all ${duration}ms ${easing}`,
-        willChange: 'transform, opacity, filter'
-    };
-    return {
-        ref,
-        isVisible,
-        isAnimating,
-        style,
-        progress,
-        start,
-        stop,
-        reset,
-        pause,
-        resume,
-        play,
-        reverse,
-        seek,
-        getValue
-    };
-}
-//# sourceMappingURL=useMotion.js.map