import React from 'react';

/**
 * Type definitions for animation configuration utilities
 */
/** Common CSS timing functions with autocomplete support */
type TimingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end' | `cubic-bezier(${number}, ${number}, ${number}, ${number})` | string;
/** CSS length values with common units and autocomplete */
type CSSLength = '0' | `${number}px` | `${number}rem` | `${number}em` | `${number}%` | `${number}vh` | `${number}vw` | string;
/** CSS angle values */
type CSSAngle = `${number}deg` | `${number}rad` | `${number}turn` | string;
interface AnimationConfig {
    /** Animation duration in seconds */
    duration?: number;
    /** Animation delay in seconds */
    delay?: number;
    /** Timing function with autocomplete for common values */
    timing?: TimingFunction;
    /** Initial X translation with autocomplete for common units */
    translateX?: CSSLength;
    /** Initial Y translation with autocomplete for common units */
    translateY?: CSSLength;
    /** Initial scale (e.g., 0.8, 1.2) */
    scale?: number;
    /** Initial rotation with autocomplete for angle units */
    rotate?: CSSAngle;
    /** Initial blur with autocomplete for common units */
    blur?: CSSLength;
    /** Starting opacity (0-1) */
    opacityStart?: number;
    /** Ending opacity (0-1) */
    opacityEnd?: number;
}
interface IntersectionObserverOptions {
    /** Threshold for intersection (0-1) */
    threshold?: number;
    /** Root margin for intersection calculation */
    rootMargin?: string;
    /** Whether to trigger animation only once */
    once?: boolean;
}

/**
 * React hooks for css-motion
 */

/**
 * React hook that combines animation styles and intersection observer
 * Returns the element ref and computed styles
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const { ref, style, className, isInView } = useAnimateOnView(
 *     presets.slideUp()
 *   );
 *   return <div ref={ref} style={style} className={className}>...</div>;
 * }
 * ```
 */
declare function useAnimateOnView(animation: AnimationConfig, options?: IntersectionObserverOptions): {
    ref: React.RefObject<HTMLDivElement | null>;
    style: React.CSSProperties;
    className: string;
    isInView: boolean;
};
/**
 * React hook for initializing global animations
 * Call this once in your app root component
 *
 * @example
 * ```tsx
 * function App() {
 *   useInitAnimations();
 *   return <div>...</div>;
 * }
 * ```
 */
declare function useInitAnimations(options?: IntersectionObserverOptions): void;
/**
 * React hook for load-triggered animations
 * Returns animation styles and class name for immediate animations
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const { style, className } = useAnimateOnLoad(presets.fadeIn());
 *   return <div style={style} className={className}>...</div>;
 * }
 * ```
 */
declare function useAnimateOnLoad(animation: AnimationConfig, externalClassName?: string): {
    style: React.CSSProperties;
    className: string;
};

/**
 * React components for css-motion
 */

/**
 * React component that automatically handles animations
 * Wraps children with animation functionality
 *
 * @example
 * ```tsx
 * <AnimateOnView animation={presets.slideUp()}>
 *   <div>This will animate when it comes into view</div>
 * </AnimateOnView>
 * ```
 */
declare function AnimateOnView({ children, animation, options, className, ...props }: {
    children: React.ReactNode;
    animation?: AnimationConfig;
    options?: IntersectionObserverOptions;
    className?: string;
} & React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
/**
 * React component for load-triggered animations
 * Animates immediately when the component mounts
 *
 * @example
 * ```tsx
 * <AnimateOnLoad animation={presets.fadeIn()}>
 *   <div>This will animate immediately when loaded</div>
 * </AnimateOnLoad>
 * ```
 */
declare function AnimateOnLoad({ children, animation, className, ...props }: {
    children: React.ReactNode;
    animation: AnimationConfig;
    className?: string;
} & React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;

export { AnimateOnLoad, AnimateOnView, useAnimateOnLoad, useAnimateOnView, useInitAnimations };