"use client";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { getIcon } from "../icon/iconConfig.js";
import { useElementInteraction } from "../interaction/useElementInteraction.js";
import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
import { useMaxWidthTransition } from "../transition/useMaxWidthTransition.js";
import { segmentedButton } from "./segmentedButtonStyles.js";
/**
 * **Client Component**
 *
 * @example
 * Simple Example
 * ```tsx
 * import {
 *   SegmentedButton,
 *   SegmentedButtonContainer,
 * } from "@react-md/core";
 * 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>
 *   );
 * }
 * ```
 *
 * @remarks \@since 6.0.0
 */ export const SegmentedButton = /*#__PURE__*/ forwardRef(function SegmentedButton(props, ref) {
    const { className, type = "button", leftAddon, rightAddon, children: propChildren, selected, selectedIcon: propSelectedIcon, selectedClassName, disableSelectedIcon, disableSelectedTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, disabled, ...remaining } = props;
    const children = useHigherContrastChildren(propChildren);
    const selectedIconNode = getIcon("selected", propSelectedIcon);
    const selectedIcon = useMaxWidthTransition({
        element: selectedIconNode,
        transitionIn: !!selected,
        disabled: disableSelectedIcon,
        disableTransition: disableSelectedTransition
    });
    const { pressedClassName, handlers, ripples } = useElementInteraction({
        onBlur,
        onClick,
        onKeyDown,
        onKeyUp,
        onMouseDown,
        onMouseUp,
        onMouseLeave,
        onDragStart,
        onTouchStart,
        onTouchEnd,
        onTouchMove,
        disabled
    });
    return /*#__PURE__*/ _jsxs("button", {
        ...remaining,
        ...handlers,
        "aria-pressed": selected,
        ref: ref,
        type: type,
        disabled: disabled,
        className: segmentedButton({
            className,
            selected,
            selectedClassName,
            pressedClassName
        }),
        children: [
            !disableSelectedIcon && selectedIcon,
            leftAddon,
            children,
            rightAddon,
            ripples
        ]
    });
});

//# sourceMappingURL=SegmentedButton.js.map