import React from 'react';
import { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';

type PillVariants = 'idle' | 'active' | 'deleted';

type PillInternalProps = CommonProps & {
    /**
     * Mark the pill as draggable. Drag icon is rendered when this property is set.
     */
    isDraggable?: boolean;
    /**
     * Text that will be shown on the pill
     */
    label: string;
    /**
     * Function that handles when the close icon is clicked. Close icon visibility depends on if this property is set.
     */
    onClose?: () => void;
    /**
     * Aria label for close button
     * @default 'Close'
     */
    closeButtonAriaLabel?: string;
    /**
     * Function that handles when the pill is dragged. Drag icon is rendered when this property is set.
     */
    onDrag?: () => void;
    /**
     * Custom component to be used as handler for the drag functionality.
     */
    dragHandleComponent?: React.ReactNode;
    /**
     * Determines style variation of Pill component
     * @default idle
     */
    variant?: PillVariants;
};
type PillProps = PropsWithHTMLElement<PillInternalProps, 'div'>;
declare const Pill: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, never>, "label" | "onDrag" | keyof CommonProps | "isDraggable" | "onClose" | "closeButtonAriaLabel" | "dragHandleComponent" | "variant"> & CommonProps & {
    /**
     * Mark the pill as draggable. Drag icon is rendered when this property is set.
     */
    isDraggable?: boolean;
    /**
     * Text that will be shown on the pill
     */
    label: string;
    /**
     * Function that handles when the close icon is clicked. Close icon visibility depends on if this property is set.
     */
    onClose?: () => void;
    /**
     * Aria label for close button
     * @default 'Close'
     */
    closeButtonAriaLabel?: string;
    /**
     * Function that handles when the pill is dragged. Drag icon is rendered when this property is set.
     */
    onDrag?: () => void;
    /**
     * Custom component to be used as handler for the drag functionality.
     */
    dragHandleComponent?: React.ReactNode;
    /**
     * Determines style variation of Pill component
     * @default idle
     */
    variant?: PillVariants;
} & React.RefAttributes<HTMLDivElement>>;

export { Pill, type PillProps };