import { type ButtonHTMLAttributes, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
import { type BackgroundColor } from "../cssUtils.js";
import { type PropsWithRef } from "../types.js";
declare module "react" {
    interface CSSProperties {
        "--rmd-chip-solid-background-color"?: string;
        "--rmd-chip-solid-disabled-background-color"?: string;
        "--rmd-chip-solid-color"?: string;
        "--rmd-chip-theme-background-color"?: string;
        "--rmd-chip-theme-color"?: string;
        "--rmd-chip-outline-background-color"?: string;
        "--rmd-chip-outline-color"?: string;
    }
}
/**
 * @remarks \@since 6.0.0 Renamed the `noninteractive` prop to
 * `noninteractable`.
 */
export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    /**
     * @defaultValue `"solid"`
     */
    theme?: "outline" | "solid";
    /**
     * Set this to `true` if the chip should gain additional box shadow while the
     * user is pressing down on the chip.
     *
     * @defaultValue `false`
     */
    raisable?: boolean;
    /**
     * @defaultValue `false`
     */
    disabled?: boolean;
    /**
     * When this is a boolean, a selected icon will be displayed before the
     * `children` and appear/disappear when `true`/`false`.
     *
     * @see {@link selectedIcon}
     * @see {@link selectedIconAfter}
     * @see {@link selectedThemed}
     */
    selected?: boolean;
    /**
     * Set this to `true` if the chip should change background color while
     * {@link selected} instead of displaying an icon. The default background
     * color is a lighter swatch of the theme primary color.
     *
     * @defaultValue `false`
     */
    selectedThemed?: boolean;
    /**
     * An optional className to provide only while {@link selected} is `true`.
     */
    selectedClassName?: string;
    /**
     * This will be ignored if {@link selected} is `undefined`.
     *
     * @defaultValue `getIcon("selected")`
     */
    selectedIcon?: ReactNode;
    /**
     * Set this to `true` if the {@link selectedIcon} should display as the
     * {@link rightAddon} instead of the {@link leftAddon}.
     *
     * @defaultValue `false`
     * @remarks \@since 6.0.0
     */
    selectedIconAfter?: boolean;
    /**
     * Set this to `true` if the {@link selectedIcon} should not animate and
     * instead apply `display: none`
     *
     * @defaultValue `false`
     */
    disableIconTransition?: boolean;
    /**
     * Set this to `true` to render the chip as a `<span>` instead of a button.
     *
     * @remarks
     * \@since 2.6.0
     * \@since 6.0.0 Renamed from `noninteractable`
     * @defaultValue `false`
     */
    noninteractive?: boolean;
    /**
     * An optional background color theme to use.
     *
     * @remarks \@since 6.0.0
     */
    backgroundColor?: BackgroundColor;
    /**
     * An optional icon, avatar, circular progress, or custom component to render
     * before the `children`. This will remove some of the leading horizontal
     * padding on the chip as well.
     */
    leftAddon?: ReactNode;
    /**
     * An optional icon, avatar, circular progress, or custom component to render
     * after the `children`. This will remove some of the trailing horizontal
     * padding on the chip as well.
     */
    rightAddon?: ReactNode;
    /**
     * Set this to true if the `children` should not be wrapped in a span to apply
     * the {@link chipContent} styles which allow for shrinking text and
     * truncating text with ellipsis.
     *
     * @defaultValue `false`
     */
    disableContentWrap?: boolean;
    /**
     * This will be ignored if {@link disableContentWrap} is `true`.
     *
     * @remarks \@since 6.0.0
     */
    contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
    /**
     * This will be ignored if {@link disableContentWrap} is `true`.
     */
    contentStyle?: CSSProperties;
    /**
     * This will be ignored if {@link disableContentWrap} is `true`.
     */
    contentClassName?: string;
}
/**
 * **Server Component**
 *
 * @example
 * Simple Example
 * ```tsx
 * import { Chip } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return <Chip>Content</Chip>;
 * }
 * ```
 *
 * @example
 * Outlined Example
 * ```tsx
 * import { Chip } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return <Chip theme="outline">Content</Chip>;
 * }
 * ```
 *
 * @example
 * Addons Example
 * ```tsx
 * import { Avatar, Chip } from "@react-md/core";
 * import AddCircleIcon from "@react-md/material-icons/AddCircleIcon";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <Chip
 *       leftAddon={
 *         <Avatar>
 *           <img src="https://i.pravatar.cc/40?img=3" alt="" />
 *         </Avatar>
 *       }
 *       rightAddon={<AddCircleIcon />}
 *     >
 *       Chip
 *     </Chip>
 *   );
 * }
 * ```
 *
 * @remarks \@since 6.0.0 Renamed the `noninteractable` prop to
 * `noninteractive`.
 */
export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
