import * as flexium_jsx_runtime from 'flexium/jsx-runtime';
import { Context } from 'flexium/core';

type CanvasMode = '2d' | 'webgl' | 'webgl2';
type CanvasContext = CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext;
interface CanvasRenderContext {
    mode: CanvasMode;
    ctx: CanvasContext | null;
    width: number;
    height: number;
}
interface CanvasProps {
    width: number;
    height: number;
    /** Rendering context mode. Default: '2d' */
    mode?: CanvasMode;
    /** WebGL context attributes (only used when mode is 'webgl' or 'webgl2') */
    webglAttributes?: WebGLContextAttributes;
    children?: any;
    style?: any;
    ref?: (el: HTMLCanvasElement) => void;
}
interface DrawRectProps {
    x: number | (() => number);
    y: number | (() => number);
    width: number | (() => number);
    height: number | (() => number);
    fill?: string | (() => string);
    stroke?: string | (() => string);
    strokeWidth?: number | (() => number);
    opacity?: number | (() => number);
}
interface DrawCircleProps {
    x: number | (() => number);
    y: number | (() => number);
    radius: number | (() => number);
    fill?: string | (() => string);
    stroke?: string | (() => string);
    strokeWidth?: number | (() => number);
    opacity?: number | (() => number);
}
interface DrawArcProps {
    x: number | (() => number);
    y: number | (() => number);
    radius: number | (() => number);
    startAngle: number | (() => number);
    endAngle: number | (() => number);
    counterclockwise?: boolean;
    fill?: string | (() => string);
    stroke?: string | (() => string);
    strokeWidth?: number | (() => number);
    opacity?: number | (() => number);
}
interface DrawLineProps {
    x1: number | (() => number);
    y1: number | (() => number);
    x2: number | (() => number);
    y2: number | (() => number);
    stroke?: string | (() => string);
    strokeWidth?: number | (() => number);
    opacity?: number | (() => number);
}
interface DrawTextProps {
    text: string | (() => string);
    x: number | (() => number);
    y: number | (() => number);
    fill?: string | (() => string);
    fontSize?: number | (() => number);
    fontFamily?: string | (() => string);
    fontWeight?: string | (() => string);
    textAlign?: 'left' | 'center' | 'right';
    opacity?: number | (() => number);
}
interface DrawPathProps {
    d: string | (() => string);
    fill?: string | (() => string);
    stroke?: string | (() => string);
    strokeWidth?: number | (() => number);
    opacity?: number | (() => number);
}

declare const CanvasCtx: Context<CanvasRenderContext | null>;
/** Get current canvas render context (mode, ctx, dimensions) */
declare function getCanvasRenderContext(): CanvasRenderContext | null;
/** Get current 2D canvas context (returns null if not in 2D mode) */
declare function getCanvasContext(): CanvasRenderingContext2D | null;
/** Get current WebGL context (returns null if not in WebGL mode) */
declare function getWebGLContext(): WebGLRenderingContext | null;
/** Get current WebGL2 context (returns null if not in WebGL2 mode) */
declare function getWebGL2Context(): WebGL2RenderingContext | null;
declare function Canvas(props: CanvasProps): flexium_jsx_runtime.JSX.Element;

declare function DrawRect(props: DrawRectProps): null;

declare function DrawCircle(props: DrawCircleProps): null;

declare function DrawArc(props: DrawArcProps): null;

declare function DrawLine(props: DrawLineProps): null;

declare function DrawText(props: DrawTextProps): null;

declare function DrawPath(props: DrawPathProps): null;

export { Canvas, type CanvasContext, CanvasCtx, type CanvasMode, type CanvasProps, type CanvasRenderContext, DrawArc, type DrawArcProps, DrawCircle, type DrawCircleProps, DrawLine, type DrawLineProps, DrawPath, type DrawPathProps, DrawRect, type DrawRectProps, DrawText, type DrawTextProps, getCanvasContext, getCanvasRenderContext, getWebGL2Context, getWebGLContext };