import * as React from 'react';
import { type VariantProps } from 'class-variance-authority';
import { type ColorSwatchProps } from '../color-swatch/color-swatch';
import { buttonVariants } from '../button/button-variants';
import { type InputProps } from '../input';
import { type PopoverContentProps, type PopoverProps } from '../popover/popover';
import { type Color, type ColorFormat } from '../../lib/color';
type ColorPickerSize = 'sm' | 'md' | 'lg';
type ColorPickerVariant = 'ghost' | 'outline' | 'soft' | 'flush';
type ColorPickerSwatchPosition = 'start' | 'end';
type ColorPickerSwatchShape = NonNullable<ColorSwatchProps['shape']>;
interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
    /** Selected color. Pass a `Color` or any CSS color string to control the component. */
    value?: Color | string;
    /**
     * Color selected before any interaction, when the component is uncontrolled.
     * @default '#ffffff'
     */
    defaultValue?: Color | string;
    /** Fires on every change, including each frame of a drag inside the panel. */
    onValueChange?: (value: Color) => void;
    /** Fires once a gesture ends, with the color that was landed on. */
    onValueCommitted?: (value: Color) => void;
    /**
     * Panel contents. Any `ColorArea`, `ColorSlider`, `ColorSwatch` or `ColorSwatchPicker`
     * in here reads and writes the picker's color, so no value wiring is needed. Leave it
     * off for the default panel: an HSB area, a hue slider and a text input, plus a preview
     * swatch when `inline` leaves no trigger to show one.
     */
    children?: React.ReactNode;
    /**
     * Format the trigger and the text input write the color in. Defaults to `'hexa'` when
     * `alpha` is set. An alpha format collapses to its opaque twin whenever the color is
     * fully opaque, so a solid color never picks up a trailing `ff`.
     * @default 'hex'
     */
    format?: ColorFormat;
    /**
     * Add an alpha slider to the default panel, and back the preview with a checkerboard.
     * @default false
     */
    alpha?: boolean;
    /**
     * Add a screen color-sampling button to the default panel. It renders only where the
     * browser supports the EyeDropper API, so there is no dead control on Firefox or Safari.
     * @default false
     */
    eyedropper?: boolean;
    /**
     * Render the panel in place instead of behind a trigger and a popover. The trigger
     * props (`label`, `trigger`, `size`, the popover ones) do nothing in this mode.
     * @default false
     */
    inline?: boolean;
    /**
     * Prevent interaction and dim the trigger and every control in the panel.
     * @default false
     */
    disabled?: boolean;
    /**
     * Height and text scale of the default trigger.
     * @default 'md'
     */
    size?: ColorPickerSize;
    /**
     * Visual style of the default trigger, from `Button`'s set. `flush` takes the button
     * shell off entirely, leaving the swatch and the label on their own.
     * @default 'ghost'
     */
    variant?: ColorPickerVariant;
    /**
     * Text beside the swatch in the default trigger. Defaults to the color, formatted with
     * `format`. Pass `null` for a swatch-only square button, and pair a non-string node
     * with `aria-label`.
     */
    label?: React.ReactNode;
    /**
     * Rounded square or full circle, for the swatch on the default trigger.
     * @default 'rounded'
     */
    swatchShape?: ColorPickerSwatchShape;
    /**
     * Which side of the label the default trigger's swatch sits on. It is inset from that
     * edge by the same gap the button's height leaves above and below it.
     * @default 'start'
     */
    swatchPosition?: ColorPickerSwatchPosition;
    /**
     * Element to open the panel from, in place of the default swatch button. `null` renders
     * no trigger at all, for a panel driven by `open` and pointed at something you own with
     * `popoverProps.anchor`. `className` and the forwarded attributes land on the trigger,
     * so they have nowhere to go in that mode.
     */
    trigger?: React.ReactElement | null;
    /** Controlled open state of the popover. Pair with `onOpenChange`. */
    open?: boolean;
    /**
     * Uncontrolled initial open state of the popover.
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Fires when the popover opens or closes. The second argument carries the `reason` and
     * a `cancel()` that stops Base UI acting on the event.
     */
    onOpenChange?: PopoverProps['onOpenChange'];
    /**
     * Preferred popover side.
     * @default 'bottom'
     */
    side?: PopoverContentProps['side'];
    /**
     * Popover alignment.
     * @default 'start'
     */
    align?: PopoverContentProps['align'];
    /**
     * Gap between the trigger and the popover.
     * @default 6
     */
    sideOffset?: number;
    /** Escape hatch forwarded to the inner `PopoverContent` (collision props, `className`, …). */
    popoverProps?: Partial<PopoverContentProps>;
    /** Name of the hidden input, used when submitting an HTML form. */
    name?: string;
    /** `id` of the `<form>` the hidden input belongs to, when it sits outside it. */
    form?: string;
}
declare function ColorPicker({ value, defaultValue, onValueChange, onValueCommitted, children, format: formatProp, alpha, eyedropper, inline, disabled, size, variant, label, swatchShape, swatchPosition, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, popoverProps, name, form, className, 'aria-label': ariaLabel, ...props }: ColorPickerProps): React.JSX.Element;
interface ColorPickerInputProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange' | 'color' | 'clearable' | 'onClear'> {
    /** Format the color is written in. Defaults to the enclosing picker's `format`. */
    format?: ColorFormat;
}
declare function ColorPickerInput({ format: formatProp, className, ...props }: ColorPickerInputProps): React.JSX.Element;
interface ColorPickerEyeDropperProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'color' | 'children'> {
    /**
     * Visual style, from the same set `Button` offers.
     * @default 'ghost'
     */
    variant?: VariantProps<typeof buttonVariants>['variant'];
    /**
     * Height and padding, from the same set `Button` offers.
     * @default 'icon-sm'
     */
    size?: VariantProps<typeof buttonVariants>['size'];
    /** Icon rendered inside the button. */
    children?: React.ReactNode;
}
declare function ColorPickerEyeDropper({ variant, size, className, disabled, children, 'aria-label': ariaLabel, ...props }: ColorPickerEyeDropperProps): React.JSX.Element | null;
export { ColorPicker, ColorPickerInput, ColorPickerEyeDropper };
export type { ColorPickerProps, ColorPickerInputProps, ColorPickerEyeDropperProps };
//# sourceMappingURL=color-picker.d.ts.map