Merge pull request #13632 from ethereum/tw-use-rtl-flip

feat: adds twFlipForRtl cn export to useRtlFlip

Author: wackerow

src/hooks/useRtlFlip.ts

@@ -5,21 +5,24 @@ import type { Lang } from "@/lib/types"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
 type UseDirection = {
-  flipForRtl: "scaleX(-1)" | undefined
+  /** @deprecated */
+  flipForRtl: "scaleX(-1)" | undefined // transform (deprecated)
+  twFlipForRtl: "-scale-x-1" | "" // className
   isRtl: boolean
   direction: "ltr" | "rtl"
 }
 
 /**
  * Custom hook that determines the direction and transformation for right-to-left (RTL) languages.
  * @example const { flipForRtl } = useRtlFlip(); transform={flipForRtl}
- * @returns An object containing the CSS transformation, RTL flag, and direction.
+ * @returns An object containing the Tailwind className, RTL flag, and direction.
  */
 export const useRtlFlip = (): UseDirection => {
   const { locale } = useRouter()
   const isRtl = isLangRightToLeft(locale as Lang)
   return {
-    flipForRtl: isRtl ? "scaleX(-1)" : undefined,
+    flipForRtl: isRtl ? "scaleX(-1)" : undefined, // transform (deprecated)
+    twFlipForRtl: isRtl ? "-scale-x-1" : "", // className (preferred)
     isRtl,
     direction: isRtl ? "rtl" : "ltr",
   }