import React from "react";
export declare const MAX_VARIABLE_LENGTH = 50;
export declare const MAX_DISPLAY_LENGTH = 24;
export interface VariableColors {
    bgColor: string;
    borderColor: string;
    iconColor: string;
    textColor: string;
}
export interface VariableChipBaseProps {
    /** The variable name/id */
    variableId: string;
    /** Whether the variable is currently invalid */
    isInvalid: boolean;
    /** Called when attributes should be updated */
    onUpdateAttributes: (attrs: {
        id: string;
        isInvalid: boolean;
    }) => void;
    /** Called when the node should be deleted */
    onDelete: () => void;
    /** Icon component to render */
    icon: React.ReactNode;
    /** Optional value to display (e.g., for variables with known values) */
    value?: string;
    /** Whether to use single-click (true) or double-click (false) to edit */
    singleClickToEdit?: boolean;
    /** Additional class names for the outer span */
    className?: string;
    /** Override text color (e.g., for button context) */
    textColorOverride?: string;
    /** Custom color getter function (kept for API compatibility, colors handled by CSS) */
    getColors?: (isInvalid: boolean, hasValue: boolean) => VariableColors;
    /** Whether the chip is read-only (prevents editing) */
    readOnly?: boolean;
    /** Formatting styles derived from TipTap marks (bold, italic, underline, strikethrough) */
    formattingStyle?: React.CSSProperties;
    /** Whether the chip is within the current text selection */
    isSelected?: boolean;
    /** Called when the chip is clicked for selection (not editing) */
    onSelect?: () => void;
    /** Called after editing is committed (suggestion selected or blur confirmed) to restore editor focus */
    onCommit?: () => void;
    /** Whether this variable chip is inside a list node with a loop configured */
    isInsideLoop?: boolean;
}
export declare const VariableChipBase: React.FC<VariableChipBaseProps>;