"use client";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { useElementInteraction } from "../interaction/useElementInteraction.js";
import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { tab } from "./tabStyles.js";
/**
 * **Client Component**
 *
 * This component should usually be used with the `TabsList` component and
 * `useTabs` hook.
 *
 * @see {@link useTabs}
 *
 * @since 6.0.0
 */ export function Tab(props) {
    const { id: propId, as: Component = "button", active, activeIndicator, verticalActiveIndicator, icon, iconAfter, stacked, className, children: propChildren, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, ...remaining } = props;
    const { disabled } = props;
    const id = useEnsuredId(propId, "tab");
    const { activeDescendantId } = useKeyboardMovementContext();
    const { ripples, handlers } = useElementInteraction({
        onBlur,
        onClick,
        onKeyDown,
        onKeyUp,
        onMouseDown,
        onMouseUp,
        onMouseLeave,
        onDragStart,
        onTouchStart,
        onTouchEnd,
        onTouchMove,
        disabled
    });
    const isLink = Component !== "button";
    const children = useHigherContrastChildren(propChildren);
    let buttonOnlyProps;
    if (!isLink) {
        buttonOnlyProps = {
            type: "button"
        };
    }
    return /*#__PURE__*/ _jsxs(Component, {
        ...remaining,
        ...buttonOnlyProps,
        ...handlers,
        "aria-selected": active,
        id: id,
        role: "tab",
        tabIndex: id === activeDescendantId ? 0 : -1,
        className: tab({
            className,
            active,
            isLink,
            stacked: !!icon && stacked,
            disabled,
            reversed: !!icon && iconAfter,
            activeIndicator,
            verticalActiveIndicator
        }),
        children: [
            icon,
            children,
            ripples
        ]
    });
}

//# sourceMappingURL=Tab.js.map