import { HTMLAttributes } from 'react';
export type ColorSwatchSize = "sm" | "md" | "lg";
export interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick" | "onSelect"> {
    /** CSS color value displayed as the swatch background. */
    color: string;
    /** Whether this swatch is the currently selected color. */
    selected?: boolean;
    /** Swatch diameter. Defaults to `"md"`. */
    size?: ColorSwatchSize;
    /** Called when the user clicks or activates the swatch. */
    onSelect?: (color: string) => void;
    /** Accessible label. Defaults to the color value. */
    "aria-label"?: string;
    disabled?: boolean;
}
/**
 * Single circular color swatch button.
 *
 * Can be used standalone or composed inside `ColorPicker`.
 * Shows a white checkmark when `selected`.
 */
export declare function ColorSwatch({ color, selected, size, onSelect, disabled, className, style, "aria-label": ariaLabel, ...props }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;
export interface ColorPickerColor {
    /** CSS color value (hex recommended). */
    value: string;
    /** Human-readable name shown as aria-label and tooltip. */
    label?: string;
}
/** Default Adwaita-named palette (matches Avatar color set). */
export declare const GNOME_PALETTE: ColorPickerColor[];
export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
    /** Currently selected color value. */
    value?: string;
    /** Called when the user selects a color. */
    onChange?: (value: string) => void;
    /**
     * Palette of colors to display.
     * Defaults to `GNOME_PALETTE` (the 9 Adwaita named colors).
     */
    colors?: ColorPickerColor[];
    /**
     * Show a "Custom…" button at the end that opens a native color picker.
     * When a custom color is chosen it is passed to `onChange` and shown
     * as a selected swatch until another palette color is picked.
     * Defaults to `false`.
     */
    allowCustom?: boolean;
    /** Swatch size. Defaults to `"md"`. */
    size?: ColorSwatchSize;
}
/**
 * Color palette picker following the Adwaita `GtkColorButton` + swatch pattern.
 *
 * Renders a row of circular `ColorSwatch` items. Keyboard navigation uses
 * arrow keys (roving tabindex). Optionally adds a "Custom…" button backed
 * by a hidden `<input type="color">`.
 *
 * ```tsx
 * <ColorPicker value={color} onChange={setColor} />
 * <ColorPicker value={color} onChange={setColor} allowCustom />
 * <ColorPicker
 *   value={color}
 *   onChange={setColor}
 *   colors={[{ value: "#ff0000", label: "Red" }, …]}
 * />
 * ```
 *
 * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html
 */
export declare function ColorPicker({ value, onChange, colors, allowCustom, size, className, style, "aria-label": ariaLabel, ...props }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
