fix(drip): time to remove drips

packages/components/drip/src/use-drip.ts

@@ -1,17 +1,15 @@
-import {Timer} from "@nextui-org/shared-utils";
 import {MouseEvent, CSSProperties, useRef, useState} from "react";
 
 export type DripInstance = {
   key: number;
   style: CSSProperties;
+  "data-visible"?: boolean;
 };
 
 export function useDrip() {
   const [drips, setDrips] = useState<DripInstance[]>([]);
   const nextKey = useRef(0);
 
-  const dripTimer = useRef<Timer>();
-
   const onClick = (event: MouseEvent<HTMLElement>) => {
     const trigger = event.currentTarget;
 
@@ -32,13 +30,14 @@ export function useDrip() {
       {
         key: nextKey.current,
         style: dripStyle,
+        "data-visible": true,
       },
     ]);
     nextKey.current++;
 
-    dripTimer.current = setTimeout(() => {
+    setTimeout(() => {
       setDrips((prev) => prev.slice(1));
-    }, 340);
+    }, 400);
   };
 
   return {

packages/core/theme/src/animations/index.ts

@@ -1,6 +1,6 @@
 export const animations = {
   animation: {
-    "drip-expand": "drip-expand 350ms linear",
+    "drip-expand": "drip-expand 420ms linear",
     "spinner-ease-spin": "spinner-spin 0.8s ease infinite",
     "spinner-linear-spin": "spinner-spin 0.8s linear infinite",
     "appearance-in": "appearance-in 250ms ease-out normal both",
@@ -17,7 +17,7 @@ export const animations = {
     },
     "drip-expand": {
       "0%": {
-        opacity: "0.4",
+        opacity: "0.2",
         transform: "scale(0)",
       },
       "100%": {

packages/core/theme/src/components/drip.ts

@@ -9,7 +9,17 @@ import {tv} from "tailwind-variants";
  * <span ref={dripRef} className={styles())} />
  */
 const drip = tv({
-  base: ["absolute", "will-change-transform", "bg-current", "rounded-full", "animate-drip-expand"],
+  base: [
+    "hidden",
+    "absolute",
+    "opacity-0",
+    "will-change-transform",
+    "bg-current",
+    "rounded-full",
+    "animate-drip-expand",
+    "data-[visible='true']:block",
+    "data-[visible='true']:opacity-20",
+  ],
 });
 
 export {drip};