49 lines
1.6 KiB
Plaintext
49 lines
1.6 KiB
Plaintext
"use client";
|
|
|
|
// src/ripple.tsx
|
|
import { AnimatePresence, m, LazyMotion } from "framer-motion";
|
|
import { clamp } from "@heroui/shared-utils";
|
|
import { Fragment, jsx } from "react/jsx-runtime";
|
|
var domAnimation = () => import("@heroui/dom-animation").then((res) => res.default);
|
|
var Ripple = (props) => {
|
|
const { ripples = [], motionProps, color = "currentColor", style, onClear } = props;
|
|
return /* @__PURE__ */ jsx(Fragment, { children: ripples.map((ripple) => {
|
|
const duration = clamp(0.01 * ripple.size, 0.2, ripple.size > 100 ? 0.75 : 0.5);
|
|
return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
|
|
m.span,
|
|
{
|
|
animate: { transform: "scale(2)", opacity: 0 },
|
|
className: "heroui-ripple",
|
|
exit: { opacity: 0 },
|
|
initial: { transform: "scale(0)", opacity: 0.35 },
|
|
style: {
|
|
position: "absolute",
|
|
backgroundColor: color,
|
|
borderRadius: "100%",
|
|
transformOrigin: "center",
|
|
pointerEvents: "none",
|
|
overflow: "hidden",
|
|
inset: 0,
|
|
zIndex: 0,
|
|
top: ripple.y,
|
|
left: ripple.x,
|
|
width: `${ripple.size}px`,
|
|
height: `${ripple.size}px`,
|
|
...style
|
|
},
|
|
transition: { duration },
|
|
onAnimationComplete: () => {
|
|
onClear(ripple.key);
|
|
},
|
|
...motionProps
|
|
}
|
|
) }) }, ripple.key);
|
|
}) });
|
|
};
|
|
Ripple.displayName = "HeroUI.Ripple";
|
|
var ripple_default = Ripple;
|
|
|
|
export {
|
|
ripple_default
|
|
};
|