import * as react from 'react';
import { HTMLUIProps, ThemeProps, CSSUIObject, PropGetter } from '@yamada-ui/core';
import { ComboBoxProps, PopoverProps } from '@yamada-ui/popover';
import { ColorSelectorProps } from './color-selector.js';
import { UseColorSelectorBaseProps } from './use-color-selector.js';
import './color-selector-body.js';
import './color-selector-eye-dropper.js';
import '@yamada-ui/button';
import '@yamada-ui/icon';
import './color-selector-sliders.js';
import './alpha-slider.js';
import './use-color-slider.js';
import '@yamada-ui/form-control';
import './hue-slider.js';
import './color-selector-channels.js';
import '@yamada-ui/input';
import './color-selector-swatches.js';
import './color-swatch.js';
import './saturation-slider.js';
import './use-saturation-slider.js';
import '@yamada-ui/utils';

type ColorSelectorThemeProps = ThemeProps<"ColorSelector">;
interface ColorPickerContext {
    styles: {
        [key: string]: CSSUIObject | undefined;
    };
    value: string;
}
declare const ColorPickerProvider: react.Provider<ColorPickerContext>;
declare const useColorPickerContext: () => ColorPickerContext;
interface UseColorPickerOptions {
    /**
     * If `true`, allows input.
     *
     * @default true
     */
    allowInput?: boolean;
    /**
     * If `true`, the color swatch will be closed when value is selected.
     */
    closeOnSelectSwatch?: boolean;
    /**
     * ColorScheme for the color selector component.
     */
    colorSelectorColorScheme?: ColorSelectorThemeProps["colorScheme"];
    /**
     * Size for the color selector component.
     */
    colorSelectorSize?: ColorSelectorThemeProps["size"];
    /**
     * Variant for the color selector component.
     */
    colorSelectorVariant?: ColorSelectorThemeProps["variant"];
    /**
     * The initial value of the color selector.
     */
    defaultColor?: string;
    /**
     * A callback function to format the input entered.
     */
    formatInput?: (value: string) => string;
    /**
     * If `true` display the eye dropper component.
     *
     * @default false
     */
    withColorSelectorEyeDropper?: boolean;
    /**
     * If `true`, display the result component.
     *
     * @default false
     */
    withResult?: boolean;
    /**
     * Props for color selector component.
     */
    colorSelectorProps?: ColorSelectorProps;
}
interface UseColorPickerProps extends Omit<HTMLUIProps<"input">, "animation" | "children" | "defaultValue" | "offset" | "onChange" | "size" | "value">, Omit<UseColorSelectorBaseProps, "id" | "name">, ComboBoxProps, Pick<ColorSelectorProps, "swatches" | "swatchesColumns" | "swatchesLabel" | "withChannel" | "withPicker">, UseColorPickerOptions {
}
declare const useColorPicker: (props: UseColorPickerProps) => {
    allowInput: boolean;
    eyeDropperSupported: boolean;
    value: string;
    getContainerProps: PropGetter<"div", undefined>;
    getEyeDropperProps: PropGetter<"button", undefined>;
    getFieldProps: PropGetter<"div", undefined>;
    getInputProps: PropGetter<"input", undefined>;
    getPopoverProps: (props?: PopoverProps) => PopoverProps;
    getSelectorProps: PropGetter<ColorSelectorProps, undefined>;
    onClose: () => void;
};
type UseColorPickerReturn = ReturnType<typeof useColorPicker>;

export { ColorPickerProvider, type UseColorPickerProps, type UseColorPickerReturn, useColorPicker, useColorPickerContext };