From eb920b2b788ae5f574569bba9d2dc9a9c91cf194 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Wed, 22 May 2024 17:26:43 +0200
Subject: [PATCH] fix(carousel): use direction provider

---
 apps/www/registry/default/ui/carousel.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/www/registry/default/ui/carousel.tsx b/apps/www/registry/default/ui/carousel.tsx
index 2d43136ab6..b82de47f60 100644
--- a/apps/www/registry/default/ui/carousel.tsx
+++ b/apps/www/registry/default/ui/carousel.tsx
@@ -4,6 +4,7 @@ import * as React from "react"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
+import { useDirection } from "@radix-ui/react-direction"
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
@@ -59,11 +60,12 @@ const Carousel = React.forwardRef<
     },
     ref
   ) => {
+    const dir = useDirection()
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
-        direction: (document.dir as "ltr" | "rtl") ?? "ltr",
+        direction: dir,
       },
       plugins
     )
@@ -134,7 +136,7 @@ const Carousel = React.forwardRef<
           scrollNext,
           canScrollPrev,
           canScrollNext,
-          direction: (document.dir as "ltr" | "rtl") ?? "ltr",
+          direction: dir,
         }}
       >
         <div