import { Material, Plane, Texture, Vector2 } from "three";
import { BaseNode } from "../node.js";
import { Vector1 } from "../vector.js";
import { ReactNode } from "react";
import { ContainerProperties, ContainerState } from "./container.js";
import { InvertOptional } from "./text.js";
import { Constructor } from "@coconut-xr/xmaterials";
export type ImageState = {
    opacity: Vector1;
    imageOffset: Vector2;
    imageScale: Vector2;
} & ContainerState;
export type ImageFit = "cover" | "contain" | "fill";
export declare class ImageNode extends BaseNode<ImageState> {
    target: Readonly<ImageState>;
    private material;
    private mesh;
    private backgroundMaterial?;
    private backgroundMesh;
    private fit;
    applyClippingPlanes(planes: Plane[] | null): void;
    linkCurrent(current: ImageState): void;
    setBackgroundMaterialClass(constructor: Constructor<Material>): void;
    setTexture(texture: Texture): void;
    setFit(fit: ImageFit): void;
    onInit(): void;
    onLayout(): void;
    computeImageTransformation(): void;
    onUpdate(current: ImageState): void;
    onCleanup(): void;
}
export declare const imageDefaults: Omit<InvertOptional<ImageProperties>, keyof ContainerProperties>;
export type ImageProperties = {
    fit?: "cover" | "contain" | "fill";
    url: string;
    opacity?: number;
} & ContainerProperties;
export declare function useImage(node: ImageNode, { url, opacity, fit, material, ...props }: ImageProperties, children: ReactNode | undefined): ReactNode | undefined;
export declare const Image: import("react").ForwardRefExoticComponent<Omit<{
    fit?: "fill" | "cover" | "contain" | undefined;
    url: string;
    opacity?: number | undefined;
} & import("@coconut-xr/flex").YogaProperties & {
    animation?: import("../node.js").AnimationConfig | undefined;
    backgroundColor?: import("three").ColorRepresentation | undefined;
    backgroundOpacity?: number | undefined;
    borderBend?: number | undefined;
    borderColor?: import("three").ColorRepresentation | undefined;
    borderOpacity?: number | undefined;
    borderRadiusTopLeft?: number | undefined;
    borderRadiusTopRight?: number | undefined;
    borderRadiusBottomRight?: number | undefined;
    borderRadiusBottomLeft?: number | undefined;
    translateX?: number | undefined;
    translateY?: number | undefined;
    translateZ?: number | undefined;
    scaleX?: number | undefined;
    scaleY?: number | undefined;
    scaleZ?: number | undefined;
    material?: Constructor<Material> | undefined;
} & Omit<import("../scroll-handler.js").ExtendedEventHandlers, "onPointerMissed"> & {
    inset?: number | `${number}%` | undefined;
    borderRadius?: number | undefined;
    borderRadiusLeft?: number | undefined;
    borderRadiusRight?: number | undefined;
    borderRadiusTop?: number | undefined;
    borderRadiusBottom?: number | undefined;
    border?: number | undefined;
    borderX?: number | undefined;
    borderY?: number | undefined;
    padding?: number | `${number}%` | undefined;
    paddingX?: number | `${number}%` | undefined;
    paddingY?: number | `${number}%` | undefined;
    margin?: number | `${number}%` | "auto" | undefined;
    marginX?: number | `${number}%` | "auto" | undefined;
    marginY?: number | `${number}%` | "auto" | undefined;
} & {} & {
    index?: number | undefined;
    id?: string | undefined;
    children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
    classes?: Partial<{
        fit?: "fill" | "cover" | "contain" | undefined;
        url: string;
        opacity?: number | undefined;
    } & import("@coconut-xr/flex").YogaProperties & {
        animation?: import("../node.js").AnimationConfig | undefined;
        backgroundColor?: import("three").ColorRepresentation | undefined;
        backgroundOpacity?: number | undefined;
        borderBend?: number | undefined;
        borderColor?: import("three").ColorRepresentation | undefined;
        borderOpacity?: number | undefined;
        borderRadiusTopLeft?: number | undefined;
        borderRadiusTopRight?: number | undefined;
        borderRadiusBottomRight?: number | undefined;
        borderRadiusBottomLeft?: number | undefined;
        translateX?: number | undefined;
        translateY?: number | undefined;
        translateZ?: number | undefined;
        scaleX?: number | undefined;
        scaleY?: number | undefined;
        scaleZ?: number | undefined;
        material?: Constructor<Material> | undefined;
    } & Omit<import("../scroll-handler.js").ExtendedEventHandlers, "onPointerMissed"> & {
        inset?: number | `${number}%` | undefined;
        borderRadius?: number | undefined;
        borderRadiusLeft?: number | undefined;
        borderRadiusRight?: number | undefined;
        borderRadiusTop?: number | undefined;
        borderRadiusBottom?: number | undefined;
        border?: number | undefined;
        borderX?: number | undefined;
        borderY?: number | undefined;
        padding?: number | `${number}%` | undefined;
        paddingX?: number | `${number}%` | undefined;
        paddingY?: number | `${number}%` | undefined;
        margin?: number | `${number}%` | "auto" | undefined;
        marginX?: number | `${number}%` | "auto" | undefined;
        marginY?: number | `${number}%` | "auto" | undefined;
    } & {}>[] | undefined;
    ref?: import("react").MutableRefObject<ImageNode | undefined> | undefined;
}, "ref"> & import("react").RefAttributes<ImageNode | undefined>>;
export declare const RootImage: import("react").ForwardRefExoticComponent<Omit<{
    fit?: "fill" | "cover" | "contain" | undefined;
    url: string;
    opacity?: number | undefined;
} & import("@coconut-xr/flex").YogaProperties & {
    animation?: import("../node.js").AnimationConfig | undefined;
    backgroundColor?: import("three").ColorRepresentation | undefined;
    backgroundOpacity?: number | undefined;
    borderBend?: number | undefined;
    borderColor?: import("three").ColorRepresentation | undefined;
    borderOpacity?: number | undefined;
    borderRadiusTopLeft?: number | undefined;
    borderRadiusTopRight?: number | undefined;
    borderRadiusBottomRight?: number | undefined;
    borderRadiusBottomLeft?: number | undefined;
    translateX?: number | undefined;
    translateY?: number | undefined;
    translateZ?: number | undefined;
    scaleX?: number | undefined;
    scaleY?: number | undefined;
    scaleZ?: number | undefined;
    material?: Constructor<Material> | undefined;
} & Omit<import("../scroll-handler.js").ExtendedEventHandlers, "onPointerMissed"> & {
    inset?: number | `${number}%` | undefined;
    borderRadius?: number | undefined;
    borderRadiusLeft?: number | undefined;
    borderRadiusRight?: number | undefined;
    borderRadiusTop?: number | undefined;
    borderRadiusBottom?: number | undefined;
    border?: number | undefined;
    borderX?: number | undefined;
    borderY?: number | undefined;
    padding?: number | `${number}%` | undefined;
    paddingX?: number | `${number}%` | undefined;
    paddingY?: number | `${number}%` | undefined;
    margin?: number | `${number}%` | "auto" | undefined;
    marginX?: number | `${number}%` | "auto" | undefined;
    marginY?: number | `${number}%` | "auto" | undefined;
} & {}, "height" | "width"> & {
    precision?: number | undefined;
    id?: string | undefined;
    children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
    classes?: Partial<{
        fit?: "fill" | "cover" | "contain" | undefined;
        url: string;
        opacity?: number | undefined;
    } & import("@coconut-xr/flex").YogaProperties & {
        animation?: import("../node.js").AnimationConfig | undefined;
        backgroundColor?: import("three").ColorRepresentation | undefined;
        backgroundOpacity?: number | undefined;
        borderBend?: number | undefined;
        borderColor?: import("three").ColorRepresentation | undefined;
        borderOpacity?: number | undefined;
        borderRadiusTopLeft?: number | undefined;
        borderRadiusTopRight?: number | undefined;
        borderRadiusBottomRight?: number | undefined;
        borderRadiusBottomLeft?: number | undefined;
        translateX?: number | undefined;
        translateY?: number | undefined;
        translateZ?: number | undefined;
        scaleX?: number | undefined;
        scaleY?: number | undefined;
        scaleZ?: number | undefined;
        material?: Constructor<Material> | undefined;
    } & Omit<import("../scroll-handler.js").ExtendedEventHandlers, "onPointerMissed"> & {
        inset?: number | `${number}%` | undefined;
        borderRadius?: number | undefined;
        borderRadiusLeft?: number | undefined;
        borderRadiusRight?: number | undefined;
        borderRadiusTop?: number | undefined;
        borderRadiusBottom?: number | undefined;
        border?: number | undefined;
        borderX?: number | undefined;
        borderY?: number | undefined;
        padding?: number | `${number}%` | undefined;
        paddingX?: number | `${number}%` | undefined;
        paddingY?: number | `${number}%` | undefined;
        margin?: number | `${number}%` | "auto" | undefined;
        marginX?: number | `${number}%` | "auto" | undefined;
        marginY?: number | `${number}%` | "auto" | undefined;
    } & {}>[] | undefined;
    loadYoga?: (() => Promise<import("yoga-wasm-web").Yoga>) | undefined;
    anchorX?: "center" | "left" | "right" | undefined;
    anchorY?: "center" | "top" | "bottom" | undefined;
    sizeX?: number | undefined;
    sizeY?: number | undefined;
    pixelSize?: number | undefined;
    position?: import("@react-three/fiber").Vector3 | undefined;
    rotation?: import("@react-three/fiber").Euler | undefined;
    dragThreshold?: number | undefined;
} & import("react").RefAttributes<ImageNode | undefined>>;