import React from 'react';
import { FlintImageComparer as FlintImageComparerElement } from '@getufy/flint-ui/image-comparer/flint-image-comparer';
export interface FlintImageComparerChangeDetail {
    position: number;
}
/**
 * `flint-image-comparer` — Compare two images side-by-side with a draggable slider.
 *
 * @slot before - The before image (`<img>` or `<svg>`).
 * @slot after - The after image (`<img>` or `<svg>`).
 * @slot handle - Custom handle content (replaces the default arrows icon).
 */
export interface FlintImageComparerProps extends React.HTMLAttributes<FlintImageComparerElement> {
    /** The position of the divider as a percentage (0–100). */
    position?: number;
    /** Whether the comparer is disabled. */
    disabled?: boolean;
    /**
     * Fired when the position changes. Detail: `{ position: number }`.
     * DOM event: `flint-image-comparer-change`
     */
    onFlintImageComparerChange?: (event: CustomEvent<FlintImageComparerChangeDetail>) => void;
}
export declare const FlintImageComparer: React.ForwardRefExoticComponent<FlintImageComparerProps & React.RefAttributes<FlintImageComparerElement>>;