import * as React from 'react';
import { type VariantProps } from 'class-variance-authority';
import { type Color } from '../../lib/color';
declare const colorSwatchVariants: (props?: ({
    size?: "sm" | "md" | "lg" | "2xs" | "xs" | "xl" | "3xs" | null | undefined;
    shape?: "circle" | "rounded" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
type ColorSwatchPresetSize = NonNullable<VariantProps<typeof colorSwatchVariants>['size']>;
type ColorSwatchShape = NonNullable<VariantProps<typeof colorSwatchVariants>['shape']>;
interface ColorSwatchProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
    /**
     * Color to show. Pass a `Color` or any CSS color string. Inside a `ColorPicker` it
     * can be left off, and the swatch previews whatever the picker currently holds.
     */
    color?: Color | string;
    /**
     * Name announced for the color, in place of the description built from the color
     * itself. Use it for the name your palette gives the color, e.g. `'Fire truck red'`.
     */
    colorName?: string;
    /**
     * Rounded square or full circle.
     * @default 'rounded'
     */
    shape?: ColorSwatchShape;
    /**
     * A preset scale, or a pixel number for an exact size.
     * @default 'md'
     */
    size?: ColorSwatchPresetSize | number;
    /**
     * Back a translucent color with a checkerboard, so it reads as translucent rather
     * than as the flat color it composites to. Turn it off to let the swatch blend into
     * whatever sits behind it. An opaque color covers it either way.
     * @default true
     */
    checkerboard?: boolean;
    /**
     * Dim the swatch and swap the color for a flat muted fill.
     * @default false
     */
    disabled?: boolean;
}
declare function ColorSwatch({ color, colorName, shape, size, checkerboard, disabled: disabledProp, className, style, children, 'aria-label': ariaLabel, ...props }: ColorSwatchProps): React.JSX.Element;
export { ColorSwatch };
export type { ColorSwatchProps };
//# sourceMappingURL=color-swatch.d.ts.map