import { ColorAreaProps, parseColor } from 'react-aria-components';
import type { ColorPickerProps as ColorPickerRAProps, ColorFormat, Color } from 'react-aria-components';
import './ColorPicker.scss';
import React from 'react';
export { parseColor, type Color };
export interface ColorPickerProps extends Omit<ColorPickerRAProps, 'onChange' | 'value'> {
    value?: string;
    onChange?: (v: string, color?: Color) => void;
    children?: React.ReactNode;
    format?: ColorFormat;
    title?: string;
    name?: string;
    isRequired?: boolean;
    colorFieldTitle?: string;
    supportTitle?: string;
    errorMessage?: string;
    style?: React.CSSProperties;
    colorAreaWidth?: number;
    colorAreaHeight?: number;
    thumbSize?: number;
}
export declare function MyColorArea(props: ColorAreaProps): import("react/jsx-runtime").JSX.Element;
/**
 * Aria will throw an err if the input is invalid, so we need to validate it first
 * @param input
 * @returns validated color
 */
export declare const validateColor: (input: string) => Color;
/**
 * ColorPicker component that provides a UI for selecting a color using a color area and a hue slider.
 *
 * @param {Object} props - The properties passed to the component.
 * @param {string} props.value - The current color value, typically in a string format (e.g., hex, RGB, etc.).
 * @param {string} props.title - The title of the color picker.
 * @param {string} props.colorFieldTitle - The title of the color field.
 * @param {React.CSSProperties} props.style - The style of the color picker.
 * @param {number} props.colorAreaWidth - The width of the color area. Defaults to 120.
 * @param {number} props.colorAreaHeight - The height of the color area. Defaults to 92.
 * @param {number} props.thumbSize - The size of the color thumb. Defaults to 10.
 * @param {function(string, Color): void} props.onChange - Callback function to update the selected color string value and the color object. Please use the first argument to update the state. The second one is mainly for testing purposes.
 * @param {ColorFormat} props.format - The format of the color value. Defaults to 'hex'. The options include "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" | "hsb" | "hsba"
 * @param {React.ReactNode} [props.children] - Optional child components or elements to be rendered within the color picker.
 * @param {string} [props.name] - The name of the color picker, used for form validation.
 * @returns {JSX.Element} The rendered ColorPicker component, including a color area for saturation/lightness and a hue slider.
 *
 * @example
 * // Example usage of ColorPicker
 * const [color, setColor] = useState('#ff0000');
 *
 * <ColorPicker value={color} onChange={v => setColor(v)}>
 *    <div>Selected Color: {color}</div>
 * </ColorPicker>
 */
export declare const ColorPicker: ({ value, onChange, style, children, format, name, isRequired, title, colorFieldTitle, supportTitle, errorMessage, thumbSize, colorAreaWidth, colorAreaHeight, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
export default ColorPicker;