/**
 * @fileoverview Before/after comparison slider.
 * @author Saasflare™
 * A draggable divider that reveals two overlapping images or components,
 * creating a before/after comparison effect.
 * @module packages/ui/components/ui/compare
 * @package ui
 *
 * @component
 * @example
 * import { Compare } from '@saasflare/ui';
 * <Compare
 *   before={<img src="/before.png" alt="Before" />}
 *   after={<img src="/after.png" alt="After" />}
 * />
 *
 * @example
 * // With labels and custom initial position
 * <Compare
 *   before={<img src="/old-design.png" alt="Old design" />}
 *   after={<img src="/new-design.png" alt="New design" />}
 *   beforeLabel="Before"
 *   afterLabel="After"
 *   initialPosition={30}
 * />
 */
import * as React from "react";
import { type ReactNode } from "react";
import { type SaasflareComponentProps } from "../../providers";
/** Props for the Compare component. */
export interface CompareProps extends Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
    /** Content shown on the left (before) side. */
    before: ReactNode;
    /** Content shown on the right (after) side. */
    after: ReactNode;
    /** Label for the before side. */
    beforeLabel?: string;
    /** Label for the after side. */
    afterLabel?: string;
    /** Initial divider position as percentage (0–100). Default: `50` */
    initialPosition?: number;
    /** CSS aspect-ratio for the container. Default: `"16/9"` */
    aspectRatio?: string;
    /** Additional class names. */
    className?: string;
}
/**
 * Draggable before/after comparison slider.
 *
 * - Pointer-based dragging (works on mouse and touch)
 * - Optional before/after labels
 * - Content is clipped, not resized
 * - Keyboard support: Arrow keys nudge, Home/End jump to edges, PageUp/PageDown step
 *
 * @component
 * @package ui
 */
export declare function Compare({ before, after, beforeLabel, afterLabel, initialPosition, aspectRatio, className, surface, radius, animated, iconWeight, ...props }: CompareProps): import("react/jsx-runtime").JSX.Element;