import { type ReactNode } from "react";
import { type TextIconSpacingProps } from "../icon/TextIconSpacing.js";
import { type MenuItemProps } from "../menu/MenuItem.js";
/**
 * This icon is used while the option is unselected so that the selected and
 * unselected options have the same alignment.
 *
 * @since 6.0.0
 * @defaultValue `<span className="rmd-icon rmd-icon--svg />`
 */
export declare const DEFAULT_OPTION_UNSELECTED_ICON: import("react").JSX.Element;
/**
 * @since 6.0.0
 */
export interface OptionSelectedIconProps {
    /**
     * @defaultValue `getIcon("selected")`
     */
    selectedIcon?: ReactNode;
    /**
     * @see {@link DEFAULT_OPTION_UNSELECTED_ICON}
     * @defaultValue `<span className="rmd-icon rmd-icon--svg" />`
     */
    unselectedIcon?: ReactNode;
    /**
     * Set this to `true` of the {@link selectedIcon}/{@link unselectedIcon}
     * should appear as the {@link rightAddon} instead of the {@link leftAddon}.
     *
     * @defaultValue `false`
     */
    selectedIconAfter?: boolean;
    /**
     * Set this to `true` to remove selected icon behavior from the `Option`.
     *
     * @defaultValue `false`
     */
    disableSelectedIcon?: boolean;
}
/**
 * @since 6.0.0 removed the `selected` and `focused` props.
 * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
 * `selectedIconAfter`, and `iconSpacingProps` props.
 */
export interface OptionProps extends MenuItemProps, OptionSelectedIconProps {
    /**
     * @defaultValue `"option"`
     */
    role?: string;
    value: string | number | object;
    /**
     * An optional className to apply only while the current option is selected to
     * override any global default selected styles. It is recommended to update
     * the `react-md.$form-option-selected-styles` map first to change selected
     * style globally and then any one-off customizations through this prop.
     *
     * @example Global Change
     * ```scss
     * @use "@react-md/core" with (
     *   // these are the defaults
     *   $form-option-selected-styles: (
     *     --rmd-icon-color: currentcolor,
     *     background-color: colors.$blue-900,
     *     color: colors.$white,
     *   ),
     *
     *   // so if you wanted to remove the styles globally
     *   $form-option-selected-styles: (),
     * );
     * ```
     *
     * This really results in something like:
     * ```ts
     * className="rmd-list-item ... rmd-menu-item ... rmd-option rmd-option--selected ${selectedClassName}"
     * ```
     */
    selectedClassName?: string;
    /**
     * Since the `selectedIcon`/`unselectedIcon` are rendered as
     * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be
     * wrapped in the {@link TextIconSpacing} component to maintain the correct
     * spacing. You can use this prop to provide any additional configuration to
     * the spacing.
     *
     * @example
     * ```tsx
     * <Option
     *   leftAddon={<Avatar>A</Avatar>}
     *   leftAddonType="avatar"
     *   value={0}
     *   textIconSpacingProps={{
     *     beforeClassName: "my-custom-class-name",
     *   }}
     * >
     *   Some Content
     * </Option>
     * ```
     */
    textIconSpacingProps?: Omit<TextIconSpacingProps, "icon" | "children">;
}
/**
 * **Client Component**
 *
 * This component is a wrapper around the {@link MenuItem} to implement custom
 * select option behavior.
 *
 * @see {@link https://react-md.dev/components/select | Select Demos}
 * @since 6.0.0 removed the `selected` and `focused` props.
 * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
 * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.
 */
export declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLLIElement>>;
