import { CSSProperties } 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;
}

/**
 * Common animation presets for quick usage
 */

declare const presets: {
    /** Simple fade in from transparent */
    fadeIn: (delay?: number, duration?: number) => AnimationConfig;
    /** Fade in with slide from bottom */
    slideUp: (delay?: number, distance?: CSSLength, duration?: number) => AnimationConfig;
    /** Fade in with slide from top */
    slideDown: (delay?: number, distance?: CSSLength, duration?: number) => AnimationConfig;
    /** Fade in with slide from left */
    slideLeft: (delay?: number, distance?: CSSLength, duration?: number) => AnimationConfig;
    /** Fade in with slide from right */
    slideRight: (delay?: number, distance?: CSSLength, duration?: number) => AnimationConfig;
    /** Blur effect from top */
    blurUp: (delay?: number, blur?: CSSLength, distance?: CSSLength, duration?: number) => AnimationConfig;
    /** Scale in effect */
    scaleIn: (delay?: number, scale?: number, duration?: number) => AnimationConfig;
    /** Scale out effect */
    scaleOut: (delay?: number, scale?: number, duration?: number) => AnimationConfig;
    /** Rotate and scale in */
    rotateIn: (delay?: number, rotate?: CSSAngle, scale?: number, duration?: number) => AnimationConfig;
    /** Complex blur and slide with custom timing */
    dramatic: (delay?: number, duration?: number) => AnimationConfig;
    /** Bounce in effect */
    bounceIn: (delay?: number, duration?: number) => AnimationConfig;
    /** Zoom in effect */
    zoomIn: (delay?: number, scale?: number, duration?: number) => AnimationConfig;
};

/**
 * Utility functions for animation configuration
 */

/**
 * Generates CSS custom properties object for animations
 *
 * @example
 * ```typescript
 * const styles = getVarsObject({ opacityStart: 0, translateY: '20px' });
 * // Returns: { "--anim-opacity-start": "0", "--anim-translate-y": "20px" }
 * ```
 */
declare function getVarsObject(config: AnimationConfig): CSSProperties;
/**
 * Generates CSS custom properties string for animations
 *
 * @example
 * ```typescript
 * const style = getVarsStyle({ opacityStart: 0, translateY: '20px' });
 * // Returns: "--anim-opacity-start: 0; --anim-translate-y: 20px"
 * ```
 */
declare function getVarsStyle(config: AnimationConfig): string;
/**
 * Helper to combine multiple animation configs
 *
 * @example
 * ```typescript
 * const combined = mergeConfigs(
 *   presets.fadeIn(),
 *   { blur: '5px', duration: 0.8 }
 * );
 * ```
 */
declare function mergeConfigs(...configs: AnimationConfig[]): AnimationConfig;
/**
 * Create staggered delays for list items
 *
 * @example
 * ```typescript
 * const staggered = mergeConfigs(
 *   presets.slideUp(),
 *   stagger(index, 0.1)
 * );
 * ```
 */
declare function stagger(index: number, delayIncrement: number, baseDelay?: number): AnimationConfig;
declare function getOnLoadClass(className?: string): string;
declare function getOnViewClass(className?: string): string;

/**
 * Intersection Observer functionality for automatic animation initialization
 */

/**
 * Observes a single element and adds/removes the 'in-view' class based on visibility
 *
 * @param element - The element to observe
 * @param options - IntersectionObserver options
 * @returns A cleanup function to disconnect the observer
 */
declare function observeElement(element: HTMLElement, options?: IntersectionObserverOptions): () => void;
/**
 * Automatically initializes all .css-motion--view elements in the page
 * Call this once in your root layout or use as an action on the body
 */
declare function initObserver(options?: IntersectionObserverOptions): {
    destroy: () => void;
};

export { getOnLoadClass, getOnViewClass, getVarsObject, getVarsStyle, initObserver, mergeConfigs, observeElement, presets, stagger };
export type { AnimationConfig, CSSAngle, CSSLength, IntersectionObserverOptions, TimingFunction };