@yamada-ui/react/dist/esm/components/ripple/ripple.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { createComponent } from "../../core/components/create-component.js";
import { motion as motion$1 } from "../motion/factory.js";
import { rippleStyle } from "./ripple.style.js";
import { Fragment, jsx } from "react/jsx-runtime";
import { AnimatePresence } from "motion/react";

//#region src/components/ripple/ripple.tsx
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
const { PropsContext: RipplePropsContext, usePropsContext: useRipplePropsContext, withContext } = createComponent("ripple", rippleStyle);
/**
* `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.
*
* @see https://yamada-ui.com/docs/components/ripple
*/
const Ripple = withContext(({ style, color = "currentColor", disabled, ripples, onAnimationComplete, onClear,...rest }) => {
	if (disabled) return null;
	return /* @__PURE__ */ jsx(Fragment, { children: ripples.map(({ key, size, x, y }) => {
		const duration = clamp(.01 * size, .2, size > 100 ? .75 : .5);
		return /* @__PURE__ */ jsx(AnimatePresence, {
			mode: "popLayout",
			children: /* @__PURE__ */ jsx(motion$1.span, {
				style: {
					height: `${size}px`,
					left: x,
					pointerEvents: "none",
					position: "absolute",
					top: y,
					transformOrigin: "center",
					width: `${size}px`,
					...style
				},
				animate: {
					opacity: 0,
					transform: "scale(2)"
				},
				bgColor: color,
				exit: { opacity: 0 },
				initial: {
					opacity: .35,
					transform: "scale(0)"
				},
				transition: { duration },
				...rest,
				onAnimationComplete: (0, utils_exports.handlerAll)(onAnimationComplete, () => onClear(key))
			})
		}, key);
	}) });
})();

//#endregion
export { Ripple, RipplePropsContext, useRipplePropsContext };
//# sourceMappingURL=ripple.js.map