/**
 * `useKinemTransition` bridges kinem's `play()` engine to Vue's built-in
 * `<Transition>` / `<TransitionGroup>` JavaScript hooks. It does not
 * reinvent presence tracking; Vue decides when an element enters or
 * leaves, and kinem drives the actual animation.
 *
 *   const t = useKinemTransition({
 *     enter: { from: { opacity: 0 }, to: { opacity: 1 }, duration: 300 },
 *     leave: { from: { opacity: 1 }, to: { opacity: 0 }, duration: 200 },
 *   })
 *
 *   <Transition :css="false" v-bind="t">
 *     <div v-if="show">...</div>
 *   </Transition>
 *
 * Returns an object of listener props (`onBeforeEnter`, `onEnter`,
 * `onLeave`, `onEnterCancelled`, `onLeaveCancelled`). Pair with
 * `:css="false"` to disable Vue's CSS-class transition path; kinem
 * owns the frames.
 */
import type { EasingFn, PlayOpts } from "@kinem/core";
export type TransitionValues = Readonly<Record<string, string | number>>;
export interface KinemTransitionPhase {
    readonly from: TransitionValues;
    readonly to: TransitionValues;
    readonly duration?: number;
    readonly easing?: EasingFn;
    readonly backend?: PlayOpts["backend"];
}
export interface UseKinemTransitionOpts {
    readonly enter?: KinemTransitionPhase;
    readonly leave?: KinemTransitionPhase;
}
export interface KinemTransitionHooks {
    onBeforeEnter(el: Element): void;
    onEnter(el: Element, done: () => void): void;
    onLeave(el: Element, done: () => void): void;
    onEnterCancelled(el: Element): void;
    onLeaveCancelled(el: Element): void;
}
export declare function useKinemTransition(opts: UseKinemTransitionOpts): KinemTransitionHooks;
//# sourceMappingURL=useKinemTransition.d.ts.map