import { type ComponentPropsWithoutRef, type CSSProperties, type ImgHTMLAttributes, type ReactNode, type Ref, type VideoHTMLAttributes } from 'react';
import { type CssLength } from '../../../utils/css';
type NativeImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'children' | 'className' | 'draggable' | 'height' | 'src' | 'style' | 'width'>;
type NativeVideoProps = Omit<VideoHTMLAttributes<HTMLVideoElement>, 'children' | 'className' | 'draggable' | 'height' | 'src' | 'style' | 'width'>;
export type DraggableCollageItemKind = 'custom' | 'image' | 'video';
export type DraggableCollageItemShape = 'circle' | 'free' | 'rounded';
export type DraggableCollageItem = {
    id: string;
    x: number;
    y: number;
    width: number;
    alt?: string;
    ariaLabel?: string;
    aspectRatio?: number | string;
    children?: ReactNode;
    className?: string;
    contentClassName?: string;
    disabled?: boolean;
    hidden?: boolean;
    hoverRotation?: number;
    imageProps?: NativeImageProps;
    kind?: DraggableCollageItemKind;
    objectFit?: CSSProperties['objectFit'];
    objectPosition?: CSSProperties['objectPosition'];
    poster?: string;
    radius?: CssLength;
    rotation?: number;
    shape?: DraggableCollageItemShape;
    src?: string;
    videoProps?: NativeVideoProps;
    zIndex?: number;
};
export type DraggableCollageLayoutItem = {
    id: string;
    rotation: number;
    width: number;
    x: number;
    y: number;
    zIndex: number;
};
export type DraggableCollageRenderState = {
    isDragging: boolean;
    item: DraggableCollageItem;
    layout: DraggableCollageLayoutItem;
    motionState: 'disabled' | 'reduced-motion' | 'ready';
};
export type DraggableCollageInertiaOptions = {
    duration?: number;
    enabled?: boolean;
    maxDistance?: number;
    minVelocity?: number;
    power?: number;
};
export type DraggableCollageProps = Omit<ComponentPropsWithoutRef<'section'>, 'children' | 'onDragEnd' | 'style'> & {
    items: readonly DraggableCollageItem[];
    ariaLabel?: string;
    canvasHeight?: number;
    canvasWidth?: number;
    contentClassName?: string;
    disabled?: boolean;
    dragEnabled?: boolean;
    dragZIndex?: number;
    inertia?: boolean | DraggableCollageInertiaOptions;
    itemClassName?: string;
    maxWidth?: CssLength;
    onItemDragEnd?: (item: DraggableCollageItem, layout: DraggableCollageLayoutItem) => void;
    onItemDragStart?: (item: DraggableCollageItem, layout: DraggableCollageLayoutItem) => void;
    onItemsChange?: (items: DraggableCollageItem[]) => void;
    onLayoutChange?: (layout: DraggableCollageLayoutItem[]) => void;
    padding?: CssLength;
    ref?: Ref<HTMLElement>;
    renderItem?: (state: DraggableCollageRenderState) => ReactNode;
    respectReducedMotion?: boolean;
    stageClassName?: string;
    style?: DraggableCollageStyle;
};
type DraggableCollageStyle = CSSProperties & Record<string, string | number | undefined>;
declare const DraggableCollage: ({ items, ariaLabel, canvasHeight, canvasWidth, className, contentClassName, disabled, dragEnabled, dragZIndex, inertia, itemClassName, maxWidth, onItemDragEnd, onItemDragStart, onItemsChange, onLayoutChange, padding, ref, renderItem, respectReducedMotion, stageClassName, style, ...rootProps }: DraggableCollageProps) => import("react/jsx-runtime").JSX.Element;
export { DraggableCollage };