import { WritableComputedReturn } from '@solidjs-use/shared/solid-to-vue';
import { Accessor, Setter } from 'solid-js';
import { MaybeAccessor, MaybeElementAccessor } from '@solidjs-use/shared';
import { ConfigurableWindow } from '../_configurable.js';

interface UseAnimateOptions extends KeyframeAnimationOptions, ConfigurableWindow {
    /**
     * Will automatically run play when `useAnimate` is used
     *
     * @default true
     */
    immediate?: boolean;
    /**
     * Whether to commits the end styling state of an animation to the element being animated
     *
     * @default false
     */
    commitStyles?: boolean;
    /**
     * Whether to persists the animation
     *
     * @default false
     */
    persist?: boolean;
    /**
     * Executed after animation initialization
     */
    onReady?: (animate: Animation) => void;
    /**
     * Callback when error is caught.
     */
    onError?: (e: unknown) => void;
}
type UseAnimateKeyframes = MaybeAccessor<Keyframe[] | PropertyIndexedKeyframes | null>;
interface UseAnimateReturn {
    isSupported: Accessor<boolean>;
    animate: Accessor<Animation | undefined>;
    setAnimate: Setter<Animation>;
    play: () => void;
    pause: () => void;
    reverse: () => void;
    finish: () => void;
    cancel: () => void;
    pending: Accessor<boolean>;
    playState: Accessor<AnimationPlayState>;
    replaceState: Accessor<AnimationReplaceState>;
    startTime: WritableComputedReturn<CSSNumberish | number | null>;
    currentTime: WritableComputedReturn<CSSNumberish | null>;
    timeline: WritableComputedReturn<AnimationTimeline | null>;
    playbackRate: WritableComputedReturn<number>;
}
/**
 * Reactive Web Animations API
 *
 * @see https://solidjs-use.github.io/solidjs-use/core/useAnimate
 */
declare function useAnimate(target: MaybeElementAccessor, keyframes: UseAnimateKeyframes, options?: number | UseAnimateOptions): UseAnimateReturn;

export { UseAnimateKeyframes, UseAnimateOptions, UseAnimateReturn, useAnimate };