import type { WordPressComponentProps } from '../context/wordpress-component';
import type { FocalPointPickerProps } from './types';
/**
 * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.
 *
 * It addresses two common issues when displaying images in cropped containers. First, large
 * background images can be cropped in undesirable ways, especially on smaller viewports such as
 * mobile devices. Second, the CSS aspect-ratio property can inadvertently crop out the area of
 * highest visual interest. This component allows the selection of the point with the most
 * important visual information and returns it as a pair of numbers between 0 and 1.
 * The output value can be applied to either CSS `background-position` (for elements with
 * `background-image`) or `object-position` (for `<img>` / `<video>` elements rendered with
 * `object-fit: cover`).
 *
 * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`;
 * - Corresponding CSS: `object-position: 50% 10%`;
 *
 * ```jsx
 * import { FocalPointPicker } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const Example = () => {
 * 	const [ focalPoint, setFocalPoint ] = useState( {
 * 		x: 0.5,
 * 		y: 0.1,
 * 	} );
 *
 * 	const url = '/path/to/image';
 *
 * 	// Example function to render the CSS styles based on Focal Point Picker value
 * 	const style = {
 * 		width: '100%',
 * 		aspectRatio: '16 / 9',
 * 		objectFit: 'cover',
 * 		objectPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
 * 	};
 *
 * 	return (
 * 		<>
 * 			<FocalPointPicker
 * 				url={ url }
 * 				value={ focalPoint }
 * 				onDragStart={ setFocalPoint }
 * 				onDrag={ setFocalPoint }
 * 				onChange={ setFocalPoint }
 * 			/>
 * 			<img src={ url } alt="" style={ style } />
 * 		</>
 * 	);
 * };
 * ```
 */
export declare function FocalPointPicker({ __nextHasNoMarginBottom: _, autoPlay, className, help, hideLabelFromVision, label, onChange, onDrag, onDragEnd, onDragStart, resolvePoint, url, value: valueProp, ...restProps }: WordPressComponentProps<FocalPointPickerProps, 'div', false>): import("react").JSX.Element;
export default FocalPointPicker;
//# sourceMappingURL=index.d.ts.map