import { ColorRepresentation, Material, MeshBasicMaterial, Plane, Vector3, Vector4 } from "three";
import { AnimationConfig, BaseNode } from "../node.js";
import { Vector1 } from "../vector.js";
import { ReactNode } from "react";
import { InvertOptional } from "./index.js";
import { ExtendedEventHandlers } from "../scroll-handler.js";
import { YogaProperties } from "@coconut-xr/flex";
import { Constructor } from "@coconut-xr/xmaterials";
export type ContainerState = {
    translate: Vector3;
    scale: Vector3;
    backgroundOpacity: Vector1;
    backgroundColor: Vector3;
    borderColor: Vector3;
    borderSize: Vector4;
    borderRadius: Vector4;
    borderOpacity: Vector1;
    borderBend: Vector1;
};
export declare class ContainerNode extends BaseNode<ContainerState> {
    target: Readonly<ContainerState>;
    private backgroundMaterial?;
    private backgroundMesh;
    applyClippingPlanes(planes: Plane[] | null): void;
    setBackgroundMaterialClass(constructor: Constructor<Material>): void;
    linkCurrent(current: ContainerState): void;
    onInit(): void;
    onLayout(): void;
    onUpdate(current: ContainerState): void;
    onCleanup(): void;
}
export declare const BackgroundMaterial: (new (...args: any[]) => {
    shader?: import("three").Shader | undefined;
    readonly borderRadius: Vector4;
    readonly borderColor: Vector3;
    readonly borderSize: Vector4;
    _borderOpacity: number;
    _ratio: number;
    _borderBend: number;
    borderBend: number;
    borderOpacity: number;
    ratio: number;
    onBeforeCompile(shader: import("three").Shader, renderer: import("three").WebGLRenderer): void;
    alphaTest: number;
    alphaToCoverage: boolean;
    blendDst: import("three").BlendingDstFactor;
    blendDstAlpha: number | null;
    blendEquation: import("three").BlendingEquation;
    blendEquationAlpha: number | null;
    blending: import("three").Blending;
    blendSrc: 210 | import("three").BlendingDstFactor;
    blendSrcAlpha: number | null;
    clipIntersection: boolean;
    clippingPlanes: any;
    clipShadows: boolean;
    colorWrite: boolean;
    defines: {
        [key: string]: any;
    } | undefined;
    depthFunc: import("three").DepthModes;
    depthTest: boolean;
    depthWrite: boolean;
    id: number;
    stencilWrite: boolean;
    stencilFunc: import("three").StencilFunc;
    stencilRef: number;
    stencilWriteMask: number;
    stencilFuncMask: number;
    stencilFail: import("three").StencilOp;
    stencilZFail: import("three").StencilOp;
    stencilZPass: import("three").StencilOp;
    readonly isMaterial: true;
    name: string;
    needsUpdate: boolean;
    opacity: number;
    polygonOffset: boolean;
    polygonOffsetFactor: number;
    polygonOffsetUnits: number;
    precision: "highp" | "mediump" | "lowp" | null;
    premultipliedAlpha: boolean;
    dithering: boolean;
    side: import("three").Side;
    shadowSide: import("three").Side | null;
    toneMapped: boolean;
    transparent: boolean;
    type: string;
    uuid: string;
    vertexColors: boolean;
    visible: boolean;
    userData: any;
    version: number;
    clone(): any;
    copy(material: Material): any;
    dispose(): void;
    customProgramCacheKey(): string;
    setValues(values: import("three").MaterialParameters): void;
    toJSON(meta?: any): any;
    addEventListener<T_1 extends string>(type: T_1, listener: import("three").EventListener<import("three").Event, T_1, any>): void;
    hasEventListener<T_2 extends string>(type: T_2, listener: import("three").EventListener<import("three").Event, T_2, any>): boolean;
    removeEventListener<T_3 extends string>(type: T_3, listener: import("three").EventListener<import("three").Event, T_3, any>): void;
    dispatchEvent(event: import("three").Event): void;
}) & typeof MeshBasicMaterial;
export declare const containerDefaults: Omit<InvertOptional<ContainerProperties>, keyof YogaProperties | keyof ExtendedEventHandlers>;
export declare function updateContainerProperties(node: BaseNode<ContainerState>, { backgroundColor, backgroundOpacity, borderRadiusBottomLeft, borderRadiusBottomRight, borderRadiusTopLeft, borderRadiusTopRight, borderColor, borderOpacity, translateX, translateY, translateZ, scaleX, scaleY, scaleZ, animation, borderBend, }: ContainerProperties): void;
export declare function updateEventProperties(node: BaseNode, { onClick, onContextMenu, onDoubleClick, onPointerCancel, onPointerDown, onPointerEnter, onPointerLeave, onPointerMove, onPointerOut, onPointerOver, onPointerUp, onWheel, }: Omit<ExtendedEventHandlers, "onPointerMissed">): void;
export type ContainerProperties = YogaProperties & {
    animation?: AnimationConfig;
    backgroundColor?: ColorRepresentation;
    backgroundOpacity?: number;
    borderBend?: number;
    borderColor?: ColorRepresentation;
    borderOpacity?: number;
    borderRadiusTopLeft?: number;
    borderRadiusTopRight?: number;
    borderRadiusBottomRight?: number;
    borderRadiusBottomLeft?: number;
    translateX?: number;
    translateY?: number;
    translateZ?: number;
    scaleX?: number;
    scaleY?: number;
    scaleZ?: number;
    material?: Constructor<Material>;
} & Omit<ExtendedEventHandlers, "onPointerMissed">;
export declare function useContainer(node: ContainerNode, properties: ContainerProperties, children: ReactNode | undefined): ReactNode | undefined;
export declare const Container: import("react").ForwardRefExoticComponent<Omit<YogaProperties & {
    animation?: AnimationConfig | undefined;
    backgroundColor?: ColorRepresentation | undefined;
    backgroundOpacity?: number | undefined;
    borderBend?: number | undefined;
    borderColor?: 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<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<YogaProperties & {
        animation?: AnimationConfig | undefined;
        backgroundColor?: ColorRepresentation | undefined;
        backgroundOpacity?: number | undefined;
        borderBend?: number | undefined;
        borderColor?: 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<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<ContainerNode | undefined> | undefined;
}, "ref"> & import("react").RefAttributes<ContainerNode | undefined>>;
export declare const RootContainer: import("react").ForwardRefExoticComponent<Omit<YogaProperties & {
    animation?: AnimationConfig | undefined;
    backgroundColor?: ColorRepresentation | undefined;
    backgroundOpacity?: number | undefined;
    borderBend?: number | undefined;
    borderColor?: 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<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<YogaProperties & {
        animation?: AnimationConfig | undefined;
        backgroundColor?: ColorRepresentation | undefined;
        backgroundOpacity?: number | undefined;
        borderBend?: number | undefined;
        borderColor?: 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<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<ContainerNode | undefined>>;