fix(ripple): resolve misalignment in RTL layouts by using transform (#5891)

* fix(ripple): resolve misalignment in RTL layouts by using transform translate

* chore(ripple): add changeset for ripple RTL layout fix

* chore: add issue number

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

.changeset/odd-jobs-vanish.md

@@ -0,0 +1,5 @@
+---
+"@heroui/ripple": patch
+---
+
+fix resolve misalignment in RTL layouts by using transform translate (#5858)

packages/components/ripple/src/ripple.tsx

@@ -28,10 +28,16 @@ const Ripple: FC<RippleProps> = (props) => {
           <LazyMotion key={ripple.key} features={domAnimation}>
             <AnimatePresence mode="popLayout">
               <m.span
-                animate={{transform: "scale(2)", opacity: 0}}
+                animate={{
+                  transform: `translate(${ripple.x}px, ${ripple.y}px) scale(2)`,
+                  opacity: 0,
+                }}
                 className="heroui-ripple"
                 exit={{opacity: 0}}
-                initial={{transform: "scale(0)", opacity: 0.35}}
+                initial={{
+                  transform: `translate(${ripple.x}px, ${ripple.y}px) scale(0)`,
+                  opacity: 0.35,
+                }}
                 style={{
                   position: "absolute",
                   backgroundColor: color,
@@ -41,8 +47,6 @@ const Ripple: FC<RippleProps> = (props) => {
                   overflow: "hidden",
                   inset: 0,
                   zIndex: 0,
-                  top: ripple.y,
-                  left: ripple.x,
                   width: `${ripple.size}px`,
                   height: `${ripple.size}px`,
                   ...style,