import { BoxProps } from '@workday/canvas-kit-react/layout';
export interface PillProps extends BoxProps {
    /**
     * Defines what kind of pill to render stylistically and its interaction states
     * @default 'default'
     */
    variant?: 'readOnly' | 'removable';
    /**
     * Determines the max width of the pill. If the pill text is longer than the max width,
     * text will be truncated and a tooltip will show the rest of the content when hovered over
     */
    maxWidth?: string | number;
}
export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<{
    variant: {
        readOnly: {
            [x: string]: string | {
                [x: string]: "--cnvs-sys-color-bg-default" | "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
                borderColor: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
            } | {
                [x: string]: "--cnvs-sys-color-bg-default";
                borderColor?: undefined;
            };
            border: string;
            cursor: string;
            '&:hover, &.hover': {
                [x: string]: "--cnvs-sys-color-bg-default" | "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
                borderColor: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
            };
            '&:focus-visible, &.focus': {
                [x: string]: "--cnvs-sys-color-bg-default";
            };
            '&:active, &.active': {
                [x: string]: "--cnvs-sys-color-bg-default";
            };
            '&:disabled, &.disabled': {
                [x: string]: "--cnvs-sys-color-bg-default";
            };
        };
        removable: {
            '&:focus-visible, &.focus': {
                [x: string]: string;
                boxShadow: string;
            };
            '&:hover, &.hover': {
                [x: string]: string;
            };
            '&:active, &.active': {
                [x: string]: string;
            };
            '&:disabled, &.disabled': {
                [x: string]: string;
            };
            cursor: string;
            overflow: string;
            position: string;
        };
    };
}, {}, {
    maxWidth: string;
}, import("@workday/canvas-kit-styling").Stencil<{
    size: {
        large: {
            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
            height: "var(--cnvs-sys-size-lg, 3rem)";
            paddingInline: "var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem))";
            minWidth: "var(--cnvs-base-size-1300, 6.5rem)";
        };
        medium: {
            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
            paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
            gap: "var(--cnvs-base-size-75, 0.375rem)";
            minWidth: "var(--cnvs-base-size-1100, 5.5rem)";
        };
        small: {
            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
            paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))";
            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
            minWidth: "var(--cnvs-base-size-900, 4.5rem)";
        };
        extraSmall: {
            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
            height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
            paddingInline: "var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem))";
            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
            minWidth: string;
        };
    };
    grow: {
        true: {
            width: string;
            maxWidth: string;
        };
    };
    iconPosition: {
        only: {
            padding: number;
        };
        start: {};
        end: {};
    };
}, {}, {
    background: string;
    border: string;
    boxShadowInner: string;
    boxShadowOuter: string;
    label: string;
    opacity: string;
    borderRadius: string;
}, never, never>, never>;
/**
 * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
 * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
 * (icons or avatars) are intended to be descriptive, helping support the label. They should not
 * receive focus.
 *
 * `Pill` is the container component. It also provides a React context model for its subcomponents.
 * Based on the `variant` prop this component will render different styled `Pill`s.
 *
 * Example of read only:
 *
 * ```tsx
 * <Pill variant="readOnly">This is a read only</Pill>
 * ```
 *
 * Example of interactive:
 *
 * ```tsx
 * <Pill onClick={() => console.log('clicked')}>
 *   <Pill.Avatar /> Regina Skeltor
 * </Pill>
 * ```
 *
 * Example of removable:
 *
 * ```tsx
 * <Pill variant="removable">
 *   <Pill.Avatar /> Regina Skeltor
 *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
 * </Pill>
 * ```
 *
 * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
 * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
 * intentional click target that prevents users from accidentally deleting an item.
 *
 * ```tsx
 * <Pill variant="removable">
 *   Shoes
 *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
 * </Pill>
 * ```
 */
export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
    disabled: boolean;
    id: string;
}> & {} & {}, {
    state: {
        id: string;
        disabled: boolean;
    };
    events: {};
}> & {
    /**
     * This component renders an avatar. It supports all props of the `Avatar` component.
     *
     * ```tsx
     * <Pill variant="removable">
     *   <Pill.Avatar url={avatarUrl} />
     *    <Pill.Label>Regina Skeltor</Pill.Label>
     *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
     * </Pill>
     * ```
     */
    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PillAvatar").PillAvatarProps, {
        state: {
            id: string;
            disabled: boolean;
        };
        events: {};
    }>;
    /**
     * This component renders its `children` as the count.
     *
     * ```tsx
     * <Pill onClick={() => console.warn('clicked')}>
     *    <Pill.Label>Shoes</Pill.Label>
     *   <Pill.Count>30</Pill.Count>
     * </Pill>
     * ```
     */
    Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
    /**
     * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
     * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
     *
     * ```tsx
     * <Pill onClick={() => console.warn('clicked')}>
     *   <Pill.Icon aria-label='Add user' />
     *   <Pill.Label>Regina Skeltor</Pill.Label>
     * </Pill>
     * ```
     */
    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
        state: {
            id: string;
            disabled: boolean;
        };
        events: {};
    }>;
    /**
     * This component renders a custom icon button. It is only intended to be used with the
     * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
     * an icon to the `icon` prop.
     *
     * ```tsx
     * <Pill variant="removable">
     *   <Pill.Label>Pink Shirts</Pill.Label>
     *   <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
     * </Pill>
     * ```
     */
    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
        state: {
            id: string;
            disabled: boolean;
        };
        events: {};
    }>;
    /**
     * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
     * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
     *
     * ```tsx
     * <Pill variant="readOnly">
     *   <Pill.Label>Read-only</Pill.Label>
     * </Pill>
     * ```
     */
    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
        state: {
            id: string;
            disabled: boolean;
        };
        events: {};
    }>;
};
//# sourceMappingURL=Pill.d.ts.map