import { MouseEvent, ReactNode, Ref, RefObject } from 'react';
import { ColorEditorValue, ColorInput, ColorValue, GradientInput } from '../shared/color.js';
import { Color } from '../types.js';
import { ButtonProps, ButtonSize } from './Button.js';
import { ColorEditorControlSize, ColorEditorFormat } from './ColorEditor.js';
import { PopoverOffset, PopoverPosition } from './Popover.js';
interface ColorPickerBaseProps {
    /** Value shown when there is no color (or a fully transparent one) and no `children`. */
    placeholder?: ReactNode;
    /** Label rendered for a gradient value in the trigger. Default `'Gradient'`. */
    gradientLabel?: string;
    /** Visually dim the trigger and prevent the popover from opening. */
    disabled?: boolean;
    /** Show the trigger with the current value but block opening the popover. */
    readOnly?: boolean;
    /** Accent color for the trigger button. Forwarded to `Button.color`. */
    color?: Color;
    /** Pill-style trigger button. Forwarded to `Button.rounded`. */
    rounded?: boolean;
    /** Render the trigger button's surface outline ring. Forwarded to `Button.outline`. */
    outline?: boolean;
    /** Trigger button size — also scales the swatch. Forwarded to `Button.size`. */
    size?: ButtonSize;
    /** Trigger button surface: `'surface'` (default) or `'cut'` (inset/recessed). */
    surface?: 'surface' | 'cut';
    /** Reverse the visual order of the content row (icon/swatch/value ↔ dropdown). */
    reverse?: boolean;
    /** Extra classes for the trigger button. */
    className?: string;
    /** Extra classes for the trigger button's inner content row. */
    contentClassName?: string;
    /** Extra classes for the value display inside the trigger. */
    valueClassName?: string;
    /** Extra classes for the color swatch. */
    swatchClassName?: string;
    /** Extra classes applied to the value container when showing the placeholder. */
    placeholderClassName?: string;
    /** Icon node rendered at the start of the trigger, before the swatch. */
    icon?: ReactNode;
    /** Extra classes for the icon wrapper. */
    iconClassName?: string;
    /** Show the chevron-down indicator on the right of the trigger. Default `true`. */
    dropdownIcon?: boolean;
    /** Forwarded to the trigger `Button` — allows wrapping the value across lines. */
    multiline?: boolean;
    /**
     * Custom node rendered in place of the auto-formatted value (hex / gradient label).
     *
     * Rendered as `data-part="value"` — use to show your own value text, a field label, or richer formatting.
     */
    children?: ReactNode;
    /** Show the alpha slider and scrubber. Default `true`. */
    alpha?: boolean;
    /** Show the channel-scrubber row. Default `true`. */
    inputs?: boolean;
    /** Which channels the scrubber row shows. Default `'rgb'`. */
    format?: ColorEditorFormat;
    /** Show the hex input. Default `true`. */
    hexInput?: boolean;
    /** Gradient angle control: a 45°-step button, or a degree scrubber. Default `'scrubber'`. */
    angleControl?: 'button' | 'scrubber';
    /** Preset colors rendered as a row of thumbs in the editor. */
    swatches?: ColorInput[];
    /** Size of the editor's inner controls. Default `'md'`. */
    controlSize?: ColorEditorControlSize;
    /** Render the surface outline on the editor's inner controls. Default `true`. */
    controlOutline?: boolean;
    /** Debounce `onChange` calls in ms. Forwarded to the editor. */
    debounce?: number;
    /** Throttle `onChange` calls in ms. Forwarded to the editor. */
    throttle?: number;
    /** Content rendered above the editor panel, inside the popover. */
    header?: ReactNode;
    /** Content rendered below the editor panel, inside the popover. */
    footer?: ReactNode;
    /** Extra classes for the editor panel root. */
    editorClassName?: string;
    /** Extra classes for the editor's saturation/brightness area. */
    areaClassName?: string;
    /** Accent color for the popover. Forwarded to `Popover.color`. */
    popoverColor?: Color;
    /** Default `'bottom-end'`. */
    popoverPosition?: PopoverPosition;
    /** Default `['-50%', 4]`. */
    popoverOffset?: PopoverOffset;
    /** Extra classes for the popover. Default `'w-64 p-3'`. */
    popoverClassName?: string;
    /** Surface level for the popover. Default same as `Popover`'s `surfaceLevel`. */
    popoverSurfaceLevel?: number | string;
    /**
     * External anchor ref. When provided the trigger button is **not rendered** - the caller owns the trigger and `popoverState` wiring.
     */
    anchorRef?: RefObject<HTMLElement | null>;
    /** Controlled popover open state. Pair with `onPopoverState`. */
    popoverState?: boolean;
    /** Fires whenever the popover open state changes. */
    onPopoverState?: (state: boolean) => void;
    /** Fires when the trigger button is clicked (before the popover toggles). */
    onClick?: (e: MouseEvent) => void;
    /** Forwarded to the trigger button. Ignored when `anchorRef` is provided. */
    ref?: Ref<HTMLElement>;
}
type SolidColorPickerProps = ColorPickerBaseProps & {
    /** Enable the Solid/Gradient switch and gradient editing. Default `false`. */
    gradient?: false;
    /** Controlled value. A CSS color string or any one channel set. */
    value?: ColorInput;
    /** Initial value (uncontrolled). */
    defaultValue?: ColorInput;
    /** Fires on every change with the full color. */
    onChange?: (value: ColorValue) => void;
};
type GradientColorPickerProps = ColorPickerBaseProps & {
    gradient: true;
    /** Controlled value. A CSS color/gradient string, a channel set, or a gradient object. */
    value?: ColorInput | GradientInput;
    /** Initial value (uncontrolled). */
    defaultValue?: ColorInput | GradientInput;
    /** Fires on every change with a discriminated `solid` / `linear` value. */
    onChange?: (value: ColorEditorValue) => void;
};
export type ColorPickerProps = (SolidColorPickerProps | GradientColorPickerProps) & Omit<ButtonProps, keyof ColorPickerBaseProps | 'value' | 'defaultValue' | 'onChange' | 'gradient'>;
/** Shape of `ColorPicker` defaults that can be supplied via `CladdProvider`'s `defaults` prop. */
export type ColorPickerDefaultProps = Partial<Omit<ColorPickerBaseProps, 'ref' | 'children' | 'icon' | 'header' | 'footer' | 'anchorRef' | 'onClick' | 'popoverState' | 'onPopoverState'>>;
export declare function ColorPicker(props: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=ColorPicker.d.ts.map