import { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from 'react';
import { AvatarProps } from '../Avatar';
import { LayoutUtilProps, Size } from '../../types';
/**
 * Props for the Chip component
 * @extends ComponentPropsWithoutRef<"span">
 * @extends Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink">
 */
export type ChipProps = Omit<ComponentPropsWithoutRef<"span">, "prefix"> & Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink"> & {
    /**
     * The text that displays in the chip.
     */
    label: string;
    /**
     * The size of the chip
     * @default medium
     */
    size?: Extract<Size, "small" | "medium">;
    /**
     * Color of the Chip
     */
    color?: string;
    /**
     * Callback for when the Chip is clicked
     *
     * @remarks
     * Adding this will make Chip focusable
     */
    onClick?: (e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
    /**
     * Called when the component is closed. If supplied, a close button will be rendered.
     * @returns void
     */
    onClose?: (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
    /**
     * Wraps text when it overflows
     */
    textWrap?: boolean;
    /**
     * Content displayed in the chip, before the text.
     */
    prefix?: ReactNode;
    /**
     * Image URL to display in an avatar before the chip text.
     */
    avatar?: AvatarProps["image"];
};
/**
 * Chip component for displaying compact information or tags.
 *
 * Features:
 * - Configurable sizes (small, medium)
 * - Custom color support with automatic contrast calculation
 * - Optional click handler for interactive chips
 * - Optional close button for removable chips
 * - Text wrapping support for long labels
 * - Full accessibility support with ARIA attributes
 * - Keyboard navigation (Enter to click, Delete/Backspace to close)
 * - Theme-aware color adaptation
 * - Layout utility props for positioning and spacing
 *
 * @example
 * <Chip
 *   label="JavaScript"
 *   color="#f7df1e"
 *   onClose={(e) => console.log('Chip removed')}
 *   onClick={(e) => console.log('Chip clicked')}
 * />
 */
export declare const Chip: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "prefix"> & Omit<LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
    /**
     * The text that displays in the chip.
     */
    label: string;
    /**
     * The size of the chip
     * @default medium
     */
    size?: Extract<Size, "small" | "medium">;
    /**
     * Color of the Chip
     */
    color?: string;
    /**
     * Callback for when the Chip is clicked
     *
     * @remarks
     * Adding this will make Chip focusable
     */
    onClick?: (e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
    /**
     * Called when the component is closed. If supplied, a close button will be rendered.
     * @returns void
     */
    onClose?: (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
    /**
     * Wraps text when it overflows
     */
    textWrap?: boolean;
    /**
     * Content displayed in the chip, before the text.
     */
    prefix?: ReactNode;
    /**
     * Image URL to display in an avatar before the chip text.
     */
    avatar?: AvatarProps["image"];
} & import('react').RefAttributes<HTMLSpanElement>>;