Ripple Press

"use client";

import { useRef, useState, type PointerEvent, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface RipplePressProps {
  children: ReactNode;
  /** Ripple color token. */
  tone?: "current" | "primary";
  className?: string;
}

type Ripple = { id: number; x: number; y: number; size: number };

/** Subtle material-like ripple expanding from the press point inside its (rounded) child. Fades out, never blocks clicks. */
export function RipplePress({ children, tone = "current", className }: RipplePressProps) {
  const [ripples, setRipples] = useState<Ripple[]>([]);
  const next = useRef(0);

  const onPointerDown = (e: PointerEvent<HTMLSpanElement>) => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const r = e.currentTarget.getBoundingClientRect();
    const size = Math.max(r.width, r.height) * 2.2;
    const id = next.current++;
    setRipples((rs) => [...rs, { id, x: e.clientX - r.left - size / 2, y: e.clientY - r.top - size / 2, size }]);
    window.setTimeout(() => setRipples((rs) => rs.filter((it) => it.id !== id)), 650);
  };

  return (
    <span className={cn("relative isolate inline-flex overflow-hidden rounded-da-md", className)} onPointerDown={onPointerDown}>
      {children}
      <span aria-hidden className="pointer-events-none absolute inset-0 z-10">
        {ripples.map((r) => (
          <span
            key={r.id}
            className={cn("minimal-ripple absolute rounded-full", tone === "primary" ? "bg-da-primary/25" : "bg-current opacity-20")}
            style={{ left: r.x, top: r.y, width: r.size, height: r.size }}
          />
        ))}
      </span>
      <style href="minimal-ripple" precedence="default">{`
        @keyframes minimal-ripple { from { scale: 0; opacity: .35 } to { scale: 1; opacity: 0 } }
        .minimal-ripple { animation: minimal-ripple .6s cubic-bezier(.16,1,.3,1) forwards }
      `}</style>
    </span>
  );
}

export default RipplePress;