import * as React from 'react';

/** Color bag for the live preview card (already resolved to the active mode). */
interface PalettePreview {
    bg: string;
    surface: string;
    fg: string;
    fgMuted: string;
    accent: string;
    accentFg: string;
    border: string;
}
/** One selectable palette option, with colors already resolved to the active mode. */
interface PaletteOption {
    id: string;
    label: string;
    /** Ordered swatch colors shown as dots — canonical order: [bg, surface, accent, fg]. */
    swatches: string[];
    preview: PalettePreview;
}
interface PalettePickerProps {
    /** Selected palette id. Caller passes a valid id (fails closed caller-side). */
    value?: string;
    onChange(id: string): void;
    options: PaletteOption[];
    'aria-label'?: string;
    'aria-labelledby'?: string;
    className?: string;
}
declare function PalettePicker({ value, onChange, options, className, ...aria }: PalettePickerProps): React.JSX.Element | null;

export { type PaletteOption, PalettePicker, type PalettePickerProps, type PalettePreview };