@faiz-ui/ripple/dist/chunk-JA6TZREN.mjs

Ripple effect

"use client";
import {
  useRipple
} from "./chunk-LAJ2Y27M.mjs";

// src/ripple.tsx
import { forwardRef } from "@faiz-ui/system";
import { animated, useSpring } from "@react-spring/web";
import { Fragment, jsx } from "react/jsx-runtime";
var RippleItem = (props) => {
  const { ripple, color, onClear } = props;
  const rippleSprings = useSpring({
    from: { opacity: 0.5, transform: "scale(0)" },
    to: { opacity: 0, transform: "scale(1)" },
    onRest: () => onClear(ripple.key)
  });
  return /* @__PURE__ */ jsx(
    animated.span,
    {
      style: {
        position: "absolute",
        backgroundColor: color,
        borderRadius: "100%",
        transformOrigin: "center",
        pointerEvents: "none",
        zIndex: 10,
        cursor: "pointer",
        width: ripple.size + "px",
        height: ripple.size + "px",
        left: ripple.x + "px",
        top: ripple.y + "px",
        ...rippleSprings
      }
    },
    ripple.key
  );
};
var Ripple = forwardRef((props, ref) => {
  const { ripples, color, onClear } = useRipple({ ...props, ref });
  return /* @__PURE__ */ jsx(Fragment, { children: ripples.map((ripple) => /* @__PURE__ */ jsx(RippleItem, { color, ripple, onClear }, ripple.key)) });
});
Ripple.displayName = "Ripple";
var ripple_default = Ripple;

export {
  ripple_default
};