"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { Tooltip } from "../tooltip/Tooltip.js";
import { bem } from "../utils/bem.js";
const styles = bem("rmd-slider-tooltip");
const HORIZONTAL_CLASS_NAMES = {
    enter: "rmd-slider-tooltip--h-off",
    enterActive: "rmd-slider-tooltip--h-on rmd-slider-tooltip--animate",
    exit: "rmd-slider-tooltip--animate",
    exitActive: "rmd-slider-tooltip--h-off"
};
const VERTICAL_CLASS_NAMES = {
    enter: "rmd-slider-tooltip--v-off",
    enterActive: "rmd-slider-tooltip--v-on rmd-slider-tooltip--animate",
    exit: "rmd-slider-tooltip--animate",
    exitActive: "rmd-slider-tooltip--v-off"
};
/**
 * **Client Component**
 *
 * This component creates the "discrete" slider thumb value by rendering a
 * tooltip when needed.
 *
 * @internal
 * @remarks
 * \@since 2.5.0
 * \@since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.
 */ export function SliderValueTooltip(props) {
    const { index, animate, vertical, className, children, classNames = vertical ? VERTICAL_CLASS_NAMES : HORIZONTAL_CLASS_NAMES, ...remaining } = props;
    return /*#__PURE__*/ _jsx(Tooltip, {
        dense: true,
        disablePortal: true,
        textOverflow: "nowrap",
        className: cnb(styles({
            h: !vertical,
            v: vertical
        }), animate && "rmd-slider-thumb--animate", `rmd-slider-thumb--${vertical ? "v" : "h"}${index}`, className),
        classNames: classNames,
        ...remaining,
        children: children
    });
}

//# sourceMappingURL=SliderValueTooltip.js.map