import * as React from 'react'; import { IconProps } from '../Icon'; import { OcThemeName } from '../ConfigProvider'; import { ButtonProps } from '../Button'; import { OcBaseProps } from '../OcBase'; import { ConfigContextProps } from '../ConfigProvider'; export declare enum PillIconAlign { Start = "start", End = "end" } export declare enum PillType { default = "default", closable = "closable", withButton = "withButton" } export declare enum PillSize { Large = "large", Medium = "medium", Small = "small", XSmall = "xsmall" } /** * Props for the close button */ export declare type closeButtonProps = Omit; /** * Props for the pill button shown on right of the label */ export declare type pillButtonProps = Omit; export declare type PillThemeName = 'red' | 'redOrange' | 'orange' | 'yellow' | 'yellowGreen' | 'green' | 'blueGreen' | 'blue' | 'blueViolet' | 'violet' | 'violetRed' | 'grey' | 'white' | 'aiAgent'; export interface PillProps extends OcBaseProps { /** * The pill icon alignment. * @default PillIconAlign.Left */ alignIcon?: PillIconAlign; /** * Props for the close button, * if type is set to PillType.closable */ closeButtonProps?: closeButtonProps & { getAriaLabel?: (label: string) => string; }; /** * Custom color for the pill */ color?: string; /** * Configure how contextual props are consumed */ configContextProps?: ConfigContextProps; /** * The pill disabled state * @default false */ disabled?: boolean; /** * The pill gradient state. * @default false */ gradient?: boolean; /** * Icon shown before the label */ iconProps?: IconProps; /** * Label of the pill */ label: string; /** * Maximum number of lines the pill label can have */ lineClamp?: number; /** * Callback called on click of the button right of the pill */ onClick?: React.MouseEventHandler; /** * Callback called on click of the close button */ onClose?: React.MouseEventHandler; /** * Props for the button on the right side of the pill * if type is set to PillType.withButton */ pillButtonProps?: pillButtonProps; /** * Size of the pill * @default PillType.Medium */ size?: PillSize; /** * Theme of the pill * @default blue */ theme?: OcThemeName | PillThemeName; /** * Type of the pill * @default PillType.default */ type?: PillType; }