import React from 'react';
import { FlintChip as FlintChipElement } from '@getufy/flint-ui/chip/flint-chip';
export interface FlintChipDeleteDetail {
    value: string;
}
/**
 * Chip: a compact element representing an input, attribute, or action.
 *
 * @slot (default) - Text content for the chip (alternative to the `label` prop).
 * @slot avatar - Avatar element shown at start.
 * @slot icon - Icon shown at start when no avatar.
 */
export interface FlintChipProps extends Omit<React.HTMLAttributes<FlintChipElement>, 'color'> {
    /** Text content displayed inside the chip. */
    label?: string;
    /**
     * Visual style variant of the chip.
     * Allowed values: 'filled' | 'outlined'
     */
    variant?: 'filled' | 'outlined';
    /**
     * Color theme applied to the chip.
     * Allowed values: 'default' | 'primary' | 'secondary'
     */
    color?: 'default' | 'primary' | 'secondary';
    /**
     * Size of the chip.
     * Allowed values: 'sm' | 'md' | 'lg'
     */
    size?: 'sm' | 'md' | 'lg';
    /** Whether the chip responds to click interactions. */
    clickable?: boolean;
    /** Whether the chip shows a delete icon. */
    deletable?: boolean;
    /** Disables the chip and prevents interaction. */
    disabled?: boolean;
    /**
     * Fired when a clickable chip is clicked.
     * DOM event: `flint-chip-click`
     */
    onFlintChipClick?: (event: CustomEvent) => void;
    /**
     * Fired when the chip's delete icon is clicked. detail: `{ value: string }`
     * DOM event: `flint-chip-delete`
     */
    onFlintChipDelete?: (event: CustomEvent<FlintChipDeleteDetail>) => void;
}
export declare const FlintChip: React.ForwardRefExoticComponent<FlintChipProps & React.RefAttributes<FlintChipElement>>;