import React from 'react';
import type { Colors, CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
import type { GetRef } from '../utils/refs';
import type { BuiltInTooltipConfig } from './tooltip/types';
interface ChipProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
    children?: React.ReactNode;
    color?: Colors;
    getRef?: GetRef<HTMLSpanElement>;
    id?: string;
    outline?: boolean;
    textColor?: Colors;
    title?: string;
    tooltipConfig?: Partial<Omit<BuiltInTooltipConfig, 'tooltipContent'>>;
    variant?: 'legacy' | 'modern';
    /**
     * For modern variant only
     */
    bgColor?: Colors;
    icon?: React.ReactNode;
    maxCharacters?: number;
    actionConfig?: {
        disabled?: boolean;
        onClick: React.MouseEventHandler<HTMLSpanElement>;
        hoverBgColor: Colors;
        activeBgColor: Colors;
        icon: React.ReactNode;
    };
}
/**
 * A versatile component for displaying attributes in a compact form. Supports both
 * static display and interactive button functionality with optional text truncation.
 *
 * ## Variants
 *
 * - **Legacy**: Traditional uppercase styling with medium radius
 * - **Modern**: Contemporary styling with smaller text and radius (recommended)
 *
 * ## Color Behavior
 *
 * With no color specified, the `<Chip />` bases its colors off of the text
 * color inherited by CSS. However, there's a slight difference between the
 * default and the `outline` variants:
 *
 * **Default**: With no color specified, the background color will match the
 * inherited text color and the text color will default to `invert`. If the
 * default text color is not suitable for legibility or accessibility purposes, an
 * explicit text color will need to be set with the `textColor` prop. For
 * example, if you're placing a `<Chip />` in an element with white text (such
 * as `<Button color="dscout" />`) you'll need to specify a text color
 * or else it won't be visible.
 *
 * **Outline**: With no color specified, the outline color _and_ the text color
 * will match the inherited text color. If desired, the text color can be set
 * explicitly with `textColor` prop, but that's an unlikely use case.
 *
 * ## Interactive Functionality
 *
 * The `actionConfig` prop transforms the chip into a semantic `button` element
 * with hover and active states. When provided, it must include:
 * - `onClick`: Click handler function
 * - `hoverBgColor`: Background color on hover
 * - `activeBgColor`: Background color when pressed
 * - `icon`: Icon to display (typically a close or action icon)
 * - `disabled` (optional): Disables interaction when true
 *
 * ## Text Truncation
 *
 * The `maxCharacters` prop enables automatic text truncation with tooltip support.
 * When the chip's text content exceeds the specified character limit, it will be
 * truncated with "..." and a tooltip will show the full content on hover.
 *
 * - Only works with string `children` content
 * - Use `tooltipConfig` to customize tooltip placement, z-index, etc.
 * - When truncation is active, the `getRef` prop cannot be used as the ref is
 *   managed by the tooltip container
 *
 * @example
 * ```tsx
 * // Basic chip
 * <Chip variant="modern" bgColor="blue-100" textColor="blue-700">
 *   Tag Label
 * </Chip>
 *
 * // Interactive chip
 * <Chip
 *   variant="modern"
 *   bgColor="gray-100"
 *   actionConfig={{
 *     onClick: handleRemove,
 *     hoverBgColor: "gray-200",
 *     activeBgColor: "gray-300",
 *     icon: <CloseIcon />
 *   }}
 * >
 *   Removable Tag
 * </Chip>
 *
 * // Truncated chip
 * <Chip
 *   variant="modern"
 *   maxCharacters={20}
 *   tooltipConfig={{ placement: "top" }}
 * >
 *   Very long chip label that will be truncated
 * </Chip>
 * ```
 */
export declare function Chip({ _modifierClass, actionConfig, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, color, bgColor, getRef, icon, id, margin, maxCharacters, outline, textColor, tooltipConfig, title, variant, ...rest }: ChipProps): React.JSX.Element;
export {};