"use client";
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { useCSSTransition } from "../transition/useCSSTransition.js";
/** @internal */ export const DEFAULT_RIPPLE_CLASSNAMES = {
    enter: "rmd-ripple--animating",
    enterActive: "rmd-ripple--scaling",
    enterDone: "rmd-ripple--animating rmd-ripple--scaling",
    exit: "rmd-ripple--animating rmd-ripple--scaling",
    exitActive: "rmd-ripple--fading"
};
/** @internal */ export const DEFAULT_RIPPLE_TIMEOUT = {
    enter: 150,
    exit: 300
};
/**
 * **Client Component**
 *
 * This component should only be used by the `RippleContainer` component.
 *
 * @internal
 */ export function Ripple(props) {
    const { className, timeout = DEFAULT_RIPPLE_TIMEOUT, classNames = DEFAULT_RIPPLE_CLASSNAMES, ripple, onEntered, onExited } = props;
    const { style, exiting } = ripple;
    const { elementProps, rendered } = useCSSTransition({
        appear: true,
        className: cnb("rmd-ripple", className),
        transitionIn: !exiting,
        timeout,
        classNames,
        onEntered () {
            onEntered(ripple);
        },
        onExited () {
            onExited(ripple);
        }
    });
    return /*#__PURE__*/ _jsx(_Fragment, {
        children: rendered && /*#__PURE__*/ _jsx("span", {
            style: style,
            ...elementProps
        })
    });
}

//# sourceMappingURL=Ripple.js.map