lumir-design-system-shared/dist/types/src/utils/animations.d.ts

Lumir Design System - Shared Components & Tokens

import { TransitionDuration, TransitionEasing } from '../hooks/useTransition';
export type AnimationType = 'fade' | 'slide' | 'scale' | 'bounce';
export type SlideDirection = 'up' | 'down' | 'left' | 'right';
/**
 * 애니메이션 타입별 스타일을 생성하는 유틸리티 함수들
 */
export declare const AnimationUtils: {
    /**
     * 기본 트랜지션 스타일 생성
     */
    getBaseTransition: (duration: TransitionDuration, easing: TransitionEasing) => React.CSSProperties;
    /**
     * 페이드 애니메이션 스타일
     */
    getFadeStyles: (isVisible: boolean, duration?: TransitionDuration, easing?: TransitionEasing) => React.CSSProperties;
    /**
     * 슬라이드 애니메이션 스타일
     */
    getSlideStyles: (isVisible: boolean, direction?: SlideDirection, duration?: TransitionDuration, easing?: TransitionEasing) => React.CSSProperties;
    /**
     * 스케일 애니메이션 스타일
     */
    getScaleStyles: (isVisible: boolean, duration?: TransitionDuration, easing?: TransitionEasing) => React.CSSProperties;
    /**
     * 바운스 애니메이션 스타일
     */
    getBounceStyles: (isVisible: boolean, duration?: TransitionDuration, easing?: TransitionEasing) => React.CSSProperties;
    /**
     * 애니메이션 타입에 따른 스타일 반환
     */
    getAnimationStyles: (type: AnimationType, isVisible: boolean, options?: {
        duration?: TransitionDuration;
        easing?: TransitionEasing;
        direction?: SlideDirection;
    }) => React.CSSProperties;
};
/**
 * 컴포넌트별 애니메이션 프리셋
 */
export declare const AnimationPresets: {
    modal: {
        enter: {
            duration: TransitionDuration;
            easing: TransitionEasing;
            type: AnimationType;
        };
        exit: {
            duration: TransitionDuration;
            easing: TransitionEasing;
            type: AnimationType;
        };
    };
    dropdown: {
        enter: {
            duration: TransitionDuration;
            easing: TransitionEasing;
            type: AnimationType;
            direction: SlideDirection;
        };
        exit: {
            duration: TransitionDuration;
            easing: TransitionEasing;
            type: AnimationType;
            direction: SlideDirection;
        };
    };
    tooltip: {
        enter: {
            duration: TransitionDuration;
            easing: TransitionEasing;
            type: AnimationType;
        };
        exit: {
            duration: TransitionDuration;
            easing: TransitionEasing;
            type: AnimationType;
        };
    };
    toast: {
        enter: {
            duration: TransitionDuration;
            easing: TransitionEasing;
            type: AnimationType;
            direction: SlideDirection;
        };
        exit: {
            duration: TransitionDuration;
            easing: TransitionEasing;
            type: AnimationType;
            direction: SlideDirection;
        };
    };
};