motion/types/targets/react/types.d.ts

The Motion library for the web

import { CSSProperties, DetailedHTMLFactory, ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactHTML, RefAttributes, RefObject, SVGAttributes } from "react";
import { AnimationOptions, AnimationOptionsWithOverrides, MotionKeyframes } from "../dom/types";
import { svgElements, htmlElements } from "./utils/supported-elements";
export declare type AnimationCallback = (target: MotionKeyframes) => void;
export interface CSSPropertiesWithTransform extends CSSProperties {
    x?: number | string;
    y?: number | string;
    z?: number;
    rotateX?: number | string;
    rotateY?: number | string;
    rotateZ?: number | string;
    scaleX?: number;
    scaleY?: number;
    scaleZ?: number;
    skewX?: number;
    skewY?: number;
}
export declare type CSSVariables = {
    [key: `--${string}`]: string | number;
};
export declare type MotionKeyframesWithOptions = MotionKeyframes & {
    options?: AnimationOptionsWithOverrides;
};
export declare type MotionCSSProperties = CSSPropertiesWithTransform & CSSVariables;
export declare type Poses = {
    [key: string]: MotionKeyframesWithOptions;
};
export interface ViewportOptions {
    root?: RefObject<Element>;
    once?: boolean;
    margin?: string;
    threshold?: number;
}
export interface AnimatedProps {
    initial?: MotionCSSProperties | string;
    style?: MotionKeyframesWithOptions | string;
    hover?: MotionKeyframesWithOptions | string;
    press?: MotionKeyframesWithOptions | string;
    exit?: MotionKeyframesWithOptions | string;
    inViewport?: MotionKeyframesWithOptions | string;
    inherit?: boolean;
    poses?: Poses;
    viewport?: ViewportOptions;
    options?: AnimationOptions;
    onStart?: AnimationCallback;
    onComplete?: AnimationCallback;
    onViewportEnter?: (entry: IntersectionObserverEntry) => void;
    onViewportLeave?: (entry: IntersectionObserverEntry) => void;
}
export declare type PoseProps = {
    initial?: boolean;
    style?: boolean;
    hover?: boolean;
    press?: boolean;
    exit?: boolean;
    inViewport?: boolean;
};
export declare type AnimationContextProps = {
    [K in keyof PoseProps]?: string;
};
export declare type PoseActiveState = {
    [K in keyof PoseProps]?: boolean;
};
declare type UnionStringArray<T extends Readonly<string[]>> = T[number];
export declare type HTMLElements = UnionStringArray<typeof htmlElements>;
export declare type SVGElements = UnionStringArray<typeof svgElements>;
/**
 * @public
 */
export declare type ForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
/**
 * Support for React component props
 */
declare type UnwrapFactoryAttributes<F> = F extends DetailedHTMLFactory<infer P, any> ? P : never;
declare type UnwrapFactoryElement<F> = F extends DetailedHTMLFactory<any, infer P> ? P : never;
declare type HTMLAttributesWithoutAnimatedProps<Attributes extends HTMLAttributes<Element>, Element extends HTMLElement> = {
    [K in Exclude<keyof Attributes, keyof AnimatedProps>]?: Attributes[K];
};
/**
 * @public
 */
export declare type AnimatedHTMLProps<TagName extends keyof ReactHTML> = HTMLAttributesWithoutAnimatedProps<UnwrapFactoryAttributes<ReactHTML[TagName]>, UnwrapFactoryElement<ReactHTML[TagName]>> & AnimatedProps;
/**
 * Motion-optimised versions of React's HTML components.
 *
 * @public
 */
export declare type AnimatedHTMLComponents = {
    [K in HTMLElements]: ForwardRefComponent<UnwrapFactoryElement<ReactHTML[K]>, AnimatedHTMLProps<K>>;
};
interface SVGAttributesWithoutAnimatedProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof AnimatedProps>> {
}
declare type UnwrapSVGFactoryElement<F> = F extends React.SVGProps<infer P> ? P : never;
/**
 * @public
 */
export interface AnimatedSVGProps<T> extends SVGAttributesWithoutAnimatedProps<T>, AnimatedProps {
}
/**
 * Motion-optimised versions of React's SVG components.
 *
 * @public
 */
export declare type AnimatedSVGComponents = {
    [K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, AnimatedSVGProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
};
export declare type AnimatedDOMComponents = AnimatedHTMLComponents & AnimatedSVGComponents;
export {};