import { type ButtonHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
import { type ComponentWithRippleProps } from "../interaction/types.js";
import { type BaseMaxWidthTransitionOptions } from "../transition/useMaxWidthTransition.js";
import { type BaseSegmentedButtonClassNameOptions } from "./segmentedButtonStyles.js";
/**
 * @since 6.0.0
 * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSS module
 * augmentation.
 * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions for CSSProperties
 * module augmentation.
 */
export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseMaxWidthTransitionOptions, BaseSegmentedButtonClassNameOptions, ComponentWithRippleProps {
    ref?: Ref<HTMLButtonElement>;
    /** @defaultValue `getIcon("selected")` */
    selectedIcon?: ReactNode;
    /**
     * Set this to `true` to not render the {@link selectedIcon} when
     * {@link selected} is `true`.
     *
     * @defaultValue `false`
     */
    disableSelectedIcon?: boolean;
    /**
     * Set this to `true` to disable the {@link selectedIcon} enter/exit
     * transition and instead just use `display: none`.
     *
     * @defaultValue `false`
     */
    disableSelectedTransition?: boolean;
    /**
     * An optional addon to render before the {@link children} and after the
     * {@link selectedIcon}. This is only useful when rendering text children so
     * it can appear above the interaction states.
     */
    leftAddon?: ReactNode;
    /**
     * An optional addon to render after the {@link children}. This is only useful
     * when rendering text children so it can appear above the interaction states.
     */
    rightAddon?: ReactNode;
}
/**
 * **Client Component**
 *
 * @example Simple Example
 * ```tsx
 * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
 * import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
 * import type { ReactElement } from "react";
 * import { useState } from "react";
 *
 * function Example(): ReactElement {
 *   const [value, setValue] = useState("a");
 *   return (
 *     <SegmentedButtonContainer>
 *       <SegmentedButton
 *         onClick={() => setValue("a")}
 *         selected={value === "a"}
 *       >
 *         First
 *       </SegmentedButton>
 *       <SegmentedButton
 *         onClick={() => setValue("b")}
 *         selected={value === "b"}
 *       >
 *         Second
 *       </SegmentedButton>
 *       <SegmentedButton
 *         onClick={() => setValue("c")}
 *         selected={value === "c"}
 *         disableSelectedIcon
 *       >
 *         Third
 *       </SegmentedButton>
 *     </SegmentedButtonContainer>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}
 * @since 6.0.0
 */
export declare function SegmentedButton(props: SegmentedButtonProps): ReactElement;