import { Attachment as Attachment$1 } from 'svelte/attachments';

/**
 * 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;
}

/**
 * Svelte attachments for css-motion
 */

/**
 * Attachment that adds "in-view" class when element enters viewport
 *
 * @example
 * ```svelte
 * <div class="css-motion" {@attach observeOnView}>...</div>
 * ```
 */
declare const observeOnView: (options?: IntersectionObserverOptions) => Attachment$1<HTMLElement>;

/**
 * Svelte-specific utilities for css-motion
 */

/**
 * Animation helper object with onLoad and onView methods
 * Provides a cleaner, more organized API for animations
 *
 * @example
 * ```typescript
 * const { style, class: className } = animate.onLoad(presets.fadeIn());
 * const { styleObject, class: className } = animate.onLoad.object(presets.fadeIn());
 * ```
 */
declare const animate: {
    /**
     * Creates animation configuration for load-triggered animations
     * Returns both CSS variables string and the appropriate class name
     *
     * @example
     * ```typescript
     * const { style, class: className } = animate.onLoad(presets.fadeIn());
     * // Returns: { style: "--anim-opacity-start: 0; --anim-duration: 0.5s", class: "css-motion css-motion--load" }
     * ```
     */
    readonly onLoad: (config: AnimationConfig, { class: className }?: {
        class?: string;
    }) => {
        style: string;
        class: string;
    };
    /**
     * Creates animation configuration for view-triggered animations
     * Returns both CSS variables string, the appropriate class name, and the attachment
     *
     * @example
     * ```typescript
     * const { style, class: className, attachment } = animate.onView(presets.slideUp());
     * // Returns: { style: "--anim-opacity-start: 0; --anim-translate-y: 20px", class: "css-motion css-motion--view", attachment: observeOnView }
     * ```
     */
    readonly onView: (config: AnimationConfig, { class: className, observerOptions, }?: {
        class?: string;
        observerOptions?: IntersectionObserverOptions;
    }) => {
        [x: number]: Attachment<HTMLElement>;
        style: string;
        class: string;
    };
};

export { animate, observeOnView };